/* =====================================================================
   ALL IN BANGKOK — styles.css
   ---------------------------------------------------------------------
   SECTION INDEX — search the banner text (e.g. "Top Nav") to jump.

     Design tokens ............. :root{
     Mobile safety net ......... MOBILE OVERFLOW SAFETY NET
     Top Nav ................... Top Nav
     Section base .............. Section base
     Hero ...................... Hero (single-column, dark mode)
     We Care / Why us .......... WE CARE — 3 pillars
     Rate Cards ................ search ".rates"
     3B Service ................ 3B Service hero
     BUILD / BOOST / BLAST ..... Big alternating feature blocks
         BOOST phone visual .... BOOST visual
         BLAST tech visual ..... BLAST visual
     ALL IN SIGHT dashboard .... ALL IN SIGHT — aurora
     Roadmap ................... search ".roadmap"
     Contact form .............. Rich Contact Section
     Floating side CTA ......... Floating Side CTA
     Scroll reveal ............. Scroll Reveal Animations

   HTML structure is in index.html · JS behavior is in app.js
   ===================================================================== */
  :root{
    /* Primary 70/30 */
    --orange:#FF560B;
    --red:#B80201;
    --orange-soft:#FF7A3A;
    --amber:#FFB341;
    /* Secondary 70/30 */
    --navy:#0A2540;
    --cyan:#00D4FF;
    --cyan-deep:#0098B8;
    --navy-2:#0E2E4F;
    /* Background 70/30 */
    --white:#FFFFFF;
    --soft:#F4F6F8;
    --text:#0A2540;
    --muted:#5B6B7D;
    --line:rgba(10,37,64,.12);
    --line-dark:rgba(255,255,255,.14);
    --nav-h:48px;
    --container:1180px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#fff;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  html{scroll-behavior:smooth;overflow-x:hidden}
  body{font-family:"Inter","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.47059;letter-spacing:-.022em;font-weight:400;overflow-x:hidden;max-width:100vw}
  body.lang-th{font-family:"Noto Sans Thai","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;letter-spacing:0}
  img{max-width:100%;display:block;height:auto}

  /* ===== MOBILE OVERFLOW SAFETY NET =====
     Defensive defaults so nothing escapes the viewport on any phone (down to 320px).
     Specific component-level mobile breakpoints still override where they exist. */
  p, h1, h2, h3, h4, h5, h6, li, span, a, label, td{overflow-wrap:anywhere;word-break:normal}
  pre, code{white-space:pre-wrap;overflow-x:auto;max-width:100%}
  table{max-width:100%;display:block;overflow-x:auto}
  iframe, video, embed, object{max-width:100%;height:auto}
  @media (max-width:520px){
    .rate-form button[type="submit"]{min-width:0;width:100%;padding:0 20px}
    .hero-pill{max-width:100%;flex-wrap:wrap}
  }
  @media (max-width:380px){
    .container{padding-left:14px;padding-right:14px}
    .nav-inner{padding-left:12px;padding-right:12px}
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent}

  /* ===== Top Nav ===== */
  .nav{position:sticky;top:0;z-index:100;height:var(--nav-h);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);background:rgba(255,255,255,.82);border-bottom:1px solid var(--line)}
  .nav-inner{max-width:var(--container);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:12px;color:var(--text)}
  .nav-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;white-space:nowrap;height:30px;font-size:14px;line-height:1}
  body.lang-th .nav-brand{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:.02em}
  .nav-brand .mark{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .nav-brand .mark img{width:auto;height:100%;object-fit:contain;display:block}
  .nav-links{display:flex;gap:22px}
  .nav-links a{opacity:.84;transition:opacity .2s ease, color .2s ease}
  .nav-links a:hover{opacity:1}
  .nav-links a.nav-active{opacity:1;color:var(--orange);font-weight:700}
  .nav-links a.nav-link-logo{
    display:inline-flex;align-items:center;
    height:30px;padding:0 12px;
    background:var(--navy);
    border-radius:999px;
    box-shadow:0 0 0 1px rgba(0,212,255,.18), 0 6px 14px rgba(10,37,64,.18);
    opacity:1;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  }
  .nav-links a.nav-link-logo img{height:18px;width:auto;display:block;object-fit:contain}
  .nav-links a.nav-link-logo:hover{
    transform:translateY(-1px);
    background:#0d2d52;
    box-shadow:0 0 0 1px rgba(0,212,255,.55), 0 10px 22px rgba(0,212,255,.25);
  }
  .nav-links a.nav-link-logo.nav-active{
    background:linear-gradient(135deg,#0a2540 0%,#0e4870 100%);
    box-shadow:0 0 0 1.5px var(--cyan), 0 6px 18px rgba(0,212,255,.35);
  }
  .nav-right{display:flex;align-items:center;gap:14px}
  .lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:11px;font-weight:600;letter-spacing:.04em}
  .lang-toggle button{padding:5px 10px;color:var(--muted)}
  .lang-toggle button.is-active{background:var(--navy);color:#fff}

  /* Mobile menu toggle */
  .nav-burger{display:none;width:38px;height:38px;border-radius:10px;background:transparent;border:1px solid var(--line);position:relative;cursor:pointer;flex-shrink:0}
  .nav-burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease), top .25s var(--ease), opacity .2s}
  .nav-burger span:nth-child(1){top:12px}
  .nav-burger span:nth-child(2){top:18px}
  .nav-burger span:nth-child(3){top:24px}
  .nav-burger.is-open span:nth-child(1){top:18px;transform:rotate(45deg)}
  .nav-burger.is-open span:nth-child(2){opacity:0}
  .nav-burger.is-open span:nth-child(3){top:18px;transform:rotate(-45deg)}

  @media (max-width:980px){
    .nav-burger{display:block}
    .nav-links{position:fixed;top:60px;left:0;right:0;flex-direction:column;gap:0;background:rgba(246,244,239,.96);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);padding:8px 22px 20px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease), transform .25s var(--ease);max-height:calc(100vh - 60px);overflow-y:auto;display:flex}
    .nav-links.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
    .nav-links a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;opacity:1}
    .nav-links a.nav-link-logo{height:auto;padding:10px 14px;margin:6px 0;border-bottom:0}
    .nav-links a.nav-link-logo img{height:24px}
    .nav-links a:last-child{border-bottom:0}
  }

  /* ===== Section base ===== */
  section{position:relative;overflow:hidden}
  .container{max-width:var(--container);margin:0 auto;padding:0 22px}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
  .stage-eyebrow{font-family:"Inter","Arial Black",sans-serif;font-size:clamp(30px,3.8vw,52px);font-weight:900;letter-spacing:-.01em;text-transform:uppercase;line-height:1;margin-bottom:28px !important;display:inline-block;padding:0}
  .feat.build-bg .stage-eyebrow{background:linear-gradient(135deg,var(--orange) 0%,var(--red) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .feat.boost-bg .stage-eyebrow{background:linear-gradient(135deg,#FFB341 0%,var(--orange) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .feat.blast-bg .stage-eyebrow{background:linear-gradient(135deg,#69E2FF 0%,var(--cyan) 50%,#0098B8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .h1, .h2, .h3{font-weight:900;letter-spacing:-.035em;line-height:1.04;margin:0;font-family:"Inter","Arial Black",sans-serif}
  .h1{font-size:clamp(48px,8vw,104px)}
  .h2{font-size:clamp(36px,5.6vw,72px)}
  .sec-head .h2{padding-bottom:.16em} /* room so gradient clip-text descenders (g,y,p) aren't cut off by the short background box */
  .h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.022em;line-height:1.15}
  .lead{font-size:clamp(18px,1.55vw,22px);line-height:1.46;color:var(--muted);max-width:62ch}
  body.lang-th .h1, body.lang-th .h2, body.lang-th .h3{letter-spacing:0;line-height:1.18}
  body.lang-th .h1{line-height:1.1}

  .cta-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:24px}
  .btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:600;transition:all .2s var(--ease)}
  .btn-primary{background:var(--orange-cta);color:#fff}
  .btn-primary:hover{background:var(--red);transform:translateY(-1px)}
  .btn-ghost{border:1px solid var(--line);background:transparent;color:var(--text)}
  .btn-ghost:hover{border-color:var(--navy);background:var(--navy);color:#fff}
  .btn-link{color:var(--orange);padding:0;height:auto;font-weight:600}
  .btn-link:after{content:"›";margin-left:4px;font-weight:400;transition:transform .2s var(--ease)}
  .btn-link:hover:after{transform:translateX(3px)}
  .dark .btn-link, .navy .btn-link{color:var(--cyan)}

  .navy{background:var(--navy);color:#fff}
  .navy .lead{color:#9fb2c8}
  .navy .eyebrow{color:var(--cyan)}
  .dark{background:#000;color:#f5f5f7}
  .dark .lead{color:#a1a1a6}
  .dark .eyebrow{color:var(--cyan)}

  .sec{padding:120px 0}
  .sec-head{max-width:880px;margin:0 auto 56px;text-align:center}
  .sec-head .eyebrow{margin-bottom:14px}
  .sec-head .lead{margin:20px auto 0}

  /* ===== Hero (split layout) ===== */
  .hero{padding:88px 0 100px;background:#fff;position:relative;overflow:visible}
  .hero .container{max-width:1240px}
  .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
  @media (max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:50px}}

  /* Left column */
  .hero-pill{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(255,86,11,.05);font-size:13px;font-weight:700;color:var(--text);letter-spacing:.02em}
  .hero-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,86,11,.18);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,86,11,0)}}
  .hero-pill .pill-accent{color:var(--orange)}

  /* ===== Hero (single-column, dark mode) ===== */
  .hero{padding:120px 0 140px;background:linear-gradient(118deg,#0a0a0a 0%,#0b0b0b 50%,#9e2c08 69%,#FF560B 91%,#FF6A1F 100%);color:#fff;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 58% at 90% 14%, rgba(255,150,50,.42), transparent 62%);pointer-events:none}
  /* ponytail: big right-offset brand watermark — translate% is self-relative, so a constant ~42% slice sits off the right edge at every screen size (never full-bleed, no breakpoint jump) */
  .hero::after{content:"";position:absolute;top:50%;right:0;width:clamp(460px,80vw,860px);height:clamp(460px,80vw,860px);background:url('assets/all-in-logo.png') center/contain no-repeat;transform:translate(42%,-50%);opacity:.16;pointer-events:none;z-index:0;filter:brightness(0) invert(1)}
  .hero .container{position:relative;z-index:2}
  .hero-grid{display:block;max-width:1080px;margin:0 auto;text-align:left}
  .hero-left{max-width:none}
  .hero-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);font-size:14px;font-weight:600;color:#fff;backdrop-filter:blur(10px)}
  .hero-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,86,11,.30);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 10px rgba(255,86,11,0)}}
  .hero-pill .pill-accent{color:var(--cyan)}

  .hero-headline{font-family:"Inter","Arial Black",sans-serif;font-size:clamp(64px,9vw,140px);font-weight:900;letter-spacing:-.055em;line-height:.94;margin:32px 0 0;color:#fff}
  body.lang-th .hero-headline{font-size:clamp(52px,7.8vw,120px);letter-spacing:-.015em;line-height:1.04}
  @media (max-width:640px){
    .hero{padding:80px 0 100px}
    .hero-headline{font-size:clamp(40px,12vw,68px) !important;letter-spacing:-.04em;margin-top:24px}
    body.lang-th .hero-headline{font-size:clamp(34px,10vw,56px) !important;letter-spacing:-.01em;line-height:1.1}
    .hero-sub{font-size:16px !important;line-height:1.6 !important;margin-top:24px}
    .hero-cta{margin-top:32px;gap:10px}
    .hero-cta .btn-primary, .hero-cta .btn-ghost, .hero-cta .btn-call, .hero-cta .btn-line{height:48px;padding:0 18px;font-size:14px}
    .hero-pill{font-size:12px;padding:6px 14px}
    .hero::after{display:block;top:auto;bottom:3%;right:0;width:clamp(260px,72vw,460px);height:clamp(260px,72vw,460px);transform:translate(26%,0);opacity:.16}
    .container{padding:0 18px}
    .sec{padding:80px 0}
    .h2{font-size:clamp(30px,7vw,44px) !important}
    .lead{font-size:15px}
    .nav-inner{padding:0 16px}
    .nav-brand{font-size:13px;gap:8px;height:28px}
    .nav-brand .mark{width:28px;height:28px}
    .nav-burger{width:34px;height:34px}
    .nav-burger span{left:8px;right:8px}
    .lang-toggle button{padding:5px 8px;font-size:11px}
    .nav-right{gap:8px}
    .foot-grid{grid-template-columns:1fr !important;gap:32px}
    .foot-bottom{flex-direction:column;align-items:flex-start;text-align:left;gap:12px}
  }
  .hero-headline .g-orange{background:linear-gradient(96deg,var(--orange) 10%,#FFB341 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero-headline .g-cyan{background:linear-gradient(96deg,#69E2FF,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

  .hero-sub{margin:36px 0 0;max-width:760px;color:#c4c4c8;font-size:clamp(18px,1.55vw,24px);line-height:1.55;font-weight:400}
  body.lang-th .hero-sub{font-size:clamp(17px,1.4vw,22px);line-height:1.75}
  .hero-sub b{color:var(--orange-soft);font-weight:700;background:none;padding:0}
  .hero-sub b.cyan{color:var(--cyan);background:none}

  .hero-cta--top{margin-top:24px}
  .hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:44px}
  .hero-cta .btn-call{background:linear-gradient(160deg,var(--orange-cta) 0%,var(--red) 100%)}
  .hero-cta .btn-call:hover{background:linear-gradient(160deg,var(--red),#6b0100);transform:translateY(-2px)}
  .hero-cta .btn-line{background:#06C755;color:#fff;height:56px;padding:0 28px;font-size:16px;font-weight:700;border-radius:999px;box-shadow:0 16px 40px rgba(6,199,85,.40);white-space:nowrap;display:inline-flex;align-items:center;gap:10px;transition:transform .15s var(--ease), background .2s, box-shadow .2s}
  .hero-cta .btn-line:hover{background:#05a046;transform:translateY(-2px);box-shadow:0 20px 48px rgba(6,199,85,.55)}
  .hero-cta .btn-primary{height:56px;padding:0 32px;font-size:16px;font-weight:700;border-radius:999px;box-shadow:0 16px 40px rgba(255,86,11,.45);white-space:nowrap}
  .hero-cta .btn-ghost{height:56px;padding:0 28px;font-size:16px;font-weight:700;border-radius:999px;border-color:rgba(255,255,255,.30);color:#fff;white-space:nowrap}
  .hero-cta .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

  .hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:34px}
  .hero-cta .btn-primary{height:52px;padding:0 28px;font-size:16px;font-weight:700;border-radius:999px;box-shadow:0 12px 32px rgba(255,86,11,.32);white-space:nowrap}
  .hero-cta .btn-ghost{height:52px;padding:0 26px;font-size:16px;font-weight:700;border-radius:999px;border-color:rgba(10,37,64,.18);white-space:nowrap}

  .hero-stats{display:flex;gap:42px;margin-top:56px;flex-wrap:wrap}
  .hero-stats .s .n{font-family:"Inter","Arial Black",sans-serif;font-size:38px;font-weight:900;letter-spacing:-.03em;background:linear-gradient(180deg,var(--orange),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
  .hero-stats .s .l{font-size:13px;color:var(--muted);font-weight:500;margin-top:8px;letter-spacing:.02em}

  /* Right column — dashboard mock */
  .hero-right{position:relative}
  .hero-dash{background:linear-gradient(160deg,#0f1217 0%,#06080b 100%);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:22px;box-shadow:0 40px 100px rgba(10,37,64,.18), 0 20px 50px rgba(255,86,11,.10);position:relative}
  .hero-dash .d-top{display:flex;align-items:center;gap:7px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:22px}
  .hero-dash .d-top .dot{width:11px;height:11px;border-radius:50%}
  .hero-dash .d-top .r{background:#FF5F57}.hero-dash .d-top .y{background:#FEBC2E}.hero-dash .d-top .g{background:#28C840}
  .hero-dash .d-lbl{font-size:13px;color:#86868b;font-weight:600;letter-spacing:.02em}
  .hero-dash .d-roas{font-family:"Inter","Arial Black",sans-serif;font-size:clamp(48px,7vw,84px);font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1;margin-top:4px;display:flex;align-items:flex-start;gap:4px}
  .hero-dash .d-roas .x{font-size:.45em;color:var(--cyan);font-weight:800;margin-top:.12em}
  .hero-dash .d-delta{font-size:13px;color:var(--cyan);font-weight:700;margin-top:10px;letter-spacing:.02em}
  .hero-dash .d-delta .neut{color:#86868b;font-weight:500;margin-left:6px}

  .hero-dash .d-bars{display:flex;align-items:flex-end;gap:12px;height:160px;margin-top:28px}
  .hero-dash .d-bars div{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,rgba(0,212,255,.85),rgba(0,152,184,.65));position:relative}
  .hero-dash .d-bars div.hot{background:linear-gradient(180deg,#ff7a3a,var(--orange));box-shadow:0 0 32px rgba(255,86,11,.45)}

  .hero-dash .d-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
  .hero-dash .d-tile{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px}
  .hero-dash .d-tile .v{font-family:"Inter","Arial Black",sans-serif;font-size:20px;font-weight:900;color:#fff;letter-spacing:-.02em}
  .hero-dash .d-tile .k{font-size:11px;color:#86868b;font-weight:500;margin-top:4px}

  /* Floating badges */
  .hero-badge{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px;background:#0f1217;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 16px 40px rgba(10,37,64,.18);color:#fff;z-index:2}
  .hero-badge .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex-shrink:0}
  .hero-badge .ic.o{background:linear-gradient(150deg,var(--orange),var(--red))}
  .hero-badge .ic.c{background:linear-gradient(150deg,var(--cyan),#0098b8)}
  .hero-badge .t{font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1}
  .hero-badge .s{font-size:11px;color:#86868b;font-weight:500;margin-top:4px;line-height:1}
  .hero-badge.tr{top:-22px;right:-22px}
  .hero-badge.br{bottom:-22px;left:-12px}
  @media (max-width:1024px){.hero-badge.tr{right:8px;top:-18px}.hero-badge.br{left:8px;bottom:-18px}}
  @media (max-width:560px){.hero-badge{padding:10px 14px}.hero-badge .ic{width:30px;height:30px;font-size:14px}}

  /* ===== WE CARE — 3 pillars ===== */
  .care{background:#fff}
  .care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .care-card{
    background:var(--soft);border-radius:24px;padding:38px 30px;min-height:340px;
    display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
    transition:all .3s var(--ease);
  }
  .care-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(10,37,64,.10)}
  .care-card .num{font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.18em}
  .care-card h3{font-family:"Inter","Arial Black",sans-serif;font-size:28px;font-weight:900;letter-spacing:-.02em;margin:14px 0 14px;line-height:1.05;text-transform:uppercase;color:var(--orange)}
  .care-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
  .care-card .glyph{font-size:32px;color:var(--orange);width:54px;height:54px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(10,37,64,.08)}
  /* card 03 = Tech-First → cyan accent (deep cyan stays readable on the light card; bright --cyan would wash out) */
  .care-card:nth-child(3) h3,
  .care-card:nth-child(3) .num,
  .care-card:nth-child(3) .glyph{color:var(--cyan-deep)}
  @media (max-width:880px){.care-grid{grid-template-columns:1fr}}

  /* ===== 3B Service hero ===== */
  .threeb{background:linear-gradient(180deg,var(--soft) 0%,#fff 100%)}
  /* Shared pill-style eyebrow (used in threeb-head + sec-head) */
  .service-head-eyebrow{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:24px}
  .service-head-eyebrow::before,
  .service-head-eyebrow::after{content:"";flex:0 1 80px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,86,11,.6),transparent)}
  .service-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:"Inter","Arial Black",sans-serif;font-size:clamp(13px,1.1vw,16px);font-weight:800;letter-spacing:.28em;line-height:1;margin:0;text-transform:uppercase;padding:10px 22px;border:1px solid rgba(255,86,11,.28);border-radius:999px;background:rgba(255,86,11,.06);color:var(--orange);box-shadow:0 4px 16px rgba(255,86,11,.08)}
  .service-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,86,11,.18)}
  .contact-eyebrow{font-size:clamp(16px,1.4vw,20px);padding:12px 26px;margin-bottom:20px;letter-spacing:.24em}
  .contact-eyebrow::before{width:8px;height:8px;box-shadow:0 0 0 5px rgba(255,86,11,.18)}
  .contact-brand-row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
  .contact-brand-mark{width:48px;height:48px;display:grid;place-items:center;flex-shrink:0;filter:drop-shadow(0 4px 12px rgba(255,86,11,.25))}
  .contact-brand-mark img{width:100%;height:100%;object-fit:contain}
  .contact-brand-row .contact-eyebrow{margin-bottom:0}

  .threeb-head{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;margin-bottom:60px}
  .threeb-head .service-head-eyebrow{grid-column:1 / -1}
  .threeb-head .h2{font-size:clamp(56px,9vw,128px);letter-spacing:-.05em;line-height:.92;background:linear-gradient(180deg,var(--orange),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
  .threeb-head .h2 .g-blast{background:linear-gradient(180deg,#69E2FF 0%,var(--cyan) 50%,#0098B8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
  @media (max-width:880px){.threeb-head{grid-template-columns:1fr}}

  .threeb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .b-card{
    position:relative;border-radius:28px;overflow:hidden;color:#fff;padding:42px 36px;
    min-height:460px;display:flex;flex-direction:column;justify-content:space-between;
    transition:transform .35s var(--ease);
  }
  .b-card:hover{transform:translateY(-6px)}
  .b-card.build{background:linear-gradient(165deg,var(--orange-cta) 0%,var(--red) 100%)}
  .b-card.boost{background:linear-gradient(170deg,var(--orange-cta) 0%,var(--red) 100%)}
  .b-card.blast{background:linear-gradient(165deg,#3a5c83 0%,var(--navy) 50%,#04111f 100%)}
  .b-card .step{font-size:13px;font-weight:800;letter-spacing:.24em;opacity:.9}
  .b-card h3{font-family:"Inter","Arial Black",sans-serif;font-size:clamp(40px,5.4vw,68px);font-weight:900;letter-spacing:-.04em;margin:12px 0;line-height:.95}
  .b-card .sub{font-size:18px;font-weight:600;opacity:.95;margin-bottom:24px}
  .b-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;opacity:.96}
  .b-card ul li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start;line-height:1.55;word-break:normal;overflow-wrap:break-word}
  body.lang-th .b-card ul li{font-size:14px;line-height:1.7}
  .b-card ul li:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;margin-top:9px;opacity:.9}
  .b-card .arrow{position:absolute;right:30px;top:30px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:18px;backdrop-filter:blur(8px)}
  @media (max-width:980px){.threeb-grid{grid-template-columns:1fr}.b-card{min-height:auto}}

  /* ===== Stage-card tagline + ALL IN SIGHT callout (consolidated service) ===== */
  .b-card .b-tag{font-size:15px;font-weight:700;font-style:italic;margin:-6px 0 18px;opacity:.95;letter-spacing:-.01em}
  body.lang-th .b-card .b-tag{font-style:normal;font-weight:600}

  .sight-callout{margin-top:18px;border-radius:28px;padding:40px 44px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;background:linear-gradient(135deg,#0a1f38 0%,var(--navy) 55%,#04111f 100%);border:1px solid rgba(0,212,255,.25);box-shadow:0 24px 60px rgba(10,37,64,.22),inset 0 1px 0 rgba(255,255,255,.06);position:relative;overflow:hidden}
  .sight-callout::before{content:"";position:absolute;right:-8%;top:-50%;width:55%;height:200%;background:radial-gradient(circle,rgba(0,212,255,.16),transparent 62%);pointer-events:none}
  .sight-callout-main{display:flex;align-items:center;gap:28px;min-width:0;position:relative;z-index:1}
  .sight-callout-logo{flex-shrink:0}
  .sight-callout-logo img{height:60px;width:auto;display:block;filter:drop-shadow(0 6px 22px rgba(0,212,255,.42))}
  .sight-callout-eyebrow{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
  .sight-callout-title{font-family:"Inter","Arial Black",sans-serif;font-size:clamp(26px,3.2vw,38px);font-weight:900;letter-spacing:-.03em;color:#fff;line-height:1;margin:0 0 10px}
  .sight-callout-title .g-cyan{background:linear-gradient(180deg,#69E2FF,var(--cyan) 55%,#0098B8);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sight-callout-desc{font-size:15px;line-height:1.6;color:rgba(255,255,255,.78);max-width:54ch;margin:0}
  body.lang-th .sight-callout-desc{line-height:1.75}
  .sight-callout-cta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;position:relative;z-index:1;flex-shrink:0}
  .btn-cyan{background:linear-gradient(180deg,#22D3FF,var(--cyan-deep));color:#04111f;font-weight:800;white-space:nowrap;box-shadow:0 14px 30px rgba(0,212,255,.28)}
  .btn-cyan:hover{filter:brightness(1.06);transform:translateY(-1px)}
  .sight-callout-url{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:12px;color:rgba(0,212,255,.72);letter-spacing:.01em}
  @media (max-width:880px){
    .sight-callout{grid-template-columns:1fr;gap:24px;padding:32px 24px;text-align:center}
    .sight-callout-main{flex-direction:column;text-align:center;gap:16px}
    .sight-callout-cta{align-items:center}
    .sight-callout-desc{margin:0 auto}
  }

  /* ===== Service cards + detail that extends out from the active card ===== */
  .threeb-grid .b-card{min-height:300px;border:0;width:100%;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .b-card .b-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.24);font-size:14px;font-weight:800;letter-spacing:.02em}
  .b-card .b-chevron{font-size:24px;line-height:1;transition:transform .35s var(--ease)}
  .b-card[aria-expanded="true"]{box-shadow:0 30px 70px rgba(10,37,64,.34)}
  .b-card[aria-expanded="true"] .b-chevron{transform:rotate(180deg)}

  /* the detail panel slides out + a notch points up to the active card */
  .stage-panels{position:relative}
  .stage-detail{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .35s ease,margin-top .45s var(--ease)}
  .stage-detail.is-open{max-height:1800px;opacity:1;margin-top:22px}
  .stage-detail-inner{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 32px 28px;box-shadow:0 24px 56px rgba(10,37,64,.12)}
  /* stage-tinted panel + a label chip so each detail is unmistakable */
  .stage-build .stage-detail-inner{background:linear-gradient(180deg,#fff8f3,#fff 55%);border-color:rgba(255,86,11,.24)}
  .stage-boost .stage-detail-inner{background:linear-gradient(180deg,#fff4f2,#fff 55%);border-color:rgba(184,2,1,.22)}
  .stage-blast .stage-detail-inner{background:linear-gradient(180deg,#f2f8fd,#fff 55%);border-color:rgba(0,152,184,.26)}
  .stage-detail-inner::before{display:inline-flex;align-items:center;font-family:"Inter","Arial Black",sans-serif;font-weight:900;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 15px;border-radius:999px;margin-bottom:18px}
  .stage-build .stage-detail-inner::before{content:"● STAGE 01 — BUILD";background:rgba(255,86,11,.12);color:var(--orange)}
  .stage-boost .stage-detail-inner::before{content:"● STAGE 02 — BOOST";background:rgba(184,2,1,.12);color:var(--red)}
  .stage-blast .stage-detail-inner::before{content:"● STAGE 03 — BLAST";background:rgba(0,152,184,.14);color:var(--cyan-deep)}
  .stage-boost .stage-cta{background:var(--red);box-shadow:0 12px 28px rgba(184,2,1,.30)}
  .stage-blast .stage-cta{background:var(--cyan-deep);box-shadow:0 12px 28px rgba(0,152,184,.30)}
  /* the notch: a diamond that points from the panel up to its card */
  .stage-notch{position:absolute;top:9px;width:22px;height:22px;transform:rotate(45deg);border-radius:4px;z-index:2;box-shadow:-3px -3px 6px rgba(10,37,64,.06)}
  .stage-build .stage-notch{left:16.66%;margin-left:-11px;background:var(--orange)}
  .stage-boost .stage-notch{left:50%;margin-left:-11px;background:var(--red)}
  .stage-blast .stage-notch{left:83.33%;margin-left:-11px;background:var(--navy)}
  .stage-detail .items{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:15px 40px}
  .stage-detail .items li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
  .stage-detail .items .n{font-family:"Inter","Arial Black",sans-serif;font-size:15px;font-weight:900;opacity:.95;min-width:22px}
  .stage-build .items .n{color:var(--orange)}
  .stage-boost .items .n{color:var(--red)}
  .stage-blast .items .n{color:var(--cyan-deep)}
  .stage-detail .items .t{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.01em;line-height:1.3}
  .stage-detail .items .d{font-size:14px;line-height:1.55;color:var(--muted);margin-top:4px}
  body.lang-th .stage-detail .items .d{line-height:1.7}
  .stage-detail .stage-cta{margin-top:24px}
  @media (max-width:980px){
    .stage-notch{display:none}                 /* cards stack 1-col → notch position is meaningless */
    .threeb-grid .b-card{min-height:auto}      /* compact cards when stacked */
    .b-card .b-toggle{margin-top:18px;padding-top:16px}
    .stage-detail{margin:0}
    .stage-detail.is-open{margin-top:12px;margin-bottom:4px}
  }
  @media (max-width:720px){
    .stage-detail-inner{padding:28px 22px}
    .stage-detail .items{grid-template-columns:1fr;gap:20px}
  }

  /* ===== Big alternating feature blocks ===== */
  .feat{padding:120px 0;border-top:1px solid var(--line)}
  .feat.build-bg{background:linear-gradient(180deg,#fff,#fff7f2)}
  .feat.boost-bg{background:#000;color:#fff}
  .feat.boost-bg .lead{color:#a1a1a6}
  .feat.blast-bg{background:linear-gradient(180deg,var(--navy) 0%,#04111f 100%);color:#fff}
  .feat.blast-bg .lead{color:#9fb2c8}
  .feat.blast-bg .h2{background:linear-gradient(135deg,#fff 0%,#69E2FF 50%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .feat.blast-bg .eyebrow{color:var(--cyan)}
  .feat .row{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
  .feat .row.rev{grid-template-columns:1fr 1.05fr}
  .feat .row.rev .copy{order:2}
  .feat .row.rev .visual{order:1}
  .feat .copy .eyebrow{margin-bottom:14px}
  .feat .copy h2{margin-bottom:18px;color:inherit}
  .feat .copy h2 em{font-style:normal;background:linear-gradient(90deg,var(--orange),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
  .feat.boost-bg .copy h2 em, .feat.blast-bg .copy h2 em{background:linear-gradient(90deg,var(--orange),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
  .feat ul.items{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:10px}
  .feat ul.items li{padding:14px 18px;border:1px solid var(--line);border-radius:14px;display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.5);backdrop-filter:blur(8px);transition:all .25s var(--ease)}
  .feat ul.items li:hover{background:var(--orange);transform:translateX(4px) translateY(-3px);box-shadow:0 14px 30px rgba(255,86,11,.28)}
  .feat ul.items li:hover .t{color:#fff}
  .feat ul.items li:hover .d{color:rgba(255,255,255,.92)}
  .feat ul.items li:hover .n{color:#fff;opacity:.85}
  .feat ul.items li .n{font-weight:800;font-size:12px;color:var(--orange);letter-spacing:.14em;flex-shrink:0;width:32px;padding-top:2px}
  .feat ul.items li .t{font-weight:700;font-size:15px;letter-spacing:-.01em}
  .feat ul.items li .d{color:var(--muted);font-size:13px;margin-top:2px;font-weight:400;letter-spacing:0}
  .feat.boost-bg ul.items li{background:rgba(255,255,255,.03);border-color:#1d1d1f}
  .feat.boost-bg ul.items li:hover{background:rgba(255,255,255,.06);border-color:var(--orange)}
  .feat.boost-bg ul.items li .d{color:#a1a1a6}
  .feat.blast-bg ul.items li{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
  .feat.blast-bg ul.items li:hover{background:rgba(0,212,255,.08);border-color:var(--cyan)}
  .feat.blast-bg ul.items li .n{color:var(--cyan)}
  .feat.blast-bg ul.items li .d{color:#9fb2c8}
  @media (max-width:980px){.feat .row,.feat .row.rev{grid-template-columns:1fr}.feat .row.rev .copy{order:0}.feat .row.rev .visual{order:0}}

  /* visual blobs */
  .visual{position:relative;aspect-ratio:5/4;border-radius:28px;overflow:hidden;background:var(--soft);display:grid;place-items:center}
  .visual.build{
    background:radial-gradient(circle at 75% 18%,#1c2c4a 0%,#0a1426 45%,#04070d 100%);
    border:1px solid rgba(255,86,11,.18);
    position:relative;overflow:hidden;
  }
  .visual.build::before{
    content:"";position:absolute;inset:0;
    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:32px 32px;
    pointer-events:none;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 80%);
  }
  .visual.build::after{
    content:"";position:absolute;right:-15%;bottom:-20%;
    width:70%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(255,86,11,.32),transparent 65%);
    pointer-events:none;filter:blur(8px);
  }
  .visual.build .build-scene{position:absolute;inset:0;display:grid;place-items:center}
  .visual.build .build-tag{
    position:absolute;top:22px;left:22px;
    display:flex;align-items:center;gap:10px;
    font-family:"Inter",monospace;font-size:10px;font-weight:700;
    letter-spacing:.22em;color:rgba(255,255,255,.62);text-transform:uppercase;
    z-index:3;
  }
  .visual.build .build-tag::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--orange);box-shadow:0 0 14px var(--orange),0 0 4px var(--orange);
    animation:bldDot 1.6s ease-in-out infinite;
  }
  .visual.build .build-meta{
    position:absolute;bottom:22px;left:22px;right:22px;
    display:flex;justify-content:space-between;align-items:center;
    font-family:"Inter",monospace;font-size:9px;font-weight:700;
    letter-spacing:.18em;color:rgba(255,255,255,.42);text-transform:uppercase;
    z-index:3;
  }
  .visual.build .build-meta b{color:var(--orange);font-weight:700}
  .visual.build .build-illo{
    width:84%;height:auto;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
    overflow:visible;
  }
  .visual.build .build-illo .floating-brick{animation:bldBrick 3.2s ease-in-out infinite;transform-origin:center}
  .visual.build .build-illo .swing{transform-origin:368px 60px;animation:bldSwing 4s ease-in-out infinite}
  .visual.build .build-illo .dust{animation:bldDust 6s ease-in-out infinite;transform-origin:center}
  @keyframes bldDot{50%{opacity:.35}}
  @keyframes bldBrick{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes bldSwing{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
  .visual.build .build-illo .sign{animation:bldSign 6s ease-in-out infinite;transform-origin:28px 76px}
  @keyframes bldSign{0%,100%{transform:translate(40px,200px) rotate(-1deg)}50%{transform:translate(40px,200px) rotate(1deg)}}
  @keyframes bldDust{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:.9}}
  /* Banner sway */
  .visual.build .build-illo .banner{
    animation: bldBannerSway 5s ease-in-out infinite;
    transform-origin: 200px 40px;
  }
  @keyframes bldBannerSway{
    0%,100%{transform:rotate(-1.4deg)}
    50%{transform:rotate(1.4deg)}
  }
  /* Brick-stacking loop — bricks drop one by one onto the unfinished wall */
  .visual.build .build-illo .stack-brick{
    animation: bldStack 7s cubic-bezier(.55,.05,.6,1) infinite;
    transform-origin:center;
  }
  .visual.build .build-illo .stack-brick.b1{animation-delay:0s}
  .visual.build .build-illo .stack-brick.b2{animation-delay:1.4s}
  .visual.build .build-illo .stack-brick.b3{animation-delay:2.8s}
  .visual.build .build-illo .stack-brick.b4{animation-delay:4.2s}
  .visual.build .build-illo .stack-brick.b5{animation-delay:5.6s}
  @keyframes bldStack{
    0%{transform:translateY(-220px);opacity:0}
    6%{opacity:1}
    18%{transform:translateY(0);opacity:1}
    20%{transform:translate(0,-3px) scale(1.04);opacity:1}
    22%,88%{transform:translateY(0);opacity:1}
    94%,100%{opacity:0;transform:translateY(0)}
  }
  /* Dust puff at landing spot, tied to each drop */
  .visual.build .build-illo .stack-puff{
    transform-origin:center;
    opacity:0;
    animation: bldPuff 7s ease-out infinite;
  }
  .visual.build .build-illo .stack-puff.b1{animation-delay:0s}
  .visual.build .build-illo .stack-puff.b2{animation-delay:1.4s}
  .visual.build .build-illo .stack-puff.b3{animation-delay:2.8s}
  .visual.build .build-illo .stack-puff.b4{animation-delay:4.2s}
  .visual.build .build-illo .stack-puff.b5{animation-delay:5.6s}
  @keyframes bldPuff{
    0%,17%{opacity:0;transform:scale(.5)}
    19%{opacity:.8;transform:scale(1)}
    25%{opacity:0;transform:scale(1.6)}
    100%{opacity:0}
  }
  /* ===== BOOST visual — centered iPhone with TikTok-style auto-scrolling feed ===== */
  .visual.boost{
    background:radial-gradient(circle at 30% 25%,#1a1a1c 0%,#0d0d0e 60%,#050505 100%);
    position:relative;overflow:hidden;
  }
  .visual.boost::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,86,11,.12) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,86,11,.12) 1px,transparent 1px);
    background-size:32px 32px;
    pointer-events:none;
    mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 80%);
  }
  .visual.boost::after{
    content:"";position:absolute;left:-20%;bottom:-25%;
    width:75%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(255,86,11,.42),transparent 60%);
    pointer-events:none;filter:blur(20px);
  }
  .visual.boost .bst-glow{
    position:absolute;right:-15%;top:-20%;width:70%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(255,176,65,.28),transparent 65%);
    pointer-events:none;filter:blur(16px);z-index:1;
  }

  /* iPhone — centered, slight tilt-free, realistic frame */
  .visual.boost .bst-phone{
    position:relative;z-index:3;
    width:38%;aspect-ratio:9/19.5;
    background:linear-gradient(160deg,#3a3a3c 0%,#1c1c1e 40%,#0a0a0c 100%);
    border-radius:14% / 6.4%;
    padding:3% 3.2%;
    box-shadow:
      0 50px 80px rgba(0,0,0,.55),
      0 20px 30px rgba(0,0,0,.4),
      inset 0 0 0 1.5px rgba(255,255,255,.06),
      inset 0 2px 4px rgba(255,255,255,.10);
    animation:bstPhoneFloat 6s ease-in-out infinite;
  }
  /* side buttons */
  .visual.boost .bst-phone::before,
  .visual.boost .bst-phone::after{
    content:"";position:absolute;background:#0a0a0c;border-radius:2px;
  }
  .visual.boost .bst-phone::before{left:-2px;top:16%;width:3px;height:6%;box-shadow:0 12% 0 #0a0a0c,0 24% 0 #0a0a0c}
  .visual.boost .bst-phone::after{right:-2px;top:18%;width:3px;height:9%}

  /* screen */
  .visual.boost .bst-screen{
    position:relative;width:100%;height:100%;
    background:#000;
    border-radius:12% / 5.4%;
    overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  }
  /* dynamic island */
  .visual.boost .bst-island{
    position:absolute;top:3.2%;left:50%;transform:translateX(-50%);
    width:30%;height:3.4%;
    background:#000;border-radius:999px;z-index:10;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  }
  .visual.boost .bst-island::after{
    content:"";position:absolute;right:14%;top:50%;transform:translateY(-50%);
    width:8%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#1a3a5a,#000 70%);
  }

  /* top tabs */
  .visual.boost .bst-top{
    position:absolute;top:8%;left:0;right:0;z-index:8;
    display:flex;justify-content:center;align-items:center;gap:12%;
    font-family:"Inter",sans-serif;font-size:9px;font-weight:600;
    color:rgba(255,255,255,.55);
  }
  .visual.boost .bst-top .active{
    color:#fff;font-weight:700;position:relative;
  }
  .visual.boost .bst-top .active::after{
    content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
    width:60%;height:2px;border-radius:2px;background:#fff;
  }
  .visual.boost .bst-top .search{
    position:absolute;right:10%;
    width:14px;height:14px;
  }
  .visual.boost .bst-top .search::before{
    content:"";display:block;width:9px;height:9px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.7);
  }
  .visual.boost .bst-top .search::after{
    content:"";position:absolute;right:0;bottom:0;
    width:5px;height:1.5px;background:rgba(255,255,255,.7);
    transform:rotate(45deg);transform-origin:right;
  }

  /* feed strip (scrolling) */
  .visual.boost .bst-feed{
    position:absolute;inset:0;
    display:flex;flex-direction:column;
    animation:bstFeed 12s cubic-bezier(.7,0,.3,1) infinite;
  }
  .visual.boost .bst-card{
    flex:none;width:100%;height:100%;
    position:relative;overflow:hidden;
  }
  /* Card 1 — ALL IN brand reveal */
  .visual.boost .bst-card.c1{
    background:linear-gradient(165deg,#ff8048 0%,#d83a00 70%,#9b2400 100%);
  }
  .visual.boost .bst-card.c1::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 40%),
      radial-gradient(circle at 80% 80%,rgba(0,0,0,.20),transparent 50%);
  }
  .visual.boost .bst-card.c1 .bst-logo{
    position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
    width:64%;height:auto;display:block;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.30));
  }
  .visual.boost .bst-card.c1 .bst-headline{
    position:absolute;left:8%;right:8%;top:62%;
    text-align:center;color:#fff;
    font-family:"Inter","Arial Black",sans-serif;
    font-size:11px;font-weight:900;letter-spacing:.02em;line-height:1.15;
    text-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .visual.boost .bst-card.c1 .bst-headline em{
    font-style:normal;color:#fff;background:rgba(0,0,0,.18);
    padding:2px 6px;border-radius:4px;
  }

  /* Card 2 — UGC / lifestyle (purple-pink gradient) */
  .visual.boost .bst-card.c2{
    background:linear-gradient(165deg,#3a1d5f 0%,#7d2a8c 40%,#d8377a 100%);
  }
  .visual.boost .bst-card.c2::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 65% 25%,rgba(255,200,150,.30),transparent 35%),
      radial-gradient(circle at 30% 75%,rgba(120,40,180,.4),transparent 50%);
  }
  .visual.boost .bst-card.c2 .bst-play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
    display:grid;place-items:center;
    border:1.5px solid rgba(255,255,255,.5);
    animation:bstPulse 1.6s ease-in-out infinite;
  }
  .visual.boost .bst-card.c2 .bst-play::after{
    content:"";display:block;
    border-left:10px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;
    margin-left:4px;
  }

  /* Card 3 — Performance / stats */
  .visual.boost .bst-card.c3{
    background:linear-gradient(165deg,#0a1a2a 0%,#0e2e4f 60%,#04111f 100%);
  }
  .visual.boost .bst-card.c3::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(0,212,255,.08) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,212,255,.08) 1px,transparent 1px);
    background-size:18px 18px;
    mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 80%);
  }
  .visual.boost .bst-card.c3 .bst-roas{
    position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
    font-family:"Inter","Arial Black",sans-serif;
    font-size:54px;font-weight:900;letter-spacing:-.04em;line-height:1;
    background:linear-gradient(180deg,#fff 30%,var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 30px rgba(0,212,255,.5);
  }
  .visual.boost .bst-card.c3 .bst-roas-lbl{
    position:absolute;left:0;right:0;top:60%;text-align:center;
    font-family:"Inter",sans-serif;font-size:9px;font-weight:700;
    letter-spacing:.18em;color:rgba(255,255,255,.6);text-transform:uppercase;
  }
  .visual.boost .bst-card.c3 .bst-bars{
    position:absolute;left:14%;right:14%;bottom:26%;
    display:flex;align-items:flex-end;gap:5px;height:24%;
  }
  .visual.boost .bst-card.c3 .bst-bars span{
    flex:1;background:linear-gradient(180deg,var(--cyan),var(--orange));
    border-radius:2px 2px 0 0;opacity:.82;
  }
  .visual.boost .bst-card.c3 .bst-bars span:nth-child(1){height:40%}
  .visual.boost .bst-card.c3 .bst-bars span:nth-child(2){height:65%}
  .visual.boost .bst-card.c3 .bst-bars span:nth-child(3){height:50%}
  .visual.boost .bst-card.c3 .bst-bars span:nth-child(4){height:85%}
  .visual.boost .bst-card.c3 .bst-bars span:nth-child(5){height:70%}
  .visual.boost .bst-card.c3 .bst-bars span:nth-child(6){height:95%}

  /* shared caption (bottom-left of each card) */
  .visual.boost .bst-caption{
    position:absolute;left:6%;right:24%;bottom:13%;
    color:#fff;z-index:5;
    font-family:"Inter",sans-serif;
  }
  .visual.boost .bst-caption .h{
    font-size:10px;font-weight:800;letter-spacing:.01em;
    text-shadow:0 1px 3px rgba(0,0,0,.45);
  }
  .visual.boost .bst-caption .b{
    margin-top:3px;font-size:8px;font-weight:500;line-height:1.3;
    color:rgba(255,255,255,.85);
    text-shadow:0 1px 3px rgba(0,0,0,.45);
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .visual.boost .bst-caption .tags{
    margin-top:3px;font-size:7px;font-weight:600;color:rgba(255,255,255,.7);
    letter-spacing:.02em;
  }
  .visual.boost .bst-music{
    position:absolute;left:6%;right:24%;bottom:7%;
    display:flex;align-items:center;gap:4px;
    color:#fff;font-family:"Inter",sans-serif;font-size:7px;font-weight:500;
    opacity:.9;z-index:5;
    text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .visual.boost .bst-music::before{
    content:"";display:block;width:8px;height:8px;
    background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.25));
    border-radius:1px;clip-path:polygon(20% 0,100% 30%,100% 100%,20% 70%,0 70%,0 30%);
    transform:rotate(0deg);
    animation:bstNote 2.5s linear infinite;
  }

  /* right-side action column */
  .visual.boost .bst-actions{
    position:absolute;right:5%;bottom:18%;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    z-index:6;color:#fff;
    font-family:"Inter",sans-serif;font-size:7px;font-weight:700;
    text-shadow:0 1px 3px rgba(0,0,0,.45);
  }
  .visual.boost .bst-actions .av{
    width:28px;height:28px;border-radius:50%;
    background:linear-gradient(135deg,#FF8048,#d83a00);
    border:2px solid #fff;
    position:relative;
    display:grid;place-items:center;
    color:#fff;font-size:11px;font-weight:900;
  }
  .visual.boost .bst-actions .av::after{
    content:"+";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
    width:14px;height:14px;border-radius:50%;
    background:var(--red);color:#fff;font-size:10px;font-weight:900;
    display:grid;place-items:center;line-height:1;border:1.5px solid #000;
  }
  .visual.boost .bst-actions .a{
    display:flex;flex-direction:column;align-items:center;gap:2px;
  }
  .visual.boost .bst-actions .a .ic{
    width:22px;height:22px;display:grid;place-items:center;
    font-size:18px;line-height:1;
  }
  .visual.boost .bst-actions .a.like .ic{color:#ff3a55;animation:bstHeart 1.8s ease-in-out infinite}

  /* bottom tab bar */
  .visual.boost .bst-tabbar{
    position:absolute;left:0;right:0;bottom:0;
    height:9%;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));
    display:flex;justify-content:space-around;align-items:flex-start;
    padding-top:3%;
    color:rgba(255,255,255,.7);
    font-family:"Inter",sans-serif;font-size:6px;font-weight:600;
    z-index:7;
  }
  .visual.boost .bst-tabbar span{position:relative}
  .visual.boost .bst-tabbar .plus{
    background:linear-gradient(135deg,var(--orange),var(--red));
    color:#fff;font-weight:900;
    width:22px;height:14px;border-radius:4px;
    display:grid;place-items:center;font-size:14px;line-height:0;
    margin-top:-2px;
    box-shadow:0 0 0 1.5px var(--cyan);
  }
  .visual.boost .bst-tabbar .plus::before{
    content:"";position:absolute;left:-3px;top:-1px;
    width:22px;height:14px;border-radius:4px;
    background:rgba(255,86,11,.5);transform:translateX(-1px);
    z-index:-1;filter:blur(2px);
  }

  /* feed dot indicator (page-pager) */
  .visual.boost .bst-pager{
    position:absolute;left:50%;transform:translateX(-50%);bottom:13%;
    display:flex;gap:4px;z-index:6;
  }
  .visual.boost .bst-pager span{
    width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);
  }
  .visual.boost .bst-pager span.on{background:#fff}

  @keyframes bstPhoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes bstFeed{
    0%,28%{transform:translateY(0)}
    33%,61%{transform:translateY(-100%)}
    66%,94%{transform:translateY(-200%)}
    100%{transform:translateY(-300%)}
  }
  @keyframes bstHeart{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
  @keyframes bstPulse{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.45)}50%{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 0 8px rgba(255,255,255,0)}}
  @keyframes bstNote{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
  /* ===== BLAST visual — hex/dot tech background, ALL INSIGHT logo center ===== */
  .visual.blast{
    background:
      radial-gradient(ellipse at 25% 80%,rgba(255,86,11,.16),transparent 50%),
      radial-gradient(ellipse at 75% 20%,rgba(0,212,255,.22),transparent 55%),
      linear-gradient(160deg,#0E2E4F 0%,#061325 55%,#02081a 100%);
    position:relative;border:1px solid rgba(0,212,255,.18);overflow:hidden;
  }
  .visual.blast .blast-hex{
    position:absolute;inset:0;width:100%;height:100%;
    z-index:1;pointer-events:none;
    mask-image:radial-gradient(ellipse at 50% 50%,#000 35%,rgba(0,0,0,.3) 70%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 35%,rgba(0,0,0,.3) 70%,transparent 100%);
  }
  .visual.blast .blast-hex .pulse{
    transform-origin:center;
    animation:blstPulse 2.6s ease-in-out infinite;
  }
  .visual.blast .blast-hex .pulse-b{animation-duration:3.4s;animation-delay:.4s}
  .visual.blast .blast-hex .pulse-c{animation-duration:2.2s;animation-delay:.9s}
  .visual.blast .blast-hex .pulse-d{animation-duration:3s;animation-delay:1.5s}
  .visual.blast .blast-hex .pulse-e{animation-duration:2.8s;animation-delay:.2s}
  .visual.blast .blast-hex .flow{
    stroke-dasharray:3 4;
    animation:blstFlow 5s linear infinite;
  }
  .visual.blast .blast-hex .flow-b{animation-duration:7s}

  .visual.blast .blast-logo-wrap{
    position:relative;z-index:3;width:68%;display:grid;place-items:center;
    filter:drop-shadow(0 22px 44px rgba(0,212,255,.35)) drop-shadow(0 8px 16px rgba(0,0,0,.4));
  }
  .visual.blast .blast-logo-wrap img{
    width:100%;height:auto;display:block;
    animation:blstFloat 5.5s ease-in-out infinite;
    position:relative;z-index:2;
  }
  /* concentric tech rings behind logo */
  .visual.blast .blast-logo-wrap::before,
  .visual.blast .blast-logo-wrap::after{
    content:"";position:absolute;border-radius:50%;
    pointer-events:none;
  }
  .visual.blast .blast-logo-wrap::before{
    width:108%;aspect-ratio:1;
    border:1px dashed rgba(0,212,255,.25);
    animation:blstRingSpin 28s linear infinite;
  }
  .visual.blast .blast-logo-wrap::after{
    width:140%;aspect-ratio:1;z-index:-1;
    background:radial-gradient(circle,rgba(0,212,255,.20) 0%,rgba(0,212,255,.08) 40%,transparent 70%);
    animation:blstPulseGlow 4s ease-in-out infinite;
  }

  @keyframes blstFloat{50%{transform:translateY(-6px)}}
  @keyframes blstPulse{
    0%,100%{opacity:.35;transform:scale(.92)}
    50%{opacity:1;transform:scale(1.12)}
  }
  @keyframes blstPulseGlow{
    0%,100%{transform:scale(1);opacity:.85}
    50%{transform:scale(1.08);opacity:1}
  }
  @keyframes blstRingSpin{to{transform:rotate(360deg)}}
  @keyframes blstFlow{to{stroke-dashoffset:-70}}

  /* ===== ALL IN SIGHT — aurora tech background ===== */
  .sight{
    background:#020815;
    color:#fff;padding:140px 0;position:relative;overflow:hidden;
    isolation:isolate;
  }
  /* Aurora light ribbons — layered conic + radial gradients, drifting */
  .sight::before{
    content:"";position:absolute;inset:-20% -10%;
    background:
      radial-gradient(ellipse 60% 40% at 18% 20%, rgba(0,212,255,.55), transparent 60%),
      radial-gradient(ellipse 55% 35% at 82% 25%, rgba(80,140,255,.45), transparent 60%),
      radial-gradient(ellipse 70% 45% at 50% 70%, rgba(0,180,220,.4), transparent 65%),
      radial-gradient(ellipse 40% 28% at 10% 80%, rgba(60,90,220,.35), transparent 60%),
      radial-gradient(ellipse 45% 30% at 90% 75%, rgba(0,220,255,.35), transparent 60%),
      radial-gradient(ellipse 40% 30% at 74% 86%, rgba(255,86,11,.22), transparent 62%),
      radial-gradient(ellipse 30% 24% at 14% 16%, rgba(255,122,58,.14), transparent 60%);
    filter:blur(60px);
    opacity:.85;
    z-index:-2;
    animation:sightAuroraDrift 24s ease-in-out infinite alternate;
    pointer-events:none;
  }
  /* Vertical light curtains, soft moving */
  .sight::after{
    content:"";position:absolute;inset:-20% 0;
    background:
      linear-gradient(180deg, transparent 0%, rgba(0,180,255,.18) 30%, transparent 60%),
      linear-gradient(170deg, transparent 0%, rgba(80,140,255,.14) 50%, transparent 80%);
    mix-blend-mode:screen;
    z-index:-1;
    animation:sightAuroraDrift2 18s ease-in-out infinite alternate;
    pointer-events:none;
  }
  /* Star/particle layer */
  .sight .sight-stars{
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:
      radial-gradient(1.2px 1.2px at 20% 18%, rgba(255,255,255,.7), transparent),
      radial-gradient(1px 1px at 80% 25%, rgba(0,220,255,.7), transparent),
      radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,.6), transparent),
      radial-gradient(1.4px 1.4px at 65% 55%, rgba(0,180,255,.55), transparent),
      radial-gradient(1px 1px at 92% 80%, rgba(255,255,255,.5), transparent),
      radial-gradient(1px 1px at 8%  60%, rgba(0,220,255,.55), transparent),
      radial-gradient(1.2px 1.2px at 50% 12%, rgba(255,255,255,.6), transparent),
      radial-gradient(1px 1px at 72% 90%, rgba(0,200,255,.5), transparent);
    animation:sightStars 6s ease-in-out infinite;
  }
  @keyframes sightAuroraDrift{
    0%  {transform:translate3d(0,0,0) scale(1);     filter:blur(60px) hue-rotate(0deg)}
    50% {transform:translate3d(-3%,2%,0) scale(1.08);filter:blur(70px) hue-rotate(15deg)}
    100%{transform:translate3d(2%,-2%,0) scale(1.04);filter:blur(60px) hue-rotate(-10deg)}
  }
  @keyframes sightAuroraDrift2{
    0%  {transform:translate3d(0,0,0)}
    100%{transform:translate3d(0,-3%,0)}
  }
  @keyframes sightStars{
    0%,100%{opacity:.85}
    50%    {opacity:.55}
  }
  @media (prefers-reduced-motion: reduce){
    .sight::before,.sight::after,.sight .sight-stars{animation:none}
  }
  .sight .container{position:relative;z-index:2}
  .sight h2.giant{font-family:"Inter","Arial Black",sans-serif;font-size:clamp(72px,12vw,180px);font-weight:900;letter-spacing:-.05em;line-height:.9;text-align:center;background:linear-gradient(180deg,#fff 0%,var(--orange) 70%,var(--red) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sight .sight-logo{display:block;margin:0 auto;width:min(720px,76vw);height:auto;filter:drop-shadow(0 24px 60px rgba(0,212,255,.28)) drop-shadow(0 8px 24px rgba(255,86,11,.20));animation:sightFloat 6s ease-in-out infinite;transition:transform .35s var(--ease), filter .35s}
  .sight .sight-logo-link{display:block;position:relative;cursor:pointer;text-decoration:none}
  .sight .sight-logo-link:hover .sight-logo{transform:scale(1.04);filter:drop-shadow(0 28px 72px rgba(0,212,255,.50)) drop-shadow(0 12px 32px rgba(255,86,11,.32))}
  .sight .sight-logo-hint{display:inline-flex;align-items:center;gap:8px;margin:18px auto 0;padding:8px 18px;background:rgba(0,212,255,.10);color:var(--cyan);border:1px solid rgba(0,212,255,.30);border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px);transition:all .25s var(--ease);text-align:center}
  .sight .sight-logo-link{text-align:center}
  .sight .sight-logo-link:hover .sight-logo-hint{background:var(--cyan);color:var(--navy);border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,212,255,.40)}6s ease-in-out infinite}
  @keyframes sightFloat{50%{transform:translateY(-6px)}}
  @media (max-width:600px){.sight .sight-logo{width:88vw}}
  body.lang-th .sight h2.giant{font-size:clamp(56px,10vw,140px);letter-spacing:0}
  .sight .swap{text-align:center;font-size:clamp(20px,2vw,28px);font-weight:600;color:var(--cyan);margin-top:10px;letter-spacing:.04em}
  .sight .desc{text-align:center;max-width:680px;margin:24px auto 0;color:#a1a1a6;font-size:18px}

  .dash{margin:60px auto 0;max-width:1080px;background:linear-gradient(160deg,#0e1116 0%,#06080b 100%);border:1px solid #1d1d1f;border-radius:24px;padding:18px;box-shadow:0 50px 120px rgba(0,212,255,.12), 0 30px 60px rgba(255,86,11,.10)}
  .dash-top{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #1d1d1f}
  .dash-top .dot{width:10px;height:10px;border-radius:50%;background:#2a2a2a}
  .dash-top .dot.r{background:#FF5F57}.dash-top .dot.y{background:#FEBC2E}.dash-top .dot.g{background:#28C840}
  .dash-top .addr{margin-left:14px;font-size:12px;color:#86868b;font-family:"Inter",monospace}
  .dash-body{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;gap:12px;padding:18px}
  .dash-body--img{display:block;padding:0;border-bottom-left-radius:18px;border-bottom-right-radius:18px;overflow:hidden}
  .dash-body--img img{display:block;width:100%;height:auto}
  .tile{background:linear-gradient(160deg,#0f1217,#080a0d);border:1px solid #1d1d1f;border-radius:14px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;font-size:11px}
  .tile .lbl{font-size:10px;color:#86868b;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
  .tile .val{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
  .tile .val em{font-style:normal;background:linear-gradient(90deg,var(--orange),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
  .tile .delta{font-size:11px;color:#28C840;font-weight:700}
  .tile.tA{grid-column:span 2}
  .tile.tB{grid-column:span 2;grid-row:span 2}
  .tile.tC{grid-column:span 2;background:linear-gradient(150deg,var(--orange-cta),var(--red));border-color:transparent}
  .tile.tC .lbl{color:#ffd9c2}
  .tile.tC .val{color:#fff}
  .tile.tD{grid-column:span 2}
  .tile.tE{grid-column:span 2}
  .tile .pie{position:absolute;right:14px;top:14px;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--cyan) 0 65%, #2a2a2a 65% 100%)}
  .tile.tB .grid-bars{display:flex;align-items:flex-end;height:55%;gap:6px;margin-top:auto}
  .tile.tB .grid-bars div{flex:1;background:linear-gradient(180deg,var(--cyan),var(--orange));border-radius:4px 4px 0 0;opacity:.85}
  .platforms{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
  .platforms span{font-size:10px;padding:3px 8px;border-radius:999px;background:#1d1d1f;color:#c8c8cc;font-weight:600}
  @media (max-width:780px){.dash-body{grid-template-columns:repeat(2,1fr)}.tile.tA,.tile.tB,.tile.tC,.tile.tD,.tile.tE{grid-column:span 2;grid-row:auto}}

  /* SME Pain */
  .pain{background:#000;color:#fff;padding:120px 0;border-top:1px solid #1d1d1f}
  .pain-head{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:start}
  .pain-head .h2{color:#fff}
  .pain-head .eyebrow{font-size:clamp(22px,2.4vw,32px);letter-spacing:.18em;font-weight:800;line-height:1.2;margin-bottom:18px;display:inline-block}
  .pain-list{display:flex;flex-direction:column;gap:14px;margin-top:30px}
  .pain-item{padding:18px 22px;background:rgba(184,2,1,.08);border:1px solid rgba(184,2,1,.25);border-radius:14px;font-size:16px;display:flex;gap:14px;align-items:flex-start}
  .pain-item .x{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800}
  .pain-solve{margin-top:36px;padding:30px;border-radius:18px;background:linear-gradient(150deg,var(--orange-cta),var(--red));color:#fff;font-size:18px;font-weight:700;display:flex;gap:16px;align-items:center}
  .pain-solve .ch{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#06C755;color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 0 0 4px rgba(255,255,255,.20)}
  @media (max-width:880px){.pain-head{grid-template-columns:1fr}.pain-head .h2{font-size:clamp(34px,5.8vw,52px);line-height:1.2}.pain-head .eyebrow{font-size:clamp(18px,2vw,24px)}}

  /* 3 Values ALL IN SIGHT */
  .values{background:var(--soft);padding:120px 0}
  .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
  .vcard{background:linear-gradient(150deg,var(--orange-cta) 0%,var(--red) 100%);color:#fff;padding:36px 30px;border-radius:24px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;position:relative;transition:transform .3s var(--ease)}
  .vcard:hover{transform:translateY(-6px)}
  .vcard .pill{align-self:flex-start;background:#fff;color:var(--orange);font-family:"Inter","Arial Black",sans-serif;font-weight:900;letter-spacing:.04em;padding:10px 20px;border-radius:999px;font-size:18px}
  .vcard p{margin:0;font-weight:600;font-size:17px;line-height:1.5}
  @media (max-width:880px){.val-grid{grid-template-columns:1fr}}

  .plat-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:48px}
  .plat-row .p{width:64px;height:64px;border:1px solid var(--line);background:#fff;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);transition:transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s}
  .plat-row .p:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 14px 32px rgba(10,37,64,.10)}
  .plat-row .p svg{width:30px;height:30px}
  .plat-row .p img{width:36px;height:36px;object-fit:contain;display:block}
  .plat-row .p.fb:hover{background:#1877F2}.plat-row .p.fb:hover svg{color:#fff}
  .plat-row .p.ig:hover{background:linear-gradient(135deg,#FEDA75,#FA7E1E 35%,#D62976 65%,#962FBF 80%,#4F5BD5)}.plat-row .p.ig:hover svg{color:#fff}
  .plat-row .p.tt:hover{background:#000}.plat-row .p.tt:hover svg{color:#fff}
  .plat-row .p.gg:hover{background:#fff}
  .plat-row .p.yt:hover{background:#FF0000}.plat-row .p.yt:hover svg{color:#fff}
  .plat-row .p.ln:hover{background:#06C755}.plat-row .p.ln:hover svg{color:#fff}
  .plat-row .p.sp:hover{background:#EE4D2D}.plat-row .p.sp:hover svg{color:#fff}
  .plat-row .p.lz:hover{background:linear-gradient(135deg,#0F146E,#F0123F)}.plat-row .p.lz:hover svg{color:#fff}

  /* Roadmap — vertical timeline with alternating side cards */
  .roadmap{background:linear-gradient(180deg,#fff,var(--soft));padding:120px 0;position:relative;overflow:hidden}
  .roadmap::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 40% 30% at 100% 0%, rgba(255,86,11,.06), transparent 70%),radial-gradient(ellipse 40% 30% at 0% 100%, rgba(0,212,255,.06), transparent 70%);pointer-events:none}
  .roadmap .container{position:relative;z-index:1}
  .road-track{position:relative;margin:80px auto 0;max-width:980px;display:flex;flex-direction:column;gap:24px}
  .road-track::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,var(--orange) 0%,var(--red) 50%,var(--navy) 100%);transform:translateX(-50%);border-radius:2px;z-index:0}
  .road-track::after{content:"";position:absolute;bottom:-14px;left:50%;width:18px;height:18px;border-radius:50%;background:var(--navy);transform:translateX(-50%);box-shadow:0 0 0 6px rgba(10,37,64,.10);z-index:1}
  .step{position:relative;z-index:2;width:calc(50% - 56px);display:flex;align-items:center;gap:20px}
  .step:nth-child(odd){margin-right:auto;flex-direction:row-reverse;text-align:right}
  .step:nth-child(even){margin-left:auto;text-align:left}
  .step .dot{width:64px;height:64px;flex-shrink:0;margin:0;border-radius:18px;background:linear-gradient(150deg,var(--orange),var(--red));color:#fff;display:grid;place-items:center;font-family:"Inter","Arial Black",sans-serif;font-size:22px;font-weight:900;letter-spacing:-.02em;box-shadow:0 14px 32px rgba(255,86,11,.35);position:relative}
  .step .dot:before{display:none}
  .step:nth-child(2) .dot{background:linear-gradient(150deg,#FFB341,var(--orange))}
  .step:nth-child(3) .dot{background:linear-gradient(150deg,var(--red),#6B0100)}
  .step:nth-child(4) .dot{background:linear-gradient(150deg,#1d4a78,var(--navy))}
  .step:nth-child(5) .dot{background:linear-gradient(150deg,#0098B8,var(--navy));box-shadow:0 14px 32px rgba(0,212,255,.30)}
  .step .body{flex:1;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 28px;box-shadow:0 14px 36px rgba(10,37,64,.06);transition:transform .25s var(--ease),box-shadow .25s,background-color .25s var(--ease),color .25s var(--ease);position:relative}
  .step .body h3,.step .body p{transition:color .25s var(--ease)}
  .step:hover .body{transform:translateY(-3px);box-shadow:0 22px 50px rgba(255,86,11,.22);background:var(--orange)}
  .step:hover .body h3{color:#fff}
  .step:hover .body p{color:rgba(255,255,255,.92)}
  .step h3{font-family:"Inter","Arial Black",sans-serif;font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--text);margin:0;text-transform:none}
  .step p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}
  .step .step-h3-logo{padding:2px 0;line-height:1}
  .step .step-h3-logo img{display:block;height:28px;width:auto;max-width:100%;object-fit:contain;transition:filter .25s var(--ease)}
  .step:hover .step-h3-logo img{filter:brightness(0) invert(1)}
  body.lang-th .step p{font-size:14px;line-height:1.7}
  @media (max-width:880px){
    .road-track::before{left:32px}
    .road-track::after{left:32px}
    .step,.step:nth-child(odd),.step:nth-child(even){width:auto;margin-left:0;margin-right:0;flex-direction:row;text-align:left}
  }

  .pkg.custom{background:linear-gradient(160deg,#0d1117 0%,#1a1d24 70%,#0a2540 100%);color:#fff;border:1px solid rgba(255,86,11,.20);position:relative}
  .pkg.custom::after{content:"CUSTOM";position:absolute;top:18px;right:18px;background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;font-size:10px;font-weight:900;letter-spacing:.16em;padding:5px 10px;border-radius:999px;z-index:2}
  .pkg.custom:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(255,86,11,.22)}
  .pkg.custom .pkg-tag{background:rgba(255,86,11,.18);color:#FFB341;border:1px solid rgba(255,86,11,.32)}
  .pkg.custom h3{background:linear-gradient(135deg,#fff 0%,#FFB341 50%,var(--orange) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:34px}
  .pkg.custom .pkg-sub{color:#9fb2c8}
  .pkg.custom .pkg-price .lbl{color:#9fb2c8}
  .pkg.custom .pkg-price .num{font-size:38px;background:linear-gradient(160deg,var(--orange),#FFB341);-webkit-background-clip:text;background-clip:text;color:transparent}
  .pkg.custom .pkg-price .unit{color:#fff}
  .pkg.custom ul li{color:#e4e4e8}
  .pkg.custom ul li::before{background:rgba(255,86,11,.20);color:#FFB341}
  .pkg.custom .pkg-cta{background:linear-gradient(160deg,var(--orange),var(--red));color:#fff;box-shadow:0 12px 28px rgba(255,86,11,.34)}
  .pkg.custom .pkg-cta:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(255,86,11,.50)}

  /* RATE CARDS — simplified 2-package + lead form */
  .rates{background:linear-gradient(180deg,var(--soft) 0%,#fff 100%);padding:140px 0}
  .rates .sec-head .h2 span{background:linear-gradient(175deg,#FF6A1F 0%,#E03E08 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  /* Horizontal carousel — swipe / drag / arrows; scales to any number of cards */
  .rates-carousel{position:relative;max-width:1160px;margin:60px auto 0;padding:0 4px}
  .rate-grid-2{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:4px;padding:6px 4px 20px;margin:0;max-width:none;list-style:none;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;cursor:grab;justify-content:flex-start}
  .rate-grid-2::-webkit-scrollbar{display:none}
  .rate-grid-2.is-grabbing{cursor:grabbing;scroll-behavior:auto}
  .rate-grid-2:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:18px}
  .rates-nav{position:absolute;top:calc(50% - 9px);transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(10,37,64,.14);display:grid;place-items:center;font-size:30px;line-height:1;font-weight:700;color:var(--navy);cursor:pointer;z-index:5;transition:opacity .2s,transform .2s,box-shadow .2s;padding-bottom:4px}
  .rates-nav:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 14px 32px rgba(255,86,11,.22);color:var(--orange)}
  .rates-prev{left:-10px}
  .rates-next{right:-10px}
  .rates-nav.is-hidden,.rates-nav:disabled{opacity:0;pointer-events:none}
  /* progress scrollbar under the carousel — shows position + that it scrolls */
  .rates-scrollbar{position:relative;height:6px;max-width:220px;margin:6px auto 0;border-radius:999px;background:rgba(10,37,64,.12);cursor:pointer;touch-action:none}
  .rates-scrollbar.is-hidden{display:none}
  .rates-scrollbar-thumb{position:absolute;top:0;left:0;height:100%;min-width:30px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--red));cursor:grab;will-change:transform,width}
  .rates-scrollbar-thumb:active{cursor:grabbing}
  @media (max-width:760px){
    .rates-nav{display:none}                     /* mobile: swipe instead of arrows */
    .rate-grid-2{scroll-snap-type:x mandatory;padding-bottom:14px}
    .rates-scrollbar{max-width:160px;margin-top:4px}
  }
  .pkg{flex:0 0 clamp(280px,82vw,360px);scroll-snap-align:start;position:relative;border-radius:24px;padding:40px 36px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s var(--ease),box-shadow .3s var(--ease);overflow:hidden}
  .pkg::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%, rgba(255,255,255,.12), transparent 50%);pointer-events:none}
  .pkg.lite{background:#fff;border:1px solid var(--line);color:var(--text)}
  .pkg.lite:hover{transform:translateY(-6px);border-color:var(--orange);box-shadow:0 24px 60px rgba(255,86,11,.14)}
  .pkg.premium{background:linear-gradient(160deg,var(--navy) 0%,#04111f 70%,#0a1828 100%);color:#fff;border:1px solid rgba(0,212,255,.18)}
  .pkg.premium:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,212,255,.20)}
  .pkg .pkg-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;padding:6px 14px;border-radius:999px;width:fit-content;position:relative;z-index:1}
  .pkg.lite .pkg-tag{background:rgba(255,86,11,.08);color:var(--orange)}
  .pkg.premium .pkg-tag{background:rgba(0,212,255,.12);color:var(--cyan);border:1px solid rgba(0,212,255,.30)}
  .pkg h3{font-family:"Inter","Arial Black",sans-serif;font-size:42px;font-weight:900;letter-spacing:-.04em;line-height:.95;margin:18px 0 0;position:relative;z-index:1}
  .pkg.lite h3{color:var(--text)}
  .pkg.premium h3{background:linear-gradient(135deg,#fff 0%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .pkg .pkg-sub{margin-top:10px;font-size:14px;line-height:1.55;position:relative;z-index:1}
  .pkg.lite .pkg-sub{color:var(--muted)}
  .pkg.premium .pkg-sub{color:#9fb2c8}
  .pkg .pkg-price{margin-top:28px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;position:relative;z-index:1}
  .pkg .pkg-price .lbl{font-size:13px;font-weight:600;letter-spacing:.02em}
  .pkg.lite .pkg-price .lbl{color:var(--muted)}
  .pkg.premium .pkg-price .lbl{color:#9fb2c8}
  .pkg .pkg-price .num{font-family:"Inter","Arial Black",sans-serif;font-weight:900;font-size:clamp(40px,8vw,56px);letter-spacing:-.05em;line-height:1}
  .pkg.lite .pkg-price .num{background:linear-gradient(160deg,var(--orange),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
  .pkg.premium .pkg-price .num{background:linear-gradient(160deg,var(--cyan),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .pkg .pkg-price .unit{font-size:18px;font-weight:700;letter-spacing:-.01em}
  .pkg.lite .pkg-price .unit{color:var(--text)}
  .pkg.premium .pkg-price .unit{color:#fff}
  .pkg ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
  .pkg ul li{font-size:14px;display:flex;align-items:flex-start;gap:10px;line-height:1.5}
  .pkg ul li::before{content:"✓";flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900}
  .pkg.lite ul li{color:var(--text)}
  .pkg.lite ul li::before{background:rgba(255,86,11,.12);color:var(--orange)}
  .pkg.premium ul li{color:#e4e4e8}
  .pkg.premium ul li::before{background:rgba(0,212,255,.18);color:var(--cyan)}
  .pkg .pkg-cta{margin-top:32px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;position:relative;z-index:1;transition:transform .2s, background .2s, box-shadow .2s;white-space:nowrap}
  .pkg.lite .pkg-cta{background:var(--orange);color:#fff;box-shadow:0 12px 28px rgba(255,86,11,.34)}
  .pkg.lite .pkg-cta:hover{background:var(--red);transform:translateY(-2px)}
  .pkg.premium .pkg-cta{background:var(--cyan);color:var(--navy);box-shadow:0 12px 28px rgba(0,212,255,.30)}
  .pkg.premium .pkg-cta:hover{transform:translateY(-2px);background:#fff}

  /* Lead form */
  .rate-form{max-width:920px;margin:48px auto 0;background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px;box-shadow:0 24px 60px rgba(10,37,64,.06)}
  .rate-form h3{font-family:"Inter","Arial Black",sans-serif;font-size:28px;font-weight:900;letter-spacing:-.02em;color:var(--text);margin:0}
  .rate-form .form-sub{font-size:14px;color:var(--muted);margin-top:8px}
  .rate-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
  .rate-form .form-field{display:flex;flex-direction:column;gap:6px}
  .rate-form .form-field.full{grid-column:1 / -1}
  .rate-form .form-field label{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em}
  .rate-form .form-field input{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font:inherit;color:var(--text);transition:border-color .2s, background .2s}
  .rate-form .form-field input:focus{outline:none;border-color:var(--orange);background:#fff}
  .budget-group{margin-top:24px}
  .budget-group .label{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
  .budget-group .label .req{color:var(--orange);font-style:normal;margin-left:2px}
  .budget-group.error .label{color:var(--red)}
  .budget-group.error .budget-chip{border-color:rgba(255,86,11,.55)}
  .budget-group .budget-error-msg{display:none;margin-top:8px;font-size:13px;color:var(--red);font-weight:600}
  .budget-group.error .budget-error-msg{display:block}
  .rate-form label .req,
  .contact-form label .req{color:var(--orange);font-style:normal;margin-left:2px}
  .budget-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  @media (max-width:760px){.budget-grid{grid-template-columns:1fr 1fr}.rate-form .form-row{grid-template-columns:1fr}}
  .budget-chip{display:flex;align-items:center;gap:10px;background:var(--soft);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .2s}
  .budget-chip input{position:absolute;opacity:0;pointer-events:none}
  .budget-chip .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;flex-shrink:0;transition:all .2s}
  .budget-chip .box::after{content:"";width:10px;height:10px;border-radius:3px;background:var(--orange);transform:scale(0);transition:transform .15s}
  .budget-chip .v{font-weight:700;font-size:15px;color:var(--text);white-space:nowrap}
  .budget-chip:hover{border-color:var(--orange);background:#fff}
  .budget-chip:has(input:checked){background:rgba(255,86,11,.06);border-color:var(--orange);box-shadow:0 8px 20px rgba(255,86,11,.12)}
  .budget-chip:has(input:checked) .box{border-color:var(--orange)}
  .budget-chip:has(input:checked) .box::after{transform:scale(1)}
  .rate-form .submit-row{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:10px}
  .rate-form button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 36px;border-radius:999px;background:var(--orange);color:#fff;font-weight:800;font-size:16px;box-shadow:0 14px 32px rgba(255,86,11,.32);transition:all .2s;border:0;cursor:pointer;min-width:280px}
  .rate-form button[type="submit"]:hover{background:var(--red);transform:translateY(-2px)}
  .rate-form .form-meta{font-size:12px;color:var(--muted)}

  /* Portfolio achievement */
  .port{background:linear-gradient(180deg,#fff,#fff7f2);padding:140px 0}
  .port-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .port .num-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .nb{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;min-height:160px;display:flex;flex-direction:column;justify-content:space-between}
  .nb .big{font-family:"Inter","Arial Black",sans-serif;font-size:56px;font-weight:900;letter-spacing:-.04em;line-height:1}
  .nb .big em{font-style:normal;background:linear-gradient(90deg,var(--orange),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
  .nb .lbl{font-size:13px;color:var(--muted);font-weight:600;margin-top:8px}
  .nb.hl{background:linear-gradient(150deg,var(--navy),#04111f);color:#fff;border-color:transparent}
  .nb.hl .big em{background:linear-gradient(90deg,var(--orange),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
  .nb.hl .lbl{color:#9fb2c8}
  @media (max-width:880px){.port-grid{grid-template-columns:1fr}}

  /* 3M Final Stack */
  .stack{background:var(--navy);color:#fff;padding:140px 0}
  .stack .h2{color:#fff}
  .stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
  .scol{background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:24px;padding:38px 30px;min-height:480px;transition:all .3s var(--ease)}
  .scol:hover{background:rgba(0,212,255,.06);border-color:var(--cyan);transform:translateY(-4px)}
  .scol .letter{font-family:"Inter","Arial Black",sans-serif;font-size:64px;font-weight:900;color:var(--orange);letter-spacing:-.04em;line-height:.9}
  .scol h3{font-family:"Inter","Arial Black",sans-serif;font-size:22px;font-weight:900;margin:6px 0 24px;text-transform:uppercase;letter-spacing:-.01em}
  .scol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .scol ul li{padding:12px 16px;background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:10px;font-size:13px;font-weight:500;color:#dde6ef;transition:all .2s var(--ease)}
  .scol ul li:hover{background:rgba(0,212,255,.08);border-color:var(--cyan);color:#fff}
  @media (max-width:980px){.stack-grid{grid-template-columns:1fr}}

  /* Colors palette */
  .palette{background:#fff;padding:120px 0}
  .sw-group{display:grid;grid-template-columns:1fr;gap:16px;max-width:780px;margin:48px auto 0}
  .sw-row{display:grid;grid-template-columns:120px 7fr 3fr;gap:10px;align-items:stretch}
  .sw-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;padding:0 2px}
  .sw{border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;min-height:118px;position:relative;overflow:hidden}
  .sw .ratio{font-size:11px;font-weight:800;letter-spacing:.18em;opacity:.7}
  .sw .hex{font-size:15px;font-weight:900;letter-spacing:.02em;font-family:"Inter","Arial Black",monospace}
  .sw .nm{font-size:12px;font-weight:600;opacity:.92;margin-top:2px}
  .sw.s-orange{background:var(--orange)}
  .sw.s-red{background:var(--red)}
  .sw.s-navy{background:var(--navy)}
  .sw.s-cyan{background:var(--cyan);color:var(--navy)}
  .sw.s-white{background:#fff;color:var(--navy);border:1px solid var(--line)}
  .sw.s-soft{background:var(--soft);color:var(--navy);border:1px solid var(--line)}
  .mood{margin:30px auto 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:780px}
  .mood span{padding:8px 16px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:13px;font-weight:700;letter-spacing:.04em}
  @media (max-width:560px){.sw-row{grid-template-columns:auto 1fr 1fr}.sw-label{writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 2px}}

  /* CTA Contact */
  .contact{background:linear-gradient(180deg,#fff,var(--soft));text-align:center;padding:140px 0}
  .contact .h2{margin-bottom:18px}
  .contact .lead{margin:0 auto}
  .contact .cta-row{justify-content:center;margin-top:38px}
  .contact-info{margin-top:48px;display:flex;flex-wrap:wrap;gap:36px;justify-content:center;font-size:14px;color:var(--muted)}
  .contact-info b{color:var(--text);font-weight:800;display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}

  footer{background:#000;color:#a1a1a6;font-size:14px;padding:80px 0 28px}
  footer .container{display:block;padding:0 22px}
  footer a{color:#a1a1a6;transition:color .2s ease;text-decoration:none}
  footer a:hover{color:#fff}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.10)}
  .foot-brand{display:flex;flex-direction:column;gap:14px;max-width:340px}
  .foot-brand-row{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:16px;letter-spacing:.02em}
  .foot-brand-row .mark{width:28px;height:28px;display:grid;place-items:center}
  .foot-brand-row .mark img{width:100%;height:100%;object-fit:contain}
  .foot-brand p{font-size:14px;line-height:1.6;color:#86868b;margin:0}
  .foot-col h4{font-family:"Inter","Arial Black",sans-serif;font-size:12px;font-weight:800;letter-spacing:.18em;color:#fff;text-transform:uppercase;margin:0 0 18px}
  .foot-col a{display:block;padding:6px 0;font-size:14px}
  .foot-bottom{padding-top:28px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#6e6e73;flex-wrap:wrap;gap:14px}
  .foot-social{display:flex;gap:18px}
  .foot-social a{color:#86868b;font-size:13px}
  .foot-social a:hover{color:#fff}
  @media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px 24px}.foot-brand{grid-column:1 / -1}}
  @media (max-width:520px){.foot-grid{grid-template-columns:1fr}.foot-brand{grid-column:auto}}

  /* Reveal */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}

  /* i18n */
  [data-i18n][data-lang]{display:none}
  body.lang-en [data-i18n][data-lang="en"]{display:inline}
  body.lang-th [data-i18n][data-lang="th"]{display:inline}
  [data-i18n-block][data-lang]{display:none}
  body.lang-en [data-i18n-block][data-lang="en"]{display:block}
  body.lang-th [data-i18n-block][data-lang="th"]{display:block}

  /* ===== Rich Contact Section (form + channels) ===== */
  .contact{background:linear-gradient(180deg,#fff,var(--soft));text-align:left;padding:140px 0}
  .contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;max-width:1180px;margin:0 auto}
  .contact-left .h2{margin-top:18px}
  .contact-left .lead{margin:20px 0 0;max-width:480px}
  .contact-left .lead-em{color:var(--orange)}
  .contact-channels{display:flex;flex-direction:column;gap:14px;margin-top:36px}
  .contact-channels a{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:transform .2s ease, border-color .2s, box-shadow .2s;text-decoration:none}
  .contact-channels a:hover{transform:translateX(4px);border-color:var(--orange);box-shadow:0 12px 28px rgba(10,37,64,.08)}
  .contact-channels .ic{width:42px;height:42px;border-radius:12px;background:var(--orange);color:#fff;display:grid;place-items:center;flex-shrink:0}
  .contact-channels .ic svg{width:20px;height:20px}
  .contact-channels a.chan-line .ic{background:#06C755;box-shadow:0 6px 14px rgba(6,199,85,.28)}
  .contact-channels a.chan-line .ic svg{width:24px;height:24px}
  .contact-channels a.chan-line:hover{border-color:#06C755;box-shadow:0 12px 28px rgba(6,199,85,.22)}
  .contact-channels .label{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
  .contact-channels .v{font-weight:700;color:var(--text);font-size:17px;margin-top:2px}
  .contact-form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px;box-shadow:0 24px 60px rgba(10,37,64,.06)}
  .contact-form h3{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0}
  .contact-form .form-sub{font-size:14px;color:var(--muted);margin-top:8px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;min-width:0}
  .form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
  .form-field.full{grid-column:1 / -1}
  .form-field label{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em}
  .form-field input,.form-field select,.form-field textarea{width:100%;max-width:100%;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;color:var(--text);transition:border-color .2s, background .2s;font-family:inherit}
  .form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--orange);background:#fff}
  .form-field textarea{min-height:110px;resize:vertical}
  .contact-form .btn-primary{margin-top:24px;width:100%;height:52px;font-size:16px;justify-content:center;background:var(--orange-cta);box-shadow:0 12px 28px rgba(255,86,11,.32)}
  .contact-form .btn-primary:hover{background:var(--red);transform:translateY(-1px)}
  .form-meta{font-size:12px;color:var(--muted);margin-top:14px;text-align:center}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}.form-row{grid-template-columns:1fr}}
  @media (max-width:640px){
    .contact-form{padding:22px;border-radius:18px}
    .contact-form h3{font-size:22px}
    .budget-grid{grid-template-columns:1fr 1fr;gap:8px}
  }
  @media (max-width:380px){
    .contact-form{padding:16px;border-radius:14px}
    .contact-form h3{font-size:20px}
  }

  /* ===== Floating Side CTA ===== */
  .side-cta{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:80;width:120px;display:flex;flex-direction:column;gap:10px;transition:opacity .3s, transform .3s var(--ease)}
  .side-cta.is-hidden{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(40px)}

  .side-main{position:relative;display:flex;flex-direction:column;align-items:stretch;background:linear-gradient(160deg,var(--orange-cta) 0%, var(--red) 100%);color:#fff;border-radius:22px;padding:18px 12px 14px;box-shadow:0 24px 60px rgba(255,86,11,.42),0 8px 20px rgba(184,2,1,.30),inset 0 1px 0 rgba(255,255,255,.20);text-align:center;transition:transform .25s var(--ease), box-shadow .25s;text-decoration:none;overflow:hidden}
  .side-main::before{content:"";position:absolute;inset:0;border-radius:22px;background:radial-gradient(circle at 30% 0%, rgba(255,255,255,.25), transparent 50%),radial-gradient(circle at 70% 100%, rgba(0,212,255,.18), transparent 50%);pointer-events:none}
  .side-main:hover{transform:translateX(-4px) scale(1.03);box-shadow:0 32px 72px rgba(255,86,11,.55),0 14px 28px rgba(184,2,1,.36)}
  .side-cta .pulse-dot{position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.32);animation:sidePulse 1.8s ease-in-out infinite}
  @keyframes sidePulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.32)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
  .side-cta .icn{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;margin:6px auto 14px;position:relative;z-index:1}
  .side-cta .icn svg{width:24px;height:24px}
  .side-cta .kicker{font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);position:relative;z-index:1}
  .side-cta .big{font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1.05;margin-top:6px;color:#fff;position:relative;z-index:1}
  body.lang-th .side-cta .big{font-size:19px;line-height:1.2;letter-spacing:0}
  .side-cta .free{display:inline-block;margin:10px auto 0;font-size:10px;font-weight:700;letter-spacing:.08em;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28);position:relative;z-index:1}
  .side-cta .arrow-down{margin-top:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.03em;white-space:nowrap;color:rgba(255,255,255,.92);position:relative;z-index:1;padding-top:12px;border-top:1px solid rgba(255,255,255,.20)}
  .side-cta .arrow-down svg{width:14px;height:14px;animation:bobDown 1.6s ease-in-out infinite}
  @keyframes bobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

  /* Quick-action call + LINE row */
  .side-quick{display:flex;gap:8px}
  .side-quick-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:64px;border-radius:16px;text-decoration:none;color:#fff;font-weight:800;letter-spacing:.02em;font-size:11px;transition:transform .2s var(--ease), box-shadow .2s, filter .2s}
  .side-quick-btn svg{width:22px;height:22px}
  .side-quick-btn:hover{transform:translateY(-2px) scale(1.04)}
  .side-call{background:linear-gradient(160deg,var(--orange-cta),var(--red));box-shadow:0 12px 24px rgba(255,86,11,.38)}
  .side-call:hover{box-shadow:0 16px 32px rgba(255,86,11,.55)}
  .side-line{background:#06C755;box-shadow:0 12px 24px rgba(6,199,85,.40)}
  .side-line:hover{box-shadow:0 16px 32px rgba(6,199,85,.55);background:#05a046}

  @media (max-width:1200px){
    .side-cta{top:auto;bottom:16px;right:16px;left:16px;width:auto;transform:none;flex-direction:row;gap:8px;align-items:stretch}
    .side-cta.is-hidden{transform:translateY(120%)}
    footer{padding-bottom:calc(104px + env(safe-area-inset-bottom))} /* reserve space for the fixed bottom-bar so footer copyright isn't hidden behind it */
    .side-main{flex-direction:row;align-items:center;padding:10px 14px;gap:12px;text-align:left;border-radius:16px;flex:1;min-width:0}
    .side-main:hover{transform:none}
    .side-cta .icn{margin:0;width:40px;height:40px;flex-shrink:0;border-radius:10px}
    .side-cta .icn svg{width:20px;height:20px}
    .side-cta .pulse-dot{top:6px;right:6px;width:8px;height:8px}
    .side-cta .kicker{display:none}
    .side-cta .big{font-size:14px;margin:0;flex:1;min-width:0}
    body.lang-th .side-cta .big{font-size:13px}
    .side-cta .free{display:none}
    .side-cta .arrow-down{display:none}
    .side-quick{flex-direction:row;flex-shrink:0;gap:8px}
    .side-quick-btn{height:auto;align-self:stretch;width:54px;flex-direction:column;font-size:10px;gap:2px;border-radius:16px;padding:8px 4px}
    .side-quick-btn svg{width:20px;height:20px}
  }
  @media (max-width:520px){
    .side-cta .big br{display:none}
    .side-cta .big{font-size:13px;line-height:1.15}
    .side-quick-btn{width:46px;font-size:9px}
    .side-quick-btn svg{width:18px;height:18px}
  }

  /* ===== Scroll Reveal Animations ===== */
  html.reveal-ready [data-reveal]{
    opacity:0;
    transform:translate3d(0,28px,0);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  html.reveal-ready [data-reveal="left"]{ transform:translate3d(-48px,0,0); }
  html.reveal-ready [data-reveal="right"]{ transform:translate3d(48px,0,0); }
  html.reveal-ready [data-reveal="fade"]{ transform:none; transition-duration:1s; }
  html.reveal-ready [data-reveal].is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  @media (prefers-reduced-motion: reduce){
    html.reveal-ready [data-reveal]{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }

  /* =====================================================================
     v3 UPGRADE LAYER — appended overrides (perf/visual/motion/a11y)
     ===================================================================== */

  /* --- A11y: visible focus rings + contrast-safe orange text --- */
  :root{ --orange-text:#D8400A; --orange-cta:#FF560B; } /* ponytail: --orange-cta aliased to vivid brand --orange by request (was #CC4410 deep). CTAs now read vivid; white text ~3.2:1 — passes UI 3:1, under AA 4.5 = accepted brand tradeoff. Revert to #CC4410 for strict AA. */
  :where(a,button,input,select,textarea,[tabindex],[role="tab"]):focus-visible{
    outline:2px solid var(--orange); outline-offset:3px; border-radius:8px;
  }
  .hero :where(a,button):focus-visible,
  .boost-bg :where(a,button):focus-visible,
  .blast-bg :where(a,button):focus-visible,
  .sight :where(a,button):focus-visible{ outline-color:var(--cyan); }
  .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ outline:none; }
  /* darker orange ONLY for small text (passes WCAG AA on light bg) */
  .eyebrow, .nav-link.nav-active, .form-field .req, .pkg-tag.lite{ color:var(--orange-text); }

  /* --- Visual: gradient-text restraint (solid where it read as try-hard) --- */
  .pkg.lite .pkg-price .num,.pkg.premium .pkg-price .num{
    -webkit-text-fill-color:initial;background:none;color:var(--orange)}
  .pkg.custom .pkg-price .num{ -webkit-text-fill-color:initial;background:none;color:var(--amber)}
  .pkg.premium h3{ -webkit-text-fill-color:initial;background:none;color:#fff}
  .pkg.custom h3{ -webkit-text-fill-color:initial;background:none;color:#fff}
  .feat.build-bg .stage-eyebrow,.feat.boost-bg .stage-eyebrow,.feat.blast-bg .stage-eyebrow{
    -webkit-text-fill-color:initial;background:none;color:var(--orange)}

  /* --- Visual: editorial serif accent (the font we already load) --- */
  .service-eyebrow, .contact-eyebrow{ }
  .feat .copy h2 em, .sight .swap em, .pain h2 em{
    font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:.01em}

  /* --- Visual: faint film-grain texture over everything --- */
  body::after{
    content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @media (prefers-reduced-motion:reduce){ body::after{display:none} }

  /* --- Motion: hero staggered entrance (was dead-static on load) --- */
  .hero-pill,.hero-headline,.hero-sub,.hero-cta{opacity:1}
  html.reveal-ready .hero-in .hero-pill,
  html.reveal-ready .hero-in .hero-headline,
  html.reveal-ready .hero-in .hero-sub,
  html.reveal-ready .hero-in .hero-cta{opacity:0;transform:translateY(18px);animation:heroIn .7s var(--ease) forwards}
  html.reveal-ready .hero-in .hero-headline{animation-delay:.09s}
  html.reveal-ready .hero-in .hero-sub{animation-delay:.18s}
  html.reveal-ready .hero-in .hero-cta{animation-delay:.27s}
  @keyframes heroIn{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    html.reveal-ready .hero-in :is(.hero-pill,.hero-headline,.hero-sub,.hero-cta){opacity:1;transform:none;animation:none}
  }

  /* --- Motion: platform logos → seamless marquee --- */
  .plat-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .plat-marquee .plat-row{flex-wrap:nowrap;width:max-content;animation:platScroll 34s linear infinite}
  .plat-marquee:hover .plat-row{animation-play-state:paused}
  @keyframes platScroll{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.plat-marquee .plat-row{animation:none}.plat-marquee{-webkit-mask-image:none;mask-image:none}}

  /* --- Conversion: social-proof band (stats + logo wall) --- */
  .proof{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0}
  .proof-stats{display:flex;justify-content:center;gap:clamp(28px,6vw,90px);flex-wrap:wrap;text-align:center}
  .proof-stats .s .n{font-family:"Inter","Arial Black",sans-serif;font-size:clamp(36px,5vw,56px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--navy)}
  .proof-stats .s .n b{color:var(--orange);font-weight:900}
  .proof-stats .s .l{font-size:13px;color:var(--muted);font-weight:600;margin-top:8px;letter-spacing:.02em}
  .proof-sample{display:block;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.7;margin-top:30px}
  .trustwall{margin-top:34px;text-align:center}
  .trustwall .tw-label{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
  .tw-logos{display:flex;justify-content:center;align-items:center;gap:clamp(20px,5vw,56px);flex-wrap:wrap;opacity:.75}
  .tw-logos span{font-family:"Inter",sans-serif;font-weight:800;font-size:clamp(15px,1.6vw,20px);color:var(--navy);opacity:.55;letter-spacing:-.01em}
  /* Our clients → single-row seamless logo marquee (reuses .plat-marquee shell + platScroll keyframe) */
  .tw-marquee{margin-top:8px}
  .tw-track{display:flex;flex-wrap:nowrap;align-items:center;width:max-content;gap:18px;padding:8px 0;animation:platScroll 50s linear infinite}
  .tw-marquee:hover .tw-track{animation-play-state:paused}
  .plat-marquee.is-paused .tw-track{animation-play-state:paused}
  .tw-card{flex:0 0 auto;display:grid;place-items:center;padding:0 26px}
  .tw-card img{max-height:88px;max-width:290px;width:auto;object-fit:contain;display:block;border-radius:12px}
  @media (prefers-reduced-motion:reduce){.tw-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

  /* --- Conversion: testimonials --- */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1140px;margin:44px auto 0}
  .quote{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 28px;box-shadow:0 16px 40px rgba(10,37,64,.06);display:flex;flex-direction:column;gap:16px}
  .quote-stars{color:var(--amber);font-size:16px;letter-spacing:2px}
  .quote-text{font-size:16px;line-height:1.6;color:var(--text);font-weight:500}
  .quote-text b{color:var(--orange-text)}
  .quote-who{display:flex;align-items:center;gap:12px;margin-top:auto}
  .quote-ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;flex-shrink:0}
  .quote-name{font-weight:800;font-size:14px;color:var(--text)}
  .quote-role{font-size:12px;color:var(--muted)}
  @media (max-width:880px){.quotes{grid-template-columns:1fr;max-width:460px}}

  /* --- Rate view toggle (By package / By service) --- */
  .rate-toggle{display:flex;width:max-content;max-width:92vw;margin:6px auto 30px;gap:4px;padding:5px;background:rgba(10,37,64,.07);border-radius:999px}
  .rate-toggle-btn{border:0;background:none;font:inherit;font-weight:800;font-size:15px;padding:11px 26px;border-radius:999px;color:var(--muted);cursor:pointer;transition:color .2s,background .2s,box-shadow .2s;white-space:nowrap}
  .rate-toggle-btn.is-active{background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(10,37,64,.14)}
  @media (hover:hover){.rate-toggle-btn:not(.is-active):hover{color:var(--navy)}}
  @media (max-width:520px){.rate-toggle-btn{padding:10px 18px;font-size:14px}}

  /* --- Service-type package cards (clean white, platform-tagged) --- */
  .pkg.svc{background:#fff;border:1px solid var(--line);color:var(--text);box-shadow:0 14px 40px rgba(10,37,64,.05)}
  .pkg.svc::before{display:none}
  @media (hover:hover){.pkg.svc:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(10,37,64,.13);border-color:rgba(255,86,11,.35)}}
  .pkg.svc h3{color:var(--orange);font-size:32px;-webkit-text-fill-color:initial;background:none;margin:14px 0 6px}
  .pkg.svc .pkg-sub{color:var(--muted)}
  .pkg.svc ul{margin-top:4px}
  .pkg.svc ul li{color:var(--text)}
  .pkg.svc ul li::before{background:rgba(255,86,11,.14);color:var(--orange)}
  .pkg.svc .pkg-price .lbl{color:var(--muted)}
  .pkg.svc .pkg-price .num{font-size:36px;color:var(--orange);-webkit-text-fill-color:initial;background:none;margin-left:6px}
  .pkg.svc .pkg-cta{background:var(--orange);color:#fff;box-shadow:0 12px 28px rgba(255,86,11,.34)}
  @media (hover:hover){.pkg.svc .pkg-cta:hover{background:var(--red);transform:translateY(-2px);box-shadow:0 16px 32px rgba(255,86,11,.42)}}
  /* platform-coloured tags */
  .pkg.svc .pkg-tag{border:0}
  /* service-card platform logos (replaces the old text tags) */
  .pkg.svc .pkg-tag.svc-logo{background:none;border:0;padding:0;gap:8px;border-radius:0;align-items:center}
  .svc-logo svg{width:34px;height:34px;display:block;flex:0 0 auto}
  .svc-logo img{height:34px;width:auto;max-width:60px;display:block;flex:0 0 auto;object-fit:contain}
  .svc-logo-multi{flex-wrap:wrap;gap:5px}
  .svc-logo-multi svg{width:26px;height:26px}
  .svc-logo-multi img{height:26px}

  /* --- v2-style custom cursor (dot + lagging ring) --- */
  @media (hover:hover) and (pointer:fine){
    body{cursor:none}
    body :is(input,textarea,select){cursor:auto}
  }
  .cur-dot,.cur-out{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%)}
  .cur-dot{width:7px;height:7px;background:#fff;mix-blend-mode:difference}
  .cur-out{width:36px;height:36px;border:1.5px solid rgba(255,86,11,.5);z-index:9999;transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
  body.cur-hover .cur-out{width:58px;height:58px;background:rgba(255,86,11,.09);border-color:var(--orange)}
  body.cur-hover .cur-dot{transform:translate(-50%,-50%) scale(1.9)}
  @media (hover:none),(pointer:coarse){.cur-dot,.cur-out{display:none}}
  @media (prefers-reduced-motion:reduce){.cur-dot,.cur-out{display:none}}

  /* --- Animated particle background, scoped to the hero --- */
  .hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85;-webkit-mask-image:radial-gradient(135% 105% at 62% 18%,#000 45%,transparent 92%);mask-image:radial-gradient(135% 105% at 62% 18%,#000 45%,transparent 92%)}

  /* off-screen pause: actually stops the aurora/marquee child+pseudo animations */
  .sight.is-paused::before,.sight.is-paused::after,.sight.is-paused .sight-stars,
  .plat-marquee.is-paused .plat-row{animation-play-state:paused}