:root{
  --stage-grad:linear-gradient(90deg,#50a4f7 0%,#4c73f3 22%,#5849f1 42%,#6e68e1 62%,#84a3ca 100%);
  --black:#000001;
  --dark:#121314;
  --card:#111113;
  --card-border:rgba(255,255,255,.08);
  --grey:#7b7a81;
  --text-grey:#8a8a90;
  --purple:#643bfa;
  --blue:#14baff;
  --red:#e03940;
  --btn-grad:linear-gradient(169deg,#643bfa 0%,#14baff 100%);
  --num-grad:linear-gradient(90deg,#2f80ff 0%,#5b4cff 55%,#8a3dff 100%);
  --head-grad-dark:linear-gradient(90deg,#9b9ba3 0%,#c9cfdb 55%,#7f9cc4 100%);
  --head-grad-light:linear-gradient(90deg,#55555b 0%,#6f7684 45%,#7f9cc4 100%);
  --container:1100px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#000;background:#fff;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.grad-dark,.grad-light,.grad-num{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.grad-dark{background-image:var(--head-grad-dark)}
.grad-light{background-image:var(--head-grad-light)}
.grad-num{background-image:var(--num-grad)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:600;border-radius:100px;transition:transform .25s ease,box-shadow .25s ease,opacity .25s}
.btn-grad{background:var(--btn-grad);color:#fff}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(100,59,250,.45)}
.btn-white{background:#fff;color:#000}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.18)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.from-r{transform:translateX(56px)}
.reveal.from-l{transform:translateX(-56px)}
.reveal.in{opacity:1;transform:none}
@media (max-width:820px){
  .reveal,.reveal.from-r,.reveal.from-l{transform:translateY(18px);transition-duration:.5s}
}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ========== HEADER ========== */
.header{position:fixed;top:0;left:0;right:0;z-index:50;height:66px;background:#000;border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease}
.header.scrolled{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom-color:rgba(255,255,255,.08)}
.header-bar{max-width:var(--container);height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;position:relative}
.header .logo img{height:36px;width:auto}
.nav{position:absolute;left:50%;transform:translateX(-50%);display:flex}
.nav a{font-size:16px;font-weight:600;color:#fff;padding:13px 21px;transition:opacity .2s}
.nav a:hover{opacity:.7}
.header .btn{font-size:17px;padding:0 14px;height:32px}
.menu-toggle{display:none}

/* ===== Mega menu (desktop, Apple-style) ===== */
.header.mega-open{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.header-bar{z-index:2}
.nav a.has-mega.is-current{opacity:1}
/* glass panel: covers the header bar too, so header + menu read as one sheet of glass */
.mega{position:absolute;left:0;right:0;top:0;z-index:1;height:66px;overflow:hidden;opacity:0;pointer-events:none;
  background:rgba(14,14,18,.58);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.25);
  transition:height .5s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.mega.is-open{opacity:1;pointer-events:auto}
.mega-inner{max-width:var(--container);margin:0 auto;padding:102px 20px 76px 20px;display:flex;gap:88px}
.mega-col{min-width:0}
.mega-label{display:block;font-size:12px;font-weight:500;color:#86868b;margin-bottom:14px;letter-spacing:.1px}
.mega-col a{display:block;color:#e8e8ed;transition:color .2s;opacity:0;transform:translateY(-6px)}
.mega-col a:hover{color:#fff}
.mega-col.big a{font-size:24px;line-height:1.17;font-weight:600;letter-spacing:-.3px;padding:6px 0}
.mega-col.big a:hover{background:var(--stage-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mega-col:not(.big) a{font-size:12px;line-height:1.35;font-weight:600;padding:6px 0}
.mega-col .mega-label{opacity:0;transform:translateY(-6px)}
.mega.items-in .mega-col a,.mega.items-in .mega-label{opacity:1;transform:none;
  transition:opacity .35s ease calc(var(--i)*22ms + 80ms),transform .35s ease calc(var(--i)*22ms + 80ms),color .2s}
.mega-scrim{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.mega-scrim.is-open{opacity:1;visibility:visible}
.m-drawer{display:none}

/* ========== HERO ========== */
.hero{position:relative;height:947px;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.hero::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1.6px);
  background-size:56px 56px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,rgba(0,0,0,.35) 80%);
  mask-image:radial-gradient(ellipse at center,#000 30%,rgba(0,0,0,.35) 80%);
  animation:twinkle 6s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;left:50%;top:44%;width:1500px;height:1500px;transform:translate(-50%,-50%);pointer-events:none;
  background:
   radial-gradient(circle,transparent 199px,rgba(41,151,255,.15) 199px,rgba(41,151,255,.15) 200px,transparent 200px),
   radial-gradient(circle,transparent 349px,rgba(255,255,255,.06) 349px,rgba(255,255,255,.06) 350px,transparent 350px),
   radial-gradient(circle,transparent 499px,rgba(255,255,255,.05) 499px,rgba(255,255,255,.05) 500px,transparent 500px),
   radial-gradient(circle,transparent 699px,rgba(255,255,255,.04) 699px,rgba(255,255,255,.04) 700px,transparent 700px);
  animation:pulse 9s ease-in-out infinite}
@keyframes twinkle{from{opacity:.65}to{opacity:1}}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.03)}}
.hero-inner{position:relative;z-index:2;padding-top:66px}
.eyebrow{display:block;font-size:13px;font-weight:500;color:var(--purple);margin-bottom:26px;letter-spacing:.2px}
.hero h1{font-size:90px;line-height:100px;font-weight:700;letter-spacing:-1px;max-width:780px;margin:0 auto}
.hero p{font-size:31px;line-height:31px;color:var(--grey);max-width:800px;margin:26px auto 0}
.hero .hero-sub{transition-delay:.75s}
.hero .hero-ctas.reveal{transition-delay:.9s}

/* Hero headline: word reveal + rotating word */
.hero .hero-title{--lh:1.12em;line-height:var(--lh);--hero-grad:linear-gradient(90deg,#d4d5d7 0%,#b3b6ba 25%,#9da1a6 45%,#95a1b1 70%,#8aa4c6 100%);--rot-grad:var(--stage-grad)}
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em}
.hero-title .wi{display:inline-block;background-image:var(--hero-grad);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transform:translateY(105%);opacity:0;filter:blur(6px);
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s ease,filter .9s ease;transition-delay:calc(.12s + var(--i,0) * .09s)}
.hero.hero-in .wi{transform:none;opacity:1;filter:none}
.br-m{display:none}
.nw{white-space:nowrap}
.rotator{position:relative;display:inline-block;vertical-align:top;height:var(--lh);overflow:hidden;
  transition:width .6s cubic-bezier(.65,0,.35,1),opacity .9s ease .55s;opacity:0}
.hero.hero-in .rotator{opacity:1}
.rot-word{position:absolute;top:0;left:50%;translate:-50% 0;white-space:nowrap;line-height:var(--lh);padding:0 .04em;
  background-image:var(--rot-grad);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transform:translateY(100%);opacity:0;transition:transform .65s cubic-bezier(.65,0,.35,1),opacity .5s ease}
.rot-word.is-active{transform:none;opacity:1}
.rot-word.is-leaving{transform:translateY(-100%);opacity:0}

/* Animated gradient glow */
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none}
.hero-glow i{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.hero-glow i:nth-child(1){width:900px;height:900px;left:-12%;top:-30%;background:radial-gradient(circle,rgba(100,59,250,.55) 0%,rgba(100,59,250,0) 65%);animation:drift1 16s ease-in-out infinite alternate}
.hero-glow i:nth-child(2){width:800px;height:800px;right:-14%;bottom:-35%;background:radial-gradient(circle,rgba(20,186,255,.45) 0%,rgba(20,186,255,0) 65%);animation:drift2 19s ease-in-out infinite alternate}
.hero-glow i:nth-child(3){width:620px;height:620px;left:38%;top:30%;background:radial-gradient(circle,rgba(160,80,255,.35) 0%,rgba(160,80,255,0) 65%);animation:drift3 22s ease-in-out infinite alternate}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(18%,12%) scale(1.15)}100%{transform:translate(32%,4%) scale(.95)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-22%,-10%) scale(1.1)}100%{transform:translate(-36%,-22%) scale(1)}}
@keyframes drift3{0%{transform:translate(0,0) scale(.9)}50%{transform:translate(-30%,-25%) scale(1.15)}100%{transform:translate(20%,-10%) scale(1)}}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:44px}
.hero-ctas .btn{font-size:17px;padding:0 20px;height:38px}
.link-arrow{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;color:#fff;text-decoration:underline;text-underline-offset:4px;transition:opacity .2s}
.link-arrow:hover{opacity:.7}

/* ========== PROBLEM (67%) ========== */
.problem{height:655px;background:#fff;display:flex;align-items:center}
.problem .container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.big-num{font-size:150px;line-height:1;font-weight:800;letter-spacing:-3px;display:inline-block}
.problem h3{font-size:31px;line-height:1.1;font-weight:600;margin-top:14px;max-width:470px}
.problem .muted{font-size:19px;color:var(--text-grey);margin-top:24px;max-width:500px;line-height:1.1}
.problem h4{font-size:34px;font-weight:700;margin-bottom:46px}
.x-list{list-style:none}
.x-list li{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--text-grey);margin-bottom:46px}
.x-list li::before{content:"\2715";color:var(--red);font-weight:700;font-size:20px}
.problem .closing{font-size:23px;font-weight:700;line-height:1.1;max-width:480px}

/* ========== ABOUT ========== */
.about{height:887px;background:var(--black);display:flex;align-items:center;text-align:center;color:#fff}
.label{display:block;font-size:12px;font-weight:500;color:var(--purple);text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px}
.about h2{font-size:90px;line-height:100px;font-weight:700;letter-spacing:-1px}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.value{height:212px;background:var(--card);border:1px solid var(--card-border);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;transition:transform .3s ease,border-color .3s}
.value:hover{transform:translateY(-6px);border-color:rgba(100,59,250,.5)}
.value .ico{font-size:24px;line-height:1}
.value span{font-size:20px;font-weight:600;line-height:1.1}

/* ========== MISSION ========== */
.mission{height:751px;background:linear-gradient(160deg,#d9cafe 0%,#fff 53%);display:flex;align-items:center;justify-content:center}
.mission-cards{display:flex;gap:56px;justify-content:center}
.m-card{width:400px;min-height:500px;border-radius:24px;padding:60px 44px}
.m-card small{display:block;font-size:20px;font-weight:500;margin-bottom:16px}
.m-card p{font-size:44px;line-height:1.3;font-weight:700;letter-spacing:-.3px}
.m-card.light{background:#f1f1f1;color:#000}
.m-card.light small{color:#6c6c72}
.m-card.dark{background:#000;color:#fff}
.m-card.dark small{color:#fff}

/* ========== DIFFERENCE ========== */
.difference{height:1073px;background:var(--black);color:#fff;display:flex;align-items:center;text-align:center}
.difference h2{font-size:90px;line-height:100px;font-weight:700;letter-spacing:-1px}
.difference .sub{font-size:31px;color:var(--grey);margin-top:12px}
.stages{display:flex;align-items:center;gap:20px;margin-top:64px}
.stage{flex:1;height:212px;background:var(--card);border:1px solid var(--card-border);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:transform .3s ease}
.stage:hover{transform:translateY(-6px)}
.stage small{font-size:15px;font-weight:600;color:#5b6dff;text-transform:uppercase;letter-spacing:.3px}
.stage strong{font-size:28px;font-weight:600}
.stage.final{flex:1.06;background:linear-gradient(135deg,#d7c9ff 0%,#fff 48%,#cdeefe 100%);border:none}
.stage.final strong{color:#000;font-size:24px}
.stage.final small{color:#5b6dff}
.arrow{font-size:28px;color:var(--grey);flex:none}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px;text-align:left;padding:0 24px}
.step .n{font-size:60px;font-weight:800;color:#5d5d63;line-height:1;letter-spacing:-1px}
.step h5{font-size:22px;font-weight:700;text-transform:uppercase;margin:28px 0 10px;letter-spacing:.3px}
.step p{font-size:17px;color:#6c6c72;line-height:1.2;max-width:290px}
.step .when{font-size:19px;font-weight:700;color:#fff;margin-top:22px;display:block}

/* ========== AI COMPARISON ========== */
.compare{height:751px;background:var(--dark);color:#fff;display:flex;align-items:center;text-align:center}
.compare h2{font-size:58px;font-weight:700;letter-spacing:-.5px}
.compare-cards{display:flex;gap:56px;justify-content:center;margin-top:64px;text-align:left}
.c-card{width:452px;min-height:360px;background:#000;border-radius:18px;padding:48px 44px;transition:transform .3s ease}
.c-card:hover{transform:translateY(-6px)}
.c-card h6{font-size:19px;font-weight:600;margin-bottom:40px}
.c-card.before h6{color:var(--red)}
.c-card.after h6{color:#5b7cfa}
.c-card ul{list-style:none}
.c-card li{font-size:16px;font-weight:600;color:#7b7b81;margin-bottom:38px}
.c-card li:last-child{margin-bottom:0}

/* ========== SERVICES ========== */
.services{background:var(--black);color:#fff;padding:180px 0 140px;text-align:center}
.services h2{font-size:58px;font-weight:700;letter-spacing:-.5px}
.services .sub{font-size:24px;color:var(--grey);margin-top:12px}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:80px;text-align:left}
.svc{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:64px 46px;min-height:280px;transition:transform .3s ease,border-color .3s}
.svc:hover{transform:translateY(-6px);border-color:rgba(100,59,250,.5)}
.svc h3{font-size:29px;font-weight:700}
.svc p{font-size:19px;color:var(--grey);line-height:1.1;margin-top:28px;max-width:440px}
.svc .svc-link{display:inline-flex;align-items:center;gap:6px;font-family:'Poppins',sans-serif;font-size:17px;font-weight:600;color:#5b6dff;margin-top:28px;transition:gap .2s}
.svc a.svc-link:hover{gap:10px}
.svc-wide{margin-top:48px;background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:40px 46px;display:flex;align-items:center;justify-content:space-between;gap:30px;text-align:left}
.svc-wide h3{font-size:29px;font-weight:700}
.svc-wide p{font-size:19px;color:var(--grey);margin-top:14px}
.svc-wide .btn{font-size:16px;padding:0 22px;height:44px;flex:none}

/* ========== NUMBERS ========== */
.numbers{background:#fff;padding:120px 0 150px;text-align:center}
.numbers h2{font-size:90px;line-height:100px;font-weight:800;letter-spacing:-1px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px;text-align:left;padding:0 24px}
.stat .num{font-size:120px;font-weight:800;line-height:1;letter-spacing:-2px;display:inline-block}
.stat p{font-size:17px;color:#6c6c72;margin-top:22px}
.cta-final{margin-top:70px}
.cta-final h2{font-size:100px;line-height:1.1}
.cta-final .btn{font-size:20px;height:48px;padding:0 24px;margin-top:40px}

/* ========== FOOTER ========== */
.footer{position:relative;background:#000;color:#fff;padding:104px 0 56px}
.footer::before{content:"";position:absolute;top:-1px;left:calc(50% - 250px);transform:translateX(-50%);width:100px;height:51px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M0 0A50 50 0 0 1 50 50A50 50 0 0 1 100 0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat top/100% 100%}
.footer-grid{max-width:1600px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,680px) minmax(0,268px) minmax(0,268px) max-content}
.footer .logo img{height:64px;width:auto}
.footer .about-text{font-size:13px;color:#a6a6ab;line-height:1.45;margin-top:28px;max-width:470px}
.footer .copy{font-size:16px;color:#fff;margin-top:26px}
.footer h6{font-size:20px;font-weight:700;margin-bottom:4px;line-height:1.3}
.footer ul{list-style:none}
.footer li{margin:0;line-height:34px}
.footer li a{font-size:17px;color:#9e9ea4;transition:color .2s}
.footer li a:hover{color:#fff}

/* Back to top */
.to-top{position:fixed;right:28px;bottom:28px;width:36px;height:36px;border-radius:4px;background:#1a73e8;color:#fff;display:flex;align-items:center;justify-content:center;z-index:60;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}
.to-top svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero::before,.hero::after,.hero-glow i{animation:none}
  .hero-title .wi,.rotator{transition:none;transform:none;opacity:1;filter:none}
}

/* ================= RESPONSIVE ================= */
.nav-cta{display:none}
#system{scroll-margin-top:70px}
@media (hover:none){
  .value:hover,.stage:hover,.c-card:hover,.svc:hover,.btn-grad:hover,.btn-white:hover{transform:none;box-shadow:none}
}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .hero h1,.about h2,.difference h2,.numbers h2{font-size:68px;line-height:76px}
  .cta-final h2{font-size:76px}
  .hero p,.difference .sub{font-size:24px;line-height:1.3}
  .big-num{font-size:120px}
  .stat .num{font-size:92px}
  .mission-cards{padding:0 24px;gap:28px}
  .m-card{width:auto;flex:1;max-width:400px;min-height:440px;padding:48px 36px}
  .m-card p{font-size:36px}
  .compare-cards{gap:28px}
  .c-card{width:auto;flex:1;max-width:452px}
  .svc-grid{gap:28px}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:0 32px}
  .footer::before{left:40%}
}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .container{padding:0 20px}

  /* Header */
  .header{height:62px}
  .header-bar{padding:0 16px 0 20px}
  .header .logo img{height:30px}
  .header-cta{display:none}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.08);cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;z-index:2}
  .menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .35s ease}
  .menu-open .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-open .menu-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .menu-open .header{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav,.mega,.mega-scrim{display:none}
  .m-drawer{display:block;position:fixed;top:62px;left:0;right:0;bottom:0;z-index:49;background:#000;overflow:hidden;
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
  .menu-open .m-drawer{opacity:1;visibility:visible}
  .m-panel{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
    padding:18px 32px calc(24px + env(safe-area-inset-bottom))}
  .m-big{display:block;font:600 30px/1.2 'Inter',sans-serif;letter-spacing:-.5px;color:#e8e8ed;padding:9px 0;-webkit-tap-highlight-color:transparent}
  .m-big.is-here{color:#fff}
  .m-big.is-here::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 0 6px 10px;background:var(--stage-grad)}
  .m-more{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
  .m-small{display:block;font-size:17px;font-weight:500;color:#a1a1a6;padding:9px 0}
  .m-small.is-here{color:#fff}
  .m-root .m-big,.m-root .m-small{opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease}
  .menu-open .m-root .m-big,.menu-open .m-root .m-small{opacity:1;transform:none;transition-delay:calc(var(--i)*35ms + 60ms)}
  .m-cta{margin-top:auto;height:54px;font-size:18px;flex:none}
  .m-root .m-cta{margin-top:32px}
  @media (min-height:640px){.m-root .m-cta{margin-top:auto}}
  /* Apple-style: logo steps aside while the menu is open */
  .header .logo{transition:opacity .25s ease}
  .menu-open .header .logo{opacity:0;pointer-events:none}
  body.menu-open{overflow:hidden}

  /* Hero */
  .hero{height:auto;min-height:0;padding:118px 0 76px}
  .hero::before{background-size:34px 34px}
  .hero-glow i:nth-child(1){width:520px;height:520px;left:-55%;top:-18%}
  .hero-glow i:nth-child(2){width:480px;height:480px;right:-55%;bottom:-20%}
  .hero-glow i:nth-child(3){width:380px;height:380px;left:10%;top:30%}
  .hero::after{width:900px;height:900px;top:46%;
    background:
     radial-gradient(circle,transparent 129px,rgba(41,151,255,.18) 129px,rgba(41,151,255,.18) 130px,transparent 130px),
     radial-gradient(circle,transparent 219px,rgba(255,255,255,.07) 219px,rgba(255,255,255,.07) 220px,transparent 220px),
     radial-gradient(circle,transparent 319px,rgba(255,255,255,.05) 319px,rgba(255,255,255,.05) 320px,transparent 320px),
     radial-gradient(circle,transparent 439px,rgba(255,255,255,.04) 439px,rgba(255,255,255,.04) 440px,transparent 440px)}
  .hero-inner{padding-top:0}
  .eyebrow{font-size:12px;margin-bottom:18px}
  .hero h1{font-size:min(46px,11.6vw);letter-spacing:-1.2px;max-width:none}
  .hero .hero-title{--lh:1.1em}
  .hero-glow{display:block;
    -webkit-mask-image:radial-gradient(ellipse 62% 40% at 50% 47%,transparent 0%,transparent 55%,#000 100%);
            mask-image:radial-gradient(ellipse 62% 40% at 50% 47%,transparent 0%,transparent 55%,#000 100%)}
  .hero-glow i{opacity:.75}
  .hero-glow i:nth-child(3){display:none}
  .br-d{display:none}
  .br-m{display:inline}
  h1,h2,h3,.m-card p{text-wrap:balance}
  .hero p{font-size:18px;line-height:1.45;margin-top:20px;max-width:340px}
  .hero-ctas{flex-direction:column;gap:18px;margin-top:34px}
  .hero-ctas .btn{height:52px;padding:0 36px;font-size:17px;min-width:220px}

  /* Problem */
  .problem{height:auto;padding:84px 0}
  .problem .container{grid-template-columns:1fr;gap:56px}
  .big-num{font-size:104px;letter-spacing:-2px}
  .problem h3{font-size:26px;margin-top:10px}
  .problem .muted{font-size:16px;line-height:1.45;margin-top:14px}
  .problem h4{font-size:26px;margin-bottom:22px}
  .x-list li{font-size:16px;line-height:1.4;align-items:flex-start;margin-bottom:0;padding:16px 0;border-bottom:1px solid #eee}
  .x-list li::before{font-size:16px;line-height:1.4}
  .x-list{margin-bottom:28px}
  .problem .closing{font-size:20px;line-height:1.25}

  /* About */
  .about{height:auto;padding:96px 0}
  .about h2{font-size:42px;line-height:1.08;letter-spacing:-1px}
  .values{grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
  .value{height:132px;gap:12px;border-radius:16px}
  .value span{font-size:16px}
  .value .ico{font-size:24px}

  /* Mission */
  .mission{height:auto;padding:72px 0;background:linear-gradient(170deg,#d9cafe 0%,#fff 60%)}
  .mission-cards{flex-direction:column;align-items:stretch;padding:0 20px;gap:16px}
  .m-card{max-width:none;min-height:0;padding:36px 28px;border-radius:22px}
  .m-card small{font-size:15px;margin-bottom:12px}
  .m-card p{font-size:30px;line-height:1.2;letter-spacing:-.5px}

  /* Difference */
  .difference{height:auto;padding:96px 0}
  .difference h2{font-size:42px;line-height:1.08;letter-spacing:-1px}
  .difference .sub{font-size:17px;line-height:1.4;margin-top:14px}
  .stages{flex-direction:column;gap:10px;margin-top:44px}
  .stage,.stage.final{flex:none;width:100%;height:112px;gap:8px;border-radius:16px}
  .stage strong{font-size:22px}
  .stage.final strong{font-size:22px}
  .stage small{font-size:13px}
  .arrow{transform:rotate(90deg);font-size:22px;line-height:1}
  .steps{grid-template-columns:1fr;gap:0;margin-top:56px;padding:0}
  .step{display:grid;grid-template-columns:72px 1fr;column-gap:8px;padding:24px 0;border-top:1px solid rgba(255,255,255,.08)}
  .step:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
  .step .n{font-size:40px;grid-row:span 3}
  .step h5{font-size:18px;margin:4px 0 6px}
  .step p{font-size:15px;line-height:1.4;max-width:none}
  .step .when{font-size:15px;margin-top:10px}

  /* Compare */
  .compare{height:auto;padding:90px 0}
  .compare h2{font-size:34px;line-height:1.15;letter-spacing:-.5px}
  .compare-cards{flex-direction:column;gap:16px;margin-top:40px}
  .c-card{max-width:none;min-height:0;padding:30px 26px;border-radius:18px}
  .c-card h6{font-size:17px;margin-bottom:18px}
  .c-card li{font-size:15px;margin-bottom:0;padding:13px 0;border-top:1px solid rgba(255,255,255,.06)}

  /* Services */
  .services{padding:96px 0 84px}
  .services h2{font-size:36px;line-height:1.1;letter-spacing:-.5px}
  .services .sub{font-size:17px}
  .svc-grid{grid-template-columns:1fr;gap:16px;margin-top:44px}
  .svc{min-height:0;padding:34px 26px;border-radius:18px}
  .svc h3,.svc-wide h3{font-size:23px}
  .svc p,.svc-wide p{font-size:16px;line-height:1.45;margin-top:12px}
  .svc .svc-link{margin-top:20px;font-size:16px}
  .svc-wide{flex-direction:column;align-items:stretch;gap:24px;margin-top:16px;padding:34px 26px}
  .svc-wide .btn{height:52px;font-size:16px}

  /* Numbers */
  .numbers{padding:90px 0 100px}
  .numbers h2{font-size:46px;line-height:1.05;letter-spacing:-1px}
  .stats{grid-template-columns:1fr;gap:0;margin-top:44px;padding:0;text-align:center}
  .stat{padding:26px 0;border-bottom:1px solid #eee}
  .stat:last-child{border-bottom:0}
  .stat .num{font-size:84px}
  .stat p{font-size:16px;margin-top:10px}
  .cta-final{margin-top:48px}
  .cta-final h2{font-size:46px;line-height:1.1}
  .cta-final .btn{height:54px;padding:0 40px;font-size:18px;margin-top:28px}

  /* Footer */
  .footer{padding:84px 0 calc(40px + env(safe-area-inset-bottom))}
  .footer::before{left:50%;width:76px;height:38px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 20px;padding:0 24px}
  .footer-grid>div:first-child{grid-column:1/-1;display:flex;flex-direction:column}
  .footer-grid>div:last-child{grid-column:1/-1}
  .footer .logo img{height:44px}
  .footer .about-text{font-size:14px;line-height:1.55;margin-top:20px}
  .footer .copy{order:9;font-size:14px;color:#8a8a90;margin-top:0;position:absolute;left:24px;right:24px;bottom:calc(36px + env(safe-area-inset-bottom));padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
  .footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .footer h6{font-size:17px;margin-bottom:6px}
  .footer li{line-height:40px}
  .footer li a{font-size:15px}

  .to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:42px;height:42px;border-radius:50%}
}

/* Small phones */
@media (max-width:380px){
  .about h2,.difference h2{font-size:36px}
  .numbers h2,.cta-final h2{font-size:40px}
  .big-num{font-size:88px}
  .m-card p{font-size:26px}
  .stat .num{font-size:72px}
  .m-big{font-size:27px}
}

/* ================= SHARED: anchors ================= */
[id]{scroll-margin-top:84px}
.anchor-flash{animation:anchorFlash 1.6s ease}
@keyframes anchorFlash{0%,100%{box-shadow:0 0 0 0 rgba(100,59,250,0)}25%{box-shadow:0 0 0 6px rgba(100,59,250,.35)}}
:root{--hero-grad:linear-gradient(90deg,#d4d5d7 0%,#b3b6ba 25%,#9da1a6 45%,#95a1b1 70%,#8aa4c6 100%)}
.grad-hero{background-image:var(--hero-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.grad-stage{background-image:var(--stage-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ================= SHARED: inner-page hero ================= */
.page-hero{position:relative;background:#000;color:#fff;text-align:center;padding:210px 0 150px;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1.6px);background-size:56px 56px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,rgba(0,0,0,.35) 80%);mask-image:radial-gradient(ellipse at center,#000 30%,rgba(0,0,0,.35) 80%)}
.page-hero::after{content:"";position:absolute;left:50%;top:50%;width:1300px;height:1300px;transform:translate(-50%,-50%);pointer-events:none;
  background:
   radial-gradient(circle,transparent 249px,rgba(41,151,255,.14) 249px,rgba(41,151,255,.14) 250px,transparent 250px),
   radial-gradient(circle,transparent 419px,rgba(255,255,255,.05) 419px,rgba(255,255,255,.05) 420px,transparent 420px),
   radial-gradient(circle,transparent 599px,rgba(255,255,255,.04) 599px,rgba(255,255,255,.04) 600px,transparent 600px)}
.page-hero .container{position:relative;z-index:2}
.page-hero .eyebrow{margin-bottom:22px}
.page-hero h1{font-size:80px;line-height:1.08;font-weight:700;letter-spacing:-1.5px;max-width:900px;margin:0 auto}
.page-hero p{font-size:22px;line-height:1.45;color:var(--grey);max-width:760px;margin:28px auto 0}

/* ================= SHARED: section heads ================= */
.sec{padding:140px 0}
.sec-dark{background:var(--black);color:#fff}
.sec-white{background:#fff;color:#000}
.sec-head{text-align:center;max-width:820px;margin:0 auto 64px}
.sec-head h2{font-size:58px;line-height:1.08;font-weight:700;letter-spacing:-1px}
.sec-head p{font-size:20px;line-height:1.45;color:var(--grey);margin-top:16px}
.sec-white .sec-head p{color:#6e6e73}
.icon-tile{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(135deg,rgba(80,164,247,.18),rgba(88,73,241,.22));border:1px solid rgba(120,120,255,.25)}
.icon-tile svg{width:22px;height:22px;stroke:url(#ig);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sec-white .icon-tile{background:linear-gradient(135deg,rgba(80,164,247,.12),rgba(88,73,241,.14));border-color:rgba(88,73,241,.18)}

/* ================= ABOUT ================= */
.manifesto{text-align:center}
.manifesto .quote-mark{width:56px;height:56px;margin:0 auto 34px;display:block}
.manifesto blockquote{font-size:46px;line-height:1.22;font-weight:700;letter-spacing:-1px;max-width:980px;margin:0 auto;color:#111}
.manifesto blockquote em{font-style:normal}
.manifesto .bar{display:block;width:56px;height:3px;border-radius:3px;background:var(--stage-grad);margin:44px auto 0}

.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.principle{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:34px 28px;transition:transform .3s ease,border-color .3s}
.principle:hover{transform:translateY(-6px);border-color:rgba(100,59,250,.5)}
.principle h3{font-size:21px;font-weight:600;margin:26px 0 10px}
.principle p{font-size:15px;line-height:1.55;color:#8a8a90}

.audiences{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.audience{background:#f5f5f7;border-radius:24px;padding:40px 34px 44px;transition:transform .3s ease,box-shadow .3s}
.audience:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.06)}
.audience h3{font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.4px;margin:28px 0 12px}
.audience p{font-size:16px;line-height:1.55;color:#6e6e73}

.results .stats{margin-top:0}
.results .stat{text-align:center}
.results .stat p{color:#8a8a90}
.results .steps-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:90px}
.step-mini{border-top:1px solid rgba(255,255,255,.12);padding-top:26px}
.step-mini span{display:block;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.step-mini h4{font-size:24px;font-weight:600;margin:12px 0 8px}
.step-mini p{font-size:15px;line-height:1.5;color:#8a8a90}

.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid #e5e5ea}
.faq details:first-child{border-top:1px solid #e5e5ea}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;font-size:21px;font-weight:600;letter-spacing:-.2px;color:#111}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{position:relative;width:28px;height:28px;border-radius:50%;background:#f2f2f5;flex:none;transition:background .3s}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;border-radius:2px;background:#111;transform:translate(-50%,-50%);transition:transform .35s ease}
.faq summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .plus{background:#111}
.faq details[open] summary .plus::before{background:#fff}
.faq details[open] summary .plus::after{background:#fff;transform:translate(-50%,-50%) rotate(0deg)}
.faq .answer{overflow:hidden}
.faq .answer p{font-size:17px;line-height:1.6;color:#6e6e73;padding:0 56px 28px 0}
.about-cta{text-align:center;margin-top:120px}
.about-cta h2{font-size:84px;line-height:1.08;font-weight:800;letter-spacing:-1.5px}
.about-cta p{font-size:19px;color:#6e6e73;margin-top:14px}
.about-cta .btn{font-size:20px;height:52px;padding:0 30px;margin-top:36px}

@media (max-width:1100px){
  .page-hero h1{font-size:64px}
  .principles{grid-template-columns:repeat(2,1fr)}
  .manifesto blockquote{font-size:38px}
}
@media (max-width:820px){
  .page-hero{padding:120px 0 80px}
  .page-hero::before{background-size:34px 34px}
  .page-hero::after{width:760px;height:760px}
  .page-hero h1{font-size:min(44px,11vw);letter-spacing:-1.2px;text-wrap:balance}
  .page-hero p{font-size:17px;margin-top:20px}
  .sec{padding:84px 0}
  .sec-head{margin-bottom:40px}
  .sec-head h2{font-size:36px;letter-spacing:-.6px;text-wrap:balance}
  .sec-head p{font-size:16px}
  .manifesto .quote-mark{width:42px;height:42px;margin-bottom:24px}
  .manifesto blockquote{font-size:27px;line-height:1.28;letter-spacing:-.5px;text-wrap:balance}
  .manifesto .bar{margin-top:32px}
  .principles{grid-template-columns:1fr;gap:12px}
  .principle{display:grid;grid-template-columns:48px 1fr;column-gap:18px;padding:24px 22px;border-radius:18px}
  .principle .icon-tile{grid-row:span 2}
  .principle h3{font-size:19px;margin:2px 0 6px}
  .audiences{grid-template-columns:1fr;gap:14px}
  .audience{padding:30px 26px 32px;border-radius:20px}
  .audience h3{font-size:23px;margin:20px 0 8px}
  .audience p{font-size:15px}
  .results .stat{border-bottom-color:rgba(255,255,255,.1)}
  .results .steps-mini{grid-template-columns:1fr;gap:0;margin-top:48px}
  .step-mini{padding:22px 0}
  .step-mini h4{font-size:20px;margin:8px 0 4px}
  .faq summary{font-size:17px;padding:22px 0}
  .faq .answer p{font-size:15px;padding:0 0 22px}
  .about-cta{margin-top:72px}
  .about-cta h2{font-size:46px}
  .about-cta .btn{height:54px;padding:0 40px;font-size:18px;margin-top:28px}
}

/* ================= MEDIA SLOTS (image / video placeholders) ================= */
/* Drop a file at the path in data-src and it covers the placeholder automatically. */
.media{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:var(--ar,16/10);
  background:#f2f2f5;border:1.5px dashed #d2d2d7}
.media>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.media.has-file{border:0;background:#000}
.media .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;color:#6e6e73}
.media .ph svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.7;margin-bottom:4px}
.media .ph b{font-size:15px;font-weight:600;color:#1d1d1f}
.media .ph small{font-size:12px;line-height:1.4}
.media .ph code{font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(0,0,0,.05);padding:3px 7px;border-radius:6px;word-break:break-all}
.sec-dark .media,.media.on-dark{background:#0e0e10;border-color:rgba(255,255,255,.14)}
.sec-dark .media .ph,.media.on-dark .ph{color:#8a8a90}
.sec-dark .media .ph b,.media.on-dark .ph b{color:#e8e8ed}
.sec-dark .media .ph code,.media.on-dark .ph code{background:rgba(255,255,255,.07)}

/* hero background video */
.page-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:0;pointer-events:none}
.page-hero-video:not([data-ok]){display:none}

/* About: founder + manifesto */
.founder{display:grid;grid-template-columns:420px 1fr;gap:80px;align-items:center;text-align:left}
.founder .media{--ar:4/5;border-radius:28px}
.founder .quote-mark{margin:0 0 28px}
.founder blockquote{font-size:40px;max-width:none;margin:0}
.founder .bar{margin:36px 0 0}
.founder .sign{display:flex;flex-direction:column;margin-top:22px}
.founder .sign b{font-size:18px;font-weight:700;color:#111}
.founder .sign span{font-size:15px;color:#6e6e73;margin-top:2px}

/* About: audience cards with image on top */
.audience.with-media{padding:12px 12px 36px}
.audience.with-media .media{--ar:16/10;border-radius:16px;margin-bottom:28px}
.audience.with-media .icon-tile,.audience.with-media h3,.audience.with-media p{margin-left:22px;margin-right:22px}

/* About: results proof gallery */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:80px}
.proof .media{--ar:4/3}
.proof-note{text-align:center;font-size:14px;color:#6c6c72;margin-top:18px}

/* Client logo strip */
.logo-strip{margin:0 auto 110px;max-width:1060px;text-align:center}
.logo-strip>span{display:block;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#86868b;margin-bottom:26px}
.logo-strip .logos{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.logo-strip .media{--ar:5/2;border-radius:14px}
.logo-strip .media>img{object-fit:contain;padding:16px;filter:grayscale(1);opacity:.7}
.logo-strip .media.has-file{background:transparent}
.logo-strip .media .ph{gap:4px;padding:8px}
.logo-strip .media .ph svg{width:20px;height:20px;margin:0}
.logo-strip .media .ph b{font-size:12px}
.logo-strip .media .ph small,.logo-strip .media .ph code{display:none}

@media (max-width:1100px){
  .founder{grid-template-columns:340px 1fr;gap:48px}
  .founder blockquote{font-size:32px}
  .logo-strip .logos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .page-hero-video{display:none!important}
  .founder{grid-template-columns:1fr;gap:36px;text-align:center}
  .founder .media{max-width:300px;margin:0 auto;width:100%}
  .founder .quote-mark{margin:0 auto 22px}
  .founder blockquote{font-size:26px}
  .founder .bar{margin:28px auto 0}
  .founder .sign{align-items:center}
  .audience.with-media{padding:10px 10px 28px}
  .audience.with-media .media{margin-bottom:22px}
  .audience.with-media .icon-tile,.audience.with-media h3,.audience.with-media p{margin-left:16px;margin-right:16px}
  .proof{grid-template-columns:1fr;gap:14px;margin-top:48px}
  .logo-strip{margin-bottom:64px}
  .logo-strip .logos{grid-template-columns:repeat(3,1fr);gap:10px}
  .media .ph b{font-size:14px}
}

/* ================= LANDING PAGE TEMPLATE ================= */
.lp-hero{position:relative;background:#000;color:#fff;overflow:hidden;padding:170px 0 120px}
.lp-hero::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.6px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 45%,#000 20%,rgba(0,0,0,.2) 75%);mask-image:radial-gradient(ellipse at 70% 45%,#000 20%,rgba(0,0,0,.2) 75%)}
.lp-hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.lp-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:6px 14px;border:1px solid rgba(100,59,250,.45);border-radius:100px;font-size:13px}
.lp-hero .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--stage-grad)}
.lp-hero h1{font-size:68px;line-height:1.05;font-weight:700;letter-spacing:-1.6px}
.lp-hero .lead{font-size:20px;line-height:1.5;color:#9a9aa0;margin-top:24px;max-width:540px}
.lp-ctas{display:flex;align-items:center;gap:22px;margin-top:38px;flex-wrap:wrap}
.lp-ctas .btn{height:52px;padding:0 30px;font-size:17px}
.lp-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font-size:14px;color:#8a8a90}
.lp-trust span{display:inline-flex;align-items:center;gap:8px}
.lp-trust svg{width:16px;height:16px;stroke:#5b7cfa;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* animated dashboard graphic */
.dash{position:relative;background:linear-gradient(180deg,#121216,#0b0b0e);border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:22px;
  box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 1px rgba(100,59,250,.08),0 0 120px rgba(88,73,241,.12)}
.dash-top{display:flex;align-items:center;gap:7px;margin-bottom:22px}
.dash-top i{width:10px;height:10px;border-radius:50%;background:#2a2a30}
.dash-top small{margin-left:10px;font-size:12px;color:#8a8a90}
.dash-top .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#3ddc97}
.dash-top .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc97;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.3}}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dash-kpis div{background:#16161b;border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:14px 16px}
.dash-kpis small{display:block;font-size:11px;color:#8a8a90}
.dash-kpis b{display:block;font-size:26px;font-weight:700;letter-spacing:-.5px;margin:6px 0 4px}
.dash-kpis em{font-style:normal;font-size:11px;font-weight:600;color:#3ddc97}
.dash-chart{display:flex;align-items:flex-end;gap:8px;height:150px;margin-top:16px;padding:16px;background:#16161b;border:1px solid rgba(255,255,255,.05);border-radius:14px}
.dash-chart span{flex:1;border-radius:6px 6px 3px 3px;background:var(--stage-grad);opacity:.9;height:var(--h);transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.dash.on .dash-chart span{transform:none}
.dash-toast{position:absolute;left:-34px;bottom:-26px;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;min-width:300px;
  background:rgba(255,255,255,.96);color:#111;box-shadow:0 20px 40px rgba(0,0,0,.35);transition:opacity .4s ease,transform .4s ease}
.dash-toast.out{opacity:0;transform:translateY(10px)}
.dash-toast .av{width:36px;height:36px;border-radius:50%;flex:none;background:var(--stage-grad);display:flex;align-items:center;justify-content:center}
.dash-toast .av svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-toast b{display:block;font-size:13px}
.dash-toast small{font-size:12px;color:#6e6e73}
.dash-cap{display:block;text-align:right;font-size:11px;color:#55555b;margin-top:44px}

/* problem cards */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain{background:#f5f5f7;border-radius:22px;padding:34px 30px}
.pain .x{width:40px;height:40px;border-radius:12px;background:rgba(224,57,64,.1);display:flex;align-items:center;justify-content:center;color:var(--red);font-weight:700;font-size:18px}
.pain h3{font-size:21px;line-height:1.25;font-weight:700;margin:22px 0 10px;letter-spacing:-.2px}
.pain p{font-size:15px;line-height:1.55;color:#6e6e73}
.pain-close{text-align:center;font-size:28px;font-weight:700;letter-spacing:-.4px;margin-top:64px}

/* what we do: feature blocks (menu anchors land here) */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feature{background:var(--card);border:1px solid var(--card-border);border-radius:24px;padding:38px 36px;transition:border-color .3s}
.feature:hover{border-color:rgba(100,59,250,.45)}
.feature h3{font-size:26px;font-weight:700;letter-spacing:-.4px;margin:24px 0 10px}
.feature>p{font-size:16px;line-height:1.55;color:#8a8a90}
.ticks{list-style:none;margin-top:22px;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:#d2d2d7}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat,var(--stage-grad)}
.sec-white .ticks li{color:#3a3a3f}
.feature-wide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:30px;
  background:linear-gradient(135deg,rgba(80,164,247,.10),rgba(88,73,241,.14));border-color:rgba(100,59,250,.3)}
.feature-wide h3{margin-top:0}
.feature-wide .btn{flex:none;height:48px;padding:0 24px;font-size:16px}

/* how it works timeline */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.timeline::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:2px;background:linear-gradient(90deg,#50a4f7,#5849f1,#84a3ca);opacity:.35}
.tl-step{position:relative;text-align:center;padding:0 10px}
.tl-step .n{width:56px;height:56px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid transparent;
  background-image:linear-gradient(#fff,#fff),var(--stage-grad);background-origin:border-box;background-clip:padding-box,border-box;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;position:relative;z-index:1}
.tl-step>span{display:block;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-top:22px}
.tl-step h3{font-size:24px;font-weight:700;margin:8px 0}
.tl-step p{font-size:16px;line-height:1.5;color:#6e6e73;max-width:280px;margin:0 auto}

/* results proof (2 up) */
.proof.two{grid-template-columns:repeat(2,1fr)}

/* included + pricing */
.included{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:stretch}
.inc-list{background:#f5f5f7;border-radius:24px;padding:40px}
.inc-list h3{font-size:24px;font-weight:700;margin-bottom:24px}
.inc-list .ticks{grid-template-columns:1fr 1fr;gap:14px 24px;margin:0}
.price-card{border-radius:24px;padding:40px;background:#000;color:#fff;display:flex;flex-direction:column;position:relative;overflow:hidden}
.price-card::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(88,73,241,.45),transparent 70%)}
.price-card small{font-size:13px;color:#8a8a90;text-transform:uppercase;letter-spacing:.5px}
.price-card .p{font-size:40px;font-weight:700;letter-spacing:-1px;margin:12px 0 10px}
.price-card p{font-size:15px;line-height:1.55;color:#9a9aa0;margin-bottom:30px}
.price-card .btn{margin-top:auto;height:52px;font-size:17px}

/* dark FAQ variant */
.sec-dark .faq details{border-color:rgba(255,255,255,.1)}
.sec-dark .faq summary{color:#f5f5f7}
.sec-dark .faq summary .plus{background:rgba(255,255,255,.08)}
.sec-dark .faq summary .plus::before,.sec-dark .faq summary .plus::after{background:#fff}
.sec-dark .faq details[open] summary .plus{background:#fff}
.sec-dark .faq details[open] summary .plus::before,.sec-dark .faq details[open] summary .plus::after{background:#000}
.sec-dark .faq .answer p{color:#9a9aa0}

/* booking */
.book-wrap{max-width:1000px;margin:0 auto;background:#f5f5f7;border-radius:28px;padding:16px;min-height:300px}
.cal-inline{width:100%;border-radius:18px;overflow:hidden}
.cal-inline.loaded{min-height:640px;background:#fff}
.cal-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:280px;text-align:center;color:#6e6e73}
.cal-fallback .btn{height:52px;padding:0 30px;font-size:17px}
.cal-inline.loaded+.cal-fallback{display:none}

/* sticky mobile CTA */
.sticky-cta{display:none}

/* Landing mode (?lp=1): no menu, only logo + book button */
.lp-mode .nav,.lp-mode .mega,.lp-mode .mega-scrim,.lp-mode .menu-toggle,.lp-mode .m-drawer{display:none!important}

@media (max-width:1100px){
  .lp-hero h1{font-size:54px}
  .lp-hero .container{gap:40px}
  .dash-toast{left:-10px}
}
@media (max-width:820px){
  .lp-hero{padding:110px 0 70px;text-align:center}
  .lp-hero .container{grid-template-columns:1fr;gap:56px}
  .lp-hero h1{font-size:min(42px,10.6vw);letter-spacing:-1.1px;text-wrap:balance}
  .lp-hero .lead{font-size:17px;margin:18px auto 0}
  .lp-ctas{flex-direction:column;gap:16px;margin-top:30px}
  .lp-ctas .btn{width:100%;max-width:320px}
  .lp-trust{justify-content:center;font-size:13px;margin-top:26px}
  .dash{padding:16px;border-radius:18px;text-align:left}
  .dash-kpis{gap:8px}
  .dash-kpis div{padding:10px}
  .dash-kpis b{font-size:19px}
  .dash-chart{height:110px;gap:5px;padding:12px}
  .dash-toast{left:10px;right:10px;min-width:0;bottom:-30px;padding:12px 14px}
  .dash-cap{text-align:center;margin-top:46px}
  .pain-grid{grid-template-columns:1fr;gap:12px}
  .pain{padding:26px 24px;border-radius:18px}
  .pain h3{font-size:19px;margin:16px 0 6px}
  .pain-close{font-size:22px;margin-top:40px;text-wrap:balance}
  .feature-grid{grid-template-columns:1fr;gap:12px}
  .feature{padding:28px 24px;border-radius:20px}
  .feature h3{font-size:22px;margin:18px 0 8px}
  .feature-wide{flex-direction:column;align-items:stretch}
  .feature-wide .btn{height:52px}
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,#50a4f7,#5849f1,#84a3ca)}
  .tl-step{display:grid;grid-template-columns:56px 1fr;column-gap:18px;text-align:left;padding:0 0 30px}
  .tl-step .n{margin:0;grid-row:span 3}
  .tl-step>span{margin-top:4px}
  .tl-step h3{font-size:20px;margin:4px 0}
  .tl-step p{font-size:15px;margin:0}
  .proof.two{grid-template-columns:1fr}
  .included{grid-template-columns:1fr;gap:14px}
  .inc-list,.price-card{padding:28px 24px;border-radius:20px}
  .inc-list .ticks{grid-template-columns:1fr}
  .price-card .btn{margin-top:24px}
  .book-wrap{padding:8px;border-radius:20px}
  .cal-inline.loaded{min-height:560px}
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:44;height:54px;font-size:17px;
    box-shadow:0 12px 30px rgba(88,73,241,.45);transform:translateY(140%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .sticky-cta.show{transform:none}
  .has-sticky .to-top{bottom:calc(78px + env(safe-area-inset-bottom))}
  .lp-mode .header-cta{display:inline-flex;height:38px;font-size:14px;padding:0 16px}
}

/* ===== Landing hero: rotating business use case ===== */
.lp-title{--lh:1.06em;line-height:var(--lh)}
.lp-rot{position:relative;display:inline-block;vertical-align:top;height:var(--lh);overflow:hidden;transition:width .6s cubic-bezier(.65,0,.35,1)}
.lp-rot-word{position:absolute;left:0;top:0;white-space:nowrap;line-height:var(--lh);padding-right:.06em;
  background-image:var(--stage-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transform:translateY(100%);opacity:0;transition:transform .65s cubic-bezier(.65,0,.35,1),opacity .5s ease}
.lp-rot-word.is-active{transform:none;opacity:1}
.lp-rot-word.is-leaving{transform:translateY(-100%);opacity:0}

.case-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.case-chip{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#a1a1a6;
  font:600 13px/1 'Inter',sans-serif;padding:9px 14px;border-radius:100px;cursor:pointer;transition:color .3s,border-color .3s,background .3s;-webkit-tap-highlight-color:transparent}
.case-chip span{position:relative;z-index:1}
.case-chip::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--stage-grad)}
.case-chip:hover{color:#fff}
.case-chip.is-active{color:#fff;border-color:rgba(100,59,250,.55);background:rgba(88,73,241,.14)}
.case-chip.is-active.running::after{width:100%;transition:width var(--dur,4s) linear}
.dash-kpis b,.dash-kpis small,.dash-kpis em,.dash-camp{transition:opacity .25s ease}
.dash.swap .dash-kpis b,.dash.swap .dash-kpis small,.dash.swap .dash-kpis em,.dash.swap .dash-camp{opacity:0}
.dash-chart span{transition:transform .9s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1)}

@media (max-width:820px){
  .lp-title{--lh:1.08em}
  .lp-rot-word{left:50%;translate:-50% 0}
  .case-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 14px;padding:0 20px 4px;scrollbar-width:none;justify-content:flex-start}
  .case-chips::-webkit-scrollbar{display:none}
  .case-chip{flex:none}
}

/* slide-in reveals must never create sideways scroll */
section,footer{overflow-x:clip}
.lp-hero .container>*{min-width:0}

/* ===== Chat mock (AI Agents hero) ===== */
.chat-mock{position:relative;max-width:420px;margin-left:auto;background:linear-gradient(180deg,#121216,#0b0b0e);border:1px solid rgba(255,255,255,.09);border-radius:28px;overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 120px rgba(88,73,241,.14)}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.chat-av{width:40px;height:40px;border-radius:50%;flex:none;background:var(--stage-grad);display:flex;align-items:center;justify-content:center}
.chat-av svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-head b{display:block;font-size:15px;color:#fff}
.chat-head small{display:flex;align-items:center;gap:6px;font-size:12px;color:#3ddc97}
.chat-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc97}
.chat-channel{margin-left:auto;font-size:11px;font-weight:600;color:#fff;padding:6px 10px;border-radius:100px;background:#25d366}
.chat-mock[data-channel=instagram] .chat-channel{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
.chat-mock[data-channel=messenger] .chat-channel{background:linear-gradient(45deg,#0078ff,#a334fa)}
.chat-mock[data-channel=web] .chat-channel{background:var(--stage-grad)}
.chat-body{height:380px;overflow:hidden;padding:20px 16px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;transition:opacity .25s}
.chat-mock.swap .chat-body{opacity:0}
.msg{max-width:80%;padding:11px 14px;border-radius:18px;font-size:14px;line-height:1.4;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .3s ease,transform .3s ease}
.msg.in,.msg.typing{opacity:1;transform:none}
.msg.user{align-self:flex-end;background:#2a2a31;color:#f5f5f7;border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;background:linear-gradient(135deg,#4f6ef7,#5849f1);color:#fff;border-bottom-left-radius:6px}
.msg .tag{display:block;font-size:11px;opacity:.75;margin-top:4px}
.msg.typing{display:flex;gap:4px;padding:14px 16px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.6;animation:typing 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-foot{display:flex;align-items:center;gap:10px;padding:12px 16px 16px}
.chat-foot span{flex:1;height:40px;border-radius:100px;background:#16161b;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 16px;font-size:13px;color:#55555b}
.chat-badge{position:absolute;left:-30px;top:110px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.96);color:#111;box-shadow:0 20px 40px rgba(0,0,0,.35);font-size:12px}
.chat-badge b{display:block;font-size:22px;letter-spacing:-.5px}
.chat-wrap{position:relative}
.chat-wrap .dash-cap{max-width:420px;margin-left:auto}
@media (max-width:820px){
  .chat-mock{margin:0 auto;border-radius:22px}
  .chat-body{height:330px}
  .chat-badge{left:-6px;top:auto;bottom:90px;padding:10px 12px}
  .chat-badge b{font-size:18px}
  .chat-wrap .dash-cap{margin:30px auto 0}
}
.chat-wrap{max-width:440px;margin-left:auto;width:100%}
.chat-wrap .chat-mock,.chat-wrap .dash-cap{max-width:none;margin-left:0}
@media (max-width:820px){.chat-wrap{margin:0 auto}}

/* =====================================================================
   AI AGENTS PAGE: "OLED" concept
   True black (#000). Light only comes from the AI's replies.
   ===================================================================== */
.ai-page{--oled:#000;--ink:#f5f5f7;--dim:#8e8e93;--user:#1c1c1e;--glow:0 10px 60px rgba(88,73,241,.55),0 0 140px rgba(80,164,247,.22)}
.ai-page .header:not(.scrolled):not(.mega-open){background:#000}

/* bubbles (shared on this page) */
.bub{max-width:80%;padding:14px 18px;border-radius:22px;font-size:17px;line-height:1.42;letter-spacing:-.1px}
.bub.user{align-self:flex-end;background:var(--user);color:var(--ink);border-bottom-right-radius:8px}
.bub.ai{align-self:flex-start;color:#fff;border-bottom-left-radius:8px;
  background:linear-gradient(135deg,#4c8bf5 0%,#5849f1 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),var(--glow)}
.bub b{font-weight:600}
.bub-meta{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.bub.typing{display:flex;gap:5px;padding:16px 18px;align-self:flex-start;background:#1c1c1e;border-bottom-left-radius:8px}
.bub.typing i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.55;animation:typing 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}

/* ---------- Hero: one orchestrated moment ---------- */
.ai-hero{position:relative;background:#000;color:var(--ink);text-align:center;min-height:max(820px,100vh);display:flex;align-items:center;padding:130px 0 90px;overflow:hidden}
.ai-hero::after{content:"";position:absolute;left:50%;top:38%;width:900px;height:520px;transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(88,73,241,.20),transparent 65%);transition:opacity 1.6s ease}
.ai-hero.lit::after{opacity:1}
.ai-hero .container{position:relative;z-index:1}
.ai-chat{width:min(540px,100%);margin:0 auto 64px;display:flex;flex-direction:column;gap:12px;text-align:left}
.ai-chat .clock{align-self:center;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;margin-bottom:6px}
.ai-chat .bub-meta{align-self:flex-start;margin:-4px 0 0 6px}
.ai-h1{font-size:clamp(44px,6.4vw,92px);line-height:.98;font-weight:600;letter-spacing:-.045em;max-width:1180px;margin:0 auto;text-wrap:balance}
.ai-h1 .px{color:var(--ink)}
.ai-sub{font-size:21px;line-height:1.5;color:var(--dim);max-width:640px;margin:30px auto 0}
.ai-ctas{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:40px;flex-wrap:wrap}
.ai-ctas .btn{height:54px;padding:0 32px;font-size:17px}
.ai-ctas .quiet{font-size:16px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.3)}
.ai-ctas .quiet:hover{text-decoration-color:#fff}
/* animation states (JS adds .play; without JS everything is visible) */
.ai-hero.armed .clock,.ai-hero.armed .bub,.ai-hero.armed .bub-meta,.ai-hero.armed .ai-sub,.ai-hero.armed .ai-ctas{opacity:0;transform:translateY(10px)}
.ai-hero.armed .ai-h1 .px{color:#000}
.ai-hero .clock,.ai-hero .bub,.ai-hero .bub-meta,.ai-hero .ai-sub,.ai-hero .ai-ctas{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ai-hero .ai-h1 .px{transition:color .5s ease,text-shadow 1.2s ease}
.ai-hero .on{opacity:1!important;transform:none!important}
.ai-hero .ai-h1 .px.on{color:var(--ink)!important;text-shadow:0 0 28px rgba(255,255,255,.35)}
.ai-hero .ai-h1 .px.settled{text-shadow:0 0 0 rgba(255,255,255,0)}

/* ---------- Night shift: IPS vs OLED ---------- */
.night{background:#000;color:var(--ink);padding:150px 0 160px}
.night-head{max-width:760px;margin:0 auto 70px;text-align:center}
.night-head h2{font-size:clamp(36px,5vw,64px);line-height:1.02;font-weight:600;letter-spacing:-.04em}
.night-head p{font-size:19px;line-height:1.5;color:var(--dim);margin-top:18px}
.night-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{border-radius:34px;padding:44px 40px 40px;display:flex;flex-direction:column}
.panel h3{font-size:15px;font-weight:600;letter-spacing:-.1px;margin-bottom:34px}
.ev{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:start;margin-bottom:22px}
.ev time{font-size:22px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums;padding-top:10px}
.ev .bub{max-width:100%;font-size:16px}
.ev .bub.user{justify-self:start}
.ev .stack{display:flex;flex-direction:column;gap:10px}
.outcome{margin-top:auto;padding-top:30px;font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.6px}
/* IPS: the backlight bleeds, blacks turn grey, everything washes out */
.panel.ips{background:#1b1c20;color:#7d7d84;
  background-image:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,.075),transparent 70%),radial-gradient(ellipse 60% 50% at 0% 100%,rgba(255,255,255,.05),transparent 70%),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(255,255,255,.05),transparent 70%)}
.panel.ips h3{color:#8e8e93}
.panel.ips time{color:#6b6b72}
.panel.ips .bub.user{background:#2a2b30;color:#9a9aa1}
.panel.ips .bub.you{align-self:flex-start;background:#353845;color:#a3a6b3;border-bottom-left-radius:8px}
.panel.ips .outcome{color:#8e8e93}
/* OLED: true black, light only where it matters */
.panel.oled{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.panel.oled time{color:var(--ink)}
.panel.oled .outcome{color:#fff}
.panel.oled .ok{display:inline-block;width:10px;height:10px;border-radius:50%;background:#3ddc97;box-shadow:0 0 16px #3ddc97;margin-right:12px;vertical-align:middle}

/* ---------- Where it replies (white) ---------- */
.where{background:#fff;color:#111;padding:150px 0}
.where-head{max-width:760px;margin:0 auto 70px;text-align:center}
.where-head h2{font-size:clamp(36px,5vw,64px);line-height:1.02;font-weight:600;letter-spacing:-.04em}
.where-head p{font-size:19px;line-height:1.5;color:#6e6e73;margin-top:18px}
.ch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ch{background:#f5f5f7;border-radius:30px;padding:12px 12px 30px}
.ch-screen{background:#fff;border-radius:20px;padding:14px;min-height:178px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ch-bar{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#1d1d1f;padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid #f0f0f2}
.ch-bar i{width:9px;height:9px;border-radius:50%}
.ch-screen .bub{font-size:12.5px;padding:8px 11px;border-radius:14px;max-width:88%;box-shadow:none}
.ch-screen .bub.user{background:#f0f0f3;color:#1d1d1f;border-bottom-right-radius:5px}
.ch-screen .bub.ai{border-bottom-left-radius:5px}
.ch h3{font-size:22px;font-weight:600;letter-spacing:-.4px;margin:26px 16px 8px}
.ch p{font-size:15px;line-height:1.5;color:#6e6e73;margin:0 16px}
.after-row{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;margin-top:120px}
.after-row h3{font-size:clamp(28px,3.4vw,42px);line-height:1.08;font-weight:600;letter-spacing:-.035em}
.after-row>div>p{font-size:18px;line-height:1.55;color:#6e6e73;margin-top:16px;max-width:460px}
.seq{background:#f5f5f7;border-radius:30px;padding:30px;display:grid;gap:12px}
.seq-step{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center;background:#fff;border-radius:18px;padding:16px 18px}
.seq-step time{font-size:14px;font-weight:600;color:#5849f1}
.seq-step span{font-size:15px;line-height:1.4;color:#1d1d1f}
.crm{background:#f5f5f7;border-radius:30px;padding:22px}
.crm table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:14px}
.crm th{text-align:left;font-size:12px;font-weight:600;color:#86868b;padding:0 14px}
.crm td{background:#fff;padding:14px;color:#1d1d1f}
.crm td:first-child{border-radius:14px 0 0 14px;font-weight:600}
.crm td:last-child{border-radius:0 14px 14px 0}
.pill{display:inline-block;padding:5px 10px;border-radius:100px;font-size:12px;font-weight:600}
.pill.booked{background:#e3f8ee;color:#10864f}.pill.qual{background:#e8ecff;color:#3d4fd6}
.pill.follow{background:#fff3df;color:#a8640a}.pill.new{background:#eeeef1;color:#55555b}
.crm-note{font-size:12px;color:#86868b;margin:6px 14px 0}
.real-chats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:120px}
.real-chats .media{--ar:4/3;border-radius:28px}

/* ---------- Ask it anything (interactive chat) ---------- */
.ask{background:#000;color:var(--ink);padding:150px 0}
.ask-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.ask h2{font-size:clamp(40px,5.6vw,72px);line-height:1;font-weight:600;letter-spacing:-.045em}
.ask-intro{font-size:19px;line-height:1.5;color:var(--dim);margin-top:20px;max-width:420px}
.ask-win{border-radius:34px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);padding:22px;display:flex;flex-direction:column}
.ask-log{height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:6px 4px 16px;scrollbar-width:none}
.ask-log::-webkit-scrollbar{display:none}
.ask-log .bub{font-size:16px;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.ask-log .bub.in,.ask-log .bub.typing{opacity:1;transform:none}
.ask-log .bub a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.ask-chip{font:500 14px/1 'Inter',sans-serif;color:var(--ink);background:#1c1c1e;border:0;border-radius:100px;padding:11px 15px;cursor:pointer;transition:background .2s,opacity .2s}
.ask-chip:hover{background:#2c2c2e}
.ask-chip:disabled{opacity:.35;cursor:default}
.ask-chip.used{display:none}
.ask-data{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Book (white) ---------- */
.ai-book{background:#fff;color:#111;padding:150px 0}
.ai-book .where-head{margin-bottom:56px}

/* focus visibility on this page */
.ai-page a:focus-visible,.ai-page button:focus-visible{outline:2px solid #5b7cfa;outline-offset:3px;border-radius:12px}

@media (max-width:1100px){
  .ch-grid{grid-template-columns:repeat(2,1fr)}
  .ask-grid{gap:48px}
}
@media (max-width:820px){
  .ai-hero{min-height:0;padding:110px 0 80px}
  .ai-chat{margin-bottom:44px}
  .bub{font-size:15px;padding:12px 15px}
  .ai-h1{font-size:min(46px,11.4vw);letter-spacing:-.04em}
  .ai-sub{font-size:17px;margin-top:22px}
  .ai-ctas{flex-direction:column;gap:18px;margin-top:30px}
  .ai-ctas .btn{width:100%;max-width:320px}
  .night,.where,.ask,.ai-book{padding:96px 0}
  .night-head,.where-head{margin-bottom:44px}
  .night-head p,.where-head p{font-size:16px}
  .night-grid{grid-template-columns:1fr;gap:14px}
  .panel{padding:30px 22px 28px;border-radius:26px}
  .panel h3{margin-bottom:24px}
  .ev{grid-template-columns:1fr;gap:8px;margin-bottom:18px}
  .ev time{font-size:17px;padding-top:0}
  .ev .bub{font-size:15px}
  .outcome{font-size:20px;padding-top:18px}
  .ch-grid{grid-template-columns:1fr;gap:14px}
  .ch-screen{min-height:0}
  .ch h3{font-size:20px;margin-top:20px}
  .after-row{grid-template-columns:1fr;gap:28px;margin-top:80px}
  .seq{padding:16px;border-radius:24px}
  .seq-step{grid-template-columns:1fr;gap:4px;padding:14px 16px}
  .crm{padding:12px;border-radius:24px;overflow-x:auto}
  .crm table{font-size:13px;min-width:330px}
  .crm td{padding:11px 10px}
  .real-chats{grid-template-columns:1fr;margin-top:80px}
  .ask-grid{grid-template-columns:1fr;gap:36px}
  .ask-intro{font-size:16px}
  .ask-win{padding:14px;border-radius:26px}
  .ask-log{height:400px}
  .ask-chip{font-size:13px;padding:10px 13px}
}
@media (prefers-reduced-motion:reduce){
  .ai-hero.armed .clock,.ai-hero.armed .bub,.ai-hero.armed .bub-meta,.ai-hero.armed .ai-sub,.ai-hero.armed .ai-ctas{opacity:1;transform:none}
  .ai-hero.armed .ai-h1 .px{color:var(--ink)}
}
.ask-log{padding:10px 18px 18px;margin:0 -18px}
.ask-log .bub.ai{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 8px 28px rgba(88,73,241,.4)}
.after-row .crm-note{font-size:12px;color:#86868b;margin:6px 14px 0;max-width:none}
@media (max-width:820px){.ask-log{padding:8px 14px 14px;margin:0 -14px}}

/* AI hero: tailored scenes for different business owners */
.ai-who{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin:0 auto 34px}
.ai-who button{position:relative;font:500 14px/1 'Inter',sans-serif;color:#6e6e73;background:none;border:0;padding:9px 12px;border-radius:100px;cursor:pointer;transition:color .3s,background .3s}
.ai-who button:hover{color:#d2d2d7}
.ai-who button.on-who{color:#fff;background:#1c1c1e}
.ai-who button::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--stage-grad);transform:scaleX(0);transform-origin:left}
.ai-who button.on-who.run::after{transform:scaleX(1);transition:transform var(--dur,7s) linear}
.ai-hero.armed .ai-who{opacity:0}
.ai-who{transition:opacity .8s ease}
.ai-hero .ai-who.on{opacity:1!important}
.ai-chat{min-height:280px;justify-content:flex-start}
.ai-chat.out .clock,.ai-chat.out .bub,.ai-chat.out .bub-meta{opacity:0!important;transform:translateY(-8px)!important;transition:opacity .3s ease,transform .3s ease}
.ai-time{display:inline-block;transition:opacity .35s ease,filter .35s ease,color .5s ease,text-shadow 1.2s ease}
.ai-time.swap{opacity:0;filter:blur(8px)}
@media (max-width:820px){
  .ai-who{margin-bottom:26px;gap:2px}
  .ai-who button{font-size:13px;padding:8px 10px}
  .ai-chat{min-height:292px}
}
.bub[hidden]{display:none!important}
/* AI hero: text-only swap between businesses (bubbles stay, text changes) */
.ai-hero .bub{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),width .42s cubic-bezier(.4,0,.2,1),height .42s cubic-bezier(.4,0,.2,1)}
.ai-hero .clock,.ai-hero .bub-meta{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),color .26s ease}
.ai-hero .bub,.ai-hero .bub b{transition-property:opacity,transform,width,height,color;}
.ai-hero .bub b{transition:color .26s ease}
.ai-hero .txt-out,.ai-hero .txt-out b,.ai-hero .txt-out .sec{color:transparent!important}
.ai-hero .bub.txt-out{overflow:hidden}
.ai-hero .ai-time.txt-out{color:transparent!important;text-shadow:none}
.ai-hero .bub{overflow:hidden}

/* =====================================================================
   META ADS PAGE: "Make the scroll stop"
   ===================================================================== */
.ma-page{--blue:#0866ff;--soft:#f5f5f7;--ink:#1d1d1f;--mute:#6e6e73}
.ma-page section{scroll-margin-top:70px}

/* ---------- Hero: light, phone with a live feed ---------- */
.ma-hero{background:var(--soft);color:var(--ink);padding:150px 0 110px;overflow:hidden}
.ma-hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.ma-hero h1{font-size:clamp(48px,6.6vw,96px);line-height:.96;font-weight:700;letter-spacing:-.05em}
.ma-hero .lede{font-size:21px;line-height:1.5;color:var(--mute);max-width:520px;margin-top:28px}
.ma-ctas{display:flex;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap}
.ma-ctas .btn{height:54px;padding:0 30px;font-size:17px}
.ma-ctas .quiet{font-size:16px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(0,0,0,.25)}
.ma-ctas .quiet:hover{text-decoration-color:var(--ink)}

.phone-stage{position:relative;display:flex;justify-content:center}
.phone{position:relative;width:310px;height:630px;border-radius:50px;background:#0c0c0e;padding:11px;box-shadow:0 50px 100px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06)}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#0c0c0e;z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#fff}
.ig-top{position:absolute;top:0;left:0;right:0;z-index:2;height:86px;padding:54px 16px 0;background:linear-gradient(#fff 70%,rgba(255,255,255,0));font:700 19px/1 'Inter',sans-serif;letter-spacing:-.4px;color:#111}
.feed{position:absolute;left:0;right:0;top:86px;will-change:transform}
.feed.moving{transition:transform 3.1s cubic-bezier(.12,.62,.2,1)}
.post{padding:10px 0 14px}
.post-h{display:flex;align-items:center;gap:8px;padding:0 12px 8px}
.post-h i{width:26px;height:26px;border-radius:50%;background:var(--c,#ddd);flex:none}
.post-h span{display:flex;flex-direction:column;gap:4px}
.post-h b{display:block;width:var(--w,74px);height:8px;border-radius:4px;background:#e4e4e8}
.post-h em{display:block;width:44px;height:6px;border-radius:3px;background:#efeff2}
.post-m{aspect-ratio:1/1;background:var(--g,#eee)}
.post-a{display:flex;gap:10px;padding:10px 12px 6px}
.post-a i{width:18px;height:18px;border-radius:50%;border:2px solid #d8d8dc}
.post-l{height:7px;border-radius:4px;background:#efeff2;margin:6px 12px 0;width:var(--w,70%)}
/* the ad */
.ad .post-h b{background:none;width:auto;height:auto;font:600 12px/1 'Inter',sans-serif;color:#111}
.ad .post-h em{background:none;width:auto;height:auto;font:400 10px/1 'Inter',sans-serif;font-style:normal;color:#8e8e93}
.ad .post-m{position:relative;display:flex;align-items:flex-end;padding:20px;background:radial-gradient(circle at 70% 30%,#ffd9c7 0%,#f7a98a 35%,#c86b84 70%,#5a3f8e 100%)}
.ad .post-m strong{font-size:27px;line-height:1.02;font-weight:700;letter-spacing:-.8px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.15)}
.ad-cta{display:flex;align-items:center;justify-content:space-between;margin:0;padding:11px 12px;background:#efefef;font:600 13px/1 'Inter',sans-serif;color:#111;position:relative;overflow:hidden}
.ad-cta::after{content:"\203A";font-size:20px;line-height:0}
.stopped .ad-cta{background:var(--blue);color:#fff;transition:background .3s .25s,color .3s .25s}
.tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(8,102,255,.35);transform:scale(0);opacity:0;pointer-events:none;z-index:4}
.tap.go{animation:tap .7s ease-out}
@keyframes tap{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.4);opacity:0}}
.lead-toast{position:absolute;left:calc(50% - 205px);top:120px;z-index:5;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:18px;background:#fff;
  box-shadow:0 24px 50px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.04);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .4s ease,transform .4s ease}
.lead-toast.on{opacity:1;transform:none}
.lead-toast .dot{width:34px;height:34px;border-radius:50%;background:var(--stage-grad);flex:none;display:flex;align-items:center;justify-content:center}
.lead-toast .dot svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lead-toast b{display:block;font-size:14px;color:#111}
.lead-toast small{font-size:12px;color:var(--mute)}

/* ---------- Game: which ad would you stop for? ---------- */
.game{background:#000;color:#f5f5f7;padding:150px 0}
.game-head{max-width:760px;margin:0 auto 18px;text-align:center}
.game-head h2{font-size:clamp(38px,5.2vw,68px);line-height:1;font-weight:700;letter-spacing:-.045em}
.game-head p{font-size:19px;line-height:1.5;color:#8e8e93;margin-top:18px}
.round-label{display:block;text-align:center;font-size:15px;font-weight:500;color:#8e8e93;margin:34px 0 26px;font-variant-numeric:tabular-nums}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px;margin:0 auto}
.choice{position:relative;text-align:left;border:0;padding:0;background:#141416;border-radius:26px;overflow:hidden;cursor:pointer;color:inherit;font:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .25s ease,box-shadow .3s ease,opacity .4s ease}
.choice:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.choice:disabled{cursor:default;transform:none}
.choice .cr{aspect-ratio:4/5;display:flex;align-items:flex-end;padding:22px;background:var(--bg)}
.choice .cr strong{font-size:25px;line-height:1.08;font-weight:700;letter-spacing:-.6px;color:var(--fg,#fff)}
.choice .meta{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-size:14px;color:#a1a1a6}
.choice .meta b{font-weight:600;color:#f5f5f7}
.choice .verdict{position:absolute;top:14px;left:14px;padding:7px 12px;border-radius:100px;font-size:13px;font-weight:600;opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease}
.choice.win .verdict{opacity:1;transform:none;background:#fff;color:#111}
.choice.lose{opacity:.42}
.choice.win{box-shadow:inset 0 0 0 2px #5b7cfa,0 20px 60px rgba(88,73,241,.35)}
.why{max-width:760px;margin:28px auto 0;min-height:84px;text-align:center;font-size:18px;line-height:1.5;color:#d2d2d7;opacity:0;transition:opacity .4s ease}
.why.on{opacity:1}
.why .nextbtn{display:inline-block;margin-top:16px;font:600 15px/1 'Inter',sans-serif;color:#fff;background:#1c1c1e;border:0;border-radius:100px;padding:12px 18px;cursor:pointer}
.why .nextbtn:hover{background:#2c2c2e}
.game-note{text-align:center;font-size:12px;color:#55555b;margin-top:26px}
.score{max-width:640px;margin:10px auto 0;text-align:center}
.score h3{font-size:clamp(32px,4.2vw,52px);line-height:1.05;font-weight:700;letter-spacing:-.04em}
.score p{font-size:18px;line-height:1.5;color:#a1a1a6;margin:16px 0 30px}
.score .row{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;align-items:center}
.score .row .btn{height:52px;padding:0 28px;font-size:16px}
.score .row button{font:500 15px/1 'Inter',sans-serif;color:#d2d2d7;background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* ---------- Simulator ---------- */
.sim{background:#fff;color:var(--ink);padding:150px 0}
.sim-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.sim h2{font-size:clamp(36px,4.8vw,62px);line-height:1;font-weight:700;letter-spacing:-.045em}
.sim .intro{font-size:18px;line-height:1.55;color:var(--mute);margin-top:18px}
.ctrl{margin-top:34px}
.ctrl+.ctrl{margin-top:26px}
.ctrl label{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:500;color:var(--ink);margin-bottom:12px}
.ctrl output{font-size:22px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.ctrl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,#5849f1 var(--p,50%),#e5e5ea var(--p,50%));outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.06);cursor:grab}
.ctrl input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:grab}
.ctrl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(91,124,250,.45)}
.ctrl small{display:block;font-size:13px;color:#86868b;margin-top:8px}
.result{background:var(--soft);border-radius:32px;padding:38px}
.result-big{font-size:clamp(54px,7vw,96px);line-height:.95;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.result-big+p{font-size:17px;color:var(--mute);margin-top:12px}
.bars{margin-top:36px;display:grid;gap:22px}
.bar-row span{display:flex;justify-content:space-between;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:9px}
.bar-row span b{font-variant-numeric:tabular-nums}
.track{height:16px;border-radius:10px;background:#e5e5ea;overflow:hidden}
.fill{height:100%;border-radius:10px;background:#a1a1a6;width:0;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar-row.us .fill{background:var(--stage-grad)}
.sim-note{font-size:13px;line-height:1.5;color:#86868b;margin-top:24px}

/* ---------- Campaign table (Ads Manager style) ---------- */
.camp{background:#000;color:#f5f5f7;padding:150px 0}
.camp-head{max-width:780px;margin:0 auto 60px;text-align:center}
.camp-head h2{font-size:clamp(36px,5vw,64px);line-height:1;font-weight:700;letter-spacing:-.045em}
.camp-head p{font-size:19px;line-height:1.5;color:#8e8e93;margin-top:18px}
.am{max-width:960px;margin:0 auto;border-radius:28px;background:#0f0f11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.am-top{display:grid;grid-template-columns:64px 1fr 120px;padding:16px 24px;font-size:13px;color:#8e8e93;border-bottom:1px solid rgba(255,255,255,.07)}
.am-row{border-bottom:1px solid rgba(255,255,255,.07)}
.am-row:last-child{border-bottom:0}
.am-line{display:grid;grid-template-columns:64px 1fr 120px;align-items:center;padding:20px 24px}
.sw{position:relative;width:44px;height:26px;border-radius:26px;border:0;background:#3a3a3c;cursor:pointer;transition:background .25s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.sw[aria-checked=true]{background:var(--blue)}
.sw[aria-checked=true]::after{transform:translateX(18px)}
.am-name{background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.am-name b{display:block;font-size:19px;font-weight:600;letter-spacing:-.3px}
.am-name small{display:block;font-size:14px;color:#8e8e93;margin-top:4px}
.status{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;color:#3ddc97}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.am-row.off .status{color:#8e8e93}
.am-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.am-row.open .am-more{grid-template-rows:1fr}
.am-more>div{overflow:hidden}
.am-more ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 24px 22px 88px}
.am-more li{font-size:14px;line-height:1.45;color:#d2d2d7;background:#18181b;border-radius:14px;padding:13px 14px}
.am-off{display:none;margin:0 24px 20px 88px;padding:14px 16px;border-radius:14px;background:rgba(224,57,64,.1);color:#ff8a8f;font-size:15px;line-height:1.45}
.am-row.off .am-off{display:block}
.am-row.off .am-name b{color:#8e8e93}
.camp-tip{text-align:center;font-size:14px;color:#6e6e73;margin-top:22px}

/* ---------- Proof + book (white) ---------- */
.ma-book{background:#fff;color:var(--ink);padding:150px 0}
.ma-book-head{max-width:760px;margin:0 auto 54px;text-align:center}
.ma-book-head h2{font-size:clamp(36px,5vw,64px);line-height:1;font-weight:700;letter-spacing:-.045em}
.ma-book-head p{font-size:19px;line-height:1.5;color:var(--mute);margin-top:18px}
.ma-proof{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:110px}
.ma-proof .media{--ar:4/3;border-radius:28px}
.ma-faq{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:40px auto 0}
.ma-faq div{background:var(--soft);border-radius:22px;padding:24px}
.ma-faq b{display:block;font-size:16px;font-weight:600;margin-bottom:8px}
.ma-faq p{font-size:15px;line-height:1.5;color:var(--mute)}

.ma-page a:focus-visible,.ma-page button:focus-visible{outline:2px solid #5b7cfa;outline-offset:3px}

@media (max-width:1000px){
  .ma-hero .container{grid-template-columns:1fr;gap:56px;text-align:center}
  .ma-hero .lede{margin:24px auto 0}
  .ma-ctas{justify-content:center}
  .lead-toast{left:calc(50% - 190px)}
  .sim-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:820px){
  .ma-hero{padding:112px 0 80px}
  .ma-hero h1{font-size:min(54px,13vw)}
  .ma-hero .lede{font-size:17px}
  .ma-ctas{flex-direction:column;gap:16px}
  .ma-ctas .btn{width:100%;max-width:320px}
  .phone{width:270px;height:550px;border-radius:44px;padding:10px}
  .screen{border-radius:35px}
  .lead-toast{left:10px;right:10px;top:auto;bottom:40px;max-width:300px;margin:0 auto}
  .game,.sim,.camp,.ma-book{padding:96px 0}
  .game-head p,.camp-head p,.ma-book-head p{font-size:16px}
  .duel{gap:10px}
  .choice{border-radius:20px}
  .choice .cr{padding:14px}
  .choice .cr strong{font-size:17px}
  .choice .meta{padding:10px 12px;font-size:12px}
  .choice .verdict{font-size:11px;top:10px;left:10px;padding:6px 9px}
  .why{font-size:16px}
  .result{padding:26px 22px;border-radius:26px}
  .am{border-radius:22px}
  .am-top{grid-template-columns:56px 1fr;padding:14px 16px}
  .am-top span:last-child{display:none}
  .am-line{grid-template-columns:56px 1fr;padding:16px}
  .am-line .status{grid-column:2;margin-top:8px}
  .am-name b{font-size:17px}
  .am-more ul{grid-template-columns:1fr;padding:0 16px 18px}
  .am-off{margin:0 16px 16px}
  .ma-proof{grid-template-columns:1fr;margin-bottom:80px}
  .ma-faq{grid-template-columns:1fr}
}
.lead-toast{top:auto;bottom:70px;left:calc(50% - 235px)}
@media (max-width:1000px){.lead-toast{left:calc(50% - 215px)}}
@media (max-width:820px){.lead-toast{left:10px;right:10px;bottom:24px}}
.duel{max-width:640px}
.choice .cr{aspect-ratio:1/1}
@media (max-width:820px){.choice .cr{aspect-ratio:4/5}.choice .meta span{display:none}}

/* =====================================================================
   SHOPIFY PAGE: "The Storefront"
   ===================================================================== */
.sh-page{--soft:#f5f5f7;--ink:#1d1d1f;--mute:#6e6e73}
.sh-page section{scroll-margin-top:70px}
.sh-h2{font-size:clamp(36px,5vw,64px);line-height:1;font-weight:700;letter-spacing:-.045em}
.sh-p{font-size:19px;line-height:1.5;color:var(--mute);margin-top:18px}
.sh-head{max-width:760px;margin:0 auto 60px;text-align:center}

/* ---------- store mock (re-skinnable) ---------- */
.store{--s-bg:#fff;--s-ink:#111;--s-acc:#111;--s-sub:#f4f4f5;--s-font:'Inter',sans-serif;--s-rad:12px;--s-ban:linear-gradient(135deg,#e9e4ff,#c9d8ff);
  --p1:#e9e1d8;--p2:#d9e4ec;--p3:#e8dcea;--p4:#dfe9dc;
  position:relative;background:var(--s-bg);color:var(--s-ink);border-radius:18px;overflow:hidden;font-family:var(--s-font);
  box-shadow:0 40px 90px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06);transition:background .5s ease,color .5s ease}
.s-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f2f2f4;border-bottom:1px solid rgba(0,0,0,.06)}
.s-bar i{width:9px;height:9px;border-radius:50%;background:#d6d6da}
.s-bar span{margin-left:12px;flex:1;max-width:240px;height:22px;border-radius:7px;background:#fff;font:500 11px/22px 'Inter',sans-serif;color:#8e8e93;padding:0 10px}
.s-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 22px}
.s-logo{font-weight:700;font-size:17px;letter-spacing:-.3px}
.s-links{display:flex;gap:18px;font-size:12px;opacity:.7}
.s-cart{position:relative;width:22px;height:22px}
.s-cart svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s-badge{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;border-radius:9px;background:var(--s-acc);color:var(--s-bg);font:700 10px/17px 'Inter',sans-serif;text-align:center;padding:0 4px;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.s-badge.on{transform:scale(1)}
.s-badge.bump{animation:bump .4s ease}
@keyframes bump{50%{transform:scale(1.35)}}
.s-ban{margin:0 22px;border-radius:var(--s-rad);background:var(--s-ban);padding:34px 28px;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:12px;transition:background .5s ease}
.s-ban h3{font-size:26px;line-height:1.05;font-weight:700;letter-spacing:-.6px;max-width:300px}
.s-btn{align-self:flex-start;font:600 12px/1 'Inter',sans-serif;padding:10px 16px;border-radius:calc(var(--s-rad) * .8);background:var(--s-acc);color:var(--s-bg);transition:background .5s,color .5s}
.s-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 22px 22px}
.s-prod{display:flex;flex-direction:column;gap:6px}
.s-img{aspect-ratio:1/1;border-radius:var(--s-rad);background:var(--pc);transition:background .5s ease,border-radius .5s}
.s-prod b{font-size:12px;font-weight:600}
.s-prod em{font-style:normal;font-size:11px;opacity:.65}
.s-add{margin-top:2px;font:600 10.5px/1 'Inter',sans-serif;text-align:center;padding:8px 0;border-radius:calc(var(--s-rad) * .7);background:var(--s-sub);color:var(--s-ink);transition:background .25s,color .25s}
.s-add.hit{background:var(--s-acc);color:var(--s-bg)}
.store .bk{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.store.build .bk{opacity:0;transform:translateY(14px)}
.store.build .bk.in{opacity:1;transform:none}
.cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;pointer-events:none;opacity:0;transition:transform 1s cubic-bezier(.45,0,.2,1),opacity .3s}
.cursor svg{width:22px;height:22px;fill:#111;stroke:#fff;stroke-width:1.4}
.cursor.click svg{transform:scale(.85)}

/* ---------- Hero ---------- */
.sh-hero{background:#fff;color:var(--ink);padding:150px 0 120px;overflow:hidden}
.sh-hero .container{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.sh-hero h1{font-size:clamp(46px,6vw,88px);line-height:.98;font-weight:700;letter-spacing:-.05em}
.sh-hero .lede{font-size:20px;line-height:1.5;color:var(--mute);margin-top:26px;max-width:470px}
.sh-ctas{display:flex;align-items:center;gap:26px;margin-top:36px;flex-wrap:wrap}
.sh-ctas .btn{height:54px;padding:0 30px;font-size:17px}
.sh-ctas .quiet{font-size:16px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(0,0,0,.25)}
.sh-facts{display:flex;gap:28px;margin-top:40px;flex-wrap:wrap}
.sh-facts div b{display:block;font-size:24px;font-weight:700;letter-spacing:-.5px}
.sh-facts div span{font-size:14px;color:var(--mute)}
.hero-store{position:relative}
.order-toast{position:absolute;right:-14px;bottom:-26px;z-index:6;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:18px;background:#fff;
  box-shadow:0 24px 50px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.order-toast.on{opacity:1;transform:none}
.order-toast i{width:34px;height:34px;border-radius:10px;background:#008060;display:flex;align-items:center;justify-content:center}
.order-toast i svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.order-toast b{display:block;font-size:14px}
.order-toast small{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- Before / after (dark) ---------- */
.ba{background:#000;color:#f5f5f7;padding:150px 0}
.ba .sh-p{color:#8e8e93}
.ba-frame{position:relative;max-width:980px;margin:0 auto;border-radius:22px;overflow:hidden;aspect-ratio:16/10;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ba-layer{position:absolute;inset:0}
.ba-after{clip-path:inset(0 0 0 var(--x,50%))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fff;z-index:3;pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--x,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.ba-knob svg{width:24px;height:24px;stroke:#111;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba-tag{position:absolute;top:16px;z-index:2;font:600 13px/1 'Inter',sans-serif;padding:8px 12px;border-radius:100px;background:rgba(0,0,0,.6);color:#fff}
.ba-before .ba-tag{left:16px}.ba-after .ba-tag{right:16px;background:#fff;color:#111}
/* the "before" store: dated on purpose */
.old{width:100%;height:100%;background:#fffef2;color:#222;font-family:'Times New Roman',Times,serif;display:flex;flex-direction:column}
.old-top{background:#ffeb3b;color:#d00;font:700 15px/1 'Times New Roman',serif;text-align:center;padding:9px;letter-spacing:1px}
.old-nav{display:flex;align-items:center;gap:16px;padding:10px 16px;background:#1a237e;color:#fff;font-size:14px}
.old-nav b{font-size:20px;margin-right:auto;font-family:'Comic Sans MS','Chalkboard SE',cursive}
.old-nav u{color:#9fd3ff}
.old-body{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:14px;flex:1}
.old-side{background:#eee;border:1px solid #bbb;padding:10px;font-size:13px;line-height:1.9;color:#00e}
.old-main h4{font-size:24px;color:#c00;margin-bottom:8px}
.old-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.old-grid div{border:1px solid #999;background:#fff;padding:6px;font-size:12px}
.old-grid div i{display:block;aspect-ratio:1/1;background:#ccc;margin-bottom:6px}
.old-grid div s{color:#888}.old-grid div em{color:#c00;font-style:normal;font-weight:700;display:block}
.old-grid div u{display:block;margin-top:4px;background:#ff9800;color:#000;text-decoration:none;text-align:center;padding:3px}
.ba-after .store{height:100%;border-radius:0;box-shadow:none}
.ba-after .s-ban{min-height:0;padding:44px 34px}
.ba-after .s-ban h3{font-size:34px;max-width:400px}

/* ---------- Theme try-on (white) ---------- */
.themes{background:#fff;color:var(--ink);padding:150px 0}
.try{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.th-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.th{display:flex;flex-direction:column;gap:10px;text-align:left;border:0;background:var(--soft);border-radius:20px;padding:12px;cursor:pointer;font:inherit;color:inherit;transition:box-shadow .2s,background .2s}
.th:hover{background:#ececf0}
.th[aria-pressed=true]{background:#fff;box-shadow:0 0 0 2px #5849f1,0 10px 30px rgba(88,73,241,.18)}
.th-sw{display:flex;height:46px;border-radius:12px;overflow:hidden}
.th-sw i{flex:1}
.th b{font-size:15px;font-weight:600;padding:0 4px}
.th small{font-size:13px;color:var(--mute);padding:0 4px 4px}
.th-note{grid-column:1/-1;font-size:14px;color:var(--mute);margin-top:8px}

/* ---------- Pricing as products (soft) ---------- */
.price{background:var(--soft);color:var(--ink);padding:150px 0}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
.tier{background:#fff;border-radius:28px;padding:14px 14px 28px;display:flex;flex-direction:column}
.tier-img{border-radius:18px;aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;background:var(--tb)}
.tier-img svg{width:60px;height:60px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tier h3{font-size:23px;font-weight:700;letter-spacing:-.4px;margin:24px 14px 4px}
.tier .amt{font-size:40px;font-weight:700;letter-spacing:-1.2px;margin:4px 14px 0}
.tier .amt small{font-size:15px;font-weight:500;color:var(--mute);letter-spacing:0}
.tier .eta{display:inline-flex;align-items:center;gap:7px;margin:12px 14px 0;font-size:14px;font-weight:500;color:#008060}
.tier .eta::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tier ul{list-style:none;margin:20px 14px 26px;display:grid;gap:10px}
.tier li{font-size:15px;line-height:1.45;color:#3a3a3f;padding-left:22px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:6px;border-left:2px solid #5849f1;border-bottom:2px solid #5849f1;transform:rotate(-45deg)}
.tier .add{margin:auto 14px 0;height:50px;border:0;border-radius:100px;background:#111;color:#fff;font:600 16px/1 'Inter',sans-serif;cursor:pointer;transition:transform .15s,background .2s}
.tier .add:hover{background:#000}
.tier .add:active{transform:scale(.97)}
.tier.pop{box-shadow:0 0 0 2px #5849f1}
.tier.pop .add{background:var(--btn-grad)}
.price-note{text-align:center;font-size:14px;color:var(--mute);margin-top:28px}
.price-note a{color:inherit;text-decoration:underline}
/* cart drawer */
.drawer-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(420px,100%);background:#fff;color:var(--ink);padding:26px;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:-30px 0 60px rgba(0,0,0,.15)}
.cart-open .drawer{transform:none}.cart-open .drawer-scrim{opacity:1;visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.drawer-top h3{font-size:22px;font-weight:700}
.drawer-x{width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);cursor:pointer;font-size:20px;line-height:1}
.cart-line{display:flex;gap:14px;align-items:center;padding:16px;border-radius:18px;background:var(--soft)}
.cart-line i{width:56px;height:56px;border-radius:12px;background:var(--tb);flex:none}
.cart-line b{display:block;font-size:16px}.cart-line small{font-size:13px;color:#008060}
.cart-line span{margin-left:auto;font-size:18px;font-weight:700}
.cart-steps{margin:26px 0;display:grid;gap:12px;font-size:15px;line-height:1.45;color:#3a3a3f}
.cart-steps p{display:flex;gap:12px}
.cart-steps p i{flex:none;width:24px;height:24px;border-radius:50%;background:#111;color:#fff;font:700 12px/24px 'Inter',sans-serif;text-align:center;font-style:normal}
.drawer .btn{margin-top:auto;height:54px;font-size:17px}
.drawer small.fine{display:block;text-align:center;font-size:12px;color:var(--mute);margin-top:12px}

/* ---------- Conversion list (white) ---------- */
.conv{background:#fff;color:var(--ink);padding:150px 0}
.conv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.conv-grid div{border-top:1px solid #e5e5ea;padding-top:22px}
.conv-grid h3{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.conv-grid p{font-size:16px;line-height:1.5;color:var(--mute)}

/* ---------- Book (black, closing) -> footer needs white above, so keep white ---------- */
.sh-book{background:#fff;color:var(--ink);padding:40px 0 150px}
.sh-book .book-wrap{margin-top:0}

.sh-page a:focus-visible,.sh-page button:focus-visible{outline:2px solid #5b7cfa;outline-offset:3px}

@media (max-width:1000px){
  .sh-hero .container{grid-template-columns:1fr;gap:56px;text-align:center}
  .sh-hero .lede{margin:22px auto 0}
  .sh-ctas,.sh-facts{justify-content:center}
  .try{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr;max-width:460px}
  .conv-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .sh-hero{padding:112px 0 90px}
  .sh-hero .lede{font-size:17px}
  .sh-ctas{flex-direction:column;gap:16px}
  .sh-ctas .btn{width:100%;max-width:320px}
  .sh-facts{gap:20px}
  .sh-facts div b{font-size:20px}
  .ba,.themes,.price,.conv{padding:96px 0}
  .sh-p{font-size:16px}
  .sh-head{margin-bottom:40px}
  .s-nav{padding:12px 14px}.s-links{display:none}
  .s-ban{margin:0 14px;padding:22px 18px;min-height:110px}.s-ban h3{font-size:19px}
  .s-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
  .s-grid .s-prod:nth-child(n+3){display:none}
  .order-toast{right:8px;left:8px;bottom:-30px}
  .ba-frame{aspect-ratio:4/5;border-radius:18px}
  .old-body{grid-template-columns:1fr}.old-side{display:none}
  .old-grid{grid-template-columns:repeat(2,1fr)}
  .old-grid div:nth-child(n+3){display:none}
  .ba-after .s-ban{padding:26px 18px}.ba-after .s-ban h3{font-size:22px}
  .th-list{grid-template-columns:1fr 1fr;gap:8px}
  .th{padding:10px;border-radius:16px}
  .th small{display:none}
  .conv-grid{grid-template-columns:1fr;gap:26px}
  .sh-book{padding:20px 0 96px}
}
.drawer[hidden]{display:none}
.sh-hero h1{font-size:clamp(44px,5.4vw,78px)}
.ba-after .s-ban{align-items:flex-end;text-align:right}
.ba-after .s-ban h3{margin-left:auto}
.ba-after .s-btn{align-self:flex-end}

/* =====================================================================
   360° STRATEGY PAGE: "The Blueprint"
   Paper white, hairline grid, serif display, one signature element (the ring)
   ===================================================================== */
.bp-page{--paper:#fbfbfc;--ink:#14141a;--mute:#6b6b75;--line:rgba(20,20,40,.08);--serif:'Instrument Serif',Georgia,serif}
.bp-page section{scroll-margin-top:70px}
.bp-grid{background-color:var(--paper);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px}
.bp-h{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.02}
.bp-h em{font-style:italic}
.bp-k{display:block;font-size:13px;font-weight:500;color:var(--mute);margin-bottom:18px;font-variant-numeric:tabular-nums}

/* ---------- Hero ---------- */
.bp-hero{color:var(--ink);padding:150px 0 120px;overflow:hidden}
.bp-hero .container{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.bp-hero h1{font-size:clamp(54px,7vw,104px)}
.bp-hero .lede{font-size:20px;line-height:1.55;color:var(--mute);max-width:470px;margin-top:28px}
.bp-ctas{display:flex;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap}
.bp-ctas .btn{height:54px;padding:0 30px;font-size:17px}
.bp-ctas .quiet{font-size:16px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(0,0,0,.25)}
.bp-ctas .quiet:hover{text-decoration-color:var(--ink)}

/* the ring */
.ring-wrap{position:relative;width:min(520px,100%);aspect-ratio:1/1;margin-left:auto}
.ring{width:100%;height:100%;overflow:visible}
.ring .track{fill:none;stroke:rgba(20,20,40,.06);stroke-width:30}
.ring .seg{fill:none;stroke-width:30;stroke-linecap:butt;cursor:pointer;transition:stroke-width .3s ease,opacity .3s ease;stroke-dasharray:0 100;pointer-events:stroke}
.ring .seg.dim{opacity:.28}
.ring .seg.on{stroke-width:38}
.ring .tick{stroke:rgba(20,20,40,.18);stroke-width:1}
.ring-lbl{position:absolute;transform:translate(-50%,-50%);font:500 14px/1.2 'Inter',sans-serif;color:var(--ink);white-space:nowrap;background:none;border:0;padding:6px 8px;cursor:pointer;opacity:0;transition:opacity .6s ease,color .3s}
.ring-lbl.show{opacity:1}
.ring-lbl.dim{color:#a0a0aa}
.ring-mid{position:absolute;inset:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.ring-mid b{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6vw,76px);line-height:1;letter-spacing:-.02em;transition:opacity .3s}
.ring-mid span{font-size:14px;line-height:1.45;color:var(--mute);max-width:200px;margin-top:10px;min-height:42px;transition:opacity .3s}
.ring-mid.swap b,.ring-mid.swap span{opacity:0}

/* ---------- Diagnostic (dark) ---------- */
.diag{background:#0b0b0d;color:#f2f2f5;padding:150px 0}
.diag .container{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.diag h2{font-size:clamp(42px,5.4vw,72px)}
.diag .intro{font-size:18px;line-height:1.55;color:#8e8e97;margin-top:20px;max-width:400px}
.meter{margin-top:46px;max-width:400px}
.meter-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.meter-fill{height:100%;width:0;background:var(--stage-grad);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.meter-row{display:flex;justify-content:space-between;font-size:13px;color:#6e6e78;margin-top:10px}
.verdict-box{margin-top:28px;min-height:120px}
.verdict-box h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1}
.verdict-box p{font-size:16px;line-height:1.55;color:#a1a1aa;margin-top:10px;max-width:420px}
.q-list{list-style:none;border-top:1px solid rgba(255,255,255,.1)}
.q{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.q p{font-size:19px;line-height:1.4;color:#e8e8ee}
.q-btns{display:flex;gap:6px;background:rgba(255,255,255,.06);border-radius:100px;padding:4px}
.q-btns button{font:500 14px/1 'Inter',sans-serif;color:#a1a1aa;background:none;border:0;border-radius:100px;padding:10px 14px;cursor:pointer;transition:background .2s,color .2s}
.q-btns button[aria-pressed=true]{background:#fff;color:#111}

/* ---------- The Blueprint document ---------- */
.doc-sec{color:var(--ink);padding:150px 0}
.doc-head{max-width:720px;margin:0 auto 70px;text-align:center}
.doc-head h2{font-size:clamp(42px,5.4vw,72px)}
.doc-head p{font-size:19px;line-height:1.55;color:var(--mute);margin-top:18px}
.doc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1060px;margin:0 auto}
.doc{position:relative;background:#fff;border-radius:6px;aspect-ratio:1/1.32;padding:48px 44px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 30px 70px rgba(20,20,40,.12);transform:rotate(-1.5deg)}
.doc::after{content:"";position:absolute;inset:10px -10px -10px 10px;z-index:-1;background:#fff;border-radius:6px;box-shadow:0 20px 50px rgba(20,20,40,.08);transform:rotate(3deg)}
.doc small{font-size:12px;color:var(--mute)}
.doc h3{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1;margin:16px 0 6px}
.doc .for{font-size:14px;color:var(--mute)}
.doc hr{border:0;border-top:1px solid var(--line);margin:28px 0 20px}
.doc ol{list-style:none;counter-reset:ch}
.doc li{counter-increment:ch;display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:9px 0;border-bottom:1px dotted rgba(20,20,40,.15);transition:color .2s}
.doc li::before{content:counter(ch,decimal-leading-zero);color:#a0a0aa;width:30px;flex:none;font-variant-numeric:tabular-nums}
.doc li span{flex:1}
.doc li i{font-style:normal;color:#a0a0aa;font-variant-numeric:tabular-nums}
.doc li.on{color:#5849f1}
.doc .ringmark{position:absolute;right:40px;top:44px;width:54px;height:54px}
.chap-list{list-style:none;display:grid;gap:4px}
.chap{width:100%;text-align:left;background:none;border:0;border-radius:16px;padding:16px 18px;cursor:pointer;color:var(--ink);font:inherit;transition:background .2s}
.chap:hover,.chap.on{background:#fff;box-shadow:0 0 0 1px var(--line)}
.chap b{display:block;font-size:17px;font-weight:600;letter-spacing:-.2px}
.chap span{display:block;font-size:15px;line-height:1.5;color:var(--mute);margin-top:4px}

/* ---------- 90 days ---------- */
.days{background:#fff;color:var(--ink);padding:150px 0}
.days-head{max-width:720px;margin:0 auto 80px;text-align:center}
.days-head h2{font-size:clamp(42px,5.4vw,72px)}
.days-head p{font-size:19px;line-height:1.55;color:var(--mute);margin-top:18px}
.track90{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.track90::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.track90 .prog{position:absolute;left:0;top:8px;height:3px;width:0;border-radius:3px;background:var(--stage-grad);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.track90.go .prog{width:100%}
.phase{position:relative;padding-top:44px}
.phase::before{content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid rgba(20,20,40,.25)}
.phase .bp-k{margin-bottom:10px}
.phase h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05}
.phase p{font-size:16px;line-height:1.55;color:var(--mute);margin-top:12px;max-width:320px}
.phase ul{list-style:none;margin-top:18px;display:grid;gap:8px}
.phase li{font-size:15px;color:#3a3a44;padding-left:16px;position:relative}
.phase li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:#3a3a44}

/* ---------- Commitments ---------- */
.trust{color:var(--ink);padding:150px 0}
.trust-head{max-width:720px;margin:0 auto 70px;text-align:center}
.trust-head h2{font-size:clamp(42px,5.4vw,72px)}
.pledges{display:grid;grid-template-columns:repeat(2,1fr);max-width:980px;margin:0 auto;background:#fff;border-radius:28px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pledge{padding:40px 44px}
.pledge:nth-child(odd){border-right:1px solid var(--line)}
.pledge:nth-child(-n+2){border-bottom:1px solid var(--line)}
.pledge h3{font-size:20px;font-weight:600;letter-spacing:-.3px}
.pledge p{font-size:16px;line-height:1.55;color:var(--mute);margin-top:10px}

/* ---------- Book ---------- */
.bp-book{background:#fff;color:var(--ink);padding:140px 0 150px}
.bp-book-head{max-width:720px;margin:0 auto 56px;text-align:center}
.bp-book-head h2{font-size:clamp(42px,5.4vw,72px)}
.bp-book-head p{font-size:19px;line-height:1.55;color:var(--mute);margin-top:18px}

.bp-page a:focus-visible,.bp-page button:focus-visible{outline:2px solid #5b7cfa;outline-offset:3px}

@media (max-width:1000px){
  .bp-hero .container{grid-template-columns:1fr;gap:40px;text-align:center}
  .bp-hero .lede{margin:24px auto 0}
  .bp-ctas{justify-content:center}
  .ring-wrap{margin:0 auto;width:min(440px,100%)}
  .diag .container{grid-template-columns:1fr;gap:50px}
  .doc-wrap{grid-template-columns:1fr;gap:50px;max-width:520px}
  .track90{grid-template-columns:1fr;gap:0}
  .track90::before{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .track90 .prog{left:6px;top:0;width:3px;height:0;transition:height 1.6s cubic-bezier(.2,.8,.2,1)}
  .track90.go .prog{width:3px;height:100%}
  .phase{padding:0 0 44px 46px}
  .phase::before{top:6px}
}
@media (max-width:820px){
  .bp-hero{padding:112px 0 80px}
  .bp-hero h1{font-size:min(56px,14vw)}
  .bp-hero .lede{font-size:17px}
  .bp-ctas{flex-direction:column;gap:16px}
  .bp-ctas .btn{width:100%;max-width:320px}
  .ring-lbl{font-size:12px}
  .diag,.doc-sec,.days,.trust{padding:96px 0}
  .bp-book{padding:80px 0 96px}
  .q{grid-template-columns:1fr;gap:12px;padding:20px 0}
  .q p{font-size:17px}
  .q-btns{justify-self:start}
  .doc{padding:30px 26px}
  .doc h3{font-size:32px}
  .doc .ringmark{right:24px;top:28px;width:40px;height:40px}
  .doc li{font-size:13px;padding:7px 0}
  .pledges{grid-template-columns:1fr;border-radius:22px}
  .pledge{padding:28px 24px;border-right:0!important;border-bottom:1px solid var(--line)}
  .pledge:last-child{border-bottom:0}
  .doc-head p,.days-head p,.bp-book-head p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.track90 .prog{transition:none}}
.doc .doc-foot{position:absolute;left:44px;right:44px;bottom:40px;display:flex;justify-content:space-between;font-size:12px;color:#a0a0aa;border-top:1px solid var(--line);padding-top:16px}
@media (max-width:820px){.doc .doc-foot{left:26px;right:26px;bottom:24px}}
@media (max-width:1000px){.diag .q-list+.meter{margin-top:34px}}

/* ---------- Shopify: "starting at" tier + cart note ---------- */
.tier .amt small.from{display:block;font-size:13px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.tier .vary{margin:12px 14px 0;font-size:13.5px;line-height:1.5;color:var(--mute)}
.c-amt small{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--mute);text-align:right}
.c-from{font-size:14px;line-height:1.5;color:var(--mute);background:var(--soft);border-radius:14px;padding:12px 14px;margin:0 0 14px}
.c-from[hidden]{display:none}

/* ---------- Shopify: theme slider on phones (stays in view while you look at the store) ---------- */
@media (max-width:820px){
  .try{display:flex;flex-direction:column;gap:14px;min-width:0;width:100%}
  .try>*{min-width:0}
  .try .th-list{order:-1;position:sticky;top:62px;width:calc(100% + 40px);box-sizing:border-box;z-index:5;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -20px;padding:8px 20px 12px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .try .th-list::-webkit-scrollbar{display:none}
  .try .th{flex:0 0 104px;scroll-snap-align:start;padding:8px;border-radius:14px;gap:7px}
  .try .th-sw{height:30px;border-radius:8px}
  .try .th b{font-size:13.5px}
  .try .th[aria-pressed=true]{box-shadow:0 0 0 2px #5849f1,0 6px 18px rgba(88,73,241,.18)}
  .try .th-note{text-align:center;margin-top:4px}
}

/* ================= SERVICES HUB ================= */
.sv-page{--ink:#1d1d1f;--mute:#6e6e73;--soft:#f5f5f7}
.sv-eyebrow{display:inline-block;font-size:14px;font-weight:600;color:#5849f1;letter-spacing:.2px;margin-bottom:18px}
.sv-eyebrow.on-dark{color:#8aa4f7}
.sv-grad{background:var(--stage-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-hero{background:#fff;color:var(--ink);padding:170px 0 120px}
.sv-head{max-width:760px;margin:0 auto 64px;text-align:center}
.sv-head h1{font-size:64px;line-height:1.05;font-weight:700;letter-spacing:-1.8px}
.sv-head p{font-size:20px;line-height:1.5;color:var(--mute);margin-top:20px}
.sv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1120px;margin:0 auto}
.sv-card{position:relative;display:flex;flex-direction:column;background:var(--soft);border-radius:30px;padding:10px;color:var(--ink);
  overflow:hidden;isolation:isolate;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,background .4s ease}
.sv-card:hover{transform:translateY(-6px);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 70px rgba(20,20,60,.12)}
.sv-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 22px}
.sv-need{font-size:14px;font-weight:600;color:var(--c2);display:flex;align-items:center;gap:8px}
.sv-need::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2))}
.sv-card h2{font-size:34px;font-weight:700;letter-spacing:-1px;margin-top:10px}
.sv-card p{font-size:16.5px;line-height:1.5;color:var(--mute);margin-top:8px;max-width:420px}
.sv-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:26px;font-size:15px;color:var(--mute)}
.sv-foot b{color:var(--ink);font-weight:600}
.sv-go{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);position:relative;transition:transform .35s ease,background .35s ease}
.sv-go::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border:solid #fff;border-width:2.4px 2.4px 0 0;transform:translateX(-2px) rotate(45deg)}
.sv-card:hover .sv-go{transform:translateX(4px);background:linear-gradient(135deg,var(--c1),var(--c2))}

/* the live preview at the top of every card */
.sv-stage{position:relative;height:250px;border-radius:22px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(90% 120% at 15% 0%,color-mix(in srgb,var(--c1) 30%,#fff),transparent 60%),
             radial-gradient(90% 120% at 100% 100%,color-mix(in srgb,var(--c2) 26%,#fff),transparent 60%),#fff}
.sv-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);pointer-events:none}
.sv-stage>*{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sv-card:hover .sv-stage>:first-child{transform:translateY(-4px) scale(1.03)}

/* Meta: a sponsored post + leads coming in */
.mk-post{width:190px;background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(30,50,120,.16);overflow:hidden;font-size:11px;transform:translateY(6px)}
.mk-ph{display:flex;align-items:center;gap:7px;padding:9px 10px}
.mk-ph i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#f9a24b,#e1306c,#7b3fe4)}
.mk-ph span{display:flex;flex-direction:column;line-height:1.15}.mk-ph b{font-size:11px}.mk-ph small{font-size:9.5px;color:#8e8e93}
.mk-img{height:112px;background:linear-gradient(135deg,#ffd9c7,#f7a98a 45%,#c86b84);display:flex;align-items:flex-end;padding:10px}
.mk-img span{color:#fff;font-weight:700;font-size:13px;line-height:1.15;max-width:120px;text-shadow:0 1px 8px rgba(0,0,0,.15)}
.mk-shop{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;font-weight:600;background:#f4f6ff;color:#0866ff}
.mk-shop em{font-style:normal;font-size:16px;line-height:1}
.mk-pill{position:absolute;right:22px;top:34px;display:flex;align-items:center;gap:7px;padding:8px 12px 8px 9px;border-radius:100px;background:#fff;
  font-size:12px;font-weight:600;box-shadow:0 10px 26px rgba(30,50,120,.16);animation:mkPop 6s infinite}
.mk-pill i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.mk-pill small{font-weight:500;color:#8e8e93;margin-left:2px}
.mk-pill.p2{top:auto;bottom:30px;right:auto;left:22px;animation-delay:3s}
@keyframes mkPop{0%,8%{opacity:0;transform:translateY(10px) scale(.92)}14%,44%{opacity:1;transform:none}52%,100%{opacity:0;transform:translateY(-6px) scale(.96)}}

/* AI: a late-night chat answered in seconds */
.mk-chat{width:250px;display:flex;flex-direction:column;gap:7px;font-size:12.5px;line-height:1.35}
.mk-q{align-self:flex-end;background:#fff;color:var(--ink);padding:9px 12px;border-radius:16px 16px 4px 16px;box-shadow:0 8px 22px rgba(40,30,120,.10)}
.mk-a,.mk-typing{align-self:flex-start;background:linear-gradient(135deg,#5849f1,#4c73f3);color:#fff;border-radius:16px 16px 16px 4px;
  box-shadow:0 10px 30px rgba(88,73,241,.35)}
.mk-a{padding:9px 12px;max-width:210px;animation:mkReply 6s infinite}
.mk-slot{display:grid;align-items:start}.mk-slot>*{grid-area:1/1}
.mk-typing{display:flex;gap:4px;padding:11px 12px;width:max-content;animation:mkType 6s infinite}
.mk-typing i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.7;animation:mkDot 1s infinite}
.mk-typing i:nth-child(2){animation-delay:.15s}.mk-typing i:nth-child(3){animation-delay:.3s}
.mk-meta{font-size:10.5px;color:#6e6e73;margin-left:4px;animation:mkReply 6s infinite}
.mk-clock{position:absolute;top:16px;left:18px;font-size:11px;font-weight:600;color:#5849f1;background:rgba(255,255,255,.75);padding:4px 9px;border-radius:100px}
@keyframes mkType{0%,8%{opacity:0}12%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes mkReply{0%,32%{opacity:0;transform:translateY(6px)}38%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mkDot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Shopify: a store that takes orders */
.mk-store{width:230px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,80,60,.15)}
.mk-bar{display:flex;align-items:center;gap:4px;padding:7px 9px;background:#f2f2f4}
.mk-bar i{width:6px;height:6px;border-radius:50%;background:#d1d1d6}
.mk-bar span{margin-left:6px;flex:1;background:#fff;border-radius:5px;font-size:9px;color:#8e8e93;padding:2px 6px}
.mk-ban{height:58px;margin:9px;border-radius:9px;background:linear-gradient(135deg,#ece7df,#cfc4b4)}
.mk-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 9px 11px}
.mk-prods span{display:flex;flex-direction:column;gap:5px}
.mk-prods i{height:46px;border-radius:7px;background:#e9e1d8}.mk-prods span:nth-child(2) i{background:#d6d0c6}.mk-prods span:nth-child(3) i{background:#c9bfb2}
.mk-prods b{height:5px;width:70%;border-radius:3px;background:#e5e5ea}
.mk-order{position:absolute;bottom:26px;right:24px;display:flex;align-items:center;gap:8px;padding:9px 13px 9px 9px;border-radius:14px;background:#fff;
  font-size:12px;font-weight:600;box-shadow:0 12px 30px rgba(0,80,60,.18);animation:mkPop 4.2s infinite}
.mk-order i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#008060;color:#fff;font-style:normal;font-size:11px}
.mk-order b{margin-left:4px;color:#008060}

/* 360: four parts turning as one */
.mk-ring{position:relative;width:150px;height:150px;transform:translateY(-10px)}
.mk-ring svg{width:100%;height:100%;animation:mkSpin 24s linear infinite}
.mk-ring circle{fill:none;stroke-width:10}
.mk-ring .t{stroke:rgba(88,73,241,.08)}
.mk-ring .s{stroke:var(--c);stroke-dasharray:23 77;stroke-dashoffset:var(--o);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.mk-ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:#6e6e73}
.mk-ring span b{font-size:30px;line-height:1;color:var(--ink);letter-spacing:-1px}
.mk-tags{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.mk-tags em{font-style:normal;font-size:11px;font-weight:600;color:#5849f1;background:rgba(255,255,255,.8);padding:4px 9px;border-radius:100px}
@keyframes mkSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){.sv-stage *{animation:none!important}.mk-typing{display:none}}

.sv-combo{background:#000;color:#fff;padding:140px 0}
.sv-combo .container{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.sv-combo h2{font-size:52px;line-height:1.08;font-weight:700;letter-spacing:-1.4px}
.sv-combo p{font-size:18px;line-height:1.6;color:#9a9aa0;margin-top:22px;max-width:520px}
.sv-ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}
.sv-ctas.center{justify-content:center}
.sv-ctas .btn{height:54px;padding:0 32px;font-size:17px}
.sv-link{font-weight:600;font-size:16px;color:inherit;opacity:.85}
.sv-link:hover{opacity:1}
.sv-flow{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:14px}
.sv-flow::before{content:"";position:absolute;left:37px;top:30px;bottom:30px;width:2px;background:var(--stage-grad);opacity:.6;
  background:linear-gradient(#50a4f7,#5849f1,#84a3ca)}
.sv-flow li{position:relative;display:grid;grid-template-columns:52px 1fr;column-gap:20px;align-items:center;padding:20px 24px 20px 12px;
  border-radius:22px;background:#111114;border:1px solid rgba(255,255,255,.07)}
.sv-flow li span{grid-row:1/3;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#000;border:1px solid rgba(255,255,255,.14);
  font-size:14px;font-weight:600;color:#c9d4ff}
.sv-flow li:last-child span{background:var(--btn-grad,linear-gradient(135deg,#5849f1,#50a4f7));border:0;color:#fff}
.sv-flow b{font-size:19px;font-weight:600}
.sv-flow small{font-size:14.5px;color:#8e8e93;margin-top:2px}

.sv-steps{background:#fff;color:var(--ink);padding:140px 0 120px}
.sv-steps h2{font-size:48px;font-weight:700;letter-spacing:-1.3px;text-align:center}
.sv-step-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.sv-step{background:var(--soft);border-radius:24px;padding:30px 28px 32px}
.sv-step i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-weight:600;font-size:15px}
.sv-step h3{font-size:22px;font-weight:600;letter-spacing:-.4px;margin-top:22px}
.sv-step p{font-size:16px;line-height:1.55;color:var(--mute);margin-top:8px}
.sv-note{text-align:center;font-size:14px;color:var(--mute);margin-top:34px}

.sv-cta{background:var(--soft);color:var(--ink);padding:120px 0 130px;text-align:center}
.sv-cta h2{font-size:52px;font-weight:700;letter-spacing:-1.4px}
.sv-cta p{font-size:19px;line-height:1.5;color:var(--mute);margin:16px auto 0;max-width:520px}

@media (max-width:1000px){
  .sv-combo .container{grid-template-columns:1fr;gap:48px}
  .sv-step-row{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
}
@media (max-width:820px){
  .sv-hero{padding:112px 0 72px}
  .sv-head{margin-bottom:34px}
  .sv-head h1{font-size:40px;letter-spacing:-1.1px}
  .sv-head p{font-size:17px;margin-top:14px}
  .sv-grid{grid-template-columns:1fr;gap:12px}
  .sv-card{padding:8px;border-radius:24px}
  .sv-stage{height:190px;border-radius:18px}
  .sv-body{padding:18px 16px 14px}
  .sv-need{font-size:13px}
  .sv-card h2{font-size:27px;margin-top:8px}
  .sv-card p{font-size:15.5px;margin-top:6px}
  .sv-foot{padding-top:18px;font-size:14px}
  .sv-go{width:38px;height:38px}
  .mk-post{transform:translateY(4px) scale(.86)}
  .mk-chat{transform:scale(.92)}
  .mk-store{transform:scale(.9)}
  .mk-ring{width:124px;height:124px}
  .mk-pill{top:auto;bottom:22px;right:auto;left:14px}
  .mk-pill.p2{display:none}
  .mk-order{right:14px;bottom:18px}
  .sv-combo{padding:88px 0}
  .sv-combo h2{font-size:34px;letter-spacing:-.8px}
  .sv-combo p{font-size:16.5px}
  .sv-flow li{padding:16px 18px 16px 10px;column-gap:16px}
  .sv-flow b{font-size:17px}
  .sv-steps{padding:88px 0 80px}
  .sv-steps h2{font-size:32px;letter-spacing:-.8px}
  .sv-step-row{margin-top:34px;gap:12px}
  .sv-step{padding:22px 22px 24px}
  .sv-step h3{font-size:19px;margin-top:16px}
  .sv-cta{padding:80px 0 120px}
  .sv-cta h2{font-size:34px}
  .sv-cta p{font-size:16.5px}
  .sv-ctas{flex-direction:column;gap:18px}
  .sv-ctas .btn{width:100%}
}

/* ================= CONTACT: the mail window ================= */
.ct-page{--ink:#1d1d1f;--mute:#6e6e73;--soft:#f5f5f7;--line:rgba(0,0,0,.08)}
.ct-hero{background:#fff;color:var(--ink);padding:160px 0 110px;position:relative;overflow:hidden}
.ct-hero::before{content:"";position:absolute;left:50%;top:260px;width:1100px;height:700px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(88,73,241,.10),transparent 70%),radial-gradient(40% 50% at 80% 40%,rgba(80,164,247,.10),transparent 70%)}
.ct-head{max-width:720px;margin:0 auto 52px;text-align:center;position:relative}
.ct-eyebrow{display:inline-block;font-size:14px;font-weight:600;color:#5849f1;margin-bottom:16px}
.ct-head h1{font-size:60px;line-height:1.06;font-weight:700;letter-spacing:-1.7px}
.ct-head p{font-size:19px;line-height:1.55;color:var(--mute);margin-top:18px}

.mail{position:relative;max-width:820px;margin:0 auto;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 80px rgba(30,30,90,.14),0 8px 20px rgba(30,30,90,.06);transition:transform .9s cubic-bezier(.6,-.2,.7,0),opacity .7s ease .2s}
.mail .hp{position:absolute;left:-9999px;opacity:0}
.mail-bar{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;height:48px;padding:0 18px;background:#f6f6f8;border-bottom:1px solid var(--line)}
.mail-dots{display:flex;gap:8px}.mail-dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.mail-dots i:nth-child(2){background:#febc2e}.mail-dots i:nth-child(3){background:#28c840}
.mail-title{text-align:center;font-size:13.5px;font-weight:600;color:#3a3a3c}
.mail-row{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 26px;border-bottom:1px solid var(--line)}
.mail-row>label{flex:none;width:72px;font-size:14.5px;color:#8e8e93}
.mail-row input{flex:1;min-width:0;height:52px;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.mail-row input::placeholder,.mail-body textarea::placeholder{color:#b0b0b6}
.mail-row:focus-within>label{color:#5849f1}
.mail-to{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:100px;background:#eef0ff;color:#3b35b8;font-size:14.5px;font-weight:600}
.mail-to i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--btn-grad);color:#fff;font-style:normal;font-size:10px;font-weight:700}
.mail-topic{align-items:flex-start;padding-top:12px;padding-bottom:12px}
.mail-topic>label{padding-top:7px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid rgba(0,0,0,.1);background:#fff;border-radius:100px;padding:7px 14px;font:inherit;font-size:14px;font-weight:500;color:#3a3a3c;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .15s}
.chip:hover{border-color:rgba(88,73,241,.45)}
.chip:active{transform:scale(.96)}
.chip.on{background:#1d1d1f;border-color:#1d1d1f;color:#fff}
.subj-line{font-size:16px;font-weight:600;color:var(--ink);transition:opacity .2s}
.mail-body{padding:18px 26px 6px}
.mail-body textarea{width:100%;min-height:190px;border:0;outline:0;resize:vertical;font:inherit;font-size:16.5px;line-height:1.6;color:var(--ink);background:none}
.mail-help{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.5;color:#5b5b66;background:#f6f5ff;border-radius:12px;padding:0 14px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s ease,opacity .3s ease,padding .35s ease,margin .35s ease}
.mail-help.show{max-height:120px;opacity:1;padding:11px 14px;margin:6px 0 12px}
.mail-help i{flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--btn-grad)}
.mail-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 26px 22px}
.mail-note{font-size:13.5px;color:#8e8e93}.mail-note b{color:#3a3a3c;font-weight:600}
.mail-send{height:50px;padding:0 26px;gap:10px;font-size:16px;border:0;cursor:pointer}
.mail-send svg{width:18px;height:18px;transition:transform .3s ease}
.mail-send:hover svg{transform:translate(3px,-3px)}
.mail-send[disabled]{opacity:.7;pointer-events:none}
.mail-err{margin:0 26px 20px;padding:11px 14px;border-radius:12px;background:#fff1f0;color:#b42318;font-size:14px}
.mail-sent{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0}
.mail-sent svg{width:64px;height:64px;fill:none;stroke:#5849f1;stroke-width:2.4;stroke-linejoin:round}
.mail.is-sent{transform:translate(40%,-60%) scale(.2) rotate(-8deg);opacity:0}

.ct-alt{background:var(--soft);color:var(--ink);padding:120px 0 130px}
.ct-alt h2{font-size:44px;font-weight:700;letter-spacing:-1.2px;text-align:center}
.ct-alt-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:48px}
.tg-card,.call-card{display:flex;background:#fff;border-radius:28px;color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.tg-card:hover,.call-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(20,20,60,.10)}
.tg-card{gap:30px;align-items:center;padding:26px 34px 26px 26px;overflow:hidden}
.tg-phone{flex:none;width:250px;border-radius:24px;background:linear-gradient(160deg,#cfe3f5,#e6eef6);padding:0 0 16px;overflow:hidden}
.tg-top{display:flex;align-items:center;gap:9px;padding:12px 14px;background:rgba(255,255,255,.85)}
.tg-top i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--btn-grad);color:#fff;font-style:normal;font-size:11px;font-weight:700}
.tg-top span{display:flex;flex-direction:column;line-height:1.2}.tg-top b{font-size:13px}.tg-top small{font-size:11px;color:#2a9fd8}
.tg-msgs{display:flex;flex-direction:column;gap:7px;padding:12px 12px 0}
.tg-msgs p{max-width:86%;padding:8px 11px;border-radius:14px;font-size:12.5px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.tg-msgs .in{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.tg-msgs .out{align-self:flex-end;background:#e1f7cb;border-bottom-right-radius:4px}
.tg-msgs p{opacity:0;transform:translateY(6px);animation:tgIn .5s ease forwards}
.tg-msgs p:nth-child(2){animation-delay:.9s}.tg-msgs p:nth-child(3){animation-delay:1.8s}
@keyframes tgIn{to{opacity:1;transform:none}}
.tg-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#229ed9}
.tg-badge svg{width:18px;height:18px;fill:#229ed9}
.tg-card h3,.call-card h3{font-size:28px;font-weight:700;letter-spacing:-.7px;margin-top:10px}
.tg-card p,.call-card p{font-size:16px;line-height:1.55;color:var(--mute);margin-top:8px}
.tg-go{display:inline-block;margin-top:18px;font-weight:600;font-size:15.5px;color:#5849f1}
.call-card{flex-direction:column;padding:34px}
.call-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--soft);color:#5849f1}
.call-ico svg{width:26px;height:26px}
.call-card h3{margin-top:22px}
.call-card .tg-go{margin-top:auto;padding-top:18px}

@media (max-width:900px){
  .ct-alt-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .ct-hero{padding:108px 0 70px}
  .ct-head{margin-bottom:30px}
  .ct-head h1{font-size:36px;letter-spacing:-1px}
  .ct-head p{font-size:16.5px;margin-top:12px}
  .mail{border-radius:18px;margin:0 -6px}
  .mail-bar{height:42px;grid-template-columns:60px 1fr 60px;padding:0 14px}
  .mail-dots i{width:10px;height:10px}
  .mail-row{padding:0 16px;gap:10px;min-height:50px}
  .mail-row>label{width:58px;font-size:13.5px}
  .mail-row input{height:48px;font-size:16px}
  .mail-topic{flex-direction:column;align-items:stretch;gap:10px}
  .mail-topic>label{padding-top:0}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .mail-subj{align-items:flex-start;padding-top:14px;padding-bottom:14px}
  .subj-line{font-size:15px}
  .mail-body{padding:14px 16px 4px}
  .mail-body textarea{min-height:170px;font-size:16px}
  .mail-foot{flex-direction:column-reverse;align-items:stretch;gap:12px;padding:12px 16px 18px}
  .mail-note{text-align:center}
  .mail-send{width:100%;height:54px}
  .mail-err{margin:0 16px 16px}
  .ct-alt{padding:80px 0 110px}
  .ct-alt h2{font-size:32px}
  .ct-alt-grid{margin-top:30px;gap:12px}
  .tg-card{flex-direction:column;align-items:stretch;padding:12px 12px 26px;gap:22px;border-radius:24px}
  .tg-phone{width:auto}
  .tg-text{padding:0 12px}
  .tg-card h3,.call-card h3{font-size:24px}
  .call-card{padding:26px 24px;border-radius:24px}
}

/* ================= THANK YOU ================= */
.ty{background:#fff;color:#1d1d1f;padding:180px 0 140px;text-align:center;min-height:80vh}
.ty .container{max-width:720px}
.ty-mark{width:84px;height:84px;margin:0 auto 30px}
.ty-mark svg{width:100%;height:100%;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ty-mark circle{stroke:#ececf3}
.ty-mark path{stroke:#5849f1;stroke-dasharray:60;stroke-dashoffset:60;animation:tyDraw .7s .3s cubic-bezier(.6,0,.2,1) forwards}
.ty-mark{border-radius:50%;animation:tyRing 1.2s .2s ease-out}
@keyframes tyDraw{to{stroke-dashoffset:0}}
@keyframes tyRing{0%{box-shadow:0 0 0 0 rgba(88,73,241,.35)}100%{box-shadow:0 0 0 26px rgba(88,73,241,0)}}
.ty[data-from=form] .ty-cal,.ty[data-from=cal] .ty-form{display:none}
.ty h1{font-size:56px;font-weight:700;letter-spacing:-1.6px;line-height:1.08}
.ty h1+p{font-size:19px;line-height:1.55;color:#6e6e73;margin:16px auto 0;max-width:540px}
.ty-next{list-style:none;counter-reset:n;margin:48px auto 0;padding:0;text-align:left;max-width:560px;display:flex;flex-direction:column;gap:10px}
.ty-next li{counter-increment:n;position:relative;background:#f5f5f7;border-radius:18px;padding:18px 20px 18px 64px}
.ty-next li::before{content:counter(n);position:absolute;left:20px;top:18px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#1d1d1f;color:#fff;font-size:13px;font-weight:600}
.ty-next b{display:block;font-size:16.5px;font-weight:600}
.ty-next span{display:block;font-size:15px;line-height:1.5;color:#6e6e73;margin-top:3px}
.ty-next a{color:#5849f1;font-weight:600}
.ty-more{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:44px}
.ty-more span{width:100%;font-size:13.5px;color:#8e8e93;margin-bottom:4px}
.ty-more a{padding:9px 16px;border-radius:100px;border:1px solid rgba(0,0,0,.1);font-size:14.5px;font-weight:500;color:#1d1d1f;transition:border-color .2s,background .2s}
.ty-more a:hover{border-color:#5849f1;background:#f6f5ff}
@media (max-width:820px){
  .ty{padding:120px 0 100px}
  .ty h1{font-size:36px;letter-spacing:-1px}
  .ty h1+p{font-size:16.5px}
  .ty-mark{width:70px;height:70px;margin-bottom:24px}
  .ty-next{margin-top:34px}
}

/* ================= 404 ================= */
.nf{background:#000;color:#fff;padding:180px 0 140px;text-align:center;position:relative;overflow:hidden}
.nf::before{content:"";position:absolute;left:50%;top:180px;width:900px;height:600px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(88,73,241,.28),transparent 70%)}
.nf .container{position:relative;max-width:820px}
.nf-num{display:flex;align-items:center;justify-content:center;gap:14px;font-size:140px;font-weight:800;letter-spacing:-6px;line-height:1}
.nf-num span{background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-num i{width:104px;height:104px;border-radius:50%;border:14px solid transparent;background:var(--stage-grad) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mkSpin 6s linear infinite}
.nf h1{font-size:44px;font-weight:700;letter-spacing:-1.2px;margin-top:34px}
.nf p{font-size:18px;color:#9a9aa0;margin:14px auto 0;max-width:520px;line-height:1.5}
.nf-links{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:40px;text-align:left}
.nf-links a{display:flex;flex-direction:column;gap:3px;padding:18px 20px;border-radius:18px;background:#111114;border:1px solid rgba(255,255,255,.08);color:#fff;transition:border-color .2s,transform .2s}
.nf-links a:hover{border-color:rgba(124,110,255,.6);transform:translateY(-2px)}
.nf-links b{font-size:17px;font-weight:600}.nf-links small{font-size:14px;color:#8e8e93}
.nf-home{margin-top:34px;height:52px;padding:0 30px;font-size:16px}
@media (max-width:820px){
  .nf{padding:120px 0 100px}
  .nf-num{font-size:92px;gap:8px}.nf-num i{width:70px;height:70px;border-width:10px}
  .nf h1{font-size:30px}
  .nf p{font-size:16px}
  .nf-links{grid-template-columns:1fr}
  .nf-home{width:100%}
}

/* ================= LEGAL ================= */
.lg-page{--ink:#1d1d1f;--mute:#6e6e73;--soft:#f5f5f7}
.lg{background:#fff;color:var(--ink);padding:130px 0 120px}
.lg-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:5px;background:var(--soft);border-radius:100px;width:max-content;max-width:100%;margin:0 auto}
.lg-tabs a{padding:8px 16px;border-radius:100px;font-size:14px;font-weight:500;color:#3a3a3c;transition:background .2s}
.lg-tabs a:hover{background:rgba(0,0,0,.05)}
.lg-tabs a[aria-current]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.lg-head{text-align:center;max-width:720px;margin:56px auto 64px}
.lg-head h1{font-size:54px;font-weight:700;letter-spacing:-1.5px;line-height:1.08}
.lg-head p{font-size:19px;color:var(--mute);margin-top:14px;line-height:1.5}
.lg-head small{display:inline-block;margin-top:18px;font-size:13.5px;color:#8e8e93;padding:5px 12px;border-radius:100px;background:var(--soft)}
.lg-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;max-width:1040px;margin:0 auto}
.lg-toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:2px;border-left:1px solid rgba(0,0,0,.08)}
.lg-toc span{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:#8e8e93;padding:0 0 10px 16px}
.lg-toc a{font-size:14px;color:var(--mute);padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.lg-toc a:hover{color:var(--ink)}
.lg-toc a.on{color:var(--ink);border-left-color:#5849f1;font-weight:500}
.lg-body{max-width:680px}
.lg-sum{background:linear-gradient(135deg,#f6f5ff,#f1f7ff);border-radius:22px;padding:24px 26px;margin-bottom:44px}
.lg-sum>span{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#5849f1}
.lg-sum ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lg-sum li{position:relative;padding-left:26px;font-size:16px;line-height:1.5}
.lg-sum li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;border:solid #5849f1;border-width:0 0 2.2px 2.2px;transform:rotate(-45deg)}
.lg-sec{padding:26px 0;border-top:1px solid rgba(0,0,0,.07);scroll-margin-top:96px}
.lg-sec h2{font-size:22px;font-weight:600;letter-spacing:-.4px}
.lg-sec p,.lg-sec li{font-size:16.5px;line-height:1.7;color:#3a3a3c}
.lg-sec p{margin-top:10px}
.lg-sec ul{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.lg-sec a,.lg-contact a{color:#5849f1;text-decoration:underline;text-underline-offset:3px}
.lg-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.lg-table th{text-align:left;font-size:13px;font-weight:600;color:#8e8e93;padding:0 12px 10px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.lg-table td{padding:12px 12px 12px 0;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:top;color:#3a3a3c}
.lg-table td:first-child{font-weight:600;color:var(--ink)}
.lg-contact{margin-top:30px;padding-top:26px;border-top:1px solid rgba(0,0,0,.07);font-size:15.5px;color:var(--mute)}
mark.fill{background:#fff3b0;color:#5c4400;padding:1px 5px;border-radius:5px;font-weight:500}
@media (max-width:900px){
  .lg-grid{grid-template-columns:1fr;gap:0}
  .lg-toc{display:none}
}
@media (max-width:820px){
  .lg{padding:96px 0 90px}
  .lg-tabs{flex-wrap:nowrap;overflow-x:auto;width:auto;border-radius:16px;scrollbar-width:none}
  .lg-tabs::-webkit-scrollbar{display:none}
  .lg-tabs a{flex:none}
  .lg-head{margin:36px auto 36px}
  .lg-head h1{font-size:34px;letter-spacing:-.9px}
  .lg-head p{font-size:16.5px}
  .lg-sum{padding:20px;border-radius:18px;margin-bottom:28px}
  .lg-sum li{font-size:15.5px}
  .lg-sec h2{font-size:20px}
  .lg-sec p,.lg-sec li{font-size:16px}
  .lg-table thead{display:none}
  .lg-table,.lg-table tbody,.lg-table tr,.lg-table td{display:block}
  .lg-table tr{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.07)}
  .lg-table td{border:0;padding:2px 0}
}
.nf-page .footer::before{display:none}

/* WhatsApp version of the chat card */
.tg-card.wa .tg-phone{background:#efeae2 radial-gradient(circle at 20% 30%,rgba(0,0,0,.025) 0 2px,transparent 3px) 0 0/22px 22px}
.tg-card.wa .tg-top{background:#075e54;color:#fff}
.tg-card.wa .tg-top small{color:#c9f2e3}
.tg-card.wa .tg-msgs .out{background:#d9fdd3}
.tg-card.wa .tg-badge{color:#128c4b}.tg-card.wa .tg-badge svg{fill:#25d366}
.tg-card.wa .tg-go{color:#128c4b}

/* Contact: email gate */
.mail-row>label .req{display:inline-block;width:5px;height:5px;border-radius:50%;background:#5849f1;margin:0 0 7px 4px;vertical-align:middle}
.mail-email>label{width:auto;min-width:72px}
.mail-email{position:relative;transition:background .25s}
.mail-email:focus-within{background:#fbfaff}
.em-state{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e9f9ef;opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.em-state svg{width:15px;height:15px;fill:none;stroke:#16a34a;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.mail-email.ok .em-state{opacity:1;transform:none}
.mail-email.bad{background:#fff6f5}
.mail-email.bad>label{color:#b42318}
.em-msg{margin:0;padding:0 26px;max-height:0;overflow:hidden;font-size:13.5px;transition:max-height .25s,padding .25s;border-bottom:1px solid transparent}
.em-msg.show{max-height:60px;padding:9px 26px;border-bottom-color:var(--line)}
.em-msg.bad{color:#b42318;background:#fff6f5}
.em-msg.hint{color:#3a3a3c;background:#f6f5ff}
.em-fix{border:0;background:none;padding:0;font:inherit;font-weight:600;color:#5849f1;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mail-email.shake{animation:emShake .4s ease}
@keyframes emShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.mail .n-ok{display:none}.mail.can-send .n-ok{display:inline}.mail.can-send .n-lock{display:none}
.mail .n-lock{color:#5849f1;font-weight:500}
.mail-send[aria-disabled=true]{background:#e8e8ed;color:#8e8e93;box-shadow:none;cursor:not-allowed}
.mail-send[aria-disabled=true] svg{transform:none!important}
.mail.can-send .mail-send{animation:sendOn .5s ease}
@keyframes sendOn{0%{transform:scale(.96)}60%{transform:scale(1.04)}100%{transform:none}}
@media (max-width:820px){.em-msg,.em-msg.show{padding-left:16px;padding-right:16px}.mail-email>label{min-width:58px}}

/* ================= HOME (v2) ================= */
.hm-page{--ink:#1d1d1f;--mute:#6e6e73;--soft:#f5f5f7;--line:rgba(0,0,0,.08)}
.hm-eyebrow{display:inline-block;font-size:14px;font-weight:600;color:#5849f1;margin-bottom:16px}
.hm-eyebrow.on-dark{color:#8aa4f7}
.hm-head{max-width:760px;margin-bottom:52px}
.hm-head.center{text-align:center;margin-left:auto;margin-right:auto}
.hm-head h2{font-size:56px;line-height:1.05;font-weight:700;letter-spacing:-1.7px}
.hm-head p{font-size:19px;line-height:1.55;color:var(--mute);margin-top:18px}
.hm-head .muted-2{color:#a1a1a6}

/* Trust strip */
.hm-trust{background:#fff;color:var(--ink);padding:44px 0 40px;border-bottom:1px solid var(--line)}
.hm-promises{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.hm-promises li{display:flex;flex-direction:column;gap:4px;padding-left:16px;border-left:2px solid transparent;border-image:linear-gradient(#5849f1,#50a4f7) 1}
.hm-promises b{font-size:16px;font-weight:600}
.hm-promises span{font-size:14px;color:var(--mute);line-height:1.45}
.hm-logos{margin-top:34px;text-align:center}
.hm-logos>span{font-size:13px;color:#8e8e93}
.hm-logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:44px;margin-top:18px}
.hm-logo-row img{height:30px;width:auto;filter:grayscale(1);opacity:.7;transition:opacity .2s,filter .2s}
.hm-logo-row img:hover{filter:none;opacity:1}

/* Leak funnel */
.hm-leak{background:#fff;color:var(--ink);padding:140px 0}
.leak-box{background:var(--soft);border-radius:32px;padding:40px 44px 34px}
.leak-top{display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:center}
.leak-top label{grid-column:1;font-size:15px;color:var(--mute);display:flex;justify-content:space-between;align-items:baseline}
.leak-top output{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.8px}
.leak-top input{grid-column:1;width:100%;accent-color:#5849f1;height:28px}
.leak-toggle{grid-column:2;grid-row:1/3;display:flex;background:#fff;border-radius:100px;padding:5px;box-shadow:0 0 0 1px var(--line)}
.leak-toggle button{border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--mute);padding:11px 18px;border-radius:100px;cursor:pointer;transition:background .25s,color .25s}
.leak-toggle button[aria-selected=true]{background:#1d1d1f;color:#fff}
.leak-toggle button[data-mode=fast][aria-selected=true]{background:var(--btn-grad)}
.leak-rows{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.leak-row{display:grid;grid-template-columns:160px 1fr 90px;gap:18px;align-items:center}
.leak-row span{font-size:15px;font-weight:500}
.leak-row i{height:40px;border-radius:12px;background:#e8e8ed;overflow:hidden;position:relative}
.leak-row b{position:absolute;inset:0 auto 0 0;width:0;border-radius:12px;background:#c7c7cc;transition:width .7s cubic-bezier(.2,.8,.2,1),background .4s}
.leak-box.fast .leak-row b{background:linear-gradient(90deg,#5849f1,#50a4f7)}
.leak-row em{font-style:normal;font-size:22px;font-weight:700;letter-spacing:-.5px;text-align:right;font-variant-numeric:tabular-nums}
.leak-foot{margin-top:26px;display:flex;flex-direction:column;gap:8px}
.leak-msg{font-size:18px;line-height:1.5;font-weight:500}
.leak-msg b{color:#5849f1}
.leak-box:not(.fast) .leak-msg b{color:#c2410c}
.leak-foot small{font-size:12.5px;color:#8e8e93}

/* The system (sticky scroll story) */
.hm-system{background:#000;color:#fff;height:260vh;position:relative}
.hm-sys-grid{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-top:60px}
.hm-sys-text h2{font-size:50px;line-height:1.06;font-weight:700;letter-spacing:-1.5px}
.sys-steps{list-style:none;margin-top:34px;display:flex;flex-direction:column;gap:6px}
.sys-steps li{display:flex;gap:16px;padding:14px 16px;border-radius:18px;opacity:.38;transition:opacity .4s,background .4s}
.sys-steps li.on{opacity:1;background:#111114}
.sys-steps li i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.2)}
.sys-steps li.on i{background:var(--btn-grad);border-color:transparent}
.sys-steps b{display:block;font-size:17px;font-weight:600}
.sys-steps span{display:block;font-size:14.5px;color:#8e8e93;margin-top:3px;line-height:1.45}
.sys-ctas{display:flex;gap:22px;margin-top:22px;padding-left:16px}
.sys-link{font-weight:600;font-size:15.5px;color:#a9b8ff}
.sys-link.dark{color:#5849f1;display:inline-block;margin-top:20px}
.hm-sys-stage{position:relative;display:grid;place-items:center;height:620px}
.hm-sys-stage::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(closest-side,rgba(88,73,241,.35),transparent 70%);filter:blur(10px)}
.sys-phone{position:relative;width:290px;height:590px;border-radius:46px;background:#0c0c0e;padding:12px;box-shadow:0 0 0 2px #2a2a2e,0 40px 90px rgba(0,0,0,.6)}
.sys-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff;color:#111}
.scene{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.sys-phone[data-step="0"] .s0,.sys-phone[data-step="1"] .s1,.sys-phone[data-step="2"] .s2,.sys-phone[data-step="3"] .s3{opacity:1;transform:none}
.s0{padding-top:44px}
.sp-head{display:flex;align-items:center;gap:8px;padding:10px 14px}
.sp-head i{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f9a24b,#e1306c,#7b3fe4)}
.sp-head b{font-size:13px}.sp-head small{font-size:11px;color:#8e8e93;margin-left:auto}
.sp-img{height:300px;background:radial-gradient(120% 90% at 30% 20%,#ffd9c7,#f7a98a 45%,#c86b84);display:flex;align-items:flex-end;padding:18px}
.sp-img span{color:#fff;font-size:24px;font-weight:700;line-height:1.1;max-width:180px}
.sp-cta{display:flex;justify-content:space-between;padding:13px 14px;background:#f2f5ff;color:#0866ff;font-weight:600;font-size:14px}
.sp-cta em{font-style:normal;font-size:18px;line-height:1}
.sc-top{display:flex;align-items:center;gap:10px;padding:52px 16px 12px;background:#f7f7f9;border-bottom:1px solid #eee}
.sc-top i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f7a98a,#c86b84);color:#fff;font-style:normal;font-weight:700;font-size:13px}
.sc-top b{font-size:14px}
.sc-body{display:flex;flex-direction:column;gap:8px;padding:16px 14px}
.sc-body p{max-width:84%;padding:10px 13px;border-radius:18px;font-size:13.5px;line-height:1.4}
.sc-body .u{align-self:flex-end;background:#e9e9ee;border-bottom-right-radius:5px}
.sc-body .a{align-self:flex-start;background:linear-gradient(135deg,#5849f1,#4c73f3);color:#fff;border-bottom-left-radius:5px;box-shadow:0 8px 24px rgba(88,73,241,.35)}
.sc-body .t{font-size:11px;color:#8e8e93;margin-left:4px}
.sc-cal{margin-top:10px;border-radius:16px;background:#f2fbf5;border:1px solid #cdeed8;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.sc-cal b{font-size:14px;color:#15803d}.sc-cal span{font-size:12.5px;color:#3a3a3c}
.sys-toast{position:absolute;right:-6px;bottom:90px;display:flex;align-items:center;gap:9px;padding:11px 16px 11px 12px;border-radius:16px;background:rgba(28,28,32,.85);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);font-size:13.5px;font-weight:600;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.sys-toast i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.sys-toast span{display:none}
.hm-system[data-step="0"] .tt-0,.hm-system[data-step="1"] .tt-1,.hm-system[data-step="2"] .tt-2,.hm-system[data-step="3"] .tt-3{display:inline}
.sys-toast.pop{animation:sysPop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes sysPop{0%{transform:translateY(8px) scale(.94);opacity:.4}100%{transform:none;opacity:1}}

/* Services */
.hm-services{background:#fff;color:var(--ink);padding:140px 0 120px}
.hm-all{text-align:center;margin-top:34px}
.hm-all a{font-weight:600;color:#5849f1}

/* Results (hidden until real data) */
.hm-results{background:var(--soft);color:var(--ink);padding:130px 0}
.hm-results[hidden]{display:none}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.res{background:#fff;border-radius:26px;padding:30px;display:flex;flex-direction:column}
.res-tag{font-size:13px;font-weight:600;color:#5849f1}
.res-num{font-size:54px;font-weight:700;letter-spacing:-2px;margin-top:18px;background:var(--num-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.res-what{font-size:15.5px;font-weight:500;margin-top:2px}
.res p{font-size:15px;color:var(--mute);line-height:1.5;margin-top:14px}
.res small{margin-top:auto;padding-top:18px;font-size:13px;color:#8e8e93}

/* Founder */
.hm-founder{background:var(--soft);color:var(--ink);padding:130px 0}
.hm-f-grid{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:center;max-width:980px}
.hm-f-photo{position:relative;aspect-ratio:4/5;border-radius:30px;overflow:hidden;margin:0;background:linear-gradient(160deg,#e9e7ff,#dce9ff);display:grid;place-items:center}
.hm-f-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-f-mono{font-size:120px;font-weight:700;letter-spacing:-4px;background:var(--btn-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-founder blockquote{font-size:30px;line-height:1.35;font-weight:600;letter-spacing:-.6px}
.hm-f-sign{margin-top:24px;display:flex;flex-direction:column}
.hm-f-sign b{font-size:17px}.hm-f-sign span{font-size:15px;color:var(--mute)}

/* How we work */
.hm-how{background:#fff;color:var(--ink);padding:130px 0 110px}
.hm-how-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.hm-how-step{background:var(--soft);border-radius:26px;padding:30px 28px;display:flex;flex-direction:column}
.hm-how-step i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#1d1d1f;color:#fff;font-style:normal;font-weight:600}
.hm-how-step h3{font-size:22px;font-weight:600;letter-spacing:-.4px;margin-top:22px}
.hm-how-step p{font-size:16px;line-height:1.55;color:var(--mute);margin-top:8px}
.hm-how-step span{margin-top:auto;padding-top:20px;font-size:13px;font-weight:600;color:#5849f1}

/* FAQ */
.hm-faq{background:#fff;color:var(--ink);padding:40px 0 130px}
.hm-faq .answer a{color:#5849f1;text-decoration:underline}

/* Final CTA */
.hm-cta{position:relative;background:#000;color:#fff;text-align:center;padding:150px 0 170px;overflow:hidden}
.hm-cta::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(88,73,241,.35),transparent 70%);pointer-events:none}
.hm-cta .container{position:relative}
.hm-cta h2{font-size:64px;font-weight:700;letter-spacing:-2px;line-height:1.04;background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-cta p{font-size:19px;line-height:1.55;color:#9a9aa0;max-width:560px;margin:20px auto 0}
.hm-cta-btns{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap}
.hm-cta-btns .btn{height:56px;padding:0 34px;font-size:17px}
.hm-cta-alt{font-weight:600;font-size:16px;color:#d6d6db;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.3)}

@media (max-width:1000px){
  .hm-promises{grid-template-columns:1fr 1fr;gap:22px}
  .hm-sys-grid{grid-template-columns:1fr;gap:20px;align-content:center;padding-top:70px}
  .hm-sys-text h2{font-size:32px}
  .sys-steps{margin-top:16px;gap:2px}
  .sys-steps li{display:none;padding:10px 12px}
  .sys-steps li.on{display:flex}
  .sys-ctas{display:none}
  .hm-sys-stage{height:auto}
  .res-grid,.hm-how-row{grid-template-columns:1fr}
  .hm-f-grid{grid-template-columns:1fr;gap:30px}
  .hm-f-photo{max-width:260px}
}
@media (max-width:820px){
  .hm-head{margin-bottom:30px}
  .hm-head h2{font-size:34px;letter-spacing:-.9px}
  .hm-head p{font-size:16.5px;margin-top:12px}
  .hm-trust{padding:34px 0 30px}
  .hm-promises b{font-size:15px}.hm-promises span{font-size:13px}
  .hm-leak{padding:84px 0}
  .leak-box{padding:22px 18px 20px;border-radius:24px;margin:0 -6px}
  .leak-top{grid-template-columns:1fr}
  .leak-toggle{grid-column:1;grid-row:auto}
  .leak-toggle button{flex:1;font-size:13.5px;padding:10px 8px}
  .leak-row{grid-template-columns:1fr 64px;gap:6px 10px}
  .leak-row span{grid-column:1/-1;font-size:14px}
  .leak-row i{height:30px;border-radius:9px}.leak-row b{border-radius:9px}
  .leak-row em{font-size:18px}
  .leak-msg{font-size:16px}
  .hm-system{height:280vh}
  .hm-sys-grid{padding-top:64px;gap:14px}
  .hm-sys-text h2{font-size:27px}
  .hm-eyebrow.on-dark{margin-bottom:8px}
  .sys-phone{width:220px;height:440px;border-radius:36px;padding:9px}
  .sys-screen{border-radius:28px}
  .sp-img{height:210px}.sp-img span{font-size:19px}
  .sc-top{padding-top:40px}
  .sc-body p{font-size:12.5px}
  .sys-toast{right:auto;left:50%;transform:translateX(-50%);bottom:-6px;white-space:nowrap}
  .sys-toast.pop{animation:none}
  .hm-sys-stage::before{width:320px;height:320px}
  .hm-services{padding:84px 0 80px}
  .hm-results,.hm-founder{padding:84px 0}
  .hm-founder blockquote{font-size:22px}
  .hm-how{padding:84px 0 70px}
  .hm-how-step{padding:24px 22px}
  .hm-faq{padding:20px 0 90px}
  .hm-cta{padding:100px 0 130px}
  .hm-cta h2{font-size:40px;letter-spacing:-1.2px}
  .hm-cta p{font-size:16.5px}
  .hm-cta-btns{flex-direction:column;gap:18px}
  .hm-cta-btns .btn{width:100%}
}
@media (max-height:700px) and (max-width:820px){.sys-phone{width:190px;height:380px}.sp-img{height:170px}}

/* ================= HOME v3: Apple-style campaign + tiles ================= */
.home3{background:#fff;padding-top:66px}
/* Announcement bar (all pages, from admin) */
.dt-ann{position:absolute;left:0;right:0;top:66px;z-index:40;text-align:center;padding:11px 20px;font-size:14px;line-height:1.4}
.dt-ann p{margin:0}
.dt-ann a{font-weight:600;margin-left:6px;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.dt-ann.t-dark{background:#161618;color:#e8e8ed}.dt-ann.t-dark a{color:#9fb4ff}
.dt-ann.t-light{background:#f5f5f7;color:#1d1d1f}.dt-ann.t-light a{color:#5849f1}
.dt-ann.t-brand{background:var(--btn-grad);color:#fff}.dt-ann.t-brand a{color:#fff}
.dt-ann.t-winter{background:linear-gradient(90deg,#dbeafe,#e0f2fe);color:#0c2a4d}.dt-ann.t-winter a{color:#1d4ed8}
.dt-ann.t-festive{background:#1a0b2e;color:#f5e6c8}.dt-ann.t-festive a{color:#f2c46d}
.has-ann .home3{padding-top:110px}

/* Hero tile */
.tile-hero{position:relative;overflow:hidden;min-height:max(640px,calc(100vh - 66px));display:flex;align-items:center;justify-content:center;text-align:center;padding:90px 20px 100px;isolation:isolate}
.h-in{position:relative;z-index:2;max-width:980px}
.h-eb{display:inline-block;font-size:15px;font-weight:600;letter-spacing:.2px;margin-bottom:18px;opacity:.85}
.tile-hero h1{font-size:88px;line-height:1.02;font-weight:700;letter-spacing:-3px}
.h-rot{display:inline-grid;vertical-align:bottom;text-align:left}
.h-rot span{grid-area:1/1;opacity:0;transform:translateY(.35em);filter:blur(6px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1),filter .55s;background:var(--stage-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.h-rot span.on{opacity:1;transform:none;filter:none}
.h-sub{font-size:24px;line-height:1.4;margin:24px auto 0;max-width:640px;opacity:.75}
.h-ctas,.t-ctas{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.tc-1{display:inline-flex;align-items:center;height:48px;padding:0 26px;border-radius:100px;font-size:17px;font-weight:600;background:var(--btn-grad);color:#fff;transition:transform .2s,box-shadow .2s}
.tc-1:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(88,73,241,.35)}
.tc-2{font-size:17px;font-weight:600;color:inherit}
.tc-2:hover{text-decoration:underline;text-underline-offset:4px}
.h-note{margin-top:22px;font-size:14.5px;opacity:.65}
.h-img{position:absolute;inset:0;z-index:0;background:center/cover no-repeat}
.h-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55))}
.h-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.h-fx i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:hFloat 14s ease-in-out infinite alternate}
.h-fx i:nth-child(1){width:520px;height:520px;left:8%;top:18%;background:#5849f1}
.h-fx i:nth-child(2){width:460px;height:460px;right:6%;top:30%;background:#14baff;animation-delay:-5s}
.h-fx i:nth-child(3){width:380px;height:380px;left:40%;bottom:-120px;background:#8a3dff;animation-delay:-9s}
@keyframes hFloat{to{transform:translate(60px,-40px) scale(1.12)}}
/* Hero themes (pick in admin) */
.th-midnight{background:#000;color:#f5f5f7}.th-midnight .h-fx i{opacity:.28}
.th-light{background:#f5f5f7;color:#1d1d1f}.th-light .h-fx i{opacity:.16}
.th-launch{background:linear-gradient(135deg,#3a1cf0,#5849f1 40%,#14baff);color:#fff}.th-launch .h-fx i{opacity:.3}
.th-launch .h-rot span{background:none;-webkit-text-fill-color:#fff;color:#fff}.th-launch .tc-1{background:#fff;color:#2b1fb8}
.th-winter{background:linear-gradient(180deg,#0b1d3a 0%,#123a6b 55%,#7fb3e6 100%);color:#fff}
.th-winter .h-fx{background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 80px 120px,#fff,transparent),radial-gradient(2px 2px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 220px 160px,#fff,transparent);background-size:260px 200px;animation:snow 12s linear infinite;opacity:.7}
.th-winter .h-fx i{display:none}.th-winter .tc-1{background:#fff;color:#0b1d3a}
@keyframes snow{to{background-position:0 200px}}
.th-festive{background:radial-gradient(120% 90% at 50% 0%,#3b1660,#14081f 70%);color:#fff7e6}
.th-festive .h-fx i{background:#f2c46d;opacity:.18}.th-festive .h-rot span{background:linear-gradient(90deg,#f2c46d,#ffe7b0)}
.th-festive .tc-1{background:linear-gradient(135deg,#f2c46d,#e09b2d);color:#2a1300}
.th-sale{background:#0b0b0d;color:#fff}.th-sale .h-fx i{background:#ff5a1f;opacity:.3}.th-sale .h-rot span{background:linear-gradient(90deg,#ff8a3d,#ff3d6e)}
.th-sale .tc-1{background:linear-gradient(135deg,#ff6a2b,#ff2e63)}

/* Tiles */
.tiles{display:flex;flex-direction:column;gap:12px;padding:12px 0;background:#fff}
.t-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px}
.tile{position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;min-height:690px;padding:64px 24px 0}
.t-half{min-height:580px;padding-top:54px}
.t-copy{position:relative;z-index:2}
.t-tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-bottom:10px;background:var(--btn-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile h2{font-size:56px;line-height:1.05;font-weight:700;letter-spacing:-1.6px}
.t-half h2{font-size:42px;letter-spacing:-1.1px}
.tile .t-copy>p{font-size:26px;line-height:1.3;margin-top:8px;opacity:.82}
.t-half .t-copy>p{font-size:21px}
.t-ctas{margin-top:22px}
.t-vis{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;margin-top:30px}
.t-img{width:100%;max-width:900px;display:flex;justify-content:center;align-items:flex-end}
.t-img img{max-height:420px;width:auto;object-fit:contain}
.tt-light{background:#f5f5f7;color:#1d1d1f}
.tt-white{background:#fff;color:#1d1d1f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.tt-soft{background:#eef0fb;color:#1d1d1f}
.tt-dark{background:#000;color:#f5f5f7}
.tt-gradient{background:radial-gradient(90% 120% at 50% 110%,#5849f1 0%,#1b1340 45%,#07060d 75%);color:#fff}
.tt-dark .tc-2,.tt-gradient .tc-2{color:#a9b8ff}
.tt-light .tc-2,.tt-white .tc-2,.tt-soft .tc-2{color:#5849f1}
.tile .t-copy{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.tile .t-vis{opacity:0;transform:translateY(40px);transition:opacity 1s ease .15s,transform 1s cubic-bezier(.2,.8,.2,1) .15s}
.tile.seen .t-copy,.tile.seen .t-vis{opacity:1;transform:none}

/* Visual: Meta (a blurred feed, one ad that stops the scroll) */
.v-meta{position:relative;width:640px;max-width:100%;height:420px}
.v-feed{position:absolute;left:50%;top:0;bottom:0;width:300px;transform:translateX(-50%);overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.v-feed i{display:block;height:160px;margin-bottom:14px;border-radius:18px;background:linear-gradient(135deg,#e2e2e8,#d4d4dc);filter:blur(3px);opacity:.7;animation:feed 7s linear infinite}
.v-feed i:nth-child(odd){background:linear-gradient(135deg,#dfe4ef,#cdd5e6)}
@keyframes feed{to{transform:translateY(-348px)}}
.v-ad{position:absolute;left:50%;top:50%;width:270px;transform:translate(-50%,-46%) scale(.94);background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(30,40,90,.25);transition:transform 1s cubic-bezier(.2,.8,.2,1) .4s}
.tile.seen .v-ad{transform:translate(-50%,-50%) scale(1)}
.v-ad-h{display:flex;align-items:center;gap:8px;padding:11px 13px;font-size:12px}
.v-ad-h b{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#f9a24b,#e1306c,#7b3fe4)}
.v-ad-h span{font-weight:600}.v-ad-h small{margin-left:auto;color:#8e8e93}
.v-ad-img{height:200px;background:radial-gradient(120% 90% at 30% 20%,#ffd9c7,#f7a98a 45%,#c86b84);display:flex;align-items:flex-end;padding:16px;text-align:left}
.v-ad-img span{color:#fff;font-weight:700;font-size:21px;line-height:1.12;max-width:170px}
.v-ad-cta{display:flex;justify-content:space-between;padding:12px 13px;font-size:13.5px;font-weight:600;color:#0866ff;background:#f2f5ff}
.v-ad-cta em{font-style:normal;font-size:17px;line-height:1}
.v-pill{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 15px 10px 11px;border-radius:100px;background:#fff;font-size:14px;font-weight:600;color:#1d1d1f;box-shadow:0 14px 34px rgba(30,40,90,.16);opacity:0;animation:vPill 6s infinite}
.v-pill i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.v-pill.p1{left:4%;top:24%}.v-pill.p2{right:2%;top:46%;animation-delay:2s}.v-pill.p3{left:10%;bottom:16%;animation-delay:4s}
@keyframes vPill{0%,6%{opacity:0;transform:translateY(12px) scale(.9)}12%,40%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateY(-8px)}}

/* Visual: AI (the clock, and the reply) */
.v-ai{position:relative;width:640px;max-width:100%;height:430px;display:flex;flex-direction:column;align-items:center}
.v-clock{font-size:150px;font-weight:200;letter-spacing:-6px;line-height:1;color:#fff;text-shadow:0 0 60px rgba(124,110,255,.35)}
.v-clock small{font-size:30px;letter-spacing:0;font-weight:400;margin-left:10px;opacity:.6}
.v-q,.v-a{max-width:330px;padding:12px 16px;border-radius:20px;font-size:16px;line-height:1.4;text-align:left}
.v-q{align-self:center;margin:26px 0 0 120px;background:#1c1c1e;color:#e8e8ed;border-bottom-right-radius:6px}
.v-a{align-self:center;margin:10px 120px 0 0;background:linear-gradient(135deg,#5849f1,#4c73f3);color:#fff;border-bottom-left-radius:6px;box-shadow:0 10px 60px rgba(88,73,241,.55),0 0 120px rgba(80,164,247,.2);min-width:64px;min-height:46px;display:grid}
.v-a>span{grid-area:1/1}
.v-dots{display:flex;gap:5px;align-items:center;animation:vDots 7s infinite}
.v-dots i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.8;animation:mkDot 1s infinite}
.v-dots i:nth-child(2){animation-delay:.15s}.v-dots i:nth-child(3){animation-delay:.3s}
.v-txt{animation:vTxt 7s infinite}
.v-meta{margin:8px 120px 0 0;font-size:13px;color:#8e8e93;animation:vTxt 7s infinite}
@keyframes vDots{0%,24%{opacity:1}28%,100%{opacity:0}}
@keyframes vTxt{0%,26%{opacity:0;transform:translateY(4px)}32%,94%{opacity:1;transform:none}100%{opacity:0}}

/* Visual: Shopify (a bag that keeps taking orders) */
.v-shop{position:relative;width:420px;max-width:100%;height:380px}
.v-bag{position:absolute;left:50%;bottom:0;width:230px;height:250px;transform:translateX(-50%);border-radius:28px 28px 36px 36px;background:linear-gradient(160deg,#2fd08a,#008060 70%);box-shadow:inset 0 -20px 40px rgba(0,0,0,.18),0 30px 60px rgba(0,128,96,.3);display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;color:#fff}
.v-bag b{font-size:64px;font-weight:700;letter-spacing:-2px;line-height:1}
.v-bag small{font-size:15px;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:1px}
.v-handle{position:absolute;top:-58px;left:50%;width:120px;height:90px;transform:translateX(-50%);border:12px solid #0a8f66;border-bottom:0;border-radius:70px 70px 0 0}
.v-ord{position:absolute;left:50%;bottom:180px;padding:9px 15px;border-radius:100px;background:#fff;color:#008060;font-size:14.5px;font-weight:700;box-shadow:0 12px 30px rgba(0,80,60,.18);opacity:0;animation:vOrd 6s infinite;white-space:nowrap}
.v-ord.o1{margin-left:-160px}.v-ord.o2{margin-left:40px;animation-delay:2s}.v-ord.o3{margin-left:-70px;animation-delay:4s}
@keyframes vOrd{0%{opacity:0;transform:translateY(20px)}10%{opacity:1}45%{opacity:1}60%,100%{opacity:0;transform:translateY(-110px)}}

/* Visual: 360 ring */
.v-ring{position:relative;width:340px;height:340px;margin-bottom:60px}
.v-ring svg{width:100%;height:100%;animation:mkSpin 30s linear infinite}
.v-ring circle{fill:none;stroke-width:16}
.v-ring .t{stroke:rgba(88,73,241,.08)}
.v-ring .s{stroke:var(--c);stroke-dasharray:23 77;stroke-dashoffset:var(--o);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.v-ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Instrument Serif',Georgia,serif;font-size:96px;line-height:1;color:#1d1d1f}
.v-ring small{font-family:'Inter',sans-serif;font-size:14px;color:#6e6e73;margin-top:6px}

/* Visual: the equation */
.v-eq{display:flex;align-items:center;justify-content:center;gap:22px;height:300px;font-size:96px;font-weight:700;letter-spacing:-3px}
.v-eq span{padding:14px 34px;border-radius:40px;opacity:0;transform:translateY(30px) scale(.9);transition:opacity .7s ease,transform .7s cubic-bezier(.3,1.4,.5,1)}
.v-eq b{font-weight:300;opacity:0;transition:opacity .6s ease;color:#8e8aff}
.v-eq .q1{background:rgba(80,164,247,.14);color:#7cc0ff;box-shadow:inset 0 0 0 1px rgba(80,164,247,.35)}
.v-eq .q2{background:rgba(124,110,255,.16);color:#b3a9ff;box-shadow:inset 0 0 0 1px rgba(124,110,255,.4)}
.v-eq .q3{background:#fff;color:#14112b;box-shadow:0 0 80px rgba(124,110,255,.6)}
.tile.seen .v-eq span,.tile.seen .v-eq b{opacity:1;transform:none}
.tile.seen .v-eq b:nth-of-type(1){transition-delay:.35s}.tile.seen .v-eq .q2{transition-delay:.55s}
.tile.seen .v-eq b:nth-of-type(2){transition-delay:.9s}.tile.seen .v-eq .q3{transition-delay:1.15s}

/* Promises + FAQ on home v3 */
.h3-promise{background:#fff;color:#1d1d1f;padding:110px 0 40px}
.h3-promise h2{font-size:48px;font-weight:700;letter-spacing:-1.4px;text-align:center}
.h3-promise ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.h3-promise li{background:#f5f5f7;border-radius:22px;padding:26px 24px}
.h3-promise b{display:block;font-size:19px;font-weight:600;letter-spacing:-.3px}
.h3-promise span{display:block;font-size:15px;line-height:1.5;color:#6e6e73;margin-top:6px}
.hm3 .hm-faq{padding:90px 0 130px}

@media (max-width:1000px){
  .tile-hero h1{font-size:62px;letter-spacing:-2px}
  .t-row{grid-template-columns:1fr;padding:0}
  .t-half{min-height:560px}
  .h3-promise ul{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .home3{padding-top:62px}
  .dt-ann{top:62px;font-size:13px;padding:9px 16px}
  .has-ann .home3{padding-top:100px}
  .tile-hero{min-height:560px;padding:70px 20px 80px}
  .h-eb{font-size:13.5px;margin-bottom:14px}
  .tile-hero h1{font-size:44px;letter-spacing:-1.4px}
  .h-sub{font-size:18px;margin-top:16px}
  .h-ctas,.t-ctas{gap:18px;margin-top:24px}
  .tc-1{height:44px;padding:0 22px;font-size:16px}.tc-2{font-size:16px}
  .tiles{gap:10px;padding:10px 0}
  .t-row{gap:10px}
  .tile,.t-half{min-height:520px;padding:48px 18px 0}
  .tile h2,.t-half h2{font-size:38px;letter-spacing:-1px}
  .tile .t-copy>p,.t-half .t-copy>p{font-size:19px}
  .t-vis{margin-top:22px}
  .v-meta{height:330px}
  .v-feed{width:230px}.v-feed i{height:120px}
  .v-ad{width:220px}.v-ad-img{height:150px}.v-ad-img span{font-size:17px}
  .v-pill{font-size:12.5px;padding:8px 12px 8px 9px}
  .v-pill.p1{left:0;top:16%}.v-pill.p2{right:0}.v-pill.p3{left:2%}
  .v-ai{height:330px}
  .v-clock{font-size:96px;letter-spacing:-4px}.v-clock small{font-size:22px}
  .v-q{margin:18px 0 0 40px;font-size:14.5px}.v-a{margin:8px 40px 0 0;font-size:14.5px}.v-meta{margin-right:40px}
  .v-shop{height:300px}.v-bag{width:190px;height:200px}.v-bag b{font-size:52px}.v-handle{width:100px;height:76px;top:-48px;border-width:10px}
  .v-ord{bottom:150px;font-size:13px}.v-ord.o1{margin-left:-140px}.v-ord.o2{margin-left:20px}
  .v-ring{width:250px;height:250px;margin-bottom:46px}.v-ring span{font-size:72px}
  .v-eq{gap:10px;height:200px;font-size:44px;letter-spacing:-1px}
  .v-eq span{padding:10px 18px;border-radius:24px}
  .h3-promise{padding:80px 0 20px}
  .h3-promise h2{font-size:32px}
  .h3-promise ul{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .h3-promise li{padding:20px}
}
@media (prefers-reduced-motion:reduce){.h-fx i,.v-feed i,.v-pill,.v-ord,.v-ring svg,.th-winter .h-fx{animation:none!important}.v-pill,.v-ord{opacity:1}}
@media (max-width:820px){.v-eq{gap:8px;font-size:32px;letter-spacing:-.5px;height:170px}.v-eq span{padding:8px 13px;border-radius:18px}}
.cms-preview::after{content:"Preview: not published";position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:100;background:#ff9f0a;color:#1d1d1f;font:600 13px Inter,sans-serif;padding:8px 14px;border-radius:100px;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* ================= FOOTER alignment (matches page grid) ================= */
.footer-grid{max-width:var(--container);padding:0 20px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) max-content;gap:32px}
.footer .logo img{height:52px}

/* ================= HOME v4: original layout, premium layer ================= */
.hm4 .tile-hero{padding-top:156px}
/* Problem: real, sourced number */
.hm4 .problem{height:auto;padding:150px 0}
.pb-src{display:block;margin-top:14px;font-size:13px;color:#a1a1a6}
.pb-src:empty{display:none}
.hm4 .x-list li{font-size:19px}
/* Floating orbs that make the glass visible */
.hm4 .about,.hm4 .difference{position:relative;overflow:hidden}
.orbs{position:absolute;inset:0;pointer-events:none;z-index:0}
.orbs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;will-change:transform}
.about .orbs i:nth-child(1){width:380px;height:380px;left:6%;top:48%;background:#5849f1}
.about .orbs i:nth-child(2){width:300px;height:300px;right:8%;top:40%;background:#14baff}
.about .orbs i:nth-child(3){width:240px;height:240px;left:44%;top:62%;background:#8a3dff}
.difference .orbs i:nth-child(1){width:420px;height:420px;left:-4%;top:30%;background:#4c73f3;opacity:.3}
.difference .orbs i:nth-child(2){width:360px;height:360px;right:-2%;top:44%;background:#8a3dff;opacity:.3}
.hm4 .about .container,.hm4 .difference .container{position:relative;z-index:1}
/* Glass cards with a slow light sweep */
.glass{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 50px rgba(0,0,0,.35)}
.glass::after{content:"";position:absolute;top:-60%;left:-80%;width:60%;height:220%;transform:rotate(20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:sweep 7s ease-in-out infinite}
.glass:nth-child(2)::after{animation-delay:1.2s}.glass:nth-child(3)::after{animation-delay:2.4s}.glass:nth-child(4)::after{animation-delay:3.6s}
@keyframes sweep{0%,60%{left:-80%}85%,100%{left:140%}}
.glass:hover{border-color:rgba(160,150,255,.45)!important;transform:translateY(-6px)}
/* About values */
.hm4 .about{height:auto;padding:160px 0}
.hm4 .value{height:230px;gap:10px;border-radius:22px;padding:26px 20px}
.hm4 .value svg{width:30px;height:30px;color:#a9b8ff;margin-bottom:6px}
.hm4 .value b{font-size:20px;font-weight:600}
.hm4 .value span{font-size:14.5px;font-weight:400;color:#a1a1a6;line-height:1.45;max-width:190px}
/* Parallax gallery */
.pgal{background:#fff;color:#1d1d1f;padding:140px 0 130px;overflow:hidden}
.pgal-head{text-align:center;margin-bottom:56px}
.label.dark{color:#5849f1}
.pgal-head h2{font-size:56px;line-height:1.06;font-weight:700;letter-spacing:-1.6px;margin-top:10px}
.pgal-row{display:flex;gap:22px;width:max-content;will-change:transform;padding:0 11px}
.pgal-row+.pgal-row{margin-top:22px}
.pg{position:relative;flex:none;width:420px;height:280px;border-radius:26px;overflow:hidden;margin:0;background:#f0f0f3}
.pgal-row[data-px-row="-1"] .pg{width:360px;height:240px}
.pg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-ph{position:absolute;inset:0}
.pg-a{background:radial-gradient(120% 90% at 20% 20%,#ffd9c7,#f7a98a 45%,#c86b84)}
.pg-b{background:radial-gradient(120% 90% at 80% 10%,#cfe0ff,#7aa6ff 50%,#4c73f3)}
.pg-c{background:radial-gradient(120% 90% at 30% 80%,#c8f5dc,#4fcf8b 50%,#0f8a5c)}
.pg-d{background:radial-gradient(120% 90% at 70% 30%,#ece7df,#cfc4b4 55%,#a99a86)}
.pg-e{background:radial-gradient(120% 90% at 50% 0%,#d9d4ff,#8a7cff 50%,#5849f1)}
.pg figcaption{position:absolute;left:16px;bottom:16px;padding:9px 15px;border-radius:100px;font-size:14px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* Neumorphism (light sections only, used lightly) */
.neu{background:#f0f0f3!important;border:0!important;box-shadow:14px 14px 30px #d3d3db,-14px -14px 30px #ffffff!important}
/* Mission */
.hm4 .mission{height:auto;padding:150px 0;background:linear-gradient(160deg,#e9e3ff 0%,#f6f6f9 55%)}
.hm4 .m-card.light.neu{background:#f3f3f6!important;box-shadow:16px 16px 34px #d6d3e6,-16px -16px 34px #ffffff!important}
.hm4 .m-card.dark{box-shadow:0 30px 60px rgba(20,10,60,.35)}
/* Difference: flowing arrows */
.hm4 .difference{height:auto;padding:160px 0}
.hm4 .stage{border-radius:22px;gap:10px}
.hm4 .stage span{font-size:14px;color:#a1a1a6}
.hm4 .stage.final span{color:#55555b}
.hm4 .stage.final{box-shadow:0 0 60px rgba(124,110,255,.35)}
.arrow.flow{position:relative;flex:none;width:44px;height:2px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;font-size:0}
.arrow.flow i{position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#8aa4ff,transparent);animation:flow 1.8s linear infinite}
@keyframes flow{to{left:100%}}
/* Compare */
.hm4 .compare{height:auto;padding:150px 0;background:#0b0b0d;position:relative;overflow:hidden}
.hm4 .compare::before{content:"";position:absolute;right:10%;top:30%;width:420px;height:420px;border-radius:50%;background:#5849f1;filter:blur(90px);opacity:.25}
.hm4 .compare .container{position:relative}
.hm4 .c-card{border-radius:24px}
.hm4 .c-card li{position:relative;padding-left:26px;font-weight:500;color:#a1a1a6;margin-bottom:26px}
.hm4 .c-card.before li::before{content:"\00d7";position:absolute;left:0;color:#ff6b6b;font-weight:700}
.hm4 .c-card.after li{color:#e8e8ed}
.hm4 .c-card.after li::before{content:"\2713";position:absolute;left:0;color:#8aa4ff;font-weight:700}
.hm4 .c-card.after{border-color:rgba(138,164,255,.45)!important}
/* Services: white with soft neumorphic cards */
.hm4 .services{background:#f6f6f9;color:#1d1d1f;padding:150px 0 140px}
.hm4 .services .sub{color:#6e6e73}
.hm4 .svc-grid{gap:32px}
.hm4 .svc{display:block;color:#1d1d1f;border-radius:26px;padding:44px 40px;min-height:0;transition:transform .3s ease,box-shadow .3s ease}
.hm4 .svc:hover{transform:translateY(-6px)}
.svc-ico{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#f0f0f3;box-shadow:inset 5px 5px 10px #d3d3db,inset -5px -5px 10px #fff;color:#5849f1}
.svc-ico svg{width:26px;height:26px}
.hm4 .svc h3{margin-top:24px}
.hm4 .svc p{color:#6e6e73;line-height:1.45;font-size:17px;margin-top:12px}
.hm4 .svc .svc-link{color:#5849f1}
/* Numbers */
.hm4 .numbers{background:#f6f6f9;padding-top:110px}
.hm4 .stat.neu{border-radius:28px;padding:40px 24px}
.stats-src{text-align:center;font-size:13px;color:#8e8e93;margin-top:22px}
.stats-src:empty{display:none}
.footer::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M0 0A50 50 0 0 1 50 50A50 50 0 0 1 100 0Z' fill='%23fff'/%3E%3C/svg%3E")}
.hm4 .footer::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M0 0A50 50 0 0 1 50 50A50 50 0 0 1 100 0Z' fill='%23f6f6f9'/%3E%3C/svg%3E")}

@media (max-width:820px){
  .hm4 .tile-hero{padding-top:120px}
  .hm4 .problem{padding:90px 0}
  .hm4 .about,.hm4 .difference,.hm4 .compare,.hm4 .mission{padding:96px 0}
  .hm4 .value{height:auto;min-height:170px;padding:22px 14px}
  .hm4 .value b{font-size:16.5px}.hm4 .value span{font-size:13px}
  .pgal{padding:90px 0 80px}
  .pgal-head{margin-bottom:32px}
  .pgal-head h2{font-size:32px;letter-spacing:-.8px}
  .pg{width:250px;height:170px;border-radius:20px}
  .pgal-row[data-px-row="-1"] .pg{width:220px;height:150px}
  .pgal-row{gap:12px}.pgal-row+.pgal-row{margin-top:12px}
  .pg figcaption{font-size:12px;padding:7px 11px;left:10px;bottom:10px}
  .neu{box-shadow:8px 8px 18px #d3d3db,-8px -8px 18px #fff!important}
  .arrow.flow{width:2px;height:28px}
  .arrow.flow i{left:0;top:-40%;width:100%;height:40%;background:linear-gradient(180deg,transparent,#8aa4ff,transparent);animation:flowV 1.8s linear infinite}
  .hm4 .services{padding:96px 0 90px}
  .hm4 .svc{padding:30px 24px}
  .hm4 .svc-grid{gap:18px}
  .footer-grid{padding:0 24px}
}
@keyframes flowV{to{top:100%}}
@media (prefers-reduced-motion:reduce){.glass::after,.arrow.flow i{animation:none}}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px 20px}}
.footer .copy-link{color:#8e8e93;font-size:.85em;margin-left:4px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px;transition:color .2s}
.footer .copy-link:hover{color:#fff}

/* ================= THEMES CATALOG ================= */
.th-page{--ink:#1d1d1f;--mute:#6e6e73;--soft:#f5f5f7}
.thx-hero{background:#fff;color:var(--ink);padding:150px 0 90px;overflow:hidden}
.thx-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.thx-eb{display:inline-block;font-size:14px;font-weight:600;color:#008060;margin-bottom:16px}
.thx-hero h1{font-size:68px;line-height:1.02;font-weight:700;letter-spacing:-2.2px}
.thx-hero h1 span{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-1px;color:#008060}
.thx-hero p{font-size:19px;line-height:1.55;color:var(--mute);margin-top:20px;max-width:500px}
.thx-hero p b{color:var(--ink)}
.thx-ctas{display:flex;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
.thx-ctas .btn,.thx-how-cta .btn{height:52px;padding:0 28px;font-size:16px}
.thx-q{font-weight:600;color:#5849f1}
.thx-facts{list-style:none;display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.thx-facts li{display:flex;flex-direction:column}
.thx-facts b{font-size:24px;font-weight:700;letter-spacing:-.5px}
.thx-facts span{font-size:13.5px;color:var(--mute)}
.thx-stack{position:relative;height:440px}
.thx-s{position:absolute;width:380px;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(20,20,60,.18),0 0 0 1px rgba(0,0,0,.05);animation:thxFloat 7s ease-in-out infinite}
.thx-s.s0{left:0;top:70px;transform:rotate(-7deg);z-index:1}
.thx-s.s1{left:90px;top:20px;z-index:3;animation-delay:-2s}
.thx-s.s2{left:190px;top:110px;transform:rotate(6deg);z-index:2;animation-delay:-4s}
@keyframes thxFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* Sticky filter bar */
.thx-cat{background:var(--soft);color:var(--ink);padding:0 0 120px}
.thx-bar{position:sticky;top:66px;z-index:20;background:rgba(245,245,247,.85);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.06)}
.thx-bar-in{display:flex;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px}
.thx-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
.thx-pills::-webkit-scrollbar{display:none}
.thx-pills button{flex:none;border:0;background:#fff;border-radius:100px;padding:9px 16px;font:inherit;font-size:14.5px;font-weight:600;color:#3a3a3c;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.07);transition:background .2s,color .2s}
.thx-pills button span{font-weight:500;color:#8e8e93;margin-left:3px}
.thx-pills button[aria-selected=true]{background:#1d1d1f;color:#fff;box-shadow:none}
.thx-pills button[aria-selected=true] span{color:#a1a1a6}
.thx-search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:100px;padding:0 14px;height:40px;width:300px;box-shadow:0 0 0 1px rgba(0,0,0,.07)}
.thx-search svg{width:17px;height:17px;color:#8e8e93;flex:none}
.thx-search input{border:0;outline:0;background:none;font:inherit;font-size:14.5px;width:100%}
.thx-count{font-size:14px;color:var(--mute);margin:34px 0 18px}
.thx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.thx-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;animation:thxIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d)*40ms)}
@keyframes thxIn{from{opacity:0;transform:translateY(14px)}}
.thx-card:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(20,20,60,.12)}
.thx-thumb{position:relative;display:block;width:100%;border:0;padding:14px 14px 0;background:linear-gradient(180deg,#f0f0f3,#fff);cursor:pointer;overflow:hidden}
.thx-thumb .mk,.thx-thumb .thx-shot{border-radius:12px 12px 0 0;transition:transform .5s cubic-bezier(.2,.7,.2,1);box-shadow:0 10px 30px rgba(20,20,60,.12)}
.thx-card:hover .thx-thumb .mk,.thx-card:hover .thx-thumb .thx-shot{transform:translateY(-6px)}
.thx-shot{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top}
.thx-new{position:absolute;top:22px;left:22px;padding:5px 10px;border-radius:100px;background:#1d1d1f;color:#fff;font-size:12px;font-weight:600}
.thx-c-body{padding:18px 20px 20px}
.thx-c-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.thx-c-top h3{font-size:21px;font-weight:700;letter-spacing:-.4px}
.thx-c-price{font-size:16px;font-weight:700}
.thx-c-cat{display:block;font-size:13.5px;color:var(--mute);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thx-c-act{display:flex;align-items:center;gap:16px;margin-top:16px}
.thx-c-view{height:38px;padding:0 16px;border-radius:100px;border:0;background:#1d1d1f;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.thx-c-demo{font-size:14px;font-weight:600;color:#008060}
.thx-c-demo.off{color:#a1a1a6;font-weight:500}
.thx-empty{text-align:center;color:var(--mute);margin-top:40px}
.thx-empty a{color:#5849f1;font-weight:600}

/* Mini store mock (drawn from each theme's colours) */
.mk{--fh:'Inter',sans-serif;background:var(--b);color:var(--i);aspect-ratio:16/11;overflow:hidden;font-family:'Inter',sans-serif;font-size:7px;text-align:left;display:flex;flex-direction:column}
.mk.f-serif{--fh:'Instrument Serif',Georgia,serif}.mk.f-display{--fh:'Poppins',sans-serif}
.mk-nav{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid color-mix(in srgb,var(--i) 10%,transparent)}
.mk-nav b{font-family:var(--fh);font-size:9px;letter-spacing:1px}
.mk.f-display .mk-nav b{font-weight:700}
.mk-nav span{display:flex;gap:5px;margin-left:auto}.mk-nav span i{width:14px;height:3px;border-radius:2px;background:currentColor;opacity:.35}
.mk-nav s{width:8px;height:8px;border:1.5px solid currentColor;border-radius:2px;opacity:.7}
.mk-ban{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:12px;background:linear-gradient(135deg,var(--b1),var(--b2));border-radius:6px;color:var(--bt,var(--i))}
.mk-ban span{font-family:var(--fh);font-size:12px;line-height:1.1;max-width:75%}
.mk.f-display .mk-ban span{font-weight:700}
.mk-ban u{align-self:flex-start;text-decoration:none;background:var(--a);color:var(--b);padding:3px 7px;border-radius:3px;font-size:6.5px;font-weight:600}
.mk-hero{padding:8px 10px 0}.mk-hero .mk-ban{height:78px}
.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px 0}.mk-split .mk-ban{height:78px;background:none;padding:6px 2px}
.mk-hero-img{border-radius:6px;background:linear-gradient(160deg,var(--b1),var(--b2))}
.mk-strip{padding:8px 10px 0}.mk-strip .mk-ban{height:42px;flex-direction:row;align-items:center;justify-content:space-between}
.mk-grid{display:grid;gap:6px;padding:8px 10px}
.mk-grid.g4{grid-template-columns:repeat(4,1fr)}.mk-grid.g3{grid-template-columns:repeat(3,1fr)}.mk-grid.g3 .mk-p:nth-child(4){display:none}
.mk-p i{display:block;aspect-ratio:1;border-radius:4px;background:color-mix(in srgb,var(--b1) calc(92% - var(--k)*16%),var(--b2))}
.mk-p b{display:block;font-weight:600;margin-top:3px;font-size:6.5px}
.mk-p em{font-style:normal;opacity:.6;font-size:6px}
.mk.big{font-size:10px}.mk.big .mk-nav{padding:12px 18px}.mk.big .mk-nav b{font-size:14px}
.mk.big .mk-ban span{font-size:22px}.mk.big .mk-ban u{font-size:10px;padding:5px 10px}
.mk.big .mk-hero,.mk.big .mk-split,.mk.big .mk-strip{padding:14px 18px 0}.mk.big .mk-hero .mk-ban,.mk.big .mk-split .mk-ban{height:150px;padding:20px}
.mk.big .mk-strip .mk-ban{height:70px;padding:14px 20px}
.mk.big .mk-grid{gap:12px;padding:14px 18px}.mk.big .mk-p b{font-size:10px}.mk.big .mk-p em{font-size:9.5px}

/* Product view */
.thx-scrim{position:fixed;inset:0;z-index:90;background:rgba(10,10,20,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.thx-modal{position:fixed;left:50%;top:50%;z-index:91;width:min(1120px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;display:grid;grid-template-columns:1.45fr 1fr;
  background:#fff;border-radius:28px;box-shadow:0 40px 120px rgba(0,0,0,.35);transform:translate(-50%,-46%) scale(.98);opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.thx-in .thx-scrim{opacity:1}.thx-in .thx-modal{opacity:1;transform:translate(-50%,-50%)}
.thx-open{overflow:hidden}
.thx-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:#f2f2f5;font-size:22px;line-height:1;cursor:pointer}
.thx-m-media{background:linear-gradient(160deg,#eef0f6,#f8f8fa);padding:26px;display:flex;flex-direction:column;gap:16px}
.thx-view{align-self:flex-start;display:flex;background:#fff;border-radius:100px;padding:4px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.thx-view button{border:0;background:none;border-radius:100px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;color:#6e6e73;cursor:pointer}
.thx-view button.on{background:#1d1d1f;color:#fff}
.thx-m-frame{flex:1;display:flex;align-items:center;justify-content:center}
.frame-desk{width:100%;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(20,20,60,.18)}
.frame-desk .thx-shot{aspect-ratio:auto}
.frame-mob{display:none;width:250px;border-radius:30px;padding:8px;background:#111;box-shadow:0 24px 60px rgba(20,20,60,.25)}
.frame-mob .mk{border-radius:22px;aspect-ratio:9/17}
.frame-mob .mk-split{grid-template-columns:1fr}.frame-mob .mk-hero-img{height:90px}
.frame-mob .mk-grid.g4,.frame-mob .mk-grid.g3{grid-template-columns:1fr 1fr}
.thx-modal.mob .frame-desk{display:none}.thx-modal.mob .frame-mob{display:block}
.thx-m-info{padding:42px 36px 34px;display:flex;flex-direction:column}
.thx-m-cat{font-size:13.5px;font-weight:600;color:#008060}
.thx-m-info h2{font-size:44px;font-weight:700;letter-spacing:-1.4px;margin-top:6px}
.thx-m-tag{font-size:17px;color:#6e6e73;margin-top:4px}
.thx-m-price{display:flex;align-items:baseline;gap:6px;margin-top:20px}
.thx-m-price b{font-size:34px;font-weight:700;letter-spacing:-1px}.thx-m-price span{color:#6e6e73;font-size:14px}
.thx-m-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:18px;font-size:14.5px}
.thx-m-meta dt{color:#8e8e93}.thx-m-meta dd{margin:0;font-weight:500}
.thx-m-inc{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.thx-m-inc li{position:relative;padding-left:24px;font-size:14.5px;color:#3a3a3c}
.thx-m-inc li::before{content:"";position:absolute;left:3px;top:6px;width:10px;height:6px;border:solid #008060;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.thx-m-demo{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.thx-m-demo-btn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:100px;border:1.5px solid #1d1d1f;font-weight:600}
.thx-pw{border:0;background:#f5f5f7;border-radius:12px;padding:9px 12px;font:inherit;font-size:13.5px;color:#3a3a3c;cursor:pointer;display:flex;gap:6px;align-items:center;justify-content:center}
.thx-pw span{color:#5849f1;font-weight:600}
.thx-soon{font-size:14px;color:#6e6e73;background:#f5f5f7;border-radius:12px;padding:12px 14px}
.thx-buy{margin-top:12px;height:52px;font-size:16px}
.thx-install{margin-top:14px;text-align:center;font-size:14.5px;font-weight:600;color:#5849f1}
.thx-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:120;background:#1d1d1f;color:#fff;padding:11px 18px;border-radius:100px;font-size:14px;font-weight:500;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.thx-toast.show{opacity:1;transform:translate(-50%,0)}

/* How it works */
.thx-how{background:#fff;color:var(--ink);padding:120px 0 130px;text-align:center}
.thx-how h2{font-size:48px;font-weight:700;letter-spacing:-1.4px}
.thx-how-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;text-align:left}
.thx-how-row>div{background:#f5f5f7;border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;gap:6px}
.thx-how-row i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1d1d1f;color:#fff;font-style:normal;font-weight:600;font-size:14px;margin-bottom:10px}
.thx-how-row b{font-size:19px}.thx-how-row span{font-size:15px;line-height:1.5;color:#6e6e73}
.thx-how-cta{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:40px;flex-wrap:wrap}

@media (max-width:1000px){
  .thx-hero-grid{grid-template-columns:1fr}
  .thx-stack{height:330px;max-width:520px;margin:0 auto;width:100%}
  .thx-s{width:290px}.thx-s.s1{left:calc(50% - 145px)}.thx-s.s0{left:4%}.thx-s.s2{left:auto;right:4%}
  .thx-grid{grid-template-columns:1fr 1fr}
  .thx-modal{grid-template-columns:1fr}
}
@media (max-width:820px){
  .thx-hero{padding:110px 0 60px}
  .thx-hero h1{font-size:42px;letter-spacing:-1.3px}
  .thx-hero p{font-size:16.5px}
  .thx-facts{gap:18px 26px}
  .thx-stack{height:250px}.thx-s{width:220px}.thx-s.s1{left:calc(50% - 110px)}
  .thx-bar{top:62px}
  .thx-bar-in{flex-direction:column;align-items:stretch;gap:10px;padding-top:10px;padding-bottom:10px}
  .thx-search{width:100%;order:-1}
  .thx-pills{margin:0 -20px;padding:0 20px}
  .thx-grid{grid-template-columns:1fr;gap:18px}
  .thx-modal{left:0;right:0;top:auto;bottom:0;width:100%;max-height:92vh;border-radius:24px 24px 0 0;transform:translateY(40px);}
  .thx-in .thx-modal{transform:none}
  .thx-m-media{padding:18px}
  .thx-m-info{padding:24px 20px 28px}
  .thx-m-info h2{font-size:34px}
  .frame-mob{width:210px}
  .thx-how{padding:84px 0 100px}.thx-how h2{font-size:32px}
  .thx-how-row{grid-template-columns:1fr;margin-top:28px;gap:12px}
}

@media (max-width:820px){
  .thx-grid{grid-template-columns:1fr 1fr;gap:10px}
  .thx-card{border-radius:18px}
  .thx-thumb{padding:8px 8px 0}
  .thx-c-body{padding:10px 11px 12px}
  .thx-c-top h3{font-size:16px}.thx-c-price{font-size:13.5px}
  .thx-c-cat{font-size:12px}
  .thx-c-act{margin-top:10px}
  .thx-c-view{width:100%;height:34px;font-size:13px}
  .thx-c-demo{display:none}
  .thx-new{top:12px;left:12px;font-size:10.5px;padding:3px 8px}
}

/* Theme library teaser (Shopify page) */
.thx-teaser{background:#fff;color:#1d1d1f;padding:130px 0 120px;overflow:hidden}
.thx-t-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:40px}
.thx-t-head .btn{flex:none;height:52px;padding:0 26px}
.thx-t-row{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,calc((100vw - var(--container))/2 + 20px));padding:6px max(20px,calc((100vw - var(--container))/2 + 20px)) 20px;scrollbar-width:none}
.thx-t-row::-webkit-scrollbar{display:none}
.thx-t-card{flex:none;width:320px;scroll-snap-align:start;color:#1d1d1f}
.thx-t-shot{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 14px 34px rgba(20,20,60,.10);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.thx-t-card:hover .thx-t-shot{transform:translateY(-5px)}
.thx-t-card b{display:block;font-size:17px;margin-top:14px}
.thx-t-card span{display:block;font-size:13.5px;color:#6e6e73;margin-top:2px}
@media (max-width:820px){
  .thx-teaser{padding:84px 0 70px}
  .thx-t-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:26px}
  .thx-t-card{width:250px}
}

@media (max-width:820px){
  .thx-grid .mk{font-size:5px}
  .thx-grid .mk-nav{padding:5px 7px;gap:5px}.thx-grid .mk-nav b{font-size:6.5px}
  .thx-grid .mk-nav span i{width:9px;height:2px}
  .thx-grid .mk-ban{padding:7px;gap:3px}.thx-grid .mk-ban span{font-size:7.5px}
  .thx-grid .mk-ban u{font-size:5px;padding:2px 4px}
  .thx-grid .mk-hero,.thx-grid .mk-split,.thx-grid .mk-strip{padding:5px 7px 0}
  .thx-grid .mk-hero .mk-ban,.thx-grid .mk-split .mk-ban{height:46px}
  .thx-grid .mk-strip .mk-ban{height:26px}
  .thx-grid .mk-grid{gap:4px;padding:5px 7px}
  .thx-grid .mk-p b,.thx-grid .mk-p em{display:none}
}