:root{
    --bg: #070A12;
    --card: rgba(255,255,255,.06);
    --card2: rgba(255,255,255,.08);
    --stroke: rgba(255,255,255,.10);
    --stroke2: rgba(255,255,255,.14);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.65);
    --muted2: rgba(255,255,255,.50);
    --shadow: 0 18px 55px rgba(0,0,0,.55);
    --shadow2: 0 10px 40px rgba(0,0,0,.45);
  
    --brand1: #7C5CFF;
    --brand2: #35D7FF;
    --good: #2EE59D;
    --warn: #FFCC66;
  
    --r12: 12px;
    --r16: 16px;
    --r20: 20px;
    --r24: 24px;
  
    --container: 1120px;
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
    overflow-x:hidden;
  }
  
  a{ color:inherit; text-decoration:none; }
  button,input,select,textarea{ font:inherit; color:inherit; }
  strong{ font-weight: 700; }
  
  .container{
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
  }
  
  .bg{
    position:fixed; inset:0;
    pointer-events:none;
    z-index:-1;
  }
  .bg__grid{
    position:absolute; inset:-2px;
    background:
      radial-gradient(circle at 10% 10%, rgba(124,92,255,.15), transparent 45%),
      radial-gradient(circle at 90% 20%, rgba(53,215,255,.12), transparent 48%),
      radial-gradient(circle at 45% 90%, rgba(46,229,157,.10), transparent 55%),
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:
      auto, auto, auto,
      54px 54px,
      54px 54px;
    background-position:
      center, center, center,
      0 0,
      0 0;
    filter: blur(.0px);
    opacity: .35;
  }
  .bg__glow{
    position:absolute; inset:-20%;
    background:
      radial-gradient(circle at 50% 0%, rgba(124,92,255,.18), transparent 45%),
      radial-gradient(circle at 0% 50%, rgba(53,215,255,.12), transparent 45%),
      radial-gradient(circle at 100% 70%, rgba(46,229,157,.10), transparent 40%);
    filter: blur(50px);
    opacity:.7;
  }
  
  /* Topbar */
  .topbar{
    position:sticky; top:0;
    z-index:50;
    background: rgba(7,10,18,.52);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .topbar__inner{
    height: 74px;
    display:flex;
    align-items:center;
    gap: 16px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }
  .brand__mark{
    width: 34px; height: 34px;
    border-radius: 10px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(53,215,255,.85));
    box-shadow: 0 10px 26px rgba(124,92,255,.22);
    font-weight: 800;
  }
  .brand__text{ font-weight: 700; letter-spacing:-.02em; }
  .brand__badge{
    font-size: 12px;
    color: rgba(255,255,255,.84);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
  }
  
  .nav{ margin-left:auto; display:flex; gap: 18px; }
  .nav__link{
    color: var(--muted);
    padding: 10px 10px;
    border-radius: 10px;
    transition: .2s ease;
  }
  .nav__link:hover{ color: var(--text); background: rgba(255,255,255,.05); }
  
  .topbar__cta{ display:flex; gap: 10px; align-items:center; }
  .pill{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.88);
    transition: .2s ease;
  }
  .pill:hover{ background: rgba(255,255,255,.06); }
  .pill__dot{
    width: 10px; height: 10px; border-radius: 999px;
    background: var(--good);
    box-shadow: 0 0 0 4px rgba(46,229,157,.15);
  }
  
  .hamburger{
    display:none;
    margin-left:auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
  }
  .hamburger span{
    display:block;
    width: 18px;
    height: 2px;
    background: rgba(255,255,255,.85);
    margin: 5px auto;
    border-radius: 4px;
  }
  
  .mobileNav{
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 12px 20px 18px;
    background: rgba(7,10,18,.72);
    backdrop-filter: blur(10px);
  }
  .mobileNav__link{
    display:block;
    padding: 12px 12px;
    border-radius: 12px;
    color: rgba(255,255,255,.85);
    border: 1px solid transparent;
  }
  .mobileNav__link:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
  .mobileNav__btn{ width:100%; margin-top: 10px; }
  
  /* Buttons */
  .btn{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.90);
    padding: 10px 14px;
    border-radius: 14px;
    cursor:pointer;
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
    display:inline-flex; align-items:center; gap:10px;
    justify-content:center;
  }
  .btn:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
  .btn:active{ transform: translateY(1px); }
  .btn--primary{
    border-color: rgba(124,92,255,.55);
    background: linear-gradient(135deg, rgba(124,92,255,.92), rgba(53,215,255,.80));
    box-shadow: 0 12px 32px rgba(124,92,255,.22);
    color: #FFFFFF;
    font-weight: 700;
  }
  .btn--primary:hover{ filter: brightness(1.02); }
  .btn--ghost{ background: rgba(255,255,255,.02); }
  .btn--lg{ padding: 13px 16px; border-radius: 16px; }
  .btn--full{ width:100%; }
  .btn__arrow{ opacity:.9; }
  
  /* Hero */
  .hero{
    padding: 58px 0 34px;
  }
  .hero__grid{
    display:grid;
    grid-template-columns: 1.25fr .95fr;
    gap: 26px;
    align-items:start;
  }
  .kicker{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.85);
  }
  .kicker__icon{
    width: 26px; height: 26px;
    display:grid; place-items:center;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
  }
  .hero__title{
    margin: 16px 0 10px;
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .u-grad{
    background: linear-gradient(135deg, rgba(124,92,255,1), rgba(53,215,255,1));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero__sub{
    margin: 0 0 18px;
    color: rgba(255,255,255,.76);
    max-width: 56ch;
    font-size: 16px;
  }
  .hero__actions{
    display:flex;
    gap: 12px;
    flex-wrap:wrap;
    margin-bottom: 18px;
  }
  
  .trust{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 520px;
  }
  .trust__item{
    display:flex; gap: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }
  .trust__icon{
    width: 34px; height: 34px;
    border-radius: 12px;
    display:grid; place-items:center;
    background: rgba(46,229,157,.14);
    border: 1px solid rgba(46,229,157,.24);
    color: rgba(255,255,255,.92);
    font-weight: 800;
  }
  .trust__title{ font-weight: 700; letter-spacing:-.01em; }
  .trust__meta{ color: rgba(255,255,255,.68); font-size: 13px; margin-top: 2px; }
  
  .card{
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    box-shadow: var(--shadow2);
  }
  .card--glow{
    position:relative;
    overflow:hidden;
  }
  .card--glow:before{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(circle at 30% 0%, rgba(124,92,255,.22), transparent 55%),
                radial-gradient(circle at 80% 30%, rgba(53,215,255,.16), transparent 55%);
    pointer-events:none;
  }
  .card__header{ padding: 18px 18px 8px; position:relative; }
  .card__title{ margin:0; font-size: 18px; letter-spacing:-.02em; }
  .card__subtitle{ margin: 6px 0 0; color: rgba(255,255,255,.70); font-size: 14px; }
  
  form{ padding: 12px 18px 18px; position:relative; }
  .fieldRow{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .field{ margin-bottom: 12px; }
  label{
    display:block;
    font-size: 13px;
    color: rgba(255,255,255,.78);
    margin-bottom: 6px;
  }
  input, select, textarea{
    width:100%;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,12,22,.55);
    outline:none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  textarea{ resize: vertical; min-height: 92px; }
  input:focus, select:focus, textarea:focus{
    border-color: rgba(124,92,255,.60);
    box-shadow: 0 0 0 4px rgba(124,92,255,.15);
  }
  .field__hint{
    min-height: 16px;
    font-size: 12px;
    color: rgba(255,126,126,.92);
    margin-top: 6px;
  }
  
  .check{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    margin: 8px 0 8px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    user-select:none;
  }
  .check input{
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--brand1);
  }
  .muted{ color: var(--muted); }
  .fineprint{
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255,255,255,.60);
    text-align:center;
  }
  .link{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
  
  .miniStats{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
  }
  .miniStats__item{
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }
  .miniStats__num{
    font-weight: 800;
    letter-spacing:-.02em;
  }
  .miniStats__label{
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.68);
  }
  
  /* Sections */
  .section{
    padding: 52px 0;
  }
  .section--alt{
    background: rgba(255,255,255,.02);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .sectionHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 18px;
    margin-bottom: 18px;
  }
  .sectionHead h2{
    margin:0;
    font-size: 26px;
    letter-spacing:-.02em;
  }
  .sectionHead p{
    margin:0;
    color: rgba(255,255,255,.70);
    max-width: 52ch;
  }
  
  .steps{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .step{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    padding: 16px 16px;
  }
  .step__num{
    width: 34px; height: 34px;
    border-radius: 14px;
    display:grid; place-items:center;
    background: rgba(124,92,255,.14);
    border: 1px solid rgba(124,92,255,.22);
    font-weight: 800;
    margin-bottom: 10px;
  }
  
  .cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .svc{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    padding: 16px 16px;
    transition: transform .12s ease, border-color .2s ease;
  }
  .svc:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.16);
  }
  .svc__icon{
    width: 40px; height: 40px;
    border-radius: 16px;
    display:grid; place-items:center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    margin-bottom: 10px;
    font-size: 18px;
  }
  .svc h3{ margin:0 0 6px; letter-spacing:-.01em; }
  .svc p{ margin:0; color: rgba(255,255,255,.68); }
  
  .ctaBand{
    margin-top: 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(124,92,255,.14), rgba(53,215,255,.10));
    padding: 16px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  
  /* Reviews */
  .reviews{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .review{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    padding: 16px 16px;
    margin:0;
  }
  .review__stars{
    color: rgba(255,255,255,.90);
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .review blockquote{
    margin:0 0 10px;
    color: rgba(255,255,255,.78);
  }
  .review figcaption{
    color: rgba(255,255,255,.62);
    font-size: 13px;
  }
  
  /* FAQ */
  .faq{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .faq__item{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    padding: 12px 14px;
  }
  .faq__item summary{
    cursor:pointer;
    font-weight: 650;
    letter-spacing:-.01em;
  }
  .faq__content{
    margin-top: 10px;
    color: rgba(255,255,255,.70);
  }
  
  .footerCard{
    margin-top: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    padding: 18px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  
  /* Modal */
  .modal{ position:fixed; inset:0; z-index:60; display:none; }
  .modal.isOpen{ display:block; }
  .modal__backdrop{
    position:absolute; inset:0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
  }
  .modal__panel{
    position:relative;
    width: min(520px, calc(100% - 26px));
    margin: 90px auto 20px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,14,26,.88);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .modal__head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 16px 0;
  }
  .modal__sub{
    margin: 6px 16px 12px;
    color: rgba(255,255,255,.72);
  }
  .modalForm{ padding: 0 16px 16px; }
  .modal__fine{
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 12px 16px;
  }
  .iconBtn{
    width: 42px; height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    cursor:pointer;
  }
  
  /* Sticky CTA */
  .stickyCta{
    position:fixed;
    left: 0; right: 0; bottom: 0;
    padding: 12px 14px;
    background: rgba(7,10,18,.62);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.08);
    z-index:55;
    display:none;
  }
  
  /* Toast */
  .toast{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 90px;
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10,14,26,.80);
    box-shadow: var(--shadow2);
    z-index: 70;
  }
  .toast__dot{
    width: 10px; height:10px; border-radius: 999px;
    background: var(--good);
    box-shadow: 0 0 0 4px rgba(46,229,157,.12);
  }
  .toast__text{ color: rgba(255,255,255,.88); font-size: 13px; }
  
  /* Responsive */
  @media (max-width: 980px){
    .hero__grid{ grid-template-columns: 1fr; }
    .nav, .topbar__cta{ display:none; }
    .hamburger{ display:block; }
    .steps{ grid-template-columns: 1fr; }
    .cards{ grid-template-columns: 1fr; }
    .reviews{ grid-template-columns: 1fr; }
    .sectionHead{ flex-direction:column; align-items:flex-start; }
    .footerCard{ flex-direction:column; align-items:flex-start; }
    .stickyCta{ display:block; }
  }
  
/* Success state: dark button, green confirmation */
.btn--sent {
  background: #070A12 !important; /* true dark / black */
  border-color: rgba(46, 229, 157, 0.8) !important;
  box-shadow: 0 0 0 1px rgba(46, 229, 157, 0.25),
              0 10px 30px rgba(46, 229, 157, 0.25) !important;
  cursor: default;
}

/* Green text + tick */
.btn--sent-text {
  color: rgba(46, 229, 157, 1) !important;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Button success animation ---------- */

/* Sent state animation */
.btn--sent .btn--sent-text {
  animation: sentIn 420ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes sentIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Subtle success glow pulse */
.btn--sent {
  animation: successPulse 900ms ease-out;
}

@keyframes successPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46,229,157,.0);
  }
  40% {
    box-shadow: 0 0 0 6px rgba(46,229,157,.12),
                0 10px 30px rgba(46,229,157,.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46,229,157,.0),
                0 10px 30px rgba(46,229,157,.25);
  }
}

/* Arrow re-entry animation */
.btn__arrow {
  display: inline-block;
  animation: arrowIn 280ms ease-out;
}

@keyframes arrowIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 0.9;
    transform: translateX(0);
  }
}