:root{
    --bg:#0a0a0d;
    --bg-2:#101015;
    --surface:#141419;
    --surface-2:#1a1a21;
    --border:rgba(255,255,255,.08);
    --border-2:rgba(255,255,255,.14);
    --fg:#f4f4f6;
    --muted:#8b8b96;
    --muted-2:#5e5e68;
    --champ:#f5c97a;
    --rose:#e8a4b4;
    --accent:linear-gradient(120deg,#f5c97a 0%,#e8a4b4 100%);
    --ring:#f5c97a;
  }
  *{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font-family:'Manrope',system-ui,sans-serif;
    font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  .font-display{ font-family:'Unbounded','Manrope',sans-serif; letter-spacing:-.02em; }
  .text-muted{ color:var(--muted); }
  a{ color:inherit; text-decoration:none; }

  /* Aurora background */
  .aurora{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; background:var(--bg); }
  .aurora i{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; will-change:transform; }
  .a1{ width:50vw; height:50vw; left:-10vw; top:-10vw; background:radial-gradient(circle,#f5c97a,transparent 65%); opacity:.30; }
  .a2{ width:45vw; height:45vw; right:-12vw; top:5vw; background:radial-gradient(circle,#e8a4b4,transparent 65%); opacity:.28; }
  .a3{ width:55vw; height:55vw; left:30vw; bottom:-20vw; background:radial-gradient(circle,#9a6cf0,transparent 65%); opacity:.18; }
  @keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(4vw,3vw) scale(1.08) } }
  @keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-3vw,4vw) scale(1.1) } }
  .a1{ animation:drift1 16s ease-in-out infinite; }
  .a2{ animation:drift2 19s ease-in-out infinite; }
  .grid-fade{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask:radial-gradient(80% 60% at 50% 0%,#000,transparent 75%);
    mask:radial-gradient(80% 60% at 50% 0%,#000,transparent 75%);
  }

  /* Tokens helpers */
  .grad-text{ background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .surface{ background:var(--surface); border:1px solid var(--border); }
  .glass{ background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); border:1px solid var(--border); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .hairline{ border:1px solid var(--border); }

  /* Buttons */
  .btn-primary{
    background:var(--accent); color:#1a1206; font-weight:700;
    box-shadow:0 12px 34px -12px rgba(245,201,122,.6), inset 0 1px 0 rgba(255,255,255,.45);
    transition:transform .2s ease, box-shadow .3s ease, filter .2s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 20px 44px -14px rgba(232,164,180,.6), inset 0 1px 0 rgba(255,255,255,.55); }
  .btn-primary:active{ transform:translateY(0); }
  .btn-ghost{ border:1px solid var(--border-2); color:var(--fg); transition:.25s; }
  .btn-ghost:hover{ border-color:rgba(245,201,122,.5); background:rgba(245,201,122,.06); }

  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--ring); outline-offset:3px; border-radius:10px;
  }

  /* Reveal */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); }
  .reveal.in{ opacity:1; transform:none; }

  /* Float */
  @keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
  .floaty{ animation:floaty 7s ease-in-out infinite; }

  /* Accordion */
  .acc-body{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.22,1,.36,1); }
  .acc-open .acc-body{ max-height:600px; }
  .acc-open .acc-icon{ transform:rotate(45deg); }
  .acc-icon{ transition:transform .3s ease; }

  /* Field */
  .field{ background:rgba(255,255,255,.03); border:1px solid var(--border-2); transition:.2s; color:var(--fg); }
  .field:focus{ border-color:var(--champ); background:rgba(255,255,255,.05); outline:none; }
  .field::placeholder{ color:var(--muted-2); }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
  input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

  /* Mobile sticky CTA */
  .mobile-cta{ transform:translateY(140%); transition:transform .4s cubic-bezier(.22,1,.36,1); }
  .mobile-cta.show{ transform:translateY(0); }

  /* Marquee */
  .marquee{ display:flex; gap:3rem; width:max-content; animation:scrollX 30s linear infinite; }
  @keyframes scrollX{ to{ transform:translateX(-50%) } }

  .wrap{ max-width:1200px; margin:0 auto; padding:0 22px; }
  .eyebrow{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--champ); font-weight:600; }

  /* Snake light border (traveling glow around card edges) */
  @property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
  .snake{ position:relative; isolation:isolate; }
  .snake::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
    background:conic-gradient(from var(--ang), #f5c97a 0%, #e8a4b4 14%, transparent 28%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:snake 8s linear infinite;
    animation-delay:var(--sd,0s);
    pointer-events:none; z-index:1;
    filter:drop-shadow(0 0 4px rgba(245,201,122,.25));
  }
  @keyframes snake{ to{ --ang:360deg } }

  .step-arrow{ width:24px; color:var(--champ); opacity:.4; }
  .step-arrow svg{ width:20px; height:20px; }
  h1,h2{ text-wrap:balance; }

  /* Benefit card polish */
  .benefit{ position:relative; overflow:hidden; transition:transform .3s ease, border-color .3s ease; }
  .benefit::before{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(245,201,122,.55),transparent);
    opacity:.55; pointer-events:none;
  }
  .benefit::after{
    content:""; position:absolute; right:-35%; top:-35%; width:65%; height:65%; border-radius:50%;
    background:radial-gradient(closest-side,rgba(245,201,122,.22),transparent 70%);
    pointer-events:none; opacity:.5; transition:opacity .4s ease, transform .6s ease;
  }
  .benefit:hover{ transform:translateY(-5px); border-color:rgba(245,201,122,.4); }
  .benefit:hover::after{ opacity:1; transform:scale(1.2); }
  .benefit .ico{ position:relative; transition:transform .3s ease; }
  .benefit .ico::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    box-shadow:0 0 22px rgba(245,201,122,.35); opacity:0; transition:opacity .4s ease;
  }
  .benefit:hover .ico{ transform:scale(1.06); }
  .benefit:hover .ico::after{ opacity:1; }

  /* Big ghost index numbers on benefit cards */
  .num-wm{ position:absolute; right:14px; top:8px; font-family:'Unbounded',sans-serif; font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.1px rgba(245,201,122,.18); pointer-events:none; z-index:0; }
  .num-wm-lg{ font-size:5rem; right:18px; top:10px; -webkit-text-stroke:1.3px rgba(245,201,122,.22); }
  .benefit p.text-sm{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.9em; }
  .benefit-sm{ position:relative; }
  .benefit-sm .card-head{ display:flex; align-items:center; gap:.65rem; }
  .benefit-sm .card-head .ico{ flex-shrink:0; width:2.5rem; height:2.5rem; }
  .benefit-sm .card-head h3{ min-height:auto; flex:1; font-size:17px; }
  .benefit-sm .num-wm{ top:auto; right:14px; bottom:8px; }
  .spark-inline{ display:block; width:100%; }
  .featured-art{ position:absolute; right:2%; top:50%; transform:translateY(-50%); width:52%; max-width:320px; height:90%; pointer-events:none; z-index:0; }

  /* Mobile benefits: drop the bottom spark art, narrow + compact cards */
  @media (max-width:639px){
    #benefits .grid{ max-width:20rem; margin-left:auto; margin-right:auto; grid-auto-rows:auto; }
    #benefits .benefit{ min-height:0; }
    .spark-inline{ display:none; }
  }

  /* Prose for content pages */
  .prose-sec{ max-width:760px; }
  .prose-sec h2{ font-family:'Unbounded','Manrope',sans-serif; font-weight:700; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.1; margin:2.4rem 0 1rem; letter-spacing:-.02em; }
  .prose-sec h3{ font-family:'Manrope',sans-serif; font-weight:700; font-size:1.25rem; margin:1.8rem 0 .7rem; }
  .prose-sec p{ color:var(--muted); font-size:1.06rem; line-height:1.75; margin:0 0 1.1rem; }
  .prose-sec p.lead{ color:var(--fg); font-size:1.18rem; line-height:1.7; }
  .prose-sec ul{ color:var(--muted); font-size:1.04rem; line-height:1.7; margin:0 0 1.3rem; padding-left:1.2rem; }
  .prose-sec ul li{ margin-bottom:.5rem; list-style:none; position:relative; padding-left:1.4rem; }
  .prose-sec ul li::before{ content:""; position:absolute; left:0; top:.6rem; width:7px; height:7px; border-radius:2px; background:var(--accent); }
  .prose-sec strong{ color:var(--fg); font-weight:600; }
  .prose-sec .faq-q{ font-family:'Manrope',sans-serif; font-weight:700; font-size:1.2rem; color:var(--fg); margin:2rem 0 .6rem; }

  .breadcrumb{ font-size:13px; color:var(--muted-2); }
  .breadcrumb a:hover{ color:var(--champ); }

  /* Lang switcher */
  .lang-switch{ display:inline-flex; align-items:center; gap:.4rem; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--muted); padding:.4rem .6rem; border-radius:10px; border:1px solid var(--border); transition:.25s; text-decoration:none; }
  .lang-switch:hover{ color:var(--fg); border-color:rgba(245,201,122,.5); background:rgba(245,201,122,.06); }
  .lang-switch .cur{ color:var(--champ); }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    .reveal{ opacity:1 !important; transform:none !important; }
    html{ scroll-behavior:auto; }
  }