/* ============================================================
   JUVIRA DIGITAL — V9 design system
   Bold reinvention · dark #1c1c1d "acid-ray" aurora base
   ============================================================ */

:root{
  --bg:#1c1c1d;
  --bg-2:#202022;
  --panel:rgba(255,255,255,.032);
  --panel-2:rgba(255,255,255,.05);
  --panel-brd:rgba(255,255,255,.09);
  --panel-brd-2:rgba(255,255,255,.16);

  --blue:#476bb3;
  --blue-br:#5a83d6;
  --purple:#7650a1;
  --purple-br:#9668c7;

  --white:#ffffff;
  --text:#edeef1;
  --muted:#a7a8b0;
  --muted-2:#7d7e87;

  --grad:linear-gradient(115deg,var(--blue-br) 0%,var(--purple-br) 100%);
  --grad-soft:linear-gradient(115deg,rgba(90,131,214,.16),rgba(150,104,199,.16));

  --sh-sm:0 6px 20px rgba(0,0,0,.34);
  --sh:0 24px 60px rgba(0,0,0,.46);
  --sh-glow:0 30px 80px rgba(90,110,200,.20);

  --r:20px; --r-lg:28px; --r-xl:36px; --r-sm:13px; --r-pill:100px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.35s var(--ease);
  --font:'Poppins',system-ui,-apple-system,sans-serif;
  --maxw:1320px;
  --gut:clamp(20px,5vw,48px);
  --nav-h:76px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(150,104,199,.4);color:#fff}

/* ---------- acid-ray aurora background ---------- */
.aura,.grain,.rays{position:fixed;inset:0;pointer-events:none}
.aura{
  z-index:-3;
  background:
    radial-gradient(46vw 46vw at 12% 8%, rgba(71,107,179,.30), transparent 60%),
    radial-gradient(42vw 42vw at 88% 22%, rgba(118,80,161,.28), transparent 62%),
    radial-gradient(50vw 50vw at 70% 96%, rgba(90,131,214,.18), transparent 64%);
  filter:saturate(1.05);
  animation:auraDrift 34s var(--ease) infinite alternate;
}
.rays{
  z-index:-2;
  background:linear-gradient(122deg,transparent 38%,rgba(150,170,255,.05) 46%,rgba(180,150,230,.07) 50%,transparent 60%);
  mix-blend-mode:screen;
  animation:raySweep 26s linear infinite;
}
.grain{
  z-index:-1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.grid-fx{position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 78%);
}
@keyframes auraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.04)}
}
@keyframes raySweep{0%{background-position:-30% 0}100%{background-position:130% 0}}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:var(--grad);box-shadow:0 0 14px rgba(120,120,240,.6)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(72px,10vw,128px) 0;position:relative}
.sec-tint{background:linear-gradient(180deg,transparent,rgba(255,255,255,.018),transparent)}

/* ---------- shared type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}
h1,h2,h3,h4{line-height:1.08;font-weight:700;letter-spacing:-.02em;color:#fff}
h2{font-size:clamp(1.9rem,3.9vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
h4{font-size:1.12rem;letter-spacing:-.01em}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:clamp(1rem,1.4vw,1.16rem);max-width:60ch}
.sec-head{max-width:760px;margin-bottom:clamp(40px,6vw,64px)}
.sec-head p{color:var(--muted);margin-top:16px;font-size:1.06rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:.95rem;padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t);white-space:nowrap;position:relative}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px rgba(90,110,200,.32)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(90,110,200,.46)}
.btn-ghost{background:var(--panel);color:#fff;border-color:var(--panel-brd-2);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:var(--panel-2);transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.btn-white{background:#fff;color:#1c1c1d}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.btn .ico{display:inline-grid;place-items:center;width:20px;height:20px;overflow:hidden;position:relative}
.btn .ico svg{position:absolute;transition:transform .4s var(--ease)}
.btn .i2{transform:translate(-140%,140%)}
.btn:hover .i1{transform:translate(140%,-140%)}
.btn:hover .i2{transform:translate(0,0)}
.txtlink{display:inline-flex;align-items:center;gap:8px;color:var(--blue-br);font-weight:600;font-size:.94rem;transition:var(--t)}
.txtlink svg{width:17px;height:17px;transition:transform var(--t)}
.txtlink:hover{color:#fff}
.txtlink:hover svg{transform:translateX(5px)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:120;display:flex;align-items:center;transition:background var(--t),border-color var(--t),backdrop-filter var(--t)}
.nav.scrolled{background:rgba(20,20,22,.72);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--panel-brd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.brand img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links>a,.drop-tog{position:relative;padding:9px 15px;border-radius:var(--r-pill);font-weight:500;font-size:.94rem;color:var(--muted);transition:color var(--t),background var(--t);display:inline-flex;align-items:center;gap:6px}
.nav-links>a:hover,.drop-tog:hover,.nav-links>a.active{color:#fff;background:var(--panel)}
.nav-drop{position:relative}
.chev{width:15px;height:15px;transition:transform var(--t)}
.nav-drop:hover .chev{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(10px);min-width:250px;background:rgba(28,28,32,.92);backdrop-filter:blur(20px);border:1px solid var(--panel-brd);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:var(--t);box-shadow:var(--sh)}
.nav-drop:hover .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-menu a{padding:11px 14px;border-radius:12px;font-size:.9rem;color:var(--muted);transition:var(--t)}
.drop-menu a:hover{background:var(--panel-2);color:#fff}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--t)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HOME hero ---------- */
.hero{position:relative;padding:calc(var(--nav-h) + clamp(48px,9vw,104px)) 0 clamp(56px,8vw,96px)}
.hero-pill{display:inline-flex;align-items:center;gap:11px;padding:7px 7px 7px 16px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--panel-brd);font-size:.82rem;color:var(--muted);margin-bottom:26px}
.hero-pill b{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:var(--r-pill);background:var(--grad);color:#fff;font-weight:600;font-size:.76rem}
.hero-pill b svg{width:13px;height:13px}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.2rem);font-weight:800;letter-spacing:-.035em;max-width:15ch}
.hero h1 .grad-text{display:inline-block}
.hero .lead{margin-top:26px;font-size:clamp(1.05rem,1.6vw,1.28rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);margin-top:52px;padding-top:38px;border-top:1px solid var(--panel-brd)}
.hstat b{display:block;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;color:#fff}
.hstat span{font-size:.86rem;color:var(--muted)}

/* service bento (home) */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(48px,7vw,72px)}
.bento a{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--panel-brd);min-height:210px;display:flex;align-items:flex-end;padding:22px;isolation:isolate;transition:transform var(--t),border-color var(--t)}
.bento a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.bento a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,18,20,.15) 0%,rgba(18,18,20,.55) 55%,rgba(18,18,20,.9) 100%)}
.bento a:hover{transform:translateY(-6px);border-color:var(--panel-brd-2)}
.bento a:hover img{transform:scale(1.08)}
.bento a.tall{grid-row:span 2;min-height:auto}
.bento a.wide{grid-column:span 2}
.b-name{font-weight:700;font-size:1.06rem;color:#fff;letter-spacing:-.01em}
.b-arrow{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid var(--panel-brd);backdrop-filter:blur(6px);transition:var(--t)}
.b-arrow svg{width:17px;height:17px}
.bento a:hover .b-arrow{background:var(--grad);border-color:transparent;transform:rotate(-45deg)}

/* ---------- partners marquee ---------- */
.partners{padding:clamp(40px,6vw,64px) 0}
.partners .lbl{text-align:center;color:var(--muted);font-size:.94rem;margin-bottom:32px}
.partners .lbl b{color:#fff;font-weight:600}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);padding:8px 0}
.mq-track{display:flex;gap:16px;width:max-content;animation:mq 44s linear infinite}
.mq-track.ltr{animation-direction:reverse}
.marquee:hover .mq-track{animation-play-state:paused}
.chip{flex:0 0 auto;height:80px;width:180px;display:grid;place-items:center;padding:20px 26px;border-radius:var(--r);background:#fff;box-shadow:var(--sh-sm)}
.chip img{max-height:100%;max-width:100%;object-fit:contain}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- about split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.split.rev .split-copy{order:2}
.about-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r-lg);padding:26px;transition:transform var(--t),border-color var(--t),background var(--t)}
.card:hover{transform:translateY(-5px);border-color:var(--panel-brd-2);background:var(--panel-2)}
.ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--panel-brd);margin-bottom:18px;color:var(--blue-br)}
.ic svg{width:24px;height:24px}
.card h4{margin-bottom:8px}
.card p{color:var(--muted);font-size:.94rem}

/* ---------- feature grid ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r-lg);padding:30px;transition:transform var(--t),border-color var(--t);position:relative;overflow:hidden}
.feat::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:var(--t)}
.feat:hover{transform:translateY(-6px);border-color:var(--panel-brd-2)}
.feat:hover::before{opacity:1}
.feat>*{position:relative}
.feat h4{margin-bottom:9px}
.feat p{color:var(--muted);font-size:.94rem}

/* highlight rows */
.hl-list{display:flex;flex-direction:column;gap:14px}
.hl{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r);transition:var(--t)}
.hl:hover{border-color:var(--panel-brd-2);transform:translateX(4px)}
.hl .dot{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;color:var(--blue-br)}
.hl .dot svg{width:20px;height:20px}
.hl b{display:block;color:#fff;font-weight:600;font-size:.98rem}
.hl span{color:var(--muted);font-size:.9rem}

/* ---------- process stepper ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.steps::before{content:"";position:absolute;top:32px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--blue-br),var(--purple-br));opacity:.4}
.step{position:relative;text-align:center;padding:0 6px}
.step .num{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--panel-brd-2);color:var(--blue-br);position:relative;z-index:1;transition:var(--t)}
.step:hover .num{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-4px)}
.step .num svg{width:26px;height:26px}
.step h4{margin-bottom:8px}
.step p{color:var(--muted);font-size:.92rem}

/* ---------- testimonials ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tst{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:18px;transition:var(--t)}
.tst:hover{transform:translateY(-5px);border-color:var(--panel-brd-2)}
.stars{color:#f2c85a;letter-spacing:3px;font-size:.95rem}
.tst p{color:var(--text);font-size:1rem}
.who{display:flex;align-items:center;gap:13px;margin-top:auto}
.who .av{width:44px;height:44px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff}
.who b{display:block;color:#fff;font-size:.95rem}
.who small{color:var(--muted);font-size:.84rem}

/* ---------- CTA band ---------- */
.cta-band{padding:clamp(48px,7vw,80px) 0}
.cta-card{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--panel-brd-2);padding:clamp(44px,7vw,80px);text-align:center;background:linear-gradient(120deg,rgba(71,107,179,.22),rgba(118,80,161,.22))}
.cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 120% at 50% 0%,rgba(150,104,199,.35),transparent 70%);pointer-events:none}
.cta-card>*{position:relative}
.cta-card h2{margin-bottom:16px}
.cta-card p{color:var(--muted);max-width:52ch;margin:0 auto 32px;font-size:1.08rem}

/* ============================================================
   SUBPAGE title bar — tinted background photo (Bluefire style)
   ============================================================ */
.ptitle{position:relative;min-height:clamp(460px,72vh,680px);display:flex;align-items:center;padding:calc(var(--nav-h) + 60px) 0 80px;overflow:hidden}
.ptitle .pt-bg{position:absolute;inset:0;z-index:-2}
.ptitle .pt-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:kenburns 22s var(--ease) infinite alternate}
.ptitle::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(22,22,26,.97) 0%,rgba(22,22,26,.88) 38%,rgba(22,22,26,.5) 72%,rgba(22,22,26,.34) 100%),
    linear-gradient(0deg,var(--bg) 0%,rgba(28,28,29,0) 26%);
}
.ptitle .pt-bg img{opacity:.55;filter:saturate(.65) contrast(1.02)}
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
.crumb{display:flex;align-items:center;gap:10px;font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.crumb a{color:var(--blue-br);transition:var(--t)}
.crumb a:hover{color:#fff}
.crumb .sep{opacity:.5}
.ptitle h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:800;letter-spacing:-.035em;max-width:16ch}
.ptitle .lead{margin-top:24px;font-size:clamp(1.02rem,1.5vw,1.24rem);color:#c9cad2}
.ptitle .lead.sub2{margin-top:12px;font-size:1rem;color:var(--muted)}
.pt-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.pt-inner{max-width:900px;position:relative;z-index:1}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.scroll-hint .sd{width:30px;height:30px;border-radius:50%;border:1px solid var(--panel-brd-2);display:grid;place-items:center;animation:bob 1.8s var(--ease) infinite}
.scroll-hint svg{width:16px;height:16px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* mini trust strip */
.trust{padding:34px 0;border-bottom:1px solid var(--panel-brd)}
.trust p{text-align:center;color:var(--muted-2);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px}
.trust .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,4vw,54px)}
.trust img{height:30px;width:auto;opacity:.55;filter:grayscale(1) brightness(1.8);transition:var(--t)}
.trust img:hover{opacity:1;filter:none}

/* ---------- galleries / showcase ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shots.apps{grid-template-columns:repeat(6,1fr)}
.shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--panel-brd);aspect-ratio:4/3;background:var(--bg-2);transition:var(--t)}
.shots.apps .shot{aspect-ratio:9/19}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.shot:hover{transform:translateY(-5px);border-color:var(--panel-brd-2)}
.shot:hover img{transform:scale(1.06)}

/* featured image frame */
.frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--panel-brd);box-shadow:var(--sh);position:relative}
.frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.2}

/* ============================================================
   Widgets (SEM 3-pack + Reputation)
   ============================================================ */
.widget{background:rgba(24,24,28,.7);backdrop-filter:blur(10px);border:1px solid var(--panel-brd);border-radius:var(--r-lg);box-shadow:var(--sh);padding:22px;position:relative;overflow:hidden}
.badge{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);background:var(--grad);color:#fff;font-weight:600;font-size:.8rem;box-shadow:0 10px 24px rgba(90,110,200,.4);opacity:0;transform:translateY(-8px);transition:.5s var(--ease)}
.badge.show{opacity:1;transform:translateY(0)}
.badge svg{width:14px;height:14px}
.serp-bar{display:flex;align-items:center;gap:10px;background:#26262b;border:1px solid var(--panel-brd);border-radius:var(--r-pill);padding:11px 16px;color:var(--text);font-size:.92rem}
.serp-bar svg{width:17px;height:17px;color:var(--muted)}
.serp-tabs{display:flex;gap:20px;margin:16px 4px 4px;color:var(--muted-2);font-size:.82rem}
.serp-tabs b{color:var(--blue-br);border-bottom:2px solid var(--blue-br);padding-bottom:6px}
.serp-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.serp-row{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:14px;background:var(--panel);border:1px solid transparent;transition:.5s var(--ease)}
.serp-row.win{background:var(--grad-soft);border-color:var(--panel-brd-2)}
.serp-row .rk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--bg-2);color:var(--muted)}
.serp-row.win .rk{background:var(--grad);color:#fff}
.serp-row .biz b{display:block;color:#fff;font-size:.92rem}
.serp-row .biz small{color:var(--muted);font-size:.78rem}
.rep-top{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.rep-score{font-size:2.6rem;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1}
.rep-top .stars{font-size:1.05rem}
.rep-sub{color:var(--muted);font-size:.86rem}
.rep-bars{display:flex;flex-direction:column;gap:9px}
.rep-bar{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--muted)}
.rep-bar .track{flex:1;height:8px;border-radius:6px;background:var(--panel-2);overflow:hidden}
.rep-bar .fill{height:100%;width:0;border-radius:6px;background:var(--grad);transition:width 1.2s var(--ease)}
.rep-review{margin-top:18px;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--panel-brd);min-height:96px}
.rep-review p{color:var(--text);font-size:.92rem;margin:8px 0}
.rep-review small{color:var(--muted);font-size:.78rem}

/* ============================================================
   About page specifics
   ============================================================ */
.dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto}
.dir{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r-lg);padding:34px;text-align:center;transition:var(--t)}
.dir:hover{transform:translateY(-5px);border-color:var(--panel-brd-2)}
.dir .av{width:96px;height:96px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;background:var(--grad);font-size:1.7rem;font-weight:800;color:#fff}
.dir .role{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-br);margin-bottom:12px}
.dir h4{font-size:1.3rem;margin-bottom:4px}
.dir small{color:var(--muted)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.member{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--panel-brd);position:relative;aspect-ratio:3/3.4;transition:var(--t)}
.member img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--ease)}
.member::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(16,16,20,.92) 100%)}
.member .info{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:1}
.member .info h4{font-size:1.02rem;margin-bottom:2px}
.member .info small{color:var(--muted)}
.member:hover{transform:translateY(-5px);border-color:var(--panel-brd-2)}
.member:hover img{transform:scale(1.05)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ============================================================
   Contact form
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.95fr 1.15fr;gap:clamp(32px,5vw,60px);align-items:start}
.contact-side .info-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--panel-brd)}
.contact-side .info-row:last-child{border-bottom:0}
.contact-side .ic{margin-bottom:0}
.contact-side .info-row b{display:block;color:#fff}
.contact-side .info-row span{color:var(--muted);font-size:.92rem}
.form-card{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r-xl);padding:clamp(28px,4vw,42px);position:relative;overflow:hidden}
.field{margin-bottom:20px}
.field label{display:block;font-size:.86rem;font-weight:500;color:var(--text);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--panel-brd);border-radius:14px;padding:14px 16px;color:#fff;font-family:inherit;font-size:.95rem;transition:var(--t)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-br);box-shadow:0 0 0 3px rgba(90,131,214,.18)}
.field.err input,.field.err select,.field.err textarea{border-color:#e0607a}
.field .msg{display:none;color:#e0607a;font-size:.8rem;margin-top:7px}
.field.err .msg{display:block}
.phone-row{display:flex;gap:10px}
.phone-row select{max-width:150px}
.form-note{color:var(--muted);font-size:.84rem;margin-top:6px}
.form-success{position:absolute;inset:0;background:rgba(22,22,26,.97);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;opacity:0;visibility:hidden;transform:scale(.96);transition:.5s var(--ease)}
.form-success.show{opacity:1;visibility:visible;transform:scale(1)}
.form-success .check{width:76px;height:76px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin-bottom:22px}
.form-success .check svg{width:38px;height:38px;color:#fff}
.form-success p{color:var(--muted);max-width:42ch;margin:14px 0 26px}

/* ============================================================
   Legal
   ============================================================ */
.legal{max-width:820px;margin:0 auto}
.legal .intro{color:var(--muted);font-size:1.05rem;margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid var(--panel-brd)}
.legal h3{margin:34px 0 12px}
.legal p{color:var(--muted);margin-bottom:14px}
.legal a{color:var(--blue-br)}
.legal .updated{margin-top:40px;color:var(--muted-2);font-size:.88rem}

/* ============================================================
   Footer
   ============================================================ */
footer{border-top:1px solid var(--panel-brd);padding:clamp(52px,7vw,84px) 0 34px;margin-top:clamp(40px,6vw,72px);position:relative}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,54px)}
.foot-brand img{height:34px;margin-bottom:20px}
.foot-brand p{color:var(--muted);font-size:.94rem;max-width:36ch;margin-bottom:22px}
.foot-social{display:flex;gap:12px}
.social-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--panel-brd);color:var(--muted);transition:var(--t)}
.social-ic svg{width:19px;height:19px}
.social-ic:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-3px)}
.foot-col h5{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.foot-col a{display:block;color:var(--muted);font-size:.92rem;padding:6px 0;transition:var(--t)}
.foot-col a:hover{color:#fff;padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,5vw,60px);padding-top:26px;border-top:1px solid var(--panel-brd);color:var(--muted-2);font-size:.86rem}
.foot-bottom .links{display:flex;gap:22px}
.foot-bottom a{color:var(--muted-2);transition:var(--t)}
.foot-bottom a:hover{color:#fff}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento a.tall{grid-row:auto}
  .feat-grid,.values-grid,.tst-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .shots{grid-template-columns:repeat(2,1fr)}
  .shots.apps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;background:rgba(20,20,23,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--panel-brd);padding:18px var(--gut) 26px;transform:translateY(-140%);transition:transform .45s var(--ease);height:auto}
  .nav-links.open{display:flex;transform:translateY(0)}
  .nav-links>a,.drop-tog{padding:13px 14px;font-size:1rem}
  .nav-drop{width:100%}
  .drop-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;background:transparent;border:0;padding:2px 0 2px 14px;min-width:0}
  .split,.contact-grid{grid-template-columns:1fr}
  .split.rev .split-copy{order:0}
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
}
@media(max-width:640px){
  .bento,.feat-grid,.values-grid,.tst-grid,.dir-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .shots,.shots.apps{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .phone-row{flex-direction:column}
  .phone-row select{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   V10 — overrides & new components
   ============================================================ */

/* button icon fix */
.btn .ico{position:relative;overflow:hidden}
.btn .ico svg{position:absolute;inset:0;margin:auto;width:17px;height:17px}
.btn .ico .i2{transform:translate(-140%,140%)}
.btn:hover .ico .i1{transform:translate(140%,-140%)}
.btn:hover .ico .i2{transform:translate(0,0)}

/* subtle shimmer on gradient text */
.grad-text{background-size:200% auto;animation:shimmer 7s linear infinite}
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* scroll hint is a real control now */
.scroll-hint{cursor:pointer;border:0;background:none;font-family:inherit;transition:color var(--t)}
.scroll-hint:hover{color:#fff}
.scroll-hint:hover .sd{border-color:#fff}

/* tilt-enabled cards */
.tiltable{transition:transform .3s var(--ease),border-color var(--t),background var(--t),box-shadow .3s var(--ease);will-change:transform}
.tiltable:hover{box-shadow:var(--sh-glow)}

/* shine sweep */
.feat::after,.card::after,.tst::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;pointer-events:none;transition:background-position .8s var(--ease)}
.feat:hover::after,.card:hover::after,.tst:hover::after{background-position:-40% 0}
.card,.tst{position:relative;overflow:hidden}

/* ---------- centered hero (V10) ---------- */
.hero-c{text-align:center;overflow:hidden}
.hero-c::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 2px,transparent 2px 84px);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hero-c::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(52vw 44vw at 82% 88%,rgba(118,80,161,.34),transparent 64%),
             radial-gradient(46vw 40vw at 14% 92%,rgba(71,107,179,.26),transparent 62%)}
.hero-c h1{margin:0 auto;max-width:19ch}
.hero-c .lead{margin-left:auto;margin-right:auto}
.hero-c .hero-cta{justify-content:center}
.hero-c .hero-stats{justify-content:center;border-top:0;padding-top:0;margin-top:44px}
.hero-pill.c{gap:9px;padding:9px 20px;font-weight:600;color:#dfe2ee;border-color:rgba(150,140,220,.35);background:linear-gradient(115deg,rgba(90,131,214,.14),rgba(150,104,199,.14))}
.hero-pill.c svg{width:15px;height:15px;color:var(--purple-br)}
.hero-orbs span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;animation:orbFloat 16s var(--ease) infinite alternate}
.hero-orbs .o1{width:340px;height:340px;left:-90px;top:16%;background:rgba(71,107,179,.4)}
.hero-orbs .o2{width:300px;height:300px;right:-70px;top:30%;background:rgba(118,80,161,.4);animation-delay:-6s}
.hero-orbs .o3{width:220px;height:220px;left:32%;bottom:-60px;background:rgba(90,131,214,.3);animation-delay:-11s}
@keyframes orbFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,-46px,0) scale(1.15)}}
.hero-trust{margin-top:clamp(48px,6vw,72px)}
.hero-trust .lbl{color:var(--muted);font-size:.95rem;margin-bottom:26px}
.hero-trust .lbl b{color:#fff}

/* ---------- services index (V10 redesign) ---------- */
.sindex{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.si-list{display:flex;flex-direction:column}
.si-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px 14px;border-bottom:1px solid var(--panel-brd);position:relative;transition:padding var(--t),background var(--t)}
.si-row:first-child{border-top:1px solid var(--panel-brd)}
.si-row::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(90,131,214,.10),transparent 70%);opacity:0;transition:opacity var(--t)}
.si-row:hover,.si-row.on{padding-left:26px}
.si-row:hover::before,.si-row.on::before{opacity:1}
.si-num{font-size:.8rem;font-weight:700;color:var(--muted-2);letter-spacing:.08em;transition:color var(--t)}
.si-name{font-weight:700;font-size:clamp(1.1rem,1.9vw,1.5rem);letter-spacing:-.015em;color:#fff;display:block}
.si-desc{display:block;color:var(--muted);font-size:.88rem;margin-top:3px;font-weight:400}
.si-arrow{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--panel-brd-2);color:var(--muted);transition:var(--t)}
.si-arrow svg{width:18px;height:18px}
.si-row:hover .si-num,.si-row.on .si-num{color:var(--blue-br)}
.si-row:hover .si-name,.si-row.on .si-name{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.si-row:hover .si-arrow,.si-row.on .si-arrow{background:var(--grad);color:#fff;border-color:transparent;transform:rotate(-45deg)}
.si-preview{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--panel-brd);min-height:420px;box-shadow:var(--sh)}
.si-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .5s var(--ease),transform .8s var(--ease)}
.si-preview img.show{opacity:1;transform:scale(1)}
.si-preview .si-cap{position:absolute;left:18px;bottom:18px;z-index:2;padding:10px 18px;border-radius:var(--r-pill);background:rgba(18,18,22,.72);backdrop-filter:blur(10px);border:1px solid var(--panel-brd-2);font-weight:600;font-size:.9rem;color:#fff}
.si-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,14,18,.6));z-index:1;pointer-events:none}

/* ---------- wave process (V10) ---------- */
.wproc{position:relative;margin-top:clamp(40px,6vw,64px);min-height:430px}
.wpath{position:absolute;inset:0;width:100%;height:100%}
.wpath path{stroke:url(#wgrad);stroke-width:2.5;fill:none;stroke-linecap:round}
.wproc.draw .wpath path{stroke-dasharray:1600;stroke-dashoffset:1600;animation:wdraw 2.6s var(--ease) forwards}
@keyframes wdraw{to{stroke-dashoffset:0}}
.wdot{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 16px 4px rgba(120,130,240,.8);offset-rotate:0deg;opacity:0}
.wproc.draw .wdot{opacity:1;animation:wtravel 7s linear 2.6s infinite}
@keyframes wtravel{0%{offset-distance:0%}100%{offset-distance:100%}}
.wnode{position:absolute;width:24%;text-align:center;transform:translateX(-50%)}
.wnode .ghost{position:absolute;font-size:clamp(4rem,7vw,6.5rem);font-weight:800;color:rgba(255,255,255,.05);line-height:1;top:-30px;right:4px;z-index:0;letter-spacing:-.04em}
.wnode .wtile{width:62px;height:62px;margin:0 auto 16px;border-radius:18px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--panel-brd-2);color:var(--blue-br);box-shadow:var(--sh-sm);position:relative;z-index:1;transition:var(--t)}
.wnode .wtile svg{width:26px;height:26px}
.wnode:hover .wtile{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-5px) rotate(-4deg)}
.wnode h4{margin-bottom:7px;position:relative;z-index:1}
.wnode p{color:var(--muted);font-size:.9rem;position:relative;z-index:1}
.wproc.draw .wnode{opacity:0;animation:nodeIn .7s var(--ease) forwards}
.wproc.draw .wnode:nth-child(3){animation-delay:.3s}
.wproc.draw .wnode:nth-child(4){animation-delay:.9s}
.wproc.draw .wnode:nth-child(5){animation-delay:1.5s}
.wproc.draw .wnode:nth-child(6){animation-delay:2.1s}
@keyframes nodeIn{from{opacity:0;transform:translateX(-50%) translateY(24px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.wproc-m{display:none}

/* ---------- trust strip → white chips (visibility fix) ---------- */
.trust .row{gap:14px}
.trust .row .chip{height:64px;width:150px;padding:14px 20px}
.trust img{height:auto;opacity:1;filter:none}

/* ---------- CTA v10 ---------- */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.cta-card.v10{background:#222226;border:0;isolation:isolate}
.cta-card.v10::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--ang),rgba(90,131,214,0) 0%,var(--blue-br) 18%,var(--purple-br) 38%,rgba(150,104,199,0) 55%,rgba(90,131,214,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 5s linear infinite;pointer-events:none}
@keyframes spin{to{--ang:360deg}}
.cta-card.v10 h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.cta-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--purple-br);margin-bottom:18px}
.cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta-orbs span{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;pointer-events:none;animation:orbFloat 12s var(--ease) infinite alternate;z-index:-1}
.cta-orbs span:nth-child(1){width:260px;height:260px;left:-60px;top:-80px;background:rgba(71,107,179,.5)}
.cta-orbs span:nth-child(2){width:230px;height:230px;right:-50px;bottom:-70px;background:rgba(118,80,161,.55);animation-delay:-4s}
.cta-orbs span:nth-child(3){width:160px;height:160px;left:44%;bottom:-60px;background:rgba(90,131,214,.4);animation-delay:-8s}
.cta-card.v10 .btn-white{animation:ctaPulse 2.6s var(--ease) infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}50%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}

/* ---------- About V10 ---------- */
.believe{max-width:880px;margin:0 auto;text-align:center}
.believe .big{font-size:clamp(1.4rem,2.8vw,2.1rem);font-weight:600;line-height:1.45;color:#dfe0e6;letter-spacing:-.01em}
.believe .big em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.believe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(36px,5vw,54px);text-align:left}
.dir-grid.v10{max-width:1000px}
.dir.v10{text-align:left;display:flex;flex-direction:column;gap:18px;padding:38px}
.dir.v10 .top{display:flex;align-items:center;gap:18px}
.dir.v10 .av{margin:0;width:76px;height:76px;font-size:1.4rem;flex:0 0 auto}
.dir.v10 .role{margin-bottom:4px}
.dir.v10 h4{margin-bottom:0}
.dir.v10 blockquote{border-left:3px solid;border-image:var(--grad) 1;padding-left:18px;color:var(--muted);font-size:.98rem;line-height:1.7}
.dir.v10 blockquote b{color:#fff}

/* team — 3 rows, unique member backgrounds */
.team-grid{grid-template-columns:repeat(6,1fr);gap:14px}
.member{aspect-ratio:3/3.6;background:linear-gradient(180deg,hsl(var(--h,222) 34% 26%),hsl(var(--h,222) 42% 12%));border-color:hsl(var(--h,222) 30% 34% / .5)}
.member img{object-fit:contain;object-position:bottom center;padding-top:14px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.45))}
.member::after{background:linear-gradient(180deg,transparent 52%,hsl(var(--h,222) 45% 7% / .92) 100%)}
.member .info{padding:14px}
.member .info h4{font-size:.9rem}
.member .info small{font-size:.72rem;line-height:1.35;display:block}
.member:hover{box-shadow:0 22px 44px hsl(var(--h,222) 60% 30% / .45);border-color:hsl(var(--h,222) 50% 55% / .8)}
.member:hover img{transform:scale(1.06) translateY(-6px)}

/* responsive additions */
@media(max-width:1080px){
  .team-grid{grid-template-columns:repeat(4,1fr)}
  .sindex{grid-template-columns:1fr}
  .si-preview{min-height:320px}
}
@media(max-width:900px){
  .wproc{display:none}
  .wproc-m{display:flex;flex-direction:column;gap:14px}
  .wproc-m .pmrow{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r);padding:18px}
  .wproc-m .wtile{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--panel-brd-2);color:var(--blue-br);flex:0 0 auto}
  .wproc-m .wtile svg{width:24px;height:24px}
  .wproc-m h4{margin-bottom:5px}
  .wproc-m p{color:var(--muted);font-size:.9rem}
}
@media(max-width:640px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .si-preview{display:none}
  .si-desc{display:none}
}

/* ============================================================
   V11 — overrides & new components
   ============================================================ */

/* full-screen, photo-forward title bars */
.ptitle{min-height:100vh;padding:calc(var(--nav-h) + 40px) 0 150px}
.ptitle .pt-bg img{opacity:.85;filter:saturate(.9) contrast(1.03)}
.ptitle::after{background:
  linear-gradient(90deg,rgba(22,22,26,.93) 0%,rgba(22,22,26,.72) 36%,rgba(22,22,26,.3) 68%,rgba(22,22,26,.18) 100%),
  linear-gradient(0deg,var(--bg) 2%,rgba(28,28,29,0) 30%),
  linear-gradient(180deg,rgba(22,22,26,.5),rgba(22,22,26,0) 26%)}

/* scroll hint → right edge, vertical */
.scroll-hint{left:auto;right:clamp(16px,3vw,40px);bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column;gap:14px}
.scroll-hint .sh-label{writing-mode:vertical-rl;letter-spacing:.22em;font-size:.7rem}
.scroll-hint::before{content:"";width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--panel-brd-2))}
.scroll-hint:hover{transform:translateY(-50%)}

/* trusted-by inside title bar — one line */
.pt-trust{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center}
.pt-trust p{color:var(--muted);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.pt-trust .row{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:nowrap;overflow:hidden;padding:0 var(--gut)}
.pt-trust .chip{height:52px;width:118px;padding:10px 14px;flex:0 0 auto}
@media(max-width:900px){.pt-trust .chip:nth-child(n+6){display:none}}
@media(max-width:560px){.pt-trust .chip:nth-child(n+4){display:none}}

/* what-we-do preview: fit images + info panel below */
.si-side{display:flex;flex-direction:column;gap:16px}
.si-preview{min-height:0;height:300px;flex:0 0 auto;background:
  radial-gradient(80% 90% at 50% 10%,rgba(90,131,214,.14),transparent 70%),var(--bg-2)}
.si-preview img{object-fit:contain;padding:22px}
.si-preview::after{display:none}
.si-info{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r-lg);padding:24px 26px;flex:1;display:flex;flex-direction:column;gap:14px}
.si-info .si-blurb{color:var(--text);font-size:.98rem;transition:opacity .3s var(--ease)}
.si-tags{display:flex;flex-wrap:wrap;gap:8px}
.si-tag{padding:6px 14px;border-radius:var(--r-pill);background:var(--grad-soft);border:1px solid var(--panel-brd);font-size:.78rem;font-weight:600;color:#cdd4ea}
.si-info .txtlink{margin-top:auto}
@media(max-width:1080px){.si-side{display:none}}

/* hero background lines — visible & animated */
.hero-c::before{
  background:
    repeating-linear-gradient(90deg,rgba(150,160,230,.055) 0 2px,transparent 2px 84px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 28px);
  animation:stripeDrift 18s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
@keyframes stripeDrift{from{background-position:0 0,0 0}to{background-position:84px 0,-28px 0}}
.hero-c .h-beam{position:absolute;top:0;bottom:34%;width:2px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(150,170,255,.65),transparent);filter:blur(.5px);animation:beamFall 7s linear infinite;opacity:0}
.hero-c .h-beam.b2{animation-delay:2.3s}
.hero-c .h-beam.b3{animation-delay:4.6s}
@keyframes beamFall{0%{transform:translateY(-70%);opacity:0}12%{opacity:.9}55%{opacity:.5}100%{transform:translateY(180%);opacity:0}}

/* headline breathing room (descenders were tight) */
.hero-c h1{line-height:1.16;padding-bottom:.08em}
.ptitle h1{line-height:1.14;padding-bottom:.06em}

/* scroll-to-top */
.totop{position:fixed;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);z-index:150;width:52px;height:52px;border-radius:50%;border:1px solid var(--panel-brd-2);background:rgba(26,26,30,.85);backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:.4s var(--ease);box-shadow:var(--sh-sm)}
.totop svg{width:20px;height:20px}
.totop::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--grad);opacity:0;transition:opacity var(--t);z-index:-1}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{transform:translateY(-4px);border-color:transparent}
.totop:hover::before{opacity:1}

/* si-info includes checklist (V11.1) */
.si-inc{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.si-inc span{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.9rem}
.si-inc svg{width:16px;height:16px;color:var(--blue-br);flex:0 0 auto}

/* ============================================================
   V12 — overrides & new components
   ============================================================ */

/* 1) hero lines: still stripes + breathing light band (replaces drift/beams) */
.hero-c::before{animation:none}
.h-beam{display:none}
.h-shimmer{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,rgba(140,160,255,.22) 46%,rgba(180,150,230,.20) 54%,transparent 75%);
  background-size:280% 100%;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 84px);
  mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 84px);
  animation:lineBreathe 10s var(--ease) infinite}
@keyframes lineBreathe{0%,100%{background-position:120% 0;opacity:.5}50%{background-position:-20% 0;opacity:1}}

/* 2) subpage trust chips = homepage style, content width */
.pt-trust .row{max-width:var(--maxw);margin:0 auto;gap:12px}
.pt-trust .chip{height:72px;width:156px;padding:16px 22px;border-radius:var(--r)}

/* 3) Our story — animated growth diagram */
.sdiag{position:relative;min-height:380px;border-radius:var(--r-lg);border:1px solid var(--panel-brd);background:var(--panel);padding:20px;overflow:hidden}
.sdiag svg{position:absolute;inset:0;width:100%;height:100%}
.sdiag .gpath{stroke:url(#sgrad);stroke-width:3;fill:none;stroke-linecap:round}
.sdiag .garea{fill:url(#sfill);opacity:0}
.sdiag.draw .gpath{stroke-dasharray:1300;stroke-dashoffset:1300;animation:wdraw 2.2s var(--ease) forwards}
.sdiag.draw .garea{animation:fadeIn 1s var(--ease) 1.6s forwards}
@keyframes fadeIn{to{opacity:.5}}
.smark{position:absolute;transform:translateX(-50%);text-align:center;opacity:0}
.sdiag.draw .smark{animation:nodeIn2 .6s var(--ease) forwards}
.sdiag.draw .smark:nth-child(3){animation-delay:.4s}
.sdiag.draw .smark:nth-child(4){animation-delay:.9s}
.sdiag.draw .smark:nth-child(5){animation-delay:1.4s}
.sdiag.draw .smark:nth-child(6){animation-delay:1.9s}
@keyframes nodeIn2{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.smark .dotp{width:16px;height:16px;margin:0 auto 10px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 5px rgba(120,130,240,.18);position:relative}
.smark .dotp::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(140,150,240,.5);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.9);opacity:0}}
.smark b{display:block;color:#fff;font-size:.95rem;letter-spacing:-.01em}
.smark span{color:var(--muted);font-size:.78rem}

/* 4) team marquee redesign */
.team-mq .marquee{padding:14px 0}
.tm-card{flex:0 0 auto;width:236px;border-radius:var(--r-lg);border:1px solid hsl(var(--h,222) 30% 34% / .5);background:linear-gradient(180deg,hsl(var(--h,222) 34% 26%),hsl(var(--h,222) 42% 12%));position:relative;overflow:hidden;height:300px;transition:var(--t)}
.tm-card img{position:absolute;inset:14px 0 0 0;width:100%;height:calc(100% - 14px);object-fit:contain;object-position:bottom center;filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));transition:transform .5s var(--ease)}
.tm-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,hsl(var(--h,222) 45% 7% / .94) 100%)}
.tm-card .info{position:absolute;left:0;right:0;bottom:0;padding:16px;z-index:1;text-align:center}
.tm-card .info h4{font-size:1rem;margin-bottom:2px}
.tm-card .info small{color:var(--muted);font-size:.76rem;line-height:1.3;display:block}
.tm-card:hover{box-shadow:0 20px 40px hsl(var(--h,222) 60% 30% / .45);border-color:hsl(var(--h,222) 50% 55% / .8);transform:translateY(-6px)}
.tm-card:hover img{transform:scale(1.05)}
.team-mq .mq-track{gap:18px;animation-duration:60s}

/* 6) Recent websites — browser-frame cards */
.site-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.site-card{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--panel-brd);background:var(--bg-2);box-shadow:var(--sh-sm);transition:var(--t)}
.site-card:hover{transform:translateY(-6px);border-color:var(--panel-brd-2);box-shadow:var(--sh-glow)}
.site-card:first-child{grid-column:1/-1}
.bbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--panel-brd);background:rgba(255,255,255,.03)}
.bbar .dots{display:flex;gap:6px}
.bbar .dots span{width:10px;height:10px;border-radius:50%}
.bbar .dots span:nth-child(1){background:#e0607a}.bbar .dots span:nth-child(2){background:#f2c85a}.bbar .dots span:nth-child(3){background:#6fd0a8}
.bbar .url{flex:1;max-width:340px;padding:6px 14px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--panel-brd);color:var(--muted-2);font-size:.76rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-card .shot-w{overflow:hidden;aspect-ratio:16/9.4}
.site-card:first-child .shot-w{aspect-ratio:21/8.6}
.site-card .shot-w img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 6s var(--ease)}
.site-card:hover .shot-w img{transform:translateY(-4%) scale(1.02)}
@media(max-width:760px){.site-cards{grid-template-columns:1fr}}

/* 7) Featured apps — no hover motion */
.shots.apps .shot{transition:none}
.shots.apps .shot:hover{transform:none;border-color:var(--panel-brd);box-shadow:none}
.shots.apps .shot:hover img{transform:none}
.shots.apps .shot img{transition:none}

/* 8) Social — IG feeds + stories, separated */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.igcard{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--panel-brd);background:var(--bg-2);transition:var(--t)}
.igcard:hover{transform:translateY(-6px);border-color:var(--panel-brd-2);box-shadow:var(--sh-glow)}
.ig-top{display:flex;align-items:center;gap:11px;padding:12px 14px}
.ig-av{width:38px;height:38px;border-radius:50%;padding:2px;background:var(--grad)}
.ig-av .in{width:100%;height:100%;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;overflow:hidden}
.ig-av img{width:78%;height:78%;object-fit:contain}
.ig-top b{color:#fff;font-size:.86rem;display:block;line-height:1.2}
.ig-top small{color:var(--muted-2);font-size:.72rem}
.ig-top .dots3{margin-left:auto;color:var(--muted);letter-spacing:2px;font-weight:700}
.igcard .ig-shot{aspect-ratio:4/4.4;overflow:hidden}
.igcard .ig-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ig-actions{display:flex;gap:14px;padding:12px 14px;color:var(--muted)}
.ig-actions svg{width:20px;height:20px}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:900px;margin:0 auto}
.stcard{position:relative;aspect-ratio:9/17;border-radius:26px;overflow:hidden;border:1px solid var(--panel-brd);transition:var(--t)}
.stcard img{width:100%;height:100%;object-fit:cover}
.stcard::before{content:"";position:absolute;left:12px;right:12px;top:10px;height:3px;z-index:2;border-radius:3px;background:linear-gradient(90deg,#fff 0 62%,rgba(255,255,255,.3) 62%)}
.stcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,18,.42),transparent 26%)}
.stcard .st-top{position:absolute;top:22px;left:14px;display:flex;align-items:center;gap:9px;z-index:2}
.stcard .st-top .ig-av{width:32px;height:32px}
.stcard .st-top b{color:#fff;font-size:.78rem;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.stcard:hover{transform:translateY(-6px);border-color:var(--panel-brd-2);box-shadow:var(--sh-glow)}
@media(max-width:760px){.ig-grid,.story-grid{grid-template-columns:1fr}.stcard{max-width:320px;margin:0 auto}}

/* V12.1 — story diagram label fit */
.smark{width:150px}
.sdiag{padding:20px 10px}

/* ============================================================
   V13 — static hero lines, darker static title banners
   ============================================================ */
.h-shimmer{display:none}
.hero-c::before{animation:none}
.ptitle .pt-bg img{animation:none;transform:none;opacity:.8;filter:saturate(.8) contrast(1.02)}
.ptitle::after{background:
  linear-gradient(90deg,rgba(20,20,24,.97) 0%,rgba(20,20,24,.9) 38%,rgba(20,20,24,.66) 70%,rgba(20,20,24,.55) 100%),
  linear-gradient(0deg,var(--bg) 2%,rgba(28,28,29,0) 32%),
  linear-gradient(180deg,rgba(20,20,24,.6),rgba(20,20,24,.12) 30%)}

/* ============================================================
   V14 — hero restyle (no lines), smoother motion, trust marquee
   ============================================================ */

/* 1) hero: lines gone — soft breathing glow + floating orbs */
.hero-c::before{
  display:block;animation:glowBreathe 9s ease-in-out infinite;
  background:radial-gradient(46% 40% at 50% 32%,rgba(105,125,225,.16),transparent 72%);
  -webkit-mask-image:none;mask-image:none}
@keyframes glowBreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.hero-orbs span{opacity:.42;filter:blur(70px);animation-duration:22s}

/* 2) smoother motion everywhere */
:root{--ease:cubic-bezier(.25,.8,.25,1);--t:.5s var(--ease)}
.reveal{transform:translateY(20px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}
.mq-track{animation-duration:56s}
.team-mq .mq-track{animation-duration:78s}
.aura{animation-duration:46s}
.rays{animation-duration:38s}
.tiltable{transition:transform .5s var(--ease),border-color var(--t),background var(--t),box-shadow .5s var(--ease)}
.wproc.draw .wpath path{animation-duration:3.2s}
.wproc.draw .wdot{animation-duration:9s;animation-delay:3.2s}
.sdiag.draw .gpath{animation-duration:2.8s}
.btn:hover,.card:hover,.feat:hover,.tst:hover{transition-duration:.5s}
.si-preview img{transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.bento a img,.shot img,.member img,.tm-card img{transition-duration:.9s}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.22)}50%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}

/* 3) subpage trust logos — homepage-style marquee, right to left */
.pt-trust .row{display:none}
.pt-trust .marquee{max-width:var(--maxw);margin:0 auto;padding:8px 0}
.pt-trust .chip{height:76px;width:172px;padding:18px 24px;border-radius:var(--r)}
.pt-trust .mq-track{gap:14px;animation-duration:48s}

/* ============================================================
   V15 — websites showcase carousel, hero h1 breathing room
   ============================================================ */

/* 3) hero heading — full descenders */
.hero-c h1{line-height:1.26;padding-bottom:.1em}
.ptitle h1{line-height:1.2}

/* 1) Recent websites — modern scroll-snap showcase */
.wsc-wrap{position:relative}
.wshowcase{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 6px 22px;scrollbar-width:none;-ms-overflow-style:none}
.wshowcase::-webkit-scrollbar{display:none}
.ws-card{flex:0 0 auto;width:clamp(300px,44%,560px);scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--panel-brd);background:var(--bg-2);position:relative;transition:border-color var(--t),box-shadow .5s var(--ease)}
.ws-card:hover{border-color:var(--panel-brd-2);box-shadow:var(--sh-glow)}
.ws-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);opacity:0;transition:opacity var(--t);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ws-card:hover::before{opacity:.9}
.ws-img{aspect-ratio:16/10.6;overflow:hidden}
.ws-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 5s var(--ease)}
.ws-card:hover .ws-img img{transform:translateY(-6%) scale(1.03)}
.ws-meta{display:flex;align-items:center;gap:12px;padding:16px 18px;border-top:1px solid var(--panel-brd)}
.ws-meta b{color:#fff;font-size:.96rem}
.ws-meta span{color:var(--muted);font-size:.82rem}
.ws-meta .ws-go{margin-left:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--panel-brd-2);color:var(--muted);transition:var(--t)}
.ws-meta .ws-go svg{width:16px;height:16px}
.ws-card:hover .ws-go{background:var(--grad);color:#fff;border-color:transparent;transform:rotate(-45deg)}
.ws-nav{display:flex;align-items:center;gap:18px;margin-top:18px}
.ws-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--panel-brd-2);background:var(--panel);color:#fff;display:grid;place-items:center;transition:var(--t);backdrop-filter:blur(8px)}
.ws-btn svg{width:19px;height:19px}
.ws-btn:hover{background:var(--grad);border-color:transparent;transform:translateY(-3px)}
.ws-progress{flex:1;height:4px;border-radius:4px;background:var(--panel-2);overflow:hidden}
.ws-progress span{display:block;height:100%;width:12%;border-radius:4px;background:var(--grad);transition:width .3s var(--ease)}

/* ============================================================
   V16 — hero life: floating chips, particles, scroll-down
   ============================================================ */
.h-float{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:var(--r-pill);background:rgba(30,30,36,.62);border:1px solid var(--panel-brd-2);backdrop-filter:blur(10px);color:#dfe2ee;font-size:.82rem;font-weight:600;box-shadow:var(--sh-sm);animation:chipFloat 7s ease-in-out infinite;will-change:transform;z-index:2;pointer-events:none}
.h-float svg{width:16px;height:16px;color:var(--blue-br)}
.h-float.f2{animation-delay:-1.8s}.h-float.f3{animation-delay:-3.4s}
.h-float.f4{animation-delay:-5s}.h-float.f5{animation-delay:-2.6s}.h-float.f6{animation-delay:-4.2s}
@keyframes chipFloat{0%,100%{transform:translate(var(--px,0),0)}50%{transform:translate(var(--px,0),-16px)}}
@media(max-width:1100px){.h-float{display:none}}
.h-part{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:rgba(150,165,255,.55);filter:blur(.5px);animation:rise linear infinite;pointer-events:none}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.8}100%{transform:translateY(-88vh);opacity:0}}
.hero-down{position:relative;margin:26px auto 0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--panel-brd-2);background:var(--panel);color:#fff;backdrop-filter:blur(8px);animation:bob 2.2s var(--ease) infinite;transition:var(--t)}
.hero-down svg{width:20px;height:20px}
.hero-down:hover{background:var(--grad);border-color:transparent}

/* ============================================================
   V17 — hero: constellation canvas + orbit rings
   ============================================================ */
.h-float,.h-part{display:none}
.phone-row select{max-width:118px}
#heroFx{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-c .wrap{position:relative;z-index:2}
.h-rings{position:absolute;left:50%;top:44%;width:min(920px,86vw);aspect-ratio:1;transform:translate(-50%,-50%);z-index:0;pointer-events:none}
.h-ring{position:absolute;border-radius:50%;border:1px dashed rgba(150,162,255,.17);animation:spinSlow 70s linear infinite}
.h-ring.r1{inset:0}
.h-ring.r2{inset:11%;animation-duration:50s;animation-direction:reverse;border-color:rgba(182,152,232,.15)}
.h-ring.r3{inset:24%;animation-duration:36s;border-color:rgba(150,162,255,.10)}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.h-ring .nd{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px 3px rgba(140,150,255,.55)}
.h-ring .n1{top:-6px;left:50%;margin-left:-5px}
.h-ring .n2{bottom:-6px;left:18%;}
.h-ring .n3{top:30%;right:-6px}
@media(max-width:760px){.h-rings{display:none}}

/* ============================================================
   V18 — Apps Platform Features (interactive phone showcase)
   ============================================================ */
.appfeat{display:grid;grid-template-columns:1fr auto 1.15fr;gap:clamp(28px,4vw,56px);align-items:center}
.af-pills{display:flex;flex-direction:column;gap:10px}
.af-pill{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--panel-brd);color:var(--muted);font-weight:600;font-size:.88rem;text-align:left;transition:var(--t);cursor:pointer}
.af-pill:hover{border-color:var(--panel-brd-2);color:#fff;transform:translateX(4px)}
.af-pill.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(90,110,200,.35)}
.af-pill .pd{width:7px;height:7px;border-radius:50%;background:var(--blue-br);flex:0 0 auto;transition:var(--t)}
.af-pill.on .pd{background:#fff}
.af-phone{position:relative;width:clamp(240px,24vw,330px);justify-self:center}
.af-phone::before{content:"";position:absolute;inset:-12%;background:radial-gradient(50% 50% at 50% 50%,rgba(118,90,200,.35),transparent 70%);z-index:0;filter:blur(20px);animation:glowBreathe 7s ease-in-out infinite}
.af-phone img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s var(--ease),transform .6s var(--ease);grid-area:1/1}
.af-phone{display:grid}
.af-phone img.show{opacity:1;transform:none}
.af-detail{background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r-xl);padding:clamp(26px,3.4vw,40px);min-height:420px;display:flex;flex-direction:column}
.af-detail .af-sub{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-br);margin-bottom:12px}
.af-detail h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:12px}
.af-detail .af-desc{color:var(--muted);font-size:.99rem;margin-bottom:22px}
.af-list{display:flex;flex-direction:column;gap:15px}
.af-item{display:flex;gap:14px;align-items:flex-start}
.af-item .ic{width:44px;height:44px;border-radius:50%;margin:0;flex:0 0 auto;background:var(--grad);color:#fff;border:0}
.af-item .ic svg{width:20px;height:20px}
.af-item b{display:block;color:#fff;font-size:.94rem;letter-spacing:.02em}
.af-item span{color:var(--muted);font-size:.9rem}
.af-fade{transition:opacity .3s var(--ease)}
@media(max-width:1080px){
  .appfeat{grid-template-columns:1fr;justify-items:center}
  .af-pills{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .af-pill:hover{transform:none}
  .af-detail{width:100%}
}

/* V18.1 — all 13 features in one clickable list */
.af-pills{gap:8px}
.af-pill{padding:10px 16px;font-size:.85rem}
@media(min-height:0px){.appfeat{align-items:start}.af-phone{align-self:center}}

/* ============================================================
   V19 — Apps Platform Features, modern rebuild
   ============================================================ */
.appfeat-sec{position:relative;overflow:hidden}
.appfeat-sec::before{content:"";position:absolute;left:50%;top:22%;width:min(1100px,92vw);aspect-ratio:2/1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(90,110,210,.16),transparent 70%);filter:blur(10px)}

/* icon dock */
.af-dock{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:clamp(34px,5vw,54px)}
.af-tile{display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--panel-brd);color:var(--muted);font-weight:600;font-size:.85rem;cursor:pointer;transition:var(--t);position:relative;overflow:hidden}
.af-tile .af-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--blue-br);flex:0 0 auto;transition:var(--t)}
.af-tile .af-ic svg{width:17px;height:17px}
.af-tile:hover{color:#fff;border-color:var(--panel-brd-2);transform:translateY(-3px)}
.af-tile:hover .af-ic{background:rgba(255,255,255,.12)}
.af-tile.on{color:#fff;border-color:transparent;background:var(--grad);box-shadow:0 14px 30px rgba(90,110,200,.36)}
.af-tile.on .af-ic{background:rgba(255,255,255,.22);color:#fff}

/* stage */
.af-stage{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--panel-brd);border-radius:var(--r-xl);padding:clamp(28px,4vw,56px);overflow:hidden}
.af-glowline{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(150,160,255,.7),transparent);opacity:.8}
.af-left{min-height:400px;display:flex;flex-direction:column}
.af-count{font-size:.74rem;font-weight:700;letter-spacing:.2em;color:var(--muted-2);margin-bottom:14px}
.af-left .af-sub{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-br);margin-bottom:10px}
.af-left h3{font-size:clamp(1.7rem,3.1vw,2.5rem);letter-spacing:-.025em;margin-bottom:14px}
.af-desc{color:var(--muted);font-size:1.02rem;margin-bottom:26px;max-width:52ch}
.af-list{display:flex;flex-direction:column;gap:14px}
.af-item{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--panel-brd);transition:var(--t)}
.af-item:hover{border-color:var(--panel-brd-2);transform:translateX(4px)}
.af-item .ic{width:40px;height:40px;border-radius:12px;margin:0;flex:0 0 auto;background:var(--grad);color:#fff;border:0}
.af-item .ic svg{width:19px;height:19px}
.af-item b{display:block;color:#fff;font-size:.94rem;margin-bottom:2px}
.af-item span{color:var(--muted);font-size:.89rem}
.af-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:auto;padding-top:28px}

/* device */
.af-right{display:grid;place-items:center}
.af-device{position:relative;width:clamp(230px,23vw,310px);display:grid;place-items:center}
.af-halo{position:absolute;inset:-18% -26%;background:conic-gradient(from 0deg,rgba(90,131,214,.35),rgba(150,104,199,.4),rgba(90,131,214,.35));filter:blur(46px);border-radius:50%;animation:spinSlow 22s linear infinite}
.af-ring{position:absolute;border-radius:50%;border:1px dashed rgba(150,162,255,.22);animation:spinSlow 44s linear infinite}
.af-ring.r1{inset:-14%}
.af-ring.r2{inset:-30%;animation-duration:64s;animation-direction:reverse;border-color:rgba(182,152,232,.16)}
.af-screens{position:relative;z-index:2;display:grid;width:100%}
.af-screens img{grid-area:1/1;width:100%;height:auto;border-radius:14px;filter:drop-shadow(0 34px 60px rgba(0,0,0,.6));opacity:0;transform:translateY(16px) scale(.96);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.af-screens img.show{opacity:1;transform:none}
.af-badge{position:absolute;z-index:3;bottom:-14px;left:50%;transform:translateX(-50%);padding:8px 18px;border-radius:var(--r-pill);background:rgba(24,24,30,.9);backdrop-filter:blur(10px);border:1px solid var(--panel-brd-2);font-size:.76rem;font-weight:600;letter-spacing:.06em;color:#dfe2ee;white-space:nowrap;display:flex;align-items:center;gap:8px}
.af-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#6fd0a8;box-shadow:0 0 0 0 rgba(111,208,168,.6);animation:ctaPulse 2.4s var(--ease) infinite}

@media(max-width:1000px){
  .af-stage{grid-template-columns:1fr}
  .af-right{order:-1}
  .af-left{min-height:0}
  .af-actions{padding-top:22px}
}
@media(max-width:560px){
  .af-tile .af-lbl{display:none}
  .af-tile{padding:10px}
}

/* ============================================================
   V20 — rotating hero word
   ============================================================ */
.wordflip{position:relative;display:inline-grid;vertical-align:bottom;transition:width .55s var(--ease);overflow:hidden;padding-bottom:.06em}
.wordflip .wf-sizer{grid-area:1/1;visibility:hidden;white-space:nowrap;pointer-events:none}
.wf-word{grid-area:1/1;white-space:nowrap;display:inline-block;transition:opacity .38s var(--ease),transform .5s var(--ease)}
.wf-word.out{opacity:0;transform:translateY(-58%) rotateX(35deg)}
.wf-word.in{opacity:0;transform:translateY(58%) rotateX(-35deg)}
.wordflip::after{content:"";position:absolute;right:-6px;top:14%;bottom:20%;width:3px;border-radius:3px;background:var(--grad);opacity:.85;animation:caretBlink 1.15s steps(1) infinite}
@keyframes caretBlink{0%,49%{opacity:.85}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.wordflip::after{display:none}}

/* ============================================================
   V21 — hero heading locked to 3 lines
   ============================================================ */
.hero-c h1{max-width:none}
.hl-line{display:block;white-space:nowrap}
.hero-c h1 .hl-line:nth-child(2){line-height:1.22}
.wordflip{display:inline-grid;vertical-align:baseline;overflow:visible;padding-bottom:.02em;transition:none}
.wordflip .wf-sizer{grid-area:1/1;visibility:hidden;white-space:nowrap;pointer-events:none}
.wf-word{grid-area:1/1;white-space:nowrap;justify-self:center}
.wordflip::after{right:auto;left:calc(50% + var(--half,0px) + 8px)}
@media(max-width:900px){.hero-c h1{font-size:clamp(1.85rem,7.4vw,3rem)}}
@media(max-width:520px){.hero-c h1{font-size:clamp(1.5rem,7.2vw,2.2rem)}}

/* ============================================================
   V21 — scroll performance
   ============================================================ */

/* promote fixed backdrop layers so scrolling never repaints them */
.aura,.rays,.grain,.grid-fx{transform:translateZ(0);backface-visibility:hidden;contain:strict}
.aura{will-change:transform}

/* rays: animate transform (composited) instead of background-position (repaints) */
.rays{background:linear-gradient(122deg,transparent 40%,rgba(150,170,255,.05) 47%,rgba(180,150,230,.07) 51%,transparent 60%);
  background-size:200% 100%;animation:raySlide 34s linear infinite;will-change:transform}
@keyframes raySlide{0%{transform:translate3d(-22%,0,0)}100%{transform:translate3d(22%,0,0)}}

/* skip rendering work for offscreen sections */
.sec,.appfeat-sec,.cta-band,.partners,footer{content-visibility:auto;contain-intrinsic-size:auto 720px}

/* cheaper cards: drop per-card backdrop blur + shine repaint, keep the look */
.feat::after,.card::after,.tst::after{display:none}
.btn-ghost{backdrop-filter:none}
.af-tile,.hero-pill{backdrop-filter:none}

/* smaller/faster blurs on decorative glows */
.hero-orbs span{filter:blur(52px);will-change:transform}
.af-halo{filter:blur(34px)}
.appfeat-sec::before{filter:none}

/* marquees & rings on their own layers */
.mq-track,.h-ring,.af-ring{will-change:transform}
.member img,.tm-card img,.shot img,.ws-img img{will-change:auto}

/* honour data-saver / low-power by calming the heaviest motion */
@media (prefers-reduced-motion: reduce){.rays,.aura{animation:none}}

/* ============================================================
   V21.1 — collapse 4 fixed backdrop layers into 1
   (fixed full-screen layers were forcing a full repaint per frame)
   ============================================================ */
.rays,.grain,.grid-fx{display:none!important}

.aura{
  display:block;z-index:-3;
  contain:strict;transform:translateZ(0);will-change:transform;
  background:
    radial-gradient(46vw 46vw at 12% 8%, rgba(71,107,179,.30), transparent 60%),
    radial-gradient(42vw 42vw at 88% 22%, rgba(118,80,161,.28), transparent 62%),
    radial-gradient(50vw 50vw at 70% 96%, rgba(90,131,214,.18), transparent 64%);
  filter:none;
  animation:auraDrift 40s ease-in-out infinite alternate;
}
/* the faint grid + ray sheen ride along inside the same layer */
.aura::after{
  content:"";position:absolute;inset:-10%;pointer-events:none;
  background:
    linear-gradient(122deg,transparent 42%,rgba(150,170,255,.05) 48%,rgba(180,150,230,.06) 52%,transparent 60%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:200% 100%,64px 64px,64px 64px;
  animation:raySlide 40s linear infinite;
}
@keyframes auraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(2%,-1.5%,0) scale(1.05)}
}

/* lighter decorative blurs */
.hero-orbs span{filter:blur(40px);opacity:.36}

/* V21.2 — freeze decorative motion that is off-screen */
.fx-idle,.fx-idle *{animation-play-state:paused!important}
.aura{animation-duration:56s}
.hero-orbs .o3{display:none}

/* ============================================================
   V22 — remove typing caret + sliding ray sheen
   ============================================================ */
/* no caret line after the rotating word */
.wordflip::after{display:none!important}

/* kill the left-to-right sheen; keep only the static grid + the original aurora glow */
.aura::after{
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;
  animation:none!important;
  inset:0;
}