/* ============================================================
   EDITOHUB — Sand × Cyprus · Glossy Glass Edition
   Deep teal (#004643) + Sand (#F0EDE5), glass + gloss + shine.
   Core reveals/preloader are RAF-independent (see main.js).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* palette referenced from codelithlab.com design system */
  --sand:#FAF7F0;          /* cream */
  --sand-2:#F4F1E7;
  --cyprus:#16544A;        /* mid emerald-navy */
  --cyprus-d:#123A35;
  --cyprus-dd:#0F2E2B;     /* page bg — deep emerald navy */
  --cyprus-l:#1E6E5E;
  --emerald:#0E9E7A;
  --mint:#16B891;
  --mint-2:#62CFAE;
  --sky:#BCE9D9;
  --gold:#C8A24B;
  --gold-2:#E6CC8A;
  --ink:#0E2A27;
  --muted-l:#52635E;       /* muted text on cream */
  --muted-d:#A8C3BA;       /* muted text on navy */
  --glass-d:rgba(18,58,53,.46);
  --glass-l:rgba(250,247,240,.10);
  --line-d:rgba(255,255,255,.12);
  --line-l:rgba(15,46,43,.10);
  --grad:linear-gradient(100deg,var(--mint) 0%,var(--mint-2) 55%,var(--sky) 100%);
  --grad-accent:linear-gradient(125deg,var(--emerald) 0%,var(--mint) 50%,var(--mint-2) 100%);
  --grad-gold:linear-gradient(120deg,#C8A24B 0%,#E6CC8A 100%);
  --grad-deep:linear-gradient(135deg,#123A35 0%,#16544A 55%,#1E6E5E 100%);
  --gloss:linear-gradient(135deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 38%);
  --glow:0 22px 48px -22px color-mix(in srgb, var(--emerald) 60%, transparent);
  --sheen:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  --shadow-card:0 24px 50px -28px rgba(20,40,55,.28),inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.25);
  --r:22px;--r-sm:14px;--r-lg:30px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --maxw:1260px;
  --font:'Inter',sans-serif;--disp:'Space Grotesk',sans-serif;--mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--cyprus-dd);color:var(--sand);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--mint);color:var(--cyprus-dd)}

/* animated sand↔cyprus mesh backdrop */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background:
    radial-gradient(50% 45% at 15% 12%,rgba(30,110,94,.55),transparent 60%),
    radial-gradient(45% 40% at 85% 20%,color-mix(in srgb, var(--mint) 16%, transparent),transparent 60%),
    radial-gradient(60% 50% at 75% 88%,color-mix(in srgb, var(--cyprus-d) 75%, transparent),transparent 65%),
    radial-gradient(40% 40% at 20% 85%,rgba(200,162,75,.06),transparent 60%);
  animation:meshFloat 18s ease-in-out infinite alternate}
@keyframes meshFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-3%,0) scale(1.08)}}

/* film grain */
.grain{position:fixed;inset:-200%;z-index:2;pointer-events:none;opacity:.05;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,3%)}40%{transform:translate(3%,-6%)}60%{transform:translate(-4%,4%)}80%{transform:translate(4%,-2%)}100%{transform:translate(-2%,2%)}}

/* scroll progress */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:950;background:var(--grad);box-shadow:0 0 12px rgba(79,216,196,.8)}

/* ---------- layout ---------- */
.wrap{width:min(92%,var(--maxw));margin-inline:auto;position:relative;z-index:5}
section{position:relative;z-index:5}
.sec-pad{padding:clamp(5rem,11vw,9rem) 0}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.04;letter-spacing:-.02em}
.h-xl{font-size:clamp(2.7rem,7.4vw,5.6rem)}
.h-lg{font-size:clamp(2.1rem,4.7vw,3.7rem)}
.h-md{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.lead{font-size:clamp(1rem,1.4vw,1.18rem);color:var(--muted-d);max-width:58ch}
.center{text-align:center}.center .lead{margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--mint);opacity:.8}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head{max-width:760px;margin-bottom:3.4rem}
.sec-head.center{margin-inline:auto}

/* section themes */
.sec--sand{background:var(--sand);color:var(--ink)}
.sec--sand .lead{color:var(--muted-l)}
.sec--sand .eyebrow{color:var(--cyprus)}
.sec--sand .eyebrow::before{background:var(--cyprus)}
.sec--sand .grad-text{background:linear-gradient(100deg,color-mix(in srgb, var(--emerald) 55%, black) 0%,var(--emerald) 50%,var(--mint-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- glass + gloss primitives ---------- */
.glass{background:var(--glass-d);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--line-d);border-radius:var(--r);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -14px 30px -20px rgba(0,0,0,.4)}
.gloss{position:relative;overflow:hidden}
.gloss::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%);pointer-events:none}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:var(--sheen);transform:skewX(-18deg);transition:none;pointer-events:none}
.shine:hover::after{animation:sweep .9s var(--ease)}
@keyframes sweep{to{left:130%}}

/* ---------- custom cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:38px;height:38px;border:1px solid #fff;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s}
.cursor-dot{width:5px;height:5px;background:#fff;transform:translate(-50%,-50%)}
.cursor.grow{width:74px;height:74px;background:rgba(255,255,255,.15);border-color:transparent}
@media(hover:none){.cursor,.cursor-dot{display:none}}

/* ---------- preloader (logo draw-on + counter) ---------- */
.preloader{position:fixed;inset:0;z-index:10000;background:var(--cyprus-dd);display:grid;place-items:center;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.preloader.done{opacity:0;transform:translateY(-100%);pointer-events:none}
.pre-inner{text-align:center;width:min(80%,420px)}
.pre-logo{font-family:var(--disp);font-weight:700;font-size:2rem;letter-spacing:-.02em;margin-bottom:1.4rem}
.pre-logo svg{width:210px;height:auto;display:block;margin:0 auto 1.2rem}
.pre-logo .dl{fill:none;stroke:var(--mint);stroke-width:2;stroke-dasharray:520;stroke-dashoffset:520;animation:draw 2.2s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pre-bar{height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.pre-fill{height:100%;width:0;background:var(--grad)}
.pre-num{font-family:var(--mono);font-size:.78rem;color:var(--muted-d);margin-top:.8rem;display:flex;justify-content:space-between}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;position:relative;padding:.95rem 1.6rem;border-radius:100px;font-weight:600;font-size:.95rem;overflow:hidden;transition:transform .5s var(--ease),box-shadow .4s,color .35s;will-change:transform}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.btn-primary{background:var(--grad-accent);color:#fff;box-shadow:0 14px 32px -12px color-mix(in srgb, var(--emerald) 70%, transparent),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:hover{box-shadow:0 22px 48px -16px color-mix(in srgb, var(--emerald) 85%, transparent)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:var(--sheen);transform:skewX(-18deg);pointer-events:none}
.btn-primary:hover::after{animation:sweep .9s var(--ease)}
.btn-ghost{border:1px solid var(--line-d);color:var(--sand);background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:var(--sand);color:var(--cyprus-dd);border-color:var(--sand)}
.btn-ghost:hover svg{transform:translate(3px,-3px)}
.sec--sand .btn-ghost{border-color:var(--line-l);color:var(--cyprus);background:rgba(0,70,67,.03)}
.sec--sand .btn-ghost:hover{background:var(--cyprus);color:var(--sand);border-color:var(--cyprus)}
/* ghost buttons inside dark plan cards stay light regardless of section */
.sec--sand .plan .btn-ghost{border-color:var(--line-d);color:var(--sand);background:rgba(255,255,255,.04)}
.sec--sand .plan .btn-ghost:hover{background:var(--sand);color:var(--cyprus-dd);border-color:var(--sand)}
.btn-lg{padding:1.15rem 2rem;font-size:1rem}

/* HEX-style tag (reference card) */
.hextag{display:inline-flex;flex-direction:column;gap:.1rem;padding:.55rem 1rem;border-radius:14px;font-family:var(--mono);line-height:1.2;box-shadow:0 12px 26px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.hextag .k{font-size:.6rem;letter-spacing:.18em;opacity:.7}
.hextag .v{font-size:.9rem;font-weight:500}
.hextag.on-cyprus{background:var(--cyprus);color:var(--sand)}
.hextag.on-sand{background:var(--sand);color:var(--cyprus)}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:900;transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.header.scrolled{background:rgba(0,32,29,.6);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border-color:var(--line-d);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.header.hide{transform:translateY(-105%)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0}
.logo{font-family:var(--disp);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;display:flex;align-items:center;gap:.55rem;z-index:2}
.logo-mark{width:32px;height:32px;border-radius:10px;background:var(--grad);display:grid;place-items:center;font-size:.9rem;color:var(--cyprus-dd);box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.5)}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{position:relative;padding:.5rem .9rem;font-size:.92rem;color:var(--muted-d);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.25rem;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--sand)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.burger{display:none;flex-direction:column;gap:5px;width:26px;z-index:2}
.burger span{height:2px;background:var(--sand);border-radius:2px;transition:.4s var(--ease)}
.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)}
.mobile-menu{position:fixed;inset:0;z-index:850;background:var(--cyprus-d);display:flex;flex-direction:column;justify-content:center;padding:2rem 8%;transform:translateY(-100%);transition:transform .7s var(--ease);pointer-events:none}
.mobile-menu.open{transform:translateY(0);pointer-events:auto}
.mobile-menu a{font-family:var(--disp);font-size:clamp(2rem,9vw,3.4rem);padding:.4rem 0;color:var(--sand);opacity:.9}
.mobile-menu .mm-sub{font-family:var(--mono);font-size:.8rem;color:var(--muted-d);margin-top:2rem}

/* ============================================================
   HERO — split Sand | Cyprus, branding video in glass phone
   ============================================================ */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1fr 1.05fr;overflow:hidden}
.hero-left{background:var(--sand);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:8rem clamp(2rem,5vw,5rem) 4rem}
.hero-left .eyebrow{color:var(--cyprus)}.hero-left .eyebrow::before{background:var(--cyprus)}
.hero-left h1{color:var(--cyprus);margin-bottom:1.5rem}
.hero-left h1 .grad-text{background:linear-gradient(100deg,color-mix(in srgb, var(--emerald) 55%, black) 0%,var(--emerald) 45%,var(--mint-2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .line{display:block;overflow:hidden}
.hero-sub{max-width:40ch;font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--muted-l);margin-bottom:2.2rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero-hex{display:flex;gap:.7rem;margin-top:2.4rem}
.hero-right{position:relative;background:var(--grad-deep);display:flex;align-items:center;justify-content:center;padding:7rem 2rem 4rem;overflow:hidden}
.hero-right::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 60% 30%,color-mix(in srgb, var(--mint) 20%, transparent),transparent 60%)}
.hero-right .float-hex{position:absolute;z-index:4;animation:floaty 6s ease-in-out infinite}
.hero-right .float-hex.a{top:14%;left:8%}
.hero-right .float-hex.b{bottom:16%;right:8%;animation-delay:-3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* premium phone frame (Dynamic-Island, metal bezel, moving sheen) */
.phone{position:relative;z-index:3;width:min(72%,300px);aspect-ratio:9/19.5;border-radius:54px;padding:11px;
  background:linear-gradient(150deg,#40554f 0%,#16251f 46%,#05100d 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 70px 150px -34px rgba(0,0,0,.92),inset 0 2px 2px rgba(255,255,255,.4),inset 0 0 0 2px rgba(0,0,0,.55),0 0 90px -16px color-mix(in srgb, var(--mint) 55%, transparent);
  transform:rotate(-2deg)}
.phone::before{content:"";position:absolute;right:-2px;top:24%;width:3px;height:70px;border-radius:3px;background:linear-gradient(#40554f,#16251f);box-shadow:0 1px 0 rgba(255,255,255,.2)}
.phone::after{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:30%;height:20px;background:#03100d;border-radius:20px;z-index:6;box-shadow:inset 0 0 8px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.6)}
.phone-screen video{width:100%;height:100%;object-fit:cover}
.phone-screen .glare{position:absolute;inset:0;z-index:5;background:linear-gradient(128deg,rgba(255,255,255,.28),transparent 34%);pointer-events:none;mix-blend-mode:screen}
.phone-screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(116deg,transparent 40%,rgba(255,255,255,.38) 48%,rgba(255,255,255,.08) 53%,transparent 62%);transform:translateX(-58%);animation:vsheen 5.5s ease-in-out infinite}
@keyframes vsheen{0%,100%{transform:translateX(-58%)}50%{transform:translateX(58%)}}
.phone .live{position:absolute;top:26px;right:18px;z-index:5;display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.45);padding:.25rem .5rem;border-radius:20px;backdrop-filter:blur(4px)}
.phone .live .d{width:6px;height:6px;border-radius:50%;background:#ff4d6a;box-shadow:0 0 8px #ff4d6a;animation:pulse 1.4s infinite}
.play-fab{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;color:#fff;background:var(--grad-accent);padding:.55rem 1rem;border-radius:100px;box-shadow:0 12px 26px -8px color-mix(in srgb, var(--emerald) 80%, transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.play-fab svg{width:13px;height:13px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.hero-scroll{position:absolute;bottom:1.6rem;left:calc(25% );transform:translateX(-50%);z-index:6;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--muted-l);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero-scroll .bar{width:1px;height:38px;background:linear-gradient(var(--cyprus),transparent);position:relative;overflow:hidden}
.hero-scroll .bar::after{content:"";position:absolute;top:-38px;left:0;width:100%;height:38px;background:var(--cyprus);animation:scrolldot 2s infinite var(--ease)}
@keyframes scrolldot{0%{top:-38px}60%,100%{top:38px}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:1.3rem 0;overflow:hidden;background:var(--cyprus-d);position:relative;z-index:5}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:scroll-x 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--disp);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--muted-d);display:flex;align-items:center;gap:3rem;font-weight:500}
.marquee-track span::after{content:"✦";color:var(--mint);font-size:1rem}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- stats (dashboard glass) ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat{padding:2rem 1.4rem;text-align:center;border-radius:var(--r)}
.stat .num{font-family:var(--disp);font-size:clamp(2rem,4vw,3rem);font-weight:600;color:var(--sand)}
.sec--sand .stat .num{color:var(--cyprus)}
.stat .lbl{font-size:.85rem;color:var(--muted-d);margin-top:.4rem}
.sec--sand .stat .lbl{color:var(--muted-l)}

/* ---------- steps / workflow stepper ---------- */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.step{position:relative;padding:2.1rem;border-radius:var(--r);transition:transform .5s var(--ease)}
.step::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(79,216,196,.14),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.step:hover{transform:translateY(-6px)}
.step:hover::before{opacity:1}
.step .idx{font-family:var(--mono);font-size:.8rem;color:var(--mint);margin-bottom:1.2rem}
.step h3{font-size:1.32rem;margin-bottom:.6rem;color:var(--sand)}
.step p{color:var(--muted-d);font-size:.94rem}
.step .ico{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line-d);display:grid;place-items:center;margin-bottom:1.2rem;color:var(--mint)}
.step .ico svg{width:24px;height:24px}

/* ---------- services grid (glossy cards, tilt) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.svc{padding:2.1rem;border-radius:var(--r);position:relative;transition:transform .4s var(--ease);min-height:240px;display:flex;flex-direction:column;transform-style:preserve-3d}
.svc .ico{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line-d);display:grid;place-items:center;color:var(--mint);margin-bottom:1.3rem}
.svc .ico svg{width:26px;height:26px}
.svc h3{font-size:1.28rem;margin-bottom:.5rem;color:var(--sand)}
.svc p{color:var(--muted-d);font-size:.92rem;flex:1}
.svc .more{font-family:var(--mono);font-size:.74rem;color:var(--mint);margin-top:1.1rem;display:inline-flex;gap:.4rem}

/* ---------- split showcase w/ before-after slider ---------- */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.feature-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.7rem}
.feature-list li{display:flex;gap:.9rem;align-items:flex-start;color:var(--muted-d)}
.feature-list li b{color:var(--sand);font-weight:600}
.sec--sand .feature-list li{color:var(--muted-l)}
.sec--sand .feature-list li b{color:var(--ink)}
.feature-list .chk{flex:0 0 22px;height:22px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--cyprus-dd);font-size:.7rem;margin-top:.15rem}

/* Before/After slider */
.ba{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/11;user-select:none;box-shadow:0 40px 100px -40px rgba(0,0,0,.7)}
.ba img,.ba video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .lbl{position:absolute;bottom:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;padding:.35rem .6rem;border-radius:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;z-index:3}
.ba .lbl.l{left:12px}.ba .lbl.r{right:12px;color:var(--mint)}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--mint);z-index:4;box-shadow:0 0 16px rgba(79,216,196,.8);cursor:ew-resize}
.ba .handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--cyprus-dd);box-shadow:0 8px 24px -6px rgba(0,0,0,.6)}
.ba .handle .grip svg{width:20px;height:20px}

/* editing timeline graphic */
.timeline{margin-top:1.6rem;border-radius:var(--r-sm);padding:1rem;background:rgba(0,0,0,.28);border:1px solid var(--line-d);position:relative;overflow:hidden}
.timeline .track{display:flex;gap:4px;height:34px;align-items:stretch}
.timeline .clip{border-radius:5px;background:linear-gradient(180deg,rgba(79,216,196,.5),rgba(10,98,91,.6));border:1px solid rgba(255,255,255,.14)}
.timeline .clip.a{flex:2}.timeline .clip.b{flex:3;background:linear-gradient(180deg,rgba(240,237,229,.35),rgba(240,237,229,.15))}.timeline .clip.c{flex:1.5}.timeline .clip.d{flex:2.5}
.timeline .playhead{position:absolute;top:8px;bottom:8px;left:0;width:2px;background:#ff4d6a;box-shadow:0 0 10px #ff4d6a;animation:play 6s linear infinite}
@keyframes play{0%{left:4%}100%{left:96%}}

/* ---------- comparison ---------- */
.compare-inner{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.compare-col{padding:2.4rem;border-radius:var(--r)}
.compare-col h3{font-size:1.2rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem;color:var(--sand)}
.compare-col .tag{font-family:var(--mono);font-size:.62rem;padding:.25rem .6rem;border-radius:6px;letter-spacing:.1em}
.compare-col.them .tag{background:rgba(255,120,120,.16);color:#ff9d9d}
.compare-col.us .tag{background:rgba(79,216,196,.16);color:var(--mint)}
.compare-col ul{display:flex;flex-direction:column;gap:1rem}
.compare-col li{display:flex;gap:.8rem;color:var(--muted-d);font-size:.94rem}
.compare-col.us li{color:var(--sand)}
.compare-col .mk{flex:0 0 20px;text-align:center;font-weight:700}
.compare-col.them .mk{color:#ff9d9d}.compare-col.us .mk{color:var(--mint)}

/* ---------- reels carousel ---------- */
.reels{display:flex;gap:1.2rem;overflow-x:auto;padding:1rem .2rem 2rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{flex:0 0 auto;width:230px;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;position:relative;scroll-snap-align:center;border:1px solid var(--line-d);box-shadow:0 30px 70px -35px rgba(0,0,0,.7);transition:transform .5s var(--ease)}
.reel:hover{transform:translateY(-8px) scale(1.02)}
.reel video,.reel img{width:100%;height:100%;object-fit:cover}
.reel .cap{position:absolute;inset:auto 0 0 0;padding:1rem .9rem;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:2}
.reel .cap .t{font-weight:600;font-size:.9rem;color:#fff}
.reel .cap .s{font-family:var(--mono);font-size:.62rem;color:var(--mint)}
.reel .badge9{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--mono);font-size:.58rem;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;padding:.2rem .45rem;border-radius:6px}
.reel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(116deg,transparent 42%,rgba(255,255,255,.26) 49%,transparent 58%);transform:translateX(-52%);animation:vsheen 6.5s ease-in-out infinite}
.reels-hint{font-family:var(--mono);font-size:.7rem;color:var(--muted-d);display:flex;gap:.5rem;align-items:center;margin-top:.4rem}

/* audio waveform */
.wave{display:flex;align-items:center;gap:3px;height:34px}
.wave span{width:3px;border-radius:3px;background:var(--mint);animation:wv 1.1s ease-in-out infinite}
@keyframes wv{0%,100%{height:20%}50%{height:100%}}

/* client logo wall */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:var(--r);overflow:hidden}
.logos .lg{background:var(--cyprus-d);padding:1.6rem 1rem;display:grid;place-items:center;font-family:var(--disp);font-weight:600;color:var(--muted-d);filter:grayscale(1);opacity:.6;transition:.4s var(--ease)}
.logos .lg:hover{filter:grayscale(0);opacity:1;color:var(--mint);background:var(--cyprus)}

/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.tcard{padding:2rem;border-radius:var(--r)}
.tcard .stars{color:var(--mint);letter-spacing:.15em;margin-bottom:1rem;font-size:.9rem}
.tcard p{color:var(--muted-d);font-size:.95rem;margin-bottom:1.4rem}
.tcard .who{display:flex;align-items:center;gap:.8rem}
.tcard .av{width:42px;height:42px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:var(--cyprus-dd);font-family:var(--disp);font-weight:600}
.tcard .who .n{font-weight:600;color:var(--sand);font-size:.92rem}
.tcard .who .r{font-size:.78rem;color:var(--muted-d)}

/* ---------- pricing + toggle ---------- */
.price-toggle{display:inline-flex;align-items:center;gap:.9rem;margin:0 auto 2.6rem;font-size:.9rem;color:var(--muted-d)}
.price-toggle .sw{width:56px;height:30px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid var(--line-d);position:relative;transition:.4s}
.price-toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--grad);transition:.4s var(--ease)}
.price-toggle.annual .sw::after{left:29px}
.price-toggle b{color:var(--sand)}
.price-toggle .save{font-family:var(--mono);font-size:.62rem;color:var(--mint);border:1px solid var(--line-d);padding:.2rem .5rem;border-radius:20px}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;align-items:stretch}
.plan{border-radius:var(--r);padding:2.3rem;display:flex;flex-direction:column;position:relative;transition:transform .5s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.pop{box-shadow:0 40px 110px -45px rgba(79,216,196,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.plan.pop::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad-gold);color:var(--cyprus-d);font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;padding:.35rem .8rem;border-radius:100px;font-weight:600;box-shadow:0 10px 22px -8px rgba(200,162,75,.7)}
.plan .pname{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.plan .price{font-family:var(--disp);font-size:2.7rem;font-weight:600;margin:1rem 0 .2rem;display:flex;align-items:flex-end;gap:.3rem;color:var(--sand)}
.plan .price small{font-size:1rem;color:var(--muted-d);font-family:var(--font);font-weight:400;margin-bottom:.5rem}
.plan .pdesc{color:var(--muted-d);font-size:.9rem;margin-bottom:1.5rem;min-height:2.6em}
.plan ul{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.9rem;flex:1}
.plan li{display:flex;gap:.7rem;color:var(--muted-d);font-size:.92rem}
.plan li .chk{color:var(--mint);flex:0 0 auto}
.plan .btn{width:100%;justify-content:center}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--line-d)}
.faq-q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 0;font-family:var(--disp);font-size:clamp(1.05rem,2vw,1.3rem);color:var(--sand)}
.faq-q .sign{flex:0 0 26px;height:26px;border:1px solid var(--line-d);border-radius:50%;display:grid;place-items:center;transition:.4s var(--ease);position:relative}
.faq-q .sign::before,.faq-q .sign::after{content:"";position:absolute;background:var(--mint);border-radius:2px}
.faq-q .sign::before{width:11px;height:2px}
.faq-q .sign::after{width:2px;height:11px;transition:transform .4s var(--ease)}
.faq-item.open .sign{background:var(--grad);border-color:transparent}
.faq-item.open .sign::before,.faq-item.open .sign::after{background:var(--cyprus-dd)}
.faq-item.open .sign::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{color:var(--muted-d);padding-bottom:1.5rem;font-size:.98rem;max-width:70ch}

/* ---------- CTA ---------- */
.cta{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:clamp(3rem,7vw,6rem)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg video{width:100%;height:100%;object-fit:cover;opacity:.2}
.cta-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 0,rgba(79,216,196,.22),rgba(0,32,29,.94))}
.cta-inner{position:relative;z-index:2;text-align:center;max-width:720px;margin-inline:auto}
.cta .flag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin-bottom:1.3rem}
.cta .flag .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:pulse 1.6s infinite}

/* ---------- footer (reference layout, Sand+Cyprus palette) ---------- */
.footer{padding:0 0 2rem;background:var(--cyprus-d);position:relative;z-index:5;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 90% at 12% 0%,color-mix(in srgb,var(--mint) 9%,transparent),transparent 70%),
  radial-gradient(60% 80% at 92% 8%,color-mix(in srgb,var(--emerald) 7%,transparent),transparent 72%);
  pointer-events:none}

/* trust strip across the top */
.foot-trust{border-block:1px solid var(--line-d);background:color-mix(in srgb,var(--cyprus-dd) 55%,transparent);position:relative}
.foot-trust::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--grad-accent);opacity:.55}
.ft-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.6rem;padding:1.05rem 0}
.ft-i{display:inline-flex;align-items:center;gap:.6rem;font:600 .84rem/1.3 var(--font);color:var(--sand);flex:1 1 auto;justify-content:center;position:relative}
.ft-i + .ft-i::before{content:"";position:absolute;left:-.8rem;top:50%;transform:translateY(-50%);width:1px;height:20px;background:var(--line-d)}

/* shared inline icon chip */
.footer .fi{display:inline-grid;place-items:center;width:18px;height:18px;flex:0 0 18px;color:var(--mint)}
.footer .fi svg{width:100%;height:100%;display:block}

.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1.15fr 1.3fr;gap:2.2rem;padding:3.4rem 0 2.8rem;border-bottom:1px solid var(--line-d)}
.footer .logo{margin-bottom:.5rem;display:inline-block}
.fa-tag{font:600 .9rem/1.3 var(--font);color:var(--mint-2);margin-bottom:.9rem}
.footer-about p{color:var(--muted-d);font-size:.9rem;max-width:36ch;line-height:1.65}
.fa-list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem}
.fa-list li{display:flex;align-items:center;gap:.55rem;font:500 .85rem/1.35 var(--font);color:var(--muted-d)}
.footer .fi.ok{color:var(--emerald)}

/* column heads keep the reference's short accent underline */
.footer h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin:0 0 1.15rem;padding-bottom:.55rem;position:relative}
.footer h5::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;background:var(--grad-accent)}
.footer-contact h5 + p{margin-top:0}

.footer-col a{display:flex;align-items:center;gap:.6rem;color:var(--muted-d);font-size:.9rem;padding:.36rem 0;transition:color .3s var(--ease),transform .3s var(--ease)}
.footer-col a:hover{color:var(--sand);transform:translateX(4px)}
.footer-col a:hover .fi{color:var(--mint-2)}
.footer-col .fc{display:inline-grid;place-items:center;width:13px;height:13px;flex:0 0 13px;color:var(--mint);opacity:.8}
.footer-col .fc svg{width:100%;height:100%}

.footer-contact p{color:var(--muted-d);font-size:.88rem;margin:0 0 .8rem;display:flex;gap:.6rem;align-items:flex-start;line-height:1.6}
.footer-contact p .fi{margin-top:2px}
.footer-contact a{color:var(--muted-d);transition:color .3s}
.footer-contact a:hover{color:var(--sand)}
.fc-div{height:1px;background:var(--line-d);margin:1.15rem 0 1.1rem}
.fc-gst{font:600 .82rem/1.4 var(--font);color:var(--muted-d);letter-spacing:.02em}
.fc-gst b{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-right:.5rem}

.socials{display:flex;gap:.7rem;margin-top:1.4rem}
.socials a{width:40px;height:40px;border:1px solid var(--line-d);border-radius:11px;display:grid;place-items:center;color:var(--muted-d);transition:.3s var(--ease)}
.socials a:hover{background:var(--grad);color:var(--cyprus-dd);border-color:transparent;transform:translateY(-3px)}
.socials a svg{width:17px;height:17px}

/* CTA band */
.foot-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:2.6rem 0 0;padding:1.6rem 1.9rem;border:1px solid var(--line-d);border-radius:var(--r);
  background:linear-gradient(120deg,color-mix(in srgb,var(--cyprus-l) 34%,transparent),color-mix(in srgb,var(--cyprus-dd) 60%,transparent));position:relative;overflow:hidden}
.foot-cta::after{content:"";position:absolute;right:-60px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 45% 45%,color-mix(in srgb,var(--mint) 16%,transparent),transparent 68%);pointer-events:none}
.fcta-ic{width:52px;height:52px;flex:0 0 52px;border-radius:16px;display:grid;place-items:center;color:var(--cyprus-dd);background:var(--grad-accent);box-shadow:var(--glow)}
.fcta-ic svg{width:25px;height:25px}
.fcta-t{flex:1 1 260px}
.fcta-t h4{font-family:var(--disp);font-size:1.24rem;color:var(--sand);margin:0 0 .3rem}
.fcta-t p{color:var(--muted-d);font-size:.9rem;margin:0}
.fcta-b{display:inline-flex;align-items:center;gap:.6rem;font:700 .92rem/1 var(--font);color:var(--cyprus-dd);background:var(--grad-accent);
  border-radius:999px;padding:.85rem 1.5rem;transition:.3s var(--ease);box-shadow:var(--glow);flex:0 0 auto}
.fcta-b:hover{transform:translateY(-2px)}
.fcta-b .fi{color:currentColor;width:16px;height:16px;flex-basis:16px}

/* bottom strip */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1.2rem 2rem;padding-top:1.9rem;margin-top:2.2rem;border-top:1px solid var(--line-d);flex-wrap:wrap}
.footer-bottom p{color:var(--muted-d);font-size:.85rem;opacity:.75;margin:0}
.fb-tag{color:var(--mint-2)!important;opacity:1!important;font-weight:600;margin-top:.25rem!important}
.fb-stats{display:flex;gap:1.6rem;flex-wrap:wrap}
.fb-s{display:inline-flex;align-items:center;gap:.55rem;position:relative}
.fb-s + .fb-s::before{content:"";position:absolute;left:-.8rem;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--line-d)}
.fb-s b{font-family:var(--disp);font-size:.98rem;color:var(--sand);line-height:1.1}
.fb-s i{font-style:normal;font-size:.74rem;color:var(--muted-d);display:block}
.fb-s .fi{width:17px;height:17px;flex-basis:17px}
.footer-bottom .fl{display:flex;gap:1.3rem;flex-wrap:wrap}
.footer-bottom a{color:var(--muted-d);font-size:.85rem;transition:color .3s;opacity:.75}
.footer-bottom a:hover{color:var(--sand);opacity:1}
.fb-credit{text-align:center;padding-top:1.5rem;font-size:.8rem;color:var(--muted-d);opacity:.6}
.fb-credit a{color:inherit;font-weight:700;border-bottom:1px solid currentColor}
.fb-credit a:hover{color:var(--sand)}

@media(max-width:1080px){
  .footer-top{grid-template-columns:1.5fr 1fr 1fr;gap:2rem 1.8rem}
  .footer-contact{grid-column:span 3}
}
@media(max-width:720px){
  .footer-top{grid-template-columns:1fr;padding:2.6rem 0 2.2rem}
  .footer-contact{grid-column:auto}
  .ft-row{justify-content:flex-start;gap:.8rem 1.4rem}
  .ft-i{flex:0 0 auto;justify-content:flex-start}
  .ft-i + .ft-i::before{display:none}
  .foot-cta{padding:1.4rem}
  .footer-bottom,.fb-stats{gap:1rem}
  .fb-s + .fb-s::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .footer-col a:hover,.socials a:hover,.fcta-b:hover{transform:none}
}

/* ---------- page hero (inner) ---------- */
.page-hero{padding:12rem 0 4rem;position:relative;overflow:hidden}
.page-hero .crumb{font-family:var(--mono);font-size:.75rem;color:var(--muted-d);margin-bottom:1.2rem;letter-spacing:.05em}
.page-hero .crumb a:hover{color:var(--mint)}
.page-hero h1{margin-bottom:1.2rem}
.page-hero::before{content:"";position:absolute;top:-30%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(79,216,196,.16),transparent 65%);z-index:0}

/* ---------- portfolio grid ---------- */
.port-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.port-item{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-d);aspect-ratio:16/10;cursor:pointer}
.port-item video,.port-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.port-item:hover video,.port-item:hover img{transform:scale(1.06)}
.port-item .meta{position:absolute;inset:auto 0 0 0;padding:1.6rem;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:2}
.port-item .meta .cat{font-family:var(--mono);font-size:.7rem;color:var(--mint);letter-spacing:.1em}
.port-item .meta h3{font-size:1.35rem;margin-top:.3rem;color:#fff}
.port-item .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid var(--line-d);display:grid;place-items:center;opacity:0;transition:.5s var(--ease);z-index:2}
.port-item:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.port-item .play svg{width:22px;height:22px;color:#fff;margin-left:3px}

/* horizontal scroll gallery */
.hscroll{display:flex;gap:1.2rem;overflow-x:auto;padding-bottom:1.4rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll .port-item{flex:0 0 min(80%,460px);scroll-snap-align:center;aspect-ratio:16/10}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.contact-cards{display:flex;flex-direction:column;gap:1rem}
.contact-card{border-radius:var(--r);padding:1.6rem;display:flex;gap:1rem;align-items:flex-start;transition:transform .4s}
.contact-card:hover{transform:translateY(-3px)}
.contact-card .ico{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line-d);display:grid;place-items:center;color:var(--mint);flex:0 0 auto}
.contact-card h4{font-size:1.05rem;margin-bottom:.25rem;color:var(--sand)}
.contact-card p,.contact-card a{color:var(--muted-d);font-size:.92rem}
.contact-card a:hover{color:var(--mint)}
.form{border-radius:var(--r);padding:2.2rem}
.field{margin-bottom:1.2rem}
.field label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);margin-bottom:.5rem}
.field input,.field textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line-d);border-radius:var(--r-sm);padding:.9rem 1rem;color:var(--sand);font-family:inherit;font-size:.95rem;transition:border-color .3s,box-shadow .3s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-d);opacity:.6}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(79,216,196,.16)}
.field textarea{resize:vertical;min-height:130px}
.form .btn{width:100%;justify-content:center}
.form-note{font-size:.82rem;color:var(--muted-d);margin-top:1rem;text-align:center;opacity:.8}
.toast{position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%) translateY(20px);z-index:960;background:var(--cyprus);border:1px solid var(--mint);color:var(--sand);padding:.9rem 1.4rem;border-radius:100px;font-size:.9rem;opacity:0;transition:.4s var(--ease);box-shadow:var(--glow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* founder / values / about */
.founder{border-radius:var(--r);padding:2.4rem;position:relative;overflow:hidden}
.founder .avatar{width:84px;height:84px;border-radius:20px;background:var(--grad);display:grid;place-items:center;font-family:var(--disp);font-size:2rem;color:var(--cyprus-dd);margin-bottom:1.3rem;box-shadow:var(--glow)}
.founder .role{font-family:var(--mono);font-size:.75rem;color:var(--mint);letter-spacing:.1em;margin-bottom:.4rem}
.founder h3{font-size:1.6rem;margin-bottom:.8rem;color:var(--sand)}
.founder .quote{color:var(--muted-d);font-style:italic;border-left:2px solid var(--mint);padding-left:1rem;margin:1.2rem 0}
.founder p{color:var(--muted-d)}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.value{border-radius:var(--r);padding:2rem}
.value .k{font-family:var(--mono);font-size:.75rem;color:var(--mint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8rem}
.value h3{font-size:1.3rem;margin-bottom:.6rem;color:var(--sand)}
.value p{color:var(--muted-d);font-size:.94rem}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:9500;background:rgba(0,20,18,.9);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;pointer-events:none;transition:opacity .4s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox video{max-width:min(92vw,420px);max-height:88vh;border-radius:24px;box-shadow:0 40px 120px -30px #000}
.lightbox .close{position:absolute;top:1.4rem;right:1.6rem;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-d);color:var(--sand);display:grid;place-items:center;background:rgba(255,255,255,.06)}
.lightbox .close svg{width:20px;height:20px}

/* WhatsApp float */
.wa-float{position:fixed;bottom:1.6rem;right:1.6rem;z-index:800;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 40px -8px rgba(37,211,102,.6);transition:transform .4s var(--ease)}
.wa-float:hover{transform:scale(1.1) rotate(6deg)}
.wa-float svg{width:28px;height:28px;color:#fff}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:ripple 2s infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.08s}[data-reveal].d2{transition-delay:.16s}[data-reveal].d3{transition-delay:.24s}[data-reveal].d4{transition-delay:.32s}
.char{display:inline-block;transform:translateY(115%);opacity:0}
.word{display:inline-block;overflow:hidden;padding-bottom:.06em}

/* ============================================================
   Premium cream cards (iOS-style) — sand bg, coloured squircle
   icons, inset shadow + gloss. Auto-dark inside sand sections.
   ============================================================ */
.card-lite{--accent:var(--emerald);--accent2:var(--mint);position:relative;overflow:hidden;
  background:rgba(255,255,255,.92);color:var(--ink);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.55);border-radius:var(--r);
  box-shadow:var(--shadow-card),inset 0 -18px 30px -24px color-mix(in srgb,var(--accent) 24%,transparent);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
/* top-left gloss (codelithlab-style) */
.card-lite::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gloss);opacity:.7;pointer-events:none}
/* mouse-follow colour spotlight */
.card-lite::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%)}
.card-lite:hover::before{opacity:1}
.card-lite>*{position:relative;z-index:2}
.card-lite:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent2) 60%,transparent);
  box-shadow:0 34px 64px -26px color-mix(in srgb,var(--accent) 55%,transparent),0 22px 48px -28px rgba(20,40,55,.3),inset 0 1px 0 rgba(255,255,255,.85)}
.card-lite h3,.card-lite h4,.card-lite .num,.card-lite .who .n{color:var(--ink)}
.card-lite p,.card-lite .lbl,.card-lite li,.card-lite .who .r,.card-lite a{color:var(--muted-l)}
.card-lite .idx,.card-lite .k,.card-lite .role,.card-lite .more{color:var(--accent)}
.card-lite .more:hover,.card-lite a:hover{color:var(--ink)}
.card-lite .quote{color:var(--muted-l);border-left-color:var(--accent)}
.card-lite .stars{color:var(--gold)}
/* colour-gradient squircle icon w/ coloured drop shadow + spring pop */
.card-lite .ico{position:relative;width:60px;height:60px;border-radius:17px;overflow:hidden;
  background:linear-gradient(150deg,var(--accent),var(--accent2));border:none;color:#fff;
  box-shadow:0 14px 26px -10px color-mix(in srgb,var(--accent) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .5s var(--ease-spring)}
.card-lite:hover .ico{transform:rotate(-6deg) scale(1.08)}
.card-lite .ico::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 46%);pointer-events:none}
.card-lite .ico svg{position:relative;z-index:2}
/* per-box colour rotation — codelithlab emerald/gold/navy family */
.card-lite:nth-child(6n+1){--accent:var(--emerald);--accent2:var(--mint)}
.card-lite:nth-child(6n+2){--accent:#C8A24B;--accent2:#E6CC8A}
.card-lite:nth-child(6n+3){--accent:var(--cyprus);--accent2:var(--cyprus-l)}
.card-lite:nth-child(6n+4){--accent:var(--mint);--accent2:var(--mint-2)}
.card-lite:nth-child(6n+5){--accent:#A8842F;--accent2:#DFC078}
.card-lite:nth-child(6n+6){--accent:var(--cyprus-l);--accent2:var(--mint-2)}
/* on cream sections cards stay white — separate with ink-tinted line + softer shadow */
.sec--sand .card-lite{border-color:var(--line-l);
  box-shadow:0 22px 48px -24px rgba(12,42,39,.30),0 8px 20px -12px rgba(12,42,39,.16),inset 0 1px 0 rgba(255,255,255,.9)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-left{padding-top:7rem;order:1}
  .hero-right{order:2;min-height:80vh}
  .hero-scroll{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
  .showcase,.contact-grid{grid-template-columns:1fr}
  .svc-grid,.pricing,.tgrid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .nav-links,.nav-cta .btn{display:none}
  /* burger = visible CHIP (pehle 3 patli lines kisi bhi background par kho jati thi) */
  .burger{display:flex;width:40px;height:40px;border-radius:11px;align-items:center;justify-content:center;border:1px solid rgba(12,42,39,.18);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 12px -5px rgba(12,42,39,.3)}
  .burger span{width:18px;flex:0 0 auto}
  .burger.open{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);box-shadow:none}
  /* menu khula ho to header MENU JAISA solid dark — scroll hote items iske NEECHE se guzrein
     (transparent rakhne par scrolled items logo ke upar chadh jate the) */
  body.no-scroll .header{background:var(--cyprus-d);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.07)}
  body.no-scroll .header .logo{color:var(--sand)}
  /* menu content header+announce ke NEECHE se shuru ho, lambi list scroll ho (chhote phones) */
  .mobile-menu{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--announce-h,0px) + 86px) 8% 2.5rem}
  .steps,.svc-grid,.pricing,.compare-inner,.port-grid,.values,.tgrid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .logos{grid-template-columns:repeat(2,1fr)}
  .page-hero{padding:9rem 0 3rem}
}

/* ============================================================
   v3 LIGHT LUXE layer — codelithlab-grade colour system.
   Cream body, white boxes default, navy reserved for accent
   bands (.sec--deep / marquee / CTA / footer / hero-right).
   ============================================================ */
body{background:var(--sand);color:var(--ink)}
body::before{background:radial-gradient(120% 90% at 50% -10%,transparent 60%,rgba(12,42,39,.10) 100%)}
.grain{opacity:.035}
.mesh{opacity:1;background:
 radial-gradient(700px 460px at 82% -6%,color-mix(in srgb, var(--mint) 16%, transparent),transparent 60%),
 radial-gradient(560px 420px at 6% 10%,rgba(200,162,75,.10),transparent 62%),
 radial-gradient(48% 40% at 18% 92%,color-mix(in srgb, var(--sky) 30%, transparent),transparent 65%),
 radial-gradient(44% 40% at 92% 86%,color-mix(in srgb, var(--mint) 8%, transparent),transparent 60%)}
.lead{color:var(--muted-l)}
.eyebrow{color:var(--emerald)}.eyebrow::before{background:var(--emerald)}
.grad-text{background:linear-gradient(100deg,color-mix(in srgb, var(--emerald) 55%, black) 0%,var(--emerald) 48%,var(--mint-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* header — light frosted */
.header{background:linear-gradient(180deg,rgba(250,247,240,.92),rgba(250,247,240,0))}
.header .nav-links a{color:var(--muted-l)}
.header .nav-links a:hover,.header .nav-links a.active{color:var(--ink)}
.header.scrolled{background:rgba(250,247,240,.85);border-color:var(--line-l);box-shadow:0 12px 34px -22px rgba(12,42,39,.35),inset 0 1px 0 rgba(255,255,255,.8)}
.logo{color:var(--ink)}
.burger span{background:var(--ink)}
.burger.open span{background:var(--sand)}
/* ghost buttons: light default, dark inside dark surfaces */
.btn-ghost{border-color:rgba(12,42,39,.18);color:var(--ink);background:rgba(255,255,255,.5)}
.btn-ghost:hover{background:var(--cyprus-d);color:var(--sand);border-color:var(--cyprus-d)}
.plan .btn-ghost,.cta .btn-ghost,.sec--deep .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--sand);background:rgba(255,255,255,.06)}
.plan .btn-ghost:hover,.cta .btn-ghost:hover,.sec--deep .btn-ghost:hover{background:var(--sand);color:var(--ink);border-color:var(--sand)}
/* white cards on cream — codelithlab line + shadow */
.card-lite{border-color:var(--line-l);box-shadow:0 22px 48px -24px rgba(12,42,39,.28),0 8px 20px -12px rgba(12,42,39,.14),inset 0 1.5px 0 rgba(255,255,255,.95)}
/* dark accent bands */
.sec--deep{background:linear-gradient(180deg,var(--cyprus-dd) 0%,var(--cyprus-d) 100%);color:var(--sand)}
.sec--deep .lead{color:var(--muted-d)}
.sec--deep .eyebrow{color:var(--mint)}.sec--deep .eyebrow::before{background:var(--mint)}
.sec--deep .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* FAQ on light */
.faq-item{border-color:var(--line-l)}
.faq-q{color:var(--ink)}
.faq-q .sign{border-color:rgba(12,42,39,.22)}
.faq-a p{color:var(--muted-l)}
/* logo wall light */
.logos{background:var(--line-l);border-color:var(--line-l)}
.logos .lg{background:#fff;color:var(--muted-l)}
.logos .lg:hover{background:#fff;color:var(--emerald)}
/* timeline + misc on light */
.timeline{background:#fff;border-color:var(--line-l);box-shadow:0 14px 30px -18px rgba(12,42,39,.22)}
.reels-hint{color:var(--muted-l)}
.price-toggle{color:var(--muted-l)}
.price-toggle b{color:var(--ink)}
.price-toggle .sw{background:rgba(12,42,39,.10);border-color:var(--line-l)}
.price-toggle .save{border-color:var(--line-l)}
/* CTA dark card keeps bright text */
.cta{color:var(--sand)}
.cta .lead{color:var(--muted-d)}
.cta .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* form fields on white card */
.field label{color:var(--muted-l)}
.field input,.field textarea{background:#fff;border-color:var(--line-l);color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-l);opacity:.65}
/* socials: light default, dark in footer */
.socials a{border-color:var(--line-l);color:var(--muted-l)}
.socials a:hover{color:#fff}
.footer .socials a{border-color:var(--line-d);color:var(--muted-d)}

/* Footer socials in their OWN brand colours (Aditya's ask).
   Yeh block `.footer .socials a` ke BAAD hona zaroori hai — wo rule bhi 0-2-1 hai, isliye
   pehle rakhne par color/border wahi jeet jaata aur brand rang lagta hi nahi.
   Contact page ke socials jaan-boojh kar chhode hain — wahan badalne ko kaha nahi gaya. */
.footer .socials a[class*="sc-"]{border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.55)}
.footer .socials a.sc-yt{background:#FF0000}
.footer .socials a.sc-ig{background:radial-gradient(circle at 30% 108%,#FDCB5C 0%,#F7833A 25%,#DD2A7B 52%,#9537A6 76%,#515BD4 100%)}
.footer .socials a.sc-li{background:#0A66C2}
.footer .socials a.sc-xx{background:#000}
.footer .socials a.sc-fb{background:#1877F2}
/* hover: apne hi rang me thoda uthta hai — mint wash brand colour ko kha jaata tha */
.footer .socials a[class*="sc-"]:hover{color:#fff;border-color:transparent;transform:translateY(-3px);filter:brightness(1.12);box-shadow:0 14px 26px -12px rgba(0,0,0,.6)}
/* inner page hero */
.page-hero .crumb{color:var(--muted-l)}
.page-hero .crumb a:hover{color:var(--emerald)}
/* hero trust row (fills empty space) */
.hero-trust{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.avstack{display:flex}
.avstack span{width:40px;height:40px;border-radius:50%;border:2.5px solid var(--sand);margin-left:-10px;display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:.8rem;color:#fff}
.avstack span:first-child{margin-left:0}
.avstack span:nth-child(1){background:linear-gradient(150deg,var(--emerald),var(--mint))}
.avstack span:nth-child(2){background:linear-gradient(150deg,#C8A24B,#E6CC8A);color:var(--cyprus-d)}
.avstack span:nth-child(3){background:linear-gradient(150deg,var(--cyprus),var(--cyprus-l))}
.avstack span:nth-child(4){background:#fff;color:var(--emerald);border-color:rgba(12,42,39,.12)}
.hero-trust .t-stars{color:var(--gold);letter-spacing:.12em;font-size:.85rem}
.hero-trust .t-txt{font-size:.85rem;color:var(--muted-l)}
/* tighter hero spacing */
.hero-left{padding-top:7rem}
.hero-left h1{margin-bottom:1.2rem}
.hero-sub{margin-bottom:1.9rem}
.hero-hex{margin-top:1.6rem}
@media(max-width:720px){.hero-left{padding-top:6rem}.hero-right{min-height:72vh}}
/* footer sits on navy — logo text stays cream */
.footer .logo{color:var(--sand)}

/* ============================================================
   WIDGETS layer — chatbot · quote calculator · proof toasts ·
   back-to-top ring · announcement bar
   ============================================================ */
/* announcement bar */
.announce{position:fixed;top:0;left:0;right:0;z-index:960;display:flex;align-items:center;justify-content:center;gap:1rem;
  background:var(--grad-deep);color:var(--sand);font-size:.8rem;padding:.45rem 2.4rem;letter-spacing:.02em;
  box-shadow:0 8px 24px -12px rgba(12,42,39,.5)}
.announce .an-close{position:absolute;right:.9rem;color:var(--muted-d);font-size:.8rem;padding:.2rem .4rem}
.announce .an-close:hover{color:var(--sand)}
body.has-announce .header{top:var(--announce-h,32px)}
@media(max-width:720px){.announce{font-size:.68rem;padding:.4rem 2.2rem}}

/* back-to-top ring */
.backtop{position:fixed;left:1.4rem;bottom:1.4rem;z-index:800;width:52px;height:52px;border-radius:50%;
  background:#fff;color:var(--emerald);box-shadow:0 14px 34px -12px rgba(12,42,39,.45),inset 0 1px 0 rgba(255,255,255,.9);
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(14px);transition:.4s var(--ease)}
.backtop.show{opacity:1;pointer-events:auto;transform:none}
.backtop svg{position:absolute;inset:4px;transform:rotate(-90deg)}
.backtop .bt-track{fill:none;stroke:color-mix(in srgb, var(--emerald) 15%, transparent);stroke-width:3}
.backtop .bt-prog{fill:none;stroke:var(--emerald);stroke-width:3;stroke-linecap:round}
.backtop span{font-size:1.05rem;font-weight:700;position:relative;z-index:2}
.backtop:hover{transform:translateY(-3px)}

/* social-proof toast */
.proof{position:fixed;left:1.4rem;bottom:5.4rem;z-index:810;display:flex;gap:.8rem;align-items:center;max-width:300px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border:1px solid var(--line-l);border-radius:16px;
  padding:.8rem 2rem .8rem .9rem;box-shadow:0 24px 50px -22px rgba(12,42,39,.45),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:.5s var(--ease)}
.proof.show{opacity:1;transform:none;pointer-events:auto}
.proof .p-ico{width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:linear-gradient(150deg,var(--emerald),var(--mint));display:grid;place-items:center;font-size:1rem;box-shadow:0 10px 20px -8px color-mix(in srgb, var(--emerald) 60%, transparent)}
.proof b{font-size:.82rem;color:var(--ink)}
.proof .p-act{font-size:.75rem;color:var(--muted-l)}
.proof .p-close{position:absolute;top:.35rem;right:.5rem;font-size:.65rem;color:var(--muted-l)}
@media(max-width:720px){.proof{display:none}}

/* chat bubble */
.chat-bubble{position:fixed;right:1.6rem;bottom:6.4rem;z-index:900;width:56px;height:56px;border-radius:50%;
  background:var(--grad-deep);color:var(--sand);display:grid;place-items:center;
  box-shadow:0 18px 40px -12px rgba(12,42,39,.6),inset 0 1px 0 rgba(255,255,255,.25);transition:.4s var(--ease)}
.chat-bubble svg{width:26px;height:26px}
.chat-bubble:hover{transform:scale(1.08) rotate(-4deg)}
.chat-bubble.hide{opacity:0;pointer-events:none;transform:scale(.5)}
.chat-bubble .cb-dot{position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;background:var(--mint);border:2px solid #fff;animation:pulse 1.8s infinite}

/* chat panel */
.chat-panel{position:fixed;right:1.4rem;bottom:1.4rem;z-index:950;width:min(92vw,372px);height:min(74vh,560px);
  display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;
  border:1px solid var(--line-l);box-shadow:0 50px 110px -30px rgba(12,42,39,.6),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;transition:.45s var(--ease)}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
.ch-head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;background:var(--grad-deep);color:var(--sand)}
.ch-av{width:42px;height:42px;border-radius:14px;background:var(--grad-accent);display:grid;place-items:center;font-family:var(--disp);font-weight:700;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.ch-name{font-weight:600;font-size:.95rem}
.ch-status{font-size:.7rem;color:var(--muted-d);display:flex;align-items:center;gap:.35rem}
.ch-on{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}
.ch-close{margin-left:auto;color:var(--muted-d);font-size:.85rem;padding:.3rem}
.ch-close:hover{color:var(--sand)}
.ch-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:linear-gradient(180deg,#FAF7F0,#F1EEE4)}
.msg{max-width:84%;padding:.7rem .9rem;border-radius:16px;font-size:.85rem;line-height:1.5;color:var(--ink)}
.msg.bot{background:#fff;border:1px solid var(--line-l);border-bottom-left-radius:4px;box-shadow:0 8px 18px -10px rgba(12,42,39,.25);align-self:flex-start}
.msg.me{background:var(--grad-accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;box-shadow:0 10px 20px -10px color-mix(in srgb, var(--emerald) 60%, transparent)}
.msg a{color:var(--emerald);font-weight:600}
.msg .msg-wa{display:block;margin-top:.55rem;font-size:.76rem;font-weight:600;color:var(--emerald)}
.ty{display:inline-flex;gap:4px;padding:.15rem 0}
.ty i{width:6px;height:6px;border-radius:50%;background:var(--muted-l);animation:tybl 1s infinite}
.ty i:nth-child(2){animation-delay:.15s}.ty i:nth-child(3){animation-delay:.3s}
@keyframes tybl{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ch-chips{display:flex;gap:.4rem;padding:.6rem .9rem;flex-wrap:wrap;background:#F1EEE4;border-top:1px solid var(--line-l)}
.ch-chips button{font-size:.7rem;font-weight:600;color:var(--cyprus);background:#fff;border:1px solid var(--line-l);border-radius:100px;padding:.35rem .7rem;transition:.3s}
.ch-chips button:hover{background:var(--grad-accent);color:#fff;border-color:transparent}
.ch-input{display:flex;gap:.5rem;padding:.7rem .9rem;background:#fff;border-top:1px solid var(--line-l)}
.ch-input input{flex:1;border:1px solid var(--line-l);border-radius:100px;padding:.6rem 1rem;font-size:.85rem;color:var(--ink);background:#FAF7F0}
.ch-input input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px color-mix(in srgb, var(--emerald) 14%, transparent)}
.ch-input button{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--grad-accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 22px -8px color-mix(in srgb, var(--emerald) 60%, transparent)}
.ch-input button svg{width:18px;height:18px}
@media(max-width:720px){.chat-bubble{bottom:6.2rem;right:1.2rem}.chat-panel{right:.9rem;bottom:.9rem}}

/* quote modal */
.quote-modal{position:fixed;inset:0;z-index:9550;background:rgba(12,42,39,.55);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;opacity:0;pointer-events:none;transition:opacity .35s}
.quote-modal.open{opacity:1;pointer-events:auto}
.qm-card{position:relative;width:min(94vw,520px);max-height:92vh;overflow-y:auto;background:#fff;border-radius:26px;padding:1.8rem;
  border:1px solid var(--line-l);box-shadow:0 60px 130px -30px rgba(0,0,0,.55),inset 0 1.5px 0 rgba(255,255,255,.95);
  transform:translateY(18px);transition:.4s var(--ease)}
.quote-modal.open .qm-card{transform:none}
.qm-close{position:absolute;top:1rem;right:1.1rem;width:34px;height:34px;border-radius:50%;background:#F1EEE4;color:var(--muted-l);font-size:.8rem}
.qm-close:hover{background:var(--cyprus);color:#fff}
.qm-head h3{color:var(--ink);font-size:1.5rem;margin-bottom:.4rem}
.qm-row{margin-top:1.1rem}
.qm-row>label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l);margin-bottom:.5rem}
.qm-row>label b{color:var(--emerald)}
.qm-opts{display:flex;gap:.45rem;flex-wrap:wrap}
.qm-opts button{font-size:.8rem;font-weight:600;color:var(--muted-l);background:#F6F3EA;border:1px solid var(--line-l);border-radius:12px;padding:.55rem .85rem;transition:.25s}
.qm-opts button.on{background:var(--grad-accent);color:#fff;border-color:transparent;box-shadow:0 10px 22px -8px color-mix(in srgb, var(--emerald) 55%, transparent)}
#qQty{width:100%;accent-color:var(--emerald);height:26px}
.qm-out{margin-top:1.3rem;text-align:center;background:linear-gradient(158deg,#F4F9F5,#EDF5EF);border:1px solid color-mix(in srgb, var(--emerald) 18%, transparent);border-radius:18px;padding:1rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.qm-lbl{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-l)}
.qm-price{font-family:var(--disp);font-weight:700;font-size:1.9rem;color:var(--cyprus);margin:.15rem 0}
.qm-note{font-size:.7rem;color:var(--muted-l)}
.qm-cta{width:100%;justify-content:center;margin-top:1rem}

/* ============================================================
   v3.2 polish — card glass-shine sweep · wordmark logo ·
   tighter hero text · premium chat icons
   ============================================================ */
/* glass shine sweep over every white box (hover on desktop, auto on touch) */
.card-lite::after{
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.8) 50%,transparent 75%) no-repeat,var(--gloss);
  background-size:46% 100%,100% 100%;
  background-position:-110% 0,0 0;
  opacity:.85;
  transition:background-position 1.1s var(--ease)}
.card-lite:hover::after{background-position:210% 0,0 0}
@media(hover:none){
  .card-lite::after{animation:cardsheen 5.2s ease-in-out infinite}
  @keyframes cardsheen{0%,55%{background-position:-110% 0,0 0}100%{background-position:210% 0,0 0}}
}
/* wordmark-only logo */
.logo{font-weight:700;letter-spacing:-.035em;font-size:1.42rem}
.lg-hub{background:linear-gradient(100deg,var(--emerald),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.footer .lg-hub{background:linear-gradient(100deg,var(--mint),var(--mint-2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* tighter hero text block */
.hero-left .eyebrow{margin-bottom:.8rem}
.h-xl{font-size:clamp(2.8rem,7.6vw,5.9rem);letter-spacing:-.028em;line-height:1.02}
.hero-left h1{margin-bottom:1rem}
.hero-sub{max-width:46ch;margin-bottom:1.6rem;font-size:clamp(1.05rem,1.55vw,1.26rem)}
.hero-cta{gap:.8rem}
.hero-trust{margin-top:1.6rem}
.hero-hex{margin-top:1.3rem}
/* premium chat icons */
.ch-av svg{width:20px;height:20px;margin-left:2px}
.ch-chips button{display:inline-flex;align-items:center;gap:.38rem}
.ch-chips button svg{width:14px;height:14px;flex:0 0 auto}
.msg .msg-wa{display:inline-flex;align-items:center}
.logo{gap:0}

/* v3.3 — premium chat bubble + svg toast/announce icons */
.chat-bubble{background:var(--grad-accent);color:#fff;overflow:visible;
  box-shadow:0 0 0 3px #fff,0 0 0 4.5px rgba(200,162,75,.55),0 20px 44px -12px color-mix(in srgb, var(--emerald) 65%, transparent),inset 0 1.5px 0 rgba(255,255,255,.5);
  animation:cbnudge 6s ease-in-out infinite}
.chat-bubble svg{width:27px;height:27px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.chat-bubble:hover{transform:scale(1.1) rotate(-5deg);animation-play-state:paused}
@keyframes cbnudge{0%,86%,100%{transform:translateY(0)}90%{transform:translateY(-6px)}94%{transform:translateY(0) scale(1.05)}97%{transform:translateY(-2px)}}
.cb-ai{position:absolute;top:-6px;right:-6px;background:var(--grad-gold);color:var(--cyprus-d);
  font-family:var(--mono);font-weight:700;font-size:.55rem;letter-spacing:.06em;line-height:1;
  padding:.24rem .36rem;border-radius:8px;border:2px solid #fff;
  box-shadow:0 6px 14px -4px rgba(200,162,75,.7)}
.announce .an-ic{width:13px;height:13px;color:var(--gold-2);vertical-align:-2px;margin-right:.3rem}
.proof .p-ico svg{width:19px;height:19px;color:#fff}

/* v3.4 — robot-head bot identity: white icon on navy-green */
.chat-bubble{background:var(--grad-deep);color:#fff;
  box-shadow:0 0 0 3px #fff,0 0 0 4.5px rgba(200,162,75,.55),0 20px 44px -12px rgba(12,42,39,.7),inset 0 1.5px 0 rgba(255,255,255,.28)}
.chat-bubble svg{width:28px;height:28px}
.ch-av{background:var(--grad-deep);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px -8px rgba(12,42,39,.7)}
.ch-av svg{width:24px;height:24px;margin:0}

/* ============================================================
   v3.5 — hero depth · serif accent + gold stroke · seam overlap
   · rounded navy panels · premium play btn · dot-grid texture
   ============================================================ */
/* 1) hero-left: depth — mesh-tinted washes + corner dot-grid */
.hero-left{position:relative;background:
  radial-gradient(46% 38% at 88% 12%,rgba(200,162,75,.13),transparent 62%),
  radial-gradient(52% 44% at 6% 88%,color-mix(in srgb, var(--emerald) 10%, transparent),transparent 62%),
  linear-gradient(158deg,#FBF8F1 0%,#F3EFE3 100%)}
.hero-left::before{content:"";position:absolute;top:9%;right:5%;width:230px;height:230px;pointer-events:none;opacity:.55;
  background:radial-gradient(color-mix(in srgb, var(--cyprus-dd) 28%, transparent) 1.2px,transparent 1.2px) 0 0/15px 15px;
  -webkit-mask:radial-gradient(closest-side,#000,transparent 78%);mask:radial-gradient(closest-side,#000,transparent 78%)}
.hero-left::after{content:"";position:absolute;bottom:6%;left:3%;width:170px;height:170px;pointer-events:none;opacity:.4;
  background:radial-gradient(color-mix(in srgb, var(--cyprus-dd) 25%, transparent) 1.2px,transparent 1.2px) 0 0/15px 15px;
  -webkit-mask:radial-gradient(closest-side,#000,transparent 78%);mask:radial-gradient(closest-side,#000,transparent 78%)}
.hero-left>*{position:relative;z-index:2}
/* 2) italic serif accent + hand-drawn gold stroke */
.ital{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;letter-spacing:0;color:var(--cyprus)}
.stroke-wrap{position:relative;display:inline-block}
.stroke{position:absolute;left:-1%;bottom:-.12em;width:102%;height:.32em;overflow:visible;pointer-events:none}
.stroke path{fill:none;stroke:var(--gold);stroke-width:5.5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:strokeDraw .9s 1.15s var(--ease) forwards}
@keyframes strokeDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.stroke path{animation:none;stroke-dashoffset:0}}
/* 3) navy panel: rounded inset card + phone crosses the seam */
.hero-right{overflow:visible;border-radius:clamp(30px,4vw,54px);margin:clamp(.9rem,1.6vw,1.4rem);
  box-shadow:0 40px 90px -40px rgba(12,42,39,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.hero-right .phone{margin-left:calc(-1 * clamp(34px,6vw,96px));z-index:6}
.phone-ghost{position:absolute;right:9%;top:14%;width:216px;aspect-ratio:9/19.5;border-radius:46px;z-index:2;
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.12);filter:blur(1.5px);transform:rotate(9deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 40px 80px -30px rgba(0,0,0,.5)}
.fcard{position:absolute;z-index:7;display:flex;gap:.65rem;align-items:center;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:.7rem .95rem;
  box-shadow:0 26px 55px -22px rgba(0,0,0,.55),inset 0 1.5px 0 #fff;animation:floaty 6s ease-in-out infinite}
.fc-a{top:13%;right:6%}
.fc-b{bottom:11%;left:-3.5%;animation-delay:-3s}
.fcard b{display:block;font-family:var(--disp);font-size:.85rem;color:var(--ink);line-height:1.15}
.fcard div>span{font-size:.66rem;color:var(--muted-l)}
.fc-ic{width:36px;height:36px;flex:0 0 auto;border-radius:11px;background:var(--grad-accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 20px -8px color-mix(in srgb, var(--emerald) 65%, transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.fc-ic svg{width:17px;height:17px}
.spark{width:54px;height:20px}
.spark path{fill:none;stroke:var(--emerald);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 4+6) dark bands = rounded inset panels (curved seams everywhere) */
.sec--deep{border-radius:clamp(28px,4vw,56px);margin-left:clamp(.6rem,1.4vw,1.2rem);margin-right:clamp(.6rem,1.4vw,1.2rem);overflow:hidden;
  box-shadow:0 40px 90px -44px rgba(12,42,39,.5)}
/* 5) premium play button */
.btn-play{padding:.5rem 1.4rem .5rem .5rem;border-radius:100px;border:1px solid rgba(12,42,39,.16);color:var(--ink);font-weight:600;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);gap:.7rem}
.ps-ic{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:var(--emerald);border:1.5px solid color-mix(in srgb, var(--emerald) 45%, transparent);background:#fff;transition:.35s var(--ease);box-shadow:0 8px 18px -8px color-mix(in srgb, var(--emerald) 40%, transparent)}
.ps-ic svg{width:15px;height:15px;margin-left:2px}
.btn-play:hover{border-color:color-mix(in srgb, var(--emerald) 40%, transparent);transform:translateY(-2px)}
.btn-play:hover .ps-ic{background:var(--grad-accent);color:#fff;border-color:transparent;transform:scale(1.08)}
/* 7) dot-grid texture on light sections */
.sec--sand{background:
  radial-gradient(color-mix(in srgb, var(--cyprus-dd) 5%, transparent) 1px,transparent 1px) 0 0/26px 26px,
  var(--sand)}
@media(max-width:980px){
  .hero-right{margin:.7rem}
  .hero-right .phone{margin-left:0}
  .fc-b{left:4%}
  .fc-a{right:4%}
}

/* ============================================================
   v3.6 — pro EDITING-STUDIO hero mockup (replaces phone)
   ============================================================ */
.studio{position:relative;z-index:5;width:min(92%,600px);margin-left:calc(-1 * clamp(30px,5vw,84px));
  border-radius:22px;overflow:hidden;transform:rotate(-1.4deg);
  background:linear-gradient(165deg,rgba(16,42,38,.92),rgba(7,24,21,.96));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 70px 140px -40px rgba(0,0,0,.85),inset 0 1.5px 0 rgba(255,255,255,.22),0 0 90px -20px color-mix(in srgb, var(--mint) 40%, transparent)}
/* title bar */
.st-bar{display:flex;align-items:center;gap:.7rem;padding:.65rem .95rem;background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.09)}
.st-dots{display:flex;gap:5px}
.st-dots i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
.st-dots i:nth-child(1){background:#ff5f57}.st-dots i:nth-child(2){background:#febc2e}.st-dots i:nth-child(3){background:#28c840}
.st-title{font-family:var(--mono);font-size:.62rem;color:var(--muted-d);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-badge{margin-left:auto;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--cyprus-d);background:var(--grad-gold);padding:.22rem .5rem;border-radius:7px;font-weight:700;box-shadow:0 6px 14px -6px rgba(200,162,75,.7)}
/* body: tools | canvas | props */
.st-body{display:flex;align-items:stretch;gap:0;min-height:340px}
.st-tools{display:flex;flex-direction:column;gap:.45rem;padding:.8rem .55rem;border-right:1px solid rgba(255,255,255,.08)}
.st-tools span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted-d);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.st-tools span svg{width:16px;height:16px}
.st-tools span.on{background:var(--grad-accent);color:#fff;box-shadow:0 8px 18px -6px color-mix(in srgb, var(--emerald) 60%, transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.st-canvas{flex:1;display:grid;place-items:center;padding:1rem .8rem;position:relative;
  background:radial-gradient(60% 70% at 50% 40%,color-mix(in srgb, var(--mint) 8%, transparent),transparent 70%),repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 10px,transparent 10px 20px)}
.st-video{position:relative;height:min(46vh,380px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12),0 0 44px -10px color-mix(in srgb, var(--mint) 35%, transparent)}
.st-video video{width:100%;height:100%;object-fit:cover}
.st-guides{position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px) 0 33.3%/100% 33.4%,linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px) 33.3% 0/33.4% 100%}
.st-video .live{top:10px;right:10px}
.st-video .play-fab{bottom:12px}
/* right props panel */
.st-props{width:118px;display:flex;flex-direction:column;gap:.7rem;justify-content:center;padding:.9rem .7rem;border-left:1px solid rgba(255,255,255,.08)}
.sl label{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;color:var(--muted-d);margin-bottom:.3rem}
.sl .tr{height:4px;border-radius:4px;background:rgba(255,255,255,.12);position:relative}
.sl .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--grad-accent)}
.sl .tr i::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.lut{font-family:var(--mono);font-size:.52rem;letter-spacing:.06em;color:var(--muted-d);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.4rem .5rem;background:rgba(255,255,255,.04)}
.lut b{color:var(--mint)}
/* timeline */
.st-tl{display:flex;align-items:center;gap:.7rem;padding:.7rem .95rem .85rem;border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.22)}
.st-tc{font-family:var(--mono);font-size:.6rem;color:var(--mint)}
.st-track{position:relative;flex:1;height:26px;display:flex;gap:4px;align-items:stretch}
.st-track .clip{border-radius:5px;border:1px solid rgba(255,255,255,.14)}
.st-track .c1{flex:2;background:linear-gradient(180deg,color-mix(in srgb, var(--mint) 55%, transparent),rgba(10,80,70,.6))}
.st-track .c2{flex:3;background:linear-gradient(180deg,rgba(230,204,138,.5),rgba(140,110,45,.5))}
.st-track .c3{flex:1.6;background:linear-gradient(180deg,color-mix(in srgb, var(--sky) 40%, transparent),rgba(90,140,125,.4))}
.st-track .c4{flex:2.4;background:linear-gradient(180deg,color-mix(in srgb, var(--mint) 40%, transparent),rgba(10,80,70,.5))}
.st-ph{position:absolute;top:-4px;bottom:-4px;width:2px;background:#ff5f57;box-shadow:0 0 10px #ff5f57;animation:stplay 9s linear infinite}
.st-ph::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#ff5f57}
@keyframes stplay{0%{left:2%}100%{left:98%}}
/* responsive */
@media(max-width:980px){
  .studio{margin-left:0;width:min(94%,560px);transform:none}
  .st-video{height:min(40vh,330px)}
}
@media(max-width:640px){
  .st-tools,.st-props{display:none}
  .st-video{height:min(38vh,300px)}
}

/* ============================================================
   v4 — CINEMATIC CENTERED HERO (single focal point)
   ============================================================ */
.hero-cine{display:block;min-height:auto;padding:clamp(8.5rem,13vh,11rem) 0 clamp(3.5rem,6vw,5rem);overflow:visible;
  background:
    radial-gradient(46% 34% at 85% 4%,rgba(200,162,75,.12),transparent 62%),
    radial-gradient(50% 40% at 8% 20%,color-mix(in srgb, var(--emerald) 9%, transparent),transparent 62%),
    linear-gradient(180deg,#FBF8F1 0%,#F3EFE3 100%)}
.hero-cine .hero-center{max-width:920px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:5}
.hero-cine .hero-sub{margin-inline:auto;max-width:52ch}
.hero-cine .hero-cta{justify-content:center}
.hero-cine .hero-trust{margin-top:1.5rem}
/* big cinematic media card */
.cine-wrap{position:relative;margin-top:clamp(2.4rem,4.5vw,3.6rem);z-index:5}
.cine{position:relative;border-radius:clamp(20px,3vw,32px);overflow:hidden;aspect-ratio:16/8.4;background:#06201c;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 80px 160px -44px rgba(12,42,39,.6),0 0 120px -34px color-mix(in srgb, var(--mint) 55%, transparent),inset 0 1.5px 0 rgba(255,255,255,.22)}
.cine-bg{position:absolute;left:-8%;top:-8%;width:116%;height:116%;object-fit:cover;filter:blur(44px) saturate(150%) brightness(.7)}
.cine::after{content:"";position:absolute;inset:0;background:radial-gradient(92% 92% at 50% 18%,transparent 42%,rgba(4,18,16,.55) 100%);pointer-events:none;z-index:2}
.cine-top{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.15rem;background:linear-gradient(180deg,rgba(4,18,16,.78),transparent)}
.cine-stage{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:3rem 0 2.9rem}
.stv{position:relative;height:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  box-shadow:0 34px 80px -22px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.18)}
.stv video{width:100%;height:100%;object-fit:cover}
.stv .live{top:10px;right:10px}
.cine-play{position:absolute;z-index:7;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.4);
  box-shadow:0 24px 60px -14px rgba(0,0,0,.65);transition:.35s var(--ease)}
.cine-play svg{width:27px;height:27px;margin-left:4px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.cine-play::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);animation:ripple 2.2s infinite}
.cine-play:hover{transform:translate(-50%,-50%) scale(1.1);background:var(--grad-accent);border-color:transparent}
.cine-tl{position:absolute;bottom:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:.85rem;padding:.75rem 1.15rem .9rem;background:linear-gradient(0deg,rgba(4,18,16,.82),transparent)}
/* floating proof cards pinned to card corners */
.hero-cine .fcard{z-index:9}
.hero-cine .fc-a{top:-24px;right:3%}
.hero-cine .fc-b{top:auto;bottom:-22px;left:3%}
@media(max-width:720px){
  .cine{aspect-ratio:4/4.6;background:linear-gradient(165deg,#0d2a26,#06201c)}
  .cine-bg{display:none}
  .cine-stage{padding:2.6rem 0 2.5rem}
  .hero-cine .fc-a{top:-16px;right:2%}
  .hero-cine .fc-b{bottom:-16px;left:2%}
  .hero-cine .hero-trust{flex-direction:column;gap:.5rem}
  .hero-cine .hero-trust>div{text-align:center!important}
}
.cine-bg{filter:blur(48px) saturate(170%) brightness(.95);opacity:.9}

/* ============================================================
   v4.1 — comparison upgrades · typographic logo marquee ·
   audio mastering demo · chat voice · sound-on hint
   ============================================================ */
/* 1) staggered animated checkmarks */
.compare-inner[data-reveal] li{opacity:0;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.compare-inner[data-reveal] li .mk{display:inline-block;transform:scale(0);transition:transform .5s var(--ease-spring)}
.compare-inner[data-reveal].in li{opacity:1;transform:none}
.compare-inner[data-reveal].in li .mk{transform:scale(1)}
.compare-inner.in li:nth-child(1),.compare-inner.in li:nth-child(1) .mk{transition-delay:.15s}
.compare-inner.in li:nth-child(2),.compare-inner.in li:nth-child(2) .mk{transition-delay:.3s}
.compare-inner.in li:nth-child(3),.compare-inner.in li:nth-child(3) .mk{transition-delay:.45s}
.compare-inner.in li:nth-child(4),.compare-inner.in li:nth-child(4) .mk{transition-delay:.6s}
.compare-inner.in li:nth-child(5),.compare-inner.in li:nth-child(5) .mk{transition-delay:.75s}
/* 2) winner treatment */
.compare-inner{position:relative}
.compare-col.them{opacity:.9;filter:saturate(.8)}
.compare-col.us{position:relative;border:1px solid color-mix(in srgb, var(--mint) 40%, transparent);box-shadow:0 34px 80px -32px color-mix(in srgb, var(--mint) 55%, transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.win-badge{position:absolute;top:-13px;right:20px;z-index:3;background:var(--grad-gold);color:var(--cyprus-d);font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;padding:.34rem .75rem;border-radius:100px;box-shadow:0 12px 26px -8px rgba(200,162,75,.85),inset 0 1px 0 rgba(255,255,255,.5)}
/* 3) gold VS coin */
.vs-coin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--cyprus-d);
  background:var(--grad-gold);border:3px solid #fff;
  box-shadow:0 16px 34px -8px rgba(200,162,75,.85),inset 0 2px 3px rgba(255,255,255,.65),inset 0 -6px 10px -6px rgba(120,90,20,.5)}
@media(max-width:720px){.vs-coin{display:none}}
/* 4) savings chip */
.save-chip{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem;text-align:center;color:var(--muted-d);font-size:.92rem}
.save-chip .sc-num{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 5+6) typographic logo marquee */
.lgm{display:flex;flex-direction:column;gap:1.1rem;padding:1.4rem 0;overflow:hidden}
.lgm-row{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lgm-track{display:flex;align-items:center;gap:4rem;width:max-content;animation:scroll-x 34s linear infinite}
.lgm-track.rev{animation-direction:reverse;animation-duration:40s}
.lgm:hover .lgm-track{animation-play-state:paused}
.br{font-size:clamp(1.15rem,2.1vw,1.55rem);color:var(--muted-l);opacity:.72;white-space:nowrap;transition:.3s;cursor:default}
.br:hover{opacity:1;color:var(--emerald)}
.br-nova{font-family:var(--disp);font-weight:700;letter-spacing:.24em}
.br-pulse{font-family:var(--mono);font-weight:500;letter-spacing:-.02em}
.br-vertex{font-family:'Fraunces',serif;font-style:italic;font-weight:600}
.br-aura{font-weight:300;letter-spacing:.45em}
.br-kinetic{font-weight:800;font-style:italic;transform:skewX(-8deg);display:inline-block;letter-spacing:.02em}
.br-orbit{font-family:var(--disp);font-weight:800;letter-spacing:.12em;-webkit-text-stroke:1.2px currentColor;color:transparent!important}
.br-lumen{font-family:'Fraunces',serif;font-weight:500}
.br-drift{font-family:var(--mono);letter-spacing:.03em}
.br-halo{font-weight:300;letter-spacing:.5em}
.br-northly{font-family:var(--disp);font-weight:700;letter-spacing:.06em}
.br-muse{font-family:'Fraunces',serif;font-style:italic;font-weight:600;letter-spacing:.04em}
.br-pixel{font-family:var(--disp);font-weight:600;letter-spacing:.18em}
/* 7) audio mastering demo card */
.audio-card{display:flex;gap:2.4rem;align-items:center;padding:2rem 2.2rem;margin-top:2.6rem}
.au-left{flex:1;min-width:0}
.au-left h3{margin:.1rem 0 .4rem}
.au-left p{font-size:.92rem}
.au-toggle{display:inline-flex;gap:.4rem;margin-top:1rem;background:#F1EDE1;border:1px solid var(--line-l);border-radius:100px;padding:.3rem}
.au-toggle button{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--muted-l);padding:.5rem 1rem;border-radius:100px;transition:.3s}
.au-toggle button.on{background:var(--grad-accent);color:#fff;box-shadow:0 10px 22px -8px color-mix(in srgb, var(--emerald) 60%, transparent)}
.au-right{display:flex;align-items:center;gap:1.1rem;flex:1.1}
.au-play{width:58px;height:58px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--grad-accent);box-shadow:0 16px 34px -10px color-mix(in srgb, var(--emerald) 70%, transparent),inset 0 1.5px 0 rgba(255,255,255,.45);transition:.3s var(--ease)}
.au-play:hover{transform:scale(1.08)}
.au-play svg{width:20px;height:20px}
.au-play .i-pause{display:none}
.audio-card.playing .au-play .i-play{display:none}
.audio-card.playing .au-play .i-pause{display:block}
.au-wave{flex:1;display:flex;align-items:center;gap:3px;height:46px}
.au-wave i{flex:1;min-width:2px;border-radius:3px;background:linear-gradient(180deg,var(--mint),var(--emerald));opacity:.45;transition:opacity .3s}
.audio-card.playing .au-wave i{opacity:1;animation:wv 1.05s ease-in-out infinite}
.au-time{font-family:var(--mono);font-size:.68rem;color:var(--muted-l);flex:0 0 auto}
@media(max-width:820px){.audio-card{flex-direction:column;align-items:stretch;gap:1.4rem}.au-right{width:100%}}
/* 8) chat voice toggle */
.ch-voice{margin-left:auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted-d);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);transition:.3s}
.ch-voice svg{width:16px;height:16px}
.ch-voice .vw{opacity:.25;transition:.3s}
.ch-voice.on{color:#fff;background:var(--grad-accent);border-color:transparent;box-shadow:0 8px 18px -6px color-mix(in srgb, var(--emerald) 60%, transparent)}
.ch-voice.on .vw{opacity:1}
.ch-close{margin-left:.4rem}
/* 9) sound-on hint on cinematic card */
.snd-hint{position:absolute;right:16px;bottom:58px;z-index:6;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:#fff;
  background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);padding:.38rem .65rem;border-radius:100px;animation:pulse 2.2s infinite}
.snd-hint svg{width:13px;height:13px}

/* ============================================================
   v4.2 — AUDIO LAB console card (premium box + elements)
   ============================================================ */
.audio-card{position:relative;overflow:hidden;border-radius:26px;
  background:
    radial-gradient(80% 130% at 88% -12%,color-mix(in srgb, var(--mint) 16%, transparent),transparent 62%),
    radial-gradient(60% 100% at 4% 110%,rgba(200,162,75,.10),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#12332E 0%,color-mix(in srgb, var(--cyprus-dd) 82%, black) 55%,#071B18 100%);
  border:1px solid rgba(230,204,138,.30);
  box-shadow:0 54px 120px -42px rgba(12,42,39,.7),0 0 90px -34px color-mix(in srgb, var(--mint) 50%, transparent),
    inset 0 1.5px 0 rgba(255,255,255,.18),inset 0 -26px 48px -30px rgba(0,0,0,.65)}
.audio-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gloss);opacity:.10;pointer-events:none}
.audio-card>*{position:relative;z-index:2}
.audio-card .eyebrow{color:var(--gold-2)}
.audio-card .eyebrow::before{background:var(--gold-2)}
.audio-card h3{color:var(--sand)}
.audio-card .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.audio-card p{color:var(--muted-d)}
.au-chip{position:absolute;top:16px;right:18px;z-index:3;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;color:var(--gold-2);
  border:1px solid rgba(230,204,138,.35);padding:.32rem .6rem;border-radius:8px;background:rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
/* segmented toggle — console switch */
.au-toggle{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 3px 8px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06)}
.au-toggle button{color:var(--muted-d);display:inline-flex;align-items:center;gap:.4rem}
.au-toggle button svg{width:12px;height:12px}
.au-toggle button.on{background:var(--grad-accent);color:#fff;box-shadow:0 10px 26px -8px color-mix(in srgb, var(--emerald) 75%, transparent),inset 0 1px 0 rgba(255,255,255,.45)}
/* play — gold-ringed transport button + spinning ring while playing */
.au-play{width:66px;height:66px;background:var(--grad-accent);position:relative;
  box-shadow:0 0 0 3px rgba(255,255,255,.09),0 0 0 4.5px rgba(230,204,138,.45),0 20px 44px -12px color-mix(in srgb, var(--emerald) 85%, transparent),inset 0 2px 2px rgba(255,255,255,.5)}
.au-play::after{content:"";position:absolute;inset:-11px;border-radius:50%;border:1.5px dashed rgba(230,204,138,.55);opacity:0;transition:opacity .4s}
.audio-card.playing .au-play::after{opacity:1;animation:auspin 7s linear infinite}
@keyframes auspin{to{transform:rotate(360deg)}}
/* waveform — lit progress + glow */
.au-wave{height:58px;gap:3.5px}
.au-wave i{opacity:.24;background:linear-gradient(180deg,var(--sky),var(--mint) 55%,var(--emerald));transition:opacity .25s,box-shadow .25s}
.au-wave i.lit{opacity:1;box-shadow:0 0 10px color-mix(in srgb, var(--mint) 55%, transparent)}
.audio-card.playing .au-wave i{animation:none}
.audio-card.playing .au-wave i.lit{animation:wv 1.05s ease-in-out infinite}
/* LED time readout */
.au-time{font-family:var(--mono);color:var(--mint);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.10);
  padding:.45rem .65rem;border-radius:9px;letter-spacing:.1em;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06);text-shadow:0 0 8px color-mix(in srgb, var(--mint) 60%, transparent)}

/* ============================================================
   v4.3 — PRICING: iOS-light frosted glass plans
   ============================================================ */
.plan.card-lite{padding:2.4rem 2rem}
.plan.card-lite .ico{width:52px;height:52px;border-radius:16px;margin-bottom:1.1rem}
.plan.card-lite .pname{color:var(--accent)}
.plan.card-lite .price{color:var(--ink)}
.plan.card-lite .price small{color:var(--muted-l)}
.plan.card-lite .pdesc{color:var(--muted-l)}
.plan.card-lite li{color:var(--muted-l)}
/* iOS list checks — tinted circle chips per plan accent */
.plan.card-lite li .chk{width:19px;height:19px;flex:0 0 19px;border-radius:50%;display:grid;place-items:center;
  font-size:.6rem;font-weight:800;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 13%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent)}
/* soft iOS-tint buttons */
.plan.card-lite .btn-ghost{border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff);font-weight:600;backdrop-filter:none}
.plan.card-lite .btn-ghost:hover{background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
/* POPULAR: scaled, gradient ring border, emerald glow */
.plan.pop.card-lite{transform:scale(1.045);z-index:3;border:1.5px solid transparent;
  background-image:linear-gradient(rgba(255,255,255,.97),rgba(255,255,255,.97)),var(--grad-accent);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 48px 100px -36px color-mix(in srgb, var(--emerald) 50%, transparent),0 24px 52px -28px rgba(20,40,55,.3),inset 0 1.5px 0 rgba(255,255,255,.95)}
.plan.pop.card-lite:hover{transform:scale(1.045) translateY(-7px)}
/* neutralize the old ::before ring (masked) — restore card-lite spotlight */
.plan.pop.card-lite::before{-webkit-mask:none;mask:none;padding:0;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%)}
@media(max-width:720px){.plan.pop.card-lite{transform:none}.plan.pop.card-lite:hover{transform:translateY(-7px)}}

/* ============================================================
   v4.4 — vivid iOS icon colours + MOST POPULAR badge fix
   ============================================================ */
/* vivid per-plan accents (chips/buttons/glow follow automatically) */
.pricing .plan:nth-child(1){--accent:#0A7AFF;--accent2:#64D2FF}   /* iOS blue  */
.pricing .plan:nth-child(2){--accent:#FF7A00;--accent2:#FFD60A}   /* vivid orange-gold */
.pricing .plan:nth-child(3){--accent:#A652F0;--accent2:#DA8FFF}   /* iOS purple */
/* icon tiles: bright-top gradients like real app icons */
.plan.card-lite .ico{border-radius:15px;color:#fff;
  background:linear-gradient(165deg,var(--accent2) 0%,var(--accent) 88%);
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 72%,transparent),
    inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -9px 16px -9px rgba(0,0,0,.3)}
/* MOST POPULAR badge was clipped by card-lite overflow:hidden */
.plan.pop.card-lite{overflow:visible}
.plan.pop.card-lite::before,.plan.pop.card-lite::after{border-radius:inherit}
.plan .badge{z-index:6}
/* pop ring + glow follow the plan's vivid accent */
.plan.pop.card-lite{background-image:linear-gradient(rgba(255,255,255,.97),rgba(255,255,255,.97)),linear-gradient(150deg,var(--accent2),var(--accent));
  box-shadow:0 48px 100px -36px color-mix(in srgb,var(--accent) 46%,transparent),0 24px 52px -28px rgba(20,40,55,.3),inset 0 1.5px 0 rgba(255,255,255,.95)}

/* ============================================================
   v4.5 — premium segmented pricing toggle (iOS glass)
   ============================================================ */
.price-toggle.seg{position:relative;display:inline-flex;gap:0;margin:0 auto 2.6rem;padding:.38rem;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line-l);border-radius:100px;
  box-shadow:0 20px 44px -20px rgba(12,42,39,.3),inset 0 1.5px 0 #fff;cursor:pointer;user-select:none}
.price-toggle.seg .pt-ind{position:absolute;top:.38rem;bottom:.38rem;left:.38rem;width:calc(50% - .38rem);
  border-radius:100px;background:var(--grad-accent);
  box-shadow:0 12px 26px -8px color-mix(in srgb, var(--emerald) 65%, transparent),inset 0 1.5px 0 rgba(255,255,255,.5);
  transition:left .5s var(--ease-spring)}
.price-toggle.seg.annual .pt-ind{left:50%}
.price-toggle.seg .pt-opt{position:relative;z-index:2;flex:1;min-width:158px;justify-content:center;
  display:inline-flex;align-items:center;gap:.5rem;padding:.68rem 1.3rem;border-radius:100px;
  font-weight:600;font-size:.93rem;color:var(--muted-l);transition:color .35s}
.price-toggle.seg:not(.annual) .pt-opt.m{color:#fff}
.price-toggle.seg.annual .pt-opt.a{color:#fff}
.price-toggle.seg .save{background:var(--grad-gold);color:var(--cyprus-d);font-family:var(--mono);
  font-size:.56rem;font-weight:700;letter-spacing:.08em;padding:.24rem .5rem;border-radius:20px;border:none;
  box-shadow:0 8px 16px -6px rgba(200,162,75,.7),inset 0 1px 0 rgba(255,255,255,.55)}
@media(max-width:520px){.price-toggle.seg .pt-opt{min-width:0;padding:.6rem .9rem;font-size:.85rem}}

/* ============================================================
   v4.6 — VS SHOWDOWN: fight-card comparison
   ============================================================ */
.compare-inner{perspective:1500px;gap:2.2rem}
/* center light beam + corner glows */
.compare-inner::before{content:"";position:absolute;left:50%;top:4%;bottom:4%;width:2px;transform:translateX(-50%);z-index:1;
  background:linear-gradient(180deg,transparent,rgba(230,204,138,.55) 30%,rgba(230,204,138,.55) 70%,transparent)}
.compare-inner::after{content:"";position:absolute;inset:-6%;pointer-events:none;z-index:0;
  background:radial-gradient(38% 60% at 10% 50%,rgba(255,90,90,.10),transparent 62%),
             radial-gradient(38% 60% at 90% 50%,color-mix(in srgb, var(--mint) 14%, transparent),transparent 62%)}
.compare-col{position:relative;z-index:2;transition:transform .7s var(--ease),box-shadow .5s}
/* THEM — red corner, facing right */
.compare-col.them{transform:rotateY(9deg);opacity:1;filter:none;
  background:linear-gradient(165deg,#3A2A28 0%,#241816 100%);
  border:1px solid rgba(255,110,110,.22);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -22px 40px -26px rgba(0,0,0,.55)}
.compare-col.them:hover{transform:rotateY(0)}
.compare-col.them .tag{background:rgba(255,90,90,.16);color:#ff9d9d;border:1px solid rgba(255,110,110,.3);font-size:.66rem;padding:.32rem .7rem}
.old-ribbon{position:absolute;top:-11px;left:20px;z-index:3;transform:rotate(-3deg);
  background:linear-gradient(120deg,#E25555,#B03030);color:#fff;font-family:var(--mono);font-size:.56rem;font-weight:700;
  letter-spacing:.14em;padding:.32rem .7rem;border-radius:7px;box-shadow:0 10px 22px -8px rgba(200,60,60,.7)}
/* US — champion corner, facing left */
.compare-col.us{transform:rotateY(-9deg) scale(1.02);
  background:linear-gradient(165deg,#0E4038 0%,#0A2C26 100%);
  border:1px solid rgba(230,204,138,.4);
  box-shadow:0 44px 90px -32px color-mix(in srgb, var(--mint) 50%, transparent),0 0 70px -24px rgba(200,162,75,.35),inset 0 1.5px 0 rgba(255,255,255,.16)}
.compare-col.us:hover{transform:rotateY(0) scale(1.02)}
.compare-col.us .crown{width:20px;height:20px;color:var(--gold-2);vertical-align:-3px;margin-right:.2rem;filter:drop-shadow(0 3px 6px rgba(200,162,75,.6))}
/* round-by-round rows */
.compare-col li{padding-bottom:.85rem;border-bottom:1px dashed rgba(255,255,255,.08);align-items:center}
.compare-col li:last-child{border-bottom:none;padding-bottom:0}
/* mk marks → coloured circle chips */
.compare-col li .mk{width:21px;height:21px;flex:0 0 21px;border-radius:50%;display:grid;place-items:center;font-size:.6rem;font-weight:800;line-height:1}
.compare-col.them li .mk{color:#ff9d9d;background:rgba(255,90,90,.13);box-shadow:inset 0 0 0 1px rgba(255,110,110,.35)}
.compare-col.us li .mk{color:var(--mint);background:color-mix(in srgb, var(--mint) 15%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mint) 40%, transparent)}
.compare-col.them li{color:#C9A9A3}
/* VS coin — bigger, rays + pulse aura */
.vs-coin{width:78px;height:78px;font-size:1.3rem;border-width:4px;z-index:7;
  box-shadow:0 20px 44px -10px rgba(200,162,75,.9),inset 0 3px 4px rgba(255,255,255,.7),inset 0 -8px 14px -8px rgba(120,90,20,.55)}
.vs-coin::before{content:"";position:absolute;inset:-15px;border-radius:50%;border:2px dashed rgba(230,204,138,.55);animation:auspin 16s linear infinite}
.vs-coin::after{content:"";position:absolute;inset:-36px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(200,162,75,.4),transparent 65%);animation:pulse 2.4s infinite}
@media(max-width:720px){
  .compare-col.them,.compare-col.us{transform:none}
  .compare-col.us{transform:scale(1)}
  .compare-inner::before{display:none}
  .old-ribbon{top:-9px}
}

/* ============================================================
   v4.7 — ribbon proper · geometric centered marks · crown shine
   ============================================================ */
/* clean straight ribbon (matches BEST CHOICE badge language) */
.old-ribbon{transform:none;top:-13px;left:20px;border-radius:100px;
  font-size:.58rem;letter-spacing:.12em;padding:.34rem .75rem;
  background:linear-gradient(120deg,#E25555,#B03030);
  box-shadow:0 12px 26px -8px rgba(200,60,60,.75),inset 0 1px 0 rgba(255,255,255,.35)}
/* marks: hide glyph, draw perfect geometric check / cross */
.compare-col li .mk{position:relative;font-size:0;line-height:0}
.compare-col.us li .mk::before{content:"";display:block;width:9px;height:5px;
  border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);
  transform:rotate(-45deg);margin-top:-2px}
.compare-col.them li .mk::before,
.compare-col.them li .mk::after{content:"";position:absolute;top:50%;left:50%;width:10px;height:2px;
  border-radius:2px;background:#ff9d9d}
.compare-col.them li .mk::before{transform:translate(-50%,-50%) rotate(45deg)}
.compare-col.them li .mk::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* crown — golden shine pulse + shimmer */
.compare-col.us .crown{transform-origin:50% 80%;animation:crownShine 2.6s ease-in-out infinite}
@keyframes crownShine{
  0%,100%{filter:drop-shadow(0 0 3px rgba(230,204,138,.45));transform:scale(1)}
  50%{filter:drop-shadow(0 0 9px rgba(230,204,138,.95)) drop-shadow(0 0 18px rgba(200,162,75,.6));transform:scale(1.12) rotate(-3deg)}
}
/* ribbons/badges sit above panel edge — unclip the fight cards */
.compare-col.them,.compare-col.us{overflow:visible}
.compare-col .gloss-keep{border-radius:inherit}
.compare-col.them::before,.compare-col.us::before{border-radius:inherit}

/* ============================================================
   v4.8 — vivid iOS icon colours for services & steps + icon shine
   ============================================================ */
/* services grid — 6 distinct vivid accents */
/* card colours follow the reference footer/services art, in its order */
.svc-grid .svc:nth-child(1){--accent:#E42B8D;--accent2:#FF8AC2}       /* pink   — Reels Editing     */
.svc-grid .svc:nth-child(2){--accent:#E8352B;--accent2:#FF7A6E}       /* red    — YouTube           */
.svc-grid .svc:nth-child(3){--accent:#8E3FE0;--accent2:#D28BFF}       /* purple — Transaction Video */
.svc-grid .svc:nth-child(4){--accent:#1FAE55;--accent2:var(--mint-2)} /* green  — UGC Ads           */
.svc-grid .svc:nth-child(5){--accent:#0A7AFF;--accent2:#6ED4FF}       /* blue   — AI Videos         */
.svc-grid .svc:nth-child(6){--accent:#F07800;--accent2:#FFD60A}       /* orange — Podcast & Teaser  */
/* workflow + "Also Included" steps — 4 vivid accents */
.steps .step:nth-child(1){--accent:#0A7AFF;--accent2:#6ED4FF}
.steps .step:nth-child(2){--accent:#1FAE55;--accent2:var(--mint-2)}
.steps .step:nth-child(3){--accent:#F07800;--accent2:#FFD60A}
.steps .step:nth-child(4){--accent:#8E3FE0;--accent2:#D28BFF}
/* all card icons: bright-top app-icon gradient + colored glow */
.card-lite .ico{color:#fff;border-radius:16px;
  background:linear-gradient(165deg,var(--accent2) 0%,var(--accent) 88%);
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 72%,transparent),
    inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -9px 16px -9px rgba(0,0,0,.3)}
/* glass shine sweep across the icon (hover on desktop, auto on touch) */
.card-lite .ico::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.72) 50%,transparent 66%);
  transform:translateX(-130%) skewX(-12deg);transition:transform .85s var(--ease)}
.card-lite:hover .ico::before{transform:translateX(130%) skewX(-12deg)}
@media(hover:none){
  .card-lite .ico::before{animation:icosheen 4.8s ease-in-out infinite}
}
@keyframes icosheen{0%,58%{transform:translateX(-130%) skewX(-12deg)}100%{transform:translateX(130%) skewX(-12deg)}}

/* v4.9 — About: founder connect row + story prose card */
.connect-row{display:flex;align-items:center;gap:.6rem;margin-top:1.3rem}
.connect-row .cr-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--muted-l);margin-right:.2rem}
.connect-row a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--muted-l);
  border:1px solid var(--line-l);background:#fff;transition:.3s var(--ease);
  box-shadow:0 8px 18px -10px rgba(12,42,39,.25),inset 0 1px 0 #fff}
.connect-row a svg{width:16px;height:16px}
.connect-row a:hover{background:var(--grad-accent);color:#fff;border-color:transparent;transform:translateY(-3px)}
.story-card{padding:clamp(1.8rem,4vw,3rem)}
.story-card p{color:var(--muted-l);font-size:.98rem;line-height:1.75;margin-top:1rem;max-width:78ch}
.story-card p b{color:var(--ink)}

/* v4.10 — founder photo in premium gradient ring frame */
.f-photo{position:relative;width:122px;height:122px;border-radius:28px;padding:4px;margin-bottom:1.3rem;
  background:linear-gradient(140deg,var(--mint) 0%,var(--emerald) 45%,var(--gold-2) 100%);
  box-shadow:0 24px 48px -14px color-mix(in srgb, var(--emerald) 50%, transparent),0 10px 24px -10px rgba(200,162,75,.45),inset 0 1.5px 0 rgba(255,255,255,.65);
  transition:transform .5s var(--ease-spring)}
.f-photo img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:24px;border:3px solid #fff;display:block}
.f-photo::after{content:"";position:absolute;inset:4px;border-radius:24px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.35),transparent 40%)}
.founder:hover .f-photo{transform:rotate(-2.5deg) scale(1.05)}

/* ============================================================
   v5 — CINEMATIC EDIT-SUITE INTRO (preloader)
   viewfinder · REC · timecode · letter cut-reveal + glitch ·
   timeline assemble + playhead. All CSS, RAF-independent.
   ============================================================ */
.preloader{background:radial-gradient(90% 90% at 50% 30%,var(--cyprus-d) 0%,color-mix(in srgb, var(--cyprus-dd) 82%, black) 55%,color-mix(in srgb, var(--cyprus-dd) 60%, black) 100%)}
/* viewfinder corner brackets */
.pre-frame i{position:absolute;width:36px;height:36px;border:2px solid rgba(230,204,138,.75);opacity:0;animation:pfIn .7s var(--ease) .15s forwards}
.pre-frame i:nth-child(1){top:clamp(18px,6vh,48px);left:clamp(18px,6vw,60px);border-right:none;border-bottom:none}
.pre-frame i:nth-child(2){top:clamp(18px,6vh,48px);right:clamp(18px,6vw,60px);border-left:none;border-bottom:none}
.pre-frame i:nth-child(3){bottom:clamp(18px,6vh,48px);left:clamp(18px,6vw,60px);border-right:none;border-top:none}
.pre-frame i:nth-child(4){bottom:clamp(18px,6vh,48px);right:clamp(18px,6vw,60px);border-left:none;border-top:none}
@keyframes pfIn{0%{opacity:0;transform:scale(1.6)}100%{opacity:1;transform:scale(1)}}
/* rule-of-thirds grid flicker */
.pre-grid{position:absolute;inset:clamp(18px,6vh,48px) clamp(18px,6vw,60px);opacity:0;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px) 0 33.3%/100% 33.4%,
             linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px) 33.3% 0/33.4% 100%;
  animation:pgIn 1s .4s forwards}
@keyframes pgIn{0%{opacity:0}30%{opacity:.12}45%{opacity:.03}60%{opacity:.1}100%{opacity:.06}}
/* REC + timecode */
.pre-rec{position:absolute;top:calc(clamp(18px,6vh,48px) + 14px);left:calc(clamp(18px,6vw,60px) + 16px);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:#ff6b5e;display:flex;align-items:center;gap:.45rem;
  opacity:0;animation:fadeIn .5s .6s forwards}
.pre-rec .dot{width:9px;height:9px;border-radius:50%;background:#ff5f57;box-shadow:0 0 12px #ff5f57;animation:pulse 1.1s infinite}
.pre-tc{position:absolute;top:calc(clamp(18px,6vh,48px) + 14px);right:calc(clamp(18px,6vw,60px) + 16px);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--mint);opacity:0;animation:fadeIn .5s .6s forwards}
.pre-tc .bl{animation:pulse 1s steps(2) infinite}
@keyframes fadeIn{to{opacity:1}}
/* wordmark — staggered cut-reveal letters */
.pre-word{font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,9vw,4.6rem);letter-spacing:-.03em;color:var(--sand);
  display:inline-flex;align-items:baseline;position:relative;line-height:1}
.pre-word .pl{display:inline-block;opacity:0;transform:translateY(46%) skewX(-8deg);
  animation:plIn .55s var(--ease) forwards}
.pre-word .pl:nth-child(1){animation-delay:.25s}.pre-word .pl:nth-child(2){animation-delay:.32s}
.pre-word .pl:nth-child(3){animation-delay:.39s}.pre-word .pl:nth-child(4){animation-delay:.46s}
.pre-word .pl:nth-child(5){animation-delay:.53s}.pre-word .pl:nth-child(6){animation-delay:.62s}
.pre-word .pl:nth-child(7){animation-delay:.69s}.pre-word .pl:nth-child(8){animation-delay:.76s}
@keyframes plIn{0%{opacity:0;transform:translateY(46%) skewX(-8deg)}60%{opacity:1;transform:translateY(-6%) skewX(2deg)}100%{opacity:1;transform:translateY(0) skewX(0)}}
.pre-word .hub{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* razor light-sweep across the word */
.pre-word::after{content:"";position:absolute;top:-8%;bottom:-8%;width:3px;left:-6%;border-radius:3px;
  background:linear-gradient(180deg,transparent,var(--gold-2),transparent);
  box-shadow:0 0 18px rgba(230,204,138,.9);opacity:0;animation:razor .8s var(--ease) .95s}
@keyframes razor{0%{opacity:1;left:-6%}100%{opacity:0;left:104%}}
/* editor caret */
.pre-cursor{width:4px;height:.85em;margin-left:.12em;border-radius:2px;background:var(--gold-2);align-self:center;
  animation:pulse 1s steps(2) infinite;box-shadow:0 0 10px rgba(230,204,138,.8)}
/* glitch flickers (RGB split) */
.pre-word{animation:preGlitch 2.8s steps(1) 1.5s 1}
@keyframes preGlitch{
  0%,100%{transform:none;text-shadow:none}
  12%{transform:translateX(-3px);text-shadow:3px 0 rgba(255,60,90,.7),-3px 0 rgba(34,224,200,.7)}
  14%{transform:translateX(2px);text-shadow:-3px 0 rgba(255,60,90,.7),3px 0 rgba(34,224,200,.7)}
  16%{transform:none;text-shadow:none}
  52%{transform:translateX(2px) skewX(3deg);text-shadow:-4px 0 rgba(255,60,90,.6),4px 0 rgba(34,224,200,.6)}
  55%{transform:none;text-shadow:none}
}
.pre-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;color:var(--muted-d);margin-top:.9rem;
  opacity:0;animation:fadeIn .6s 1.05s forwards}
/* timeline assemble */
.pre-tl{margin-top:2.2rem;width:min(78vw,420px);opacity:0;animation:fadeIn .5s .8s forwards}
.pre-track{position:relative;height:14px;border-radius:7px;background:rgba(0,0,0,.45);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06);
  display:flex;gap:3px;padding:3px;overflow:visible}
.pre-track .pc{border-radius:4px;opacity:0;transform:translateY(-16px);animation:pcDrop .45s var(--ease-spring) forwards}
.pre-track .c1{flex:2;background:color-mix(in srgb, var(--mint) 40%, transparent);animation-delay:.55s}
.pre-track .c2{flex:3;background:rgba(230,204,138,.38);animation-delay:.68s}
.pre-track .c3{flex:1.4;background:color-mix(in srgb, var(--sky) 32%, transparent);animation-delay:.8s}
.pre-track .c4{flex:2.4;background:rgba(255,107,94,.32);animation-delay:.92s}
.pre-track .c5{flex:1.8;background:color-mix(in srgb, var(--mint) 35%, transparent);animation-delay:1.04s}
@keyframes pcDrop{0%{opacity:0;transform:translateY(-16px)}100%{opacity:1;transform:translateY(0)}}
/* progress fill lights the timeline; playhead rides its edge */
.pre-fill{position:absolute;left:3px;top:3px;bottom:3px;width:0;border-radius:4px;height:auto;
  background:linear-gradient(90deg,color-mix(in srgb, var(--emerald) 85%, transparent),color-mix(in srgb, var(--mint-2) 95%, transparent));
  box-shadow:0 0 16px color-mix(in srgb, var(--mint) 60%, transparent);transition:width .25s linear}
.pre-fill .ph{position:absolute;right:-1px;top:-9px;bottom:-9px;width:2px;background:#ff5f57;box-shadow:0 0 10px #ff5f57}
.pre-fill .ph::before{content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#ff5f57}
.pre-num{display:flex;justify-content:space-between;margin-top:.8rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.22em;color:var(--muted-d)}
.pre-num b{color:var(--mint);font-weight:600}
@media(prefers-reduced-motion:reduce){
  .pre-word .pl{animation-duration:.01s}
  .pre-word{animation:none}
}

/* ============================================================
   v5.1 — premium testimonials: quote mark · star pops ·
   gradient avatar rings · verified badge · platform chips
   ============================================================ */
.tgrid .tcard:nth-child(1){--accent:#E8352B;--accent2:#FF7A6E}   /* YouTube red   */
.tgrid .tcard:nth-child(2){--accent:#0A7AFF;--accent2:#64D2FF}   /* DTC blue      */
.tgrid .tcard:nth-child(3){--accent:#8E3FE0;--accent2:#D28BFF}   /* Agency purple */
.tcard{position:relative;padding-top:2.4rem}
/* giant serif quote mark */
.tcard .tq{position:absolute;top:.4rem;right:1.2rem;font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:5.4rem;line-height:1;color:color-mix(in srgb,var(--accent) 16%,transparent);
  pointer-events:none;transition:transform .5s var(--ease)}
.tcard:hover .tq{transform:rotate(-8deg) scale(1.12)}
/* stars — gold gradient, pop in one-by-one on reveal */
.tcard .stars{display:flex;gap:.22rem;margin-bottom:1rem}
.tcard .stars i{width:16px;height:16px;display:inline-block;transform:scale(0);transition:transform .5s var(--ease-spring)}
.tcard .stars i::before{content:"★";font-size:16px;line-height:1;display:block;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 4px rgba(200,162,75,.45))}
.tcard.in .stars i{transform:scale(1)}
.tcard.in .stars i:nth-child(1){transition-delay:.15s}.tcard.in .stars i:nth-child(2){transition-delay:.25s}
.tcard.in .stars i:nth-child(3){transition-delay:.35s}.tcard.in .stars i:nth-child(4){transition-delay:.45s}
.tcard.in .stars i:nth-child(5){transition-delay:.55s}
.tcard p{font-size:.98rem;line-height:1.65}
/* footer row */
.tcard .who{display:flex;align-items:center;gap:.85rem}
.tcard .av{width:46px;height:46px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:.92rem;color:#fff;
  background:linear-gradient(160deg,var(--accent2),var(--accent));
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px color-mix(in srgb,var(--accent) 45%,transparent),
    0 12px 24px -8px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1.5px 0 rgba(255,255,255,.55)}
.tcard .who .n{display:flex;align-items:center;gap:.35rem;font-weight:600}
.tcard .vf{width:15px;height:15px;flex:0 0 auto;filter:drop-shadow(0 2px 4px color-mix(in srgb, var(--mint) 50%, transparent))}
.tcard .plat{margin-left:auto;width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.tcard .plat svg{width:18px;height:18px}

/* main-site Sign in (v33) */
.nav-signin svg{margin-right:.2rem}
.mm-signin{color:var(--gold-2)!important;opacity:1!important;font-weight:600}

/* ============================================================================
   SERVICES — nav dropdown, per-service video pages
   ============================================================================ */
/* ---- nav dropdown (desktop) ---- */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop > a{display:inline-flex;align-items:center;gap:5px}
.nd-cv{width:13px;height:13px;opacity:.7;transition:transform .25s var(--ease)}
.nav-drop:hover .nd-cv,.nav-drop.open .nd-cv{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);
  width:min(92vw,430px);padding:10px;border-radius:18px;z-index:80;
  background:var(--sand,#FAF7F0);border:1px solid var(--line-l);
  box-shadow:0 30px 70px -30px rgba(15,46,43,.42),0 2px 8px -4px rgba(15,46,43,.18);
  opacity:0;visibility:hidden;pointer-events:none;transition:.26s var(--ease);
}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)
}
/* hover ke beech ka gap — warna menu par jaate hi band ho jaata */
.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.ndm-head{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-l);padding:8px 12px 10px}
.ndm-i{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:13px;transition:background .2s var(--ease)}
.ndm-i:hover,.ndm-i.on{background:color-mix(in srgb,var(--a,#0E9E7A) 9%,transparent)}
.nsd-ic{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--a2,#16B891),var(--a,#0E9E7A));box-shadow:0 7px 16px -9px var(--a,#0E9E7A)}
.nsd-ic svg{width:18px;height:18px}
.nsd-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.nsd-t b{font:700 13.5px/1.2 var(--font);color:var(--ink)}
.nsd-t i{font:500 11.5px/1.35 var(--font);font-style:normal;color:var(--muted-l);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ndm-all{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;padding:11px;border-top:1px solid var(--line-l);
  font:700 12.5px/1 var(--font);color:var(--emerald)}
.ndm-all svg{width:15px;height:15px}

/* ---- mobile menu: same six, indented ---- */
.mm-svc{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px;padding-left:14px;border-left:2px solid rgba(255,255,255,.16)}
.mm-svc-i{display:flex;align-items:center;gap:10px;padding:9px 4px;font:600 14px/1.2 var(--font)!important;color:#E9F2EE!important}
.mm-svc-i .nsd-ic{width:28px;height:28px;flex-basis:28px;border-radius:9px}
.mm-svc-i .nsd-ic svg{width:15px;height:15px}
.mm-svc-i .nsd-t i{display:none}
.mm-svc-i .nsd-t b{font-size:14px;color:inherit}

/* ---- per-service page ---- */
.svc-back{display:inline-flex;align-items:center;gap:7px;font:700 12.5px/1 var(--font);color:var(--muted-l);margin-bottom:1.8rem;transition:color .25s}
.svc-back:hover{color:var(--emerald)}
.svc-back svg{width:16px;height:16px}
/* ---- gallery header ---- */
.vid-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.vid-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-l);
  border:1px solid var(--line-l);border-radius:999px;padding:7px 14px;white-space:nowrap}

/* ---- the rail ----
   Har card ek hi rectangle (16:9). Video kisi bhi shakl ki ho, poster us frame ke
   ANDAR poora aata hai (contain) — kata hua kabhi nahi. Track scrollable hai:
   mobile par ungli se, desktop par buttons se. */
.vid-tools{display:flex;align-items:center;gap:.9rem}
.vr-btns{display:inline-flex;gap:.45rem}
.vr-btns.off{display:none}
.vr-b{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-l);background:var(--sand,#FAF7F0);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.25s var(--ease)}
.vr-b svg{width:17px;height:17px}
.vr-b:hover:not(:disabled){background:var(--grad-accent);color:#fff;border-color:transparent;transform:translateY(-2px)}
.vr-b:disabled{opacity:.32;cursor:default}
.vr-b:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}

.vid-rail{position:relative;margin-inline:calc(var(--rail-bleed, 0px) * -1)}
.vid-track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vid-track::-webkit-scrollbar{display:none}
.vid-card{margin:0;position:relative;flex:0 0 clamp(280px,32%,440px);scroll-snap-align:start}
.vid-fr{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0B1A17;
  border:1px solid color-mix(in srgb,var(--a,#0E9E7A) 24%,var(--line-l));
  box-shadow:0 28px 56px -32px rgba(20,40,55,.55), 0 0 0 6px color-mix(in srgb,var(--a,#0E9E7A) 5%,transparent);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.vid-card:hover .vid-fr{transform:translateY(-5px);
  box-shadow:0 40px 72px -32px rgba(20,40,55,.6), 0 0 0 7px color-mix(in srgb,var(--a,#0E9E7A) 12%,transparent)}

/* contain = kuch bhi crop nahi hota; reel apne pillar-box me poori dikhti hai */
.vp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .5s var(--ease),filter .35s var(--ease)}
.vid-card:hover .vp-poster{transform:scale(1.03);filter:brightness(.88)}
.vp-none{background:linear-gradient(150deg,#12251f,#0B1A17)}
img.vp-none{opacity:0}

.vp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  color:var(--cyprus-dd,#0F2E2B);background:rgba(255,255,255,.94);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6), 0 0 0 0 color-mix(in srgb,var(--a,#0E9E7A) 55%,transparent);
  transition:transform .3s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow .35s var(--ease),background .3s}
.vp-play svg{width:25px;height:25px;margin-left:3px}
.vid-card:hover .vp-play{transform:translate(-50%,-50%) scale(1.09);
  background:#fff;box-shadow:0 18px 40px -12px rgba(0,0,0,.65), 0 0 0 12px color-mix(in srgb,var(--a,#0E9E7A) 22%,transparent)}
.vp-play:focus-visible{outline:3px solid var(--a,#0E9E7A);outline-offset:4px}

.vid-card figcaption{display:flex;align-items:center;gap:.6rem;margin-top:.9rem}
.vc-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#fff;background:linear-gradient(140deg,var(--a2,#16B891),var(--a,#0E9E7A));
  border-radius:6px;padding:3px 6px;flex:0 0 auto}
.vc-t{font:600 13px/1.35 var(--font);color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- lightbox: Drive/YouTube ka apna control-bar yahan apni jagah par lagta hai,
        card ke chhote frame me ghusa hua nahi ---- */
.vlb{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:clamp(14px,4vw,44px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),visibility .28s}
.vlb.on{opacity:1;visibility:visible;pointer-events:auto}
.vlb-bd{position:absolute;inset:0;background:rgba(9,22,19,.86);backdrop-filter:blur(6px)}
.vlb-box{position:relative;z-index:1;width:min(1180px,100%);transform:scale(.97);transition:transform .3s var(--ease)}
.vlb.on .vlb-box{transform:none}
.vlb-fr{position:relative;aspect-ratio:var(--ar,16/9);max-height:calc(100vh - 150px);margin-inline:auto;
  border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.75)}
.vlb-fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vlb-cap{margin-top:.9rem;text-align:center;font:600 13.5px/1.4 var(--font);color:rgba(255,255,255,.82)}
.vlb-x{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);transition:background .25s}
.vlb-x:hover{background:rgba(255,255,255,.26)}
.vlb-x:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vlb-x svg{width:19px;height:19px}
@media(max-width:720px){.vlb-x{top:-42px}.vlb-fr{max-height:calc(100vh - 130px)}}

.vid-card figcaption{display:flex;align-items:center;gap:.6rem;margin-top:.9rem}
.vc-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#fff;background:linear-gradient(140deg,var(--a2,#16B891),var(--a,#0E9E7A));
  border-radius:6px;padding:3px 6px;flex:0 0 auto}
.vc-t{font:600 13px/1.35 var(--font);color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* section abhi khaali — ek line, koi CTA nahi (page ka kaam videos dikhana hai) */
.vid-soon{padding:2.2rem 1.5rem;border:1px dashed var(--line-l);border-radius:var(--r);text-align:center;
  color:var(--muted-l);font:500 .95rem/1.5 var(--font)}

.svc-other{margin-top:3.4rem;padding-top:2rem;border-top:1px solid var(--line-l)}
.so-h{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-l);margin-bottom:1rem}
.so-row{display:flex;flex-wrap:wrap;gap:.7rem}
.so-i{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 9px;border-radius:999px;border:1px solid var(--line-l);
  font:600 13px/1 var(--font);color:var(--ink);transition:.25s var(--ease)}
.so-i:hover{border-color:transparent;background:color-mix(in srgb,var(--a,#0E9E7A) 10%,transparent);transform:translateY(-2px)}
.so-ic{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--a2,#16B891),var(--a,#0E9E7A))}
.so-ic svg{width:14px;height:14px}

.svc-cta{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;margin-top:3rem;padding:1.8rem 2rem;
  border-radius:var(--r);background:var(--sand-2);border:1px solid var(--line-l)}
.svc-cta h3{font-family:var(--disp);font-size:1.25rem;color:var(--ink);margin-bottom:.3rem}
.svc-cta p{color:var(--muted-l);font-size:.92rem;margin:0}

@media(max-width:720px){
  /* mobile: ek card lagbhag poori chaudai, agla thoda jhaankta hai (swipe ka ishaara).
     Rail screen ke kinare tak jaati hai taaki peeking natural lage. */
  .vid-rail{--rail-bleed:4vw}
  .vid-track{gap:1rem;padding-inline:4vw;scroll-padding-inline:4vw}
  .vid-card{flex-basis:min(84vw,360px)}
  .vid-head{align-items:flex-start}
  .vid-tools{width:100%;justify-content:space-between}
  .vp-play{width:54px;height:54px}.vp-play svg{width:21px;height:21px}
  .svc-cta{padding:1.4rem;flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .nav-drop-menu,.nd-cv,.so-i,.vid-fr,.vp-poster,.vp-play,.vlb,.vlb-box,.vr-b{transition:none}
  .so-i:hover,.vid-card:hover .vid-fr,.vid-card:hover .vp-poster,.vr-b:hover:not(:disabled){transform:none}
  .vid-track{scroll-behavior:auto}
}

/* ============================================================
   LEADERSHIP — founder + co-founder cards (about.html)
   NOTE: .card-lite sets overflow:hidden and colours p/a/li/h4 at
   (0,1,1). The quote badge overhangs the photo, so .ld-card must
   re-open overflow, and every text rule below is prefixed with
   .ld-card / .ld-stats so it OUT-SPECIFIES card-lite instead of
   merely following it in source order.
   ============================================================ */
.sec-head.ld-head{max-width:880px;text-align:center;margin-bottom:2.8rem}
.sec-head.ld-head .eyebrow{justify-content:center}
.ld-head .ld-sub{max-width:680px;margin:1.15rem auto 0;color:var(--muted-l);font-size:clamp(.97rem,1.3vw,1.07rem);line-height:1.72}

.ld-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-bottom:1.6rem}

.ld-card{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);gap:1.5rem;
  padding:1.5rem;border-radius:var(--r-lg);align-items:start;overflow:visible}
.ld-card>*{min-width:0}

/* photo + overhanging quote */
.ld-photo{position:relative}
.ld-photo img{width:100%;height:auto;aspect-ratio:3/5;object-fit:cover;object-position:50% 16%;  /* height:auto zaroori — width/height attributes (CLS hint) presentational height set kar dete
     hain jo aspect-ratio ko hara deta hai; bina iske photo 255x1167 ki sliver ban jaati thi */
  border-radius:18px;display:block;background:var(--sand-2)}
.ld-card .ld-quote{position:absolute;left:0;right:-20px;bottom:5.5%;margin:0;z-index:3;
  /* overhang < grid gap (1.5rem=24px), warna badge Focus Areas box par chadh jaata hai.
     % use mat karo — wo card ki chaudai ke saath badhta hai aur gap se nikal jaata hai. */
  display:flex;gap:.6rem;align-items:flex-start;padding:.85rem 1rem;border-radius:13px;
  background:var(--cyprus-dd);box-shadow:0 20px 38px -20px rgba(15,46,43,.7)}
.ld-card .ld-quote svg{width:15px;height:15px;flex:none;margin-top:.2rem;color:var(--mint);opacity:.75}
.ld-card .ld-quote blockquote{margin:0;color:#fff;font-size:.82rem;line-height:1.48;font-weight:500}

/* text column */
.ld-card .ld-chip{display:inline-block;font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--emerald);background:color-mix(in srgb,var(--mint) 15%,transparent);
  border-radius:999px;padding:.45rem .8rem;margin-bottom:.9rem}
.ld-card .ld-body h3{font-family:var(--disp);font-size:clamp(1.32rem,2.1vw,1.6rem);line-height:1.15;
  margin:0 0 .5rem;color:var(--ink)}
.ld-card .ld-tag{position:relative;color:var(--ink);font-weight:600;font-size:.94rem;
  margin:0 0 1rem;padding-bottom:.95rem}
.ld-card .ld-tag::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;
  border-radius:2px;background:var(--emerald)}
.ld-card .ld-body p{color:var(--muted-l);font-size:.895rem;line-height:1.72;margin:0 0 .8rem}
.ld-card .ld-body p.ld-tag{color:var(--ink);font-size:.94rem;line-height:1.4}

/* focus areas */
.ld-card .ld-focus{display:flex;gap:.85rem;margin:1.15rem 0;padding:1rem;border-radius:14px;
  background:color-mix(in srgb,var(--mint) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--emerald) 13%,transparent)}
.ld-card .ld-fi{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:#fff;color:var(--emerald);box-shadow:0 7px 15px -9px rgba(15,46,43,.4)}
.ld-card .ld-fi svg{width:18px;height:18px}
.ld-card .ld-focus h4{font-family:var(--disp);font-size:.94rem;margin:.2rem 0 .5rem;color:var(--cyprus)}
.ld-card .ld-focus ul{margin:0;padding-left:1.05rem;list-style:disc}
.ld-card .ld-focus li{color:var(--muted-l);font-size:.845rem;line-height:1.95}
.ld-card .ld-focus li::marker{color:var(--emerald)}

/* socials */
.ld-card .ld-social{display:flex;gap:.55rem}
.ld-card .ld-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink);background:#fff;border:1px solid var(--line-l);
  box-shadow:0 7px 15px -11px rgba(15,46,43,.45);transition:.25s var(--ease)}
.ld-card .ld-social a svg{width:16px;height:16px}
.ld-card .ld-social a:hover{color:#fff;background:var(--grad-accent);border-color:transparent;transform:translateY(-2px)}

/* stats strip */
.ld-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-lg);padding:1.7rem .8rem}
.ld-stat{display:flex;align-items:center;gap:.95rem;padding:.3rem 1.25rem;position:relative}
.ld-stat+.ld-stat::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;background:var(--line-l)}
.ld-si{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--emerald)}
.ld-si svg{width:21px;height:21px}
.ld-stats .ld-stat b{display:block;font-family:var(--disp);font-size:clamp(1.32rem,2.3vw,1.78rem);
  font-weight:700;line-height:1.1;color:var(--cyprus)}
.ld-stats .ld-stat>div>span{display:block;margin-top:.22rem;font-size:.815rem;line-height:1.42;color:var(--muted-l)}

.ld-close{text-align:center;margin:2.1rem auto 0;font-size:clamp(1rem,1.55vw,1.14rem);color:var(--muted-l)}
.ld-cta{display:flex;justify-content:center;margin-top:1.5rem}

@media(max-width:1080px){
  .ld-grid{grid-template-columns:1fr}
  .ld-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.5rem}
  .ld-stat:nth-child(3)::before{display:none}
}
@media(max-width:640px){
  .ld-card{grid-template-columns:1fr;gap:1.3rem;padding:1.15rem}
  .ld-photo img{aspect-ratio:4/3;object-position:50% 22%}
  .ld-card .ld-quote{left:.7rem;right:.7rem;bottom:.7rem}
  .ld-stats{grid-template-columns:1fr;padding:.7rem 1rem}
  .ld-stat{padding:1rem .3rem}
  .ld-stat+.ld-stat::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .ld-stat:nth-child(3)::before{display:block}
}

/* ---- Testimonial carousel — horizontal slider of real client reviews (v2) ---- */
.tcaro{position:relative;padding:0 3.4rem}
.tcaro-track{display:flex;gap:1.3rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.6rem .2rem 1rem;scrollbar-width:none;-ms-overflow-style:none}
.tcaro-track::-webkit-scrollbar{display:none}
.tcaro .tcard{flex:0 0 clamp(280px,29vw,322px);scroll-snap-align:start;min-height:300px;display:flex;flex-direction:column;margin:0}
.tcaro .tcard .who{margin-top:auto}
.tcaro .tcard .stars i{transform:scale(1)}
.tcaro-nav{position:absolute;top:calc(50% - 1.5rem);z-index:6;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-l);background:#fff;color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 14px 32px -14px rgba(15,46,43,.4);transition:.2s var(--ease)}
.tcaro-nav:hover{background:var(--grad-accent);color:#fff;border-color:transparent;transform:scale(1.07)}
.tcaro-nav:disabled{opacity:.32;cursor:default;transform:none;background:#fff;color:var(--ink)}
.tcaro-nav.prev{left:-.4rem}.tcaro-nav.next{right:-.4rem}
.tcaro-dots{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap}
.tcaro-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;background:color-mix(in srgb,var(--emerald) 20%,#c8d2cd);transition:.25s var(--ease)}
.tcaro-dots button.on{background:var(--emerald);width:26px;border-radius:5px}
.tcaro--static .tcaro-nav,.tcaro--static .tcaro-dots{display:none}
@media(max-width:640px){.tcaro{padding:0 .2rem}.tcaro-nav{display:none}.tcaro .tcard{flex-basis:84vw}}