/* MeetZ landing - Night Bridge (dark) / Morning Bridge (light), tokens from docs/brand.md */
:root{
  --bg:#07090F;--bg2:#0D1120;--card:#121829;--line:#232B47;--fg:#EEF0FA;--fg2:#A9B1D6;--fg3:#7C84A8;
  --mint:#3DDBB4;--mint-t:#3DDBB4;--coral:#FF7A59;--coral-t:#FF7A59;--violet:#8B7BFF;
  --on-mint:#04211A;--shadow:0 30px 80px -30px rgba(0,0,0,.7);--ease:cubic-bezier(.22,1,.36,1);
  --r:18px;--display:"Fraunces",Georgia,serif;
}
[data-theme=light]{
  --bg:#F5F6FB;--bg2:#ECEEF7;--card:#FFFFFF;--line:#D3D8EA;--fg:#141A2C;--fg2:#464F72;--fg3:#5E6688;
  --mint:#12A883;--mint-t:#0B7A5F;--coral:#E2552F;--coral-t:#B8401F;--violet:#6A58F0;
  --on-mint:#fff;--shadow:0 30px 70px -35px rgba(20,26,44,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 "Be Vietnam Pro","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--mint-t)}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.2rem + 2.6vw,3rem);letter-spacing:-.01em}
h3{font-size:1.08rem}
kbd{font:600 .8em/1 inherit;padding:.25em .5em;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--card)}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.narrow{width:min(780px,100% - 40px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--mint);color:var(--on-mint);padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.grad{background:linear-gradient(100deg,var(--mint) 0%,var(--violet) 55%,var(--coral) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:700;color:var(--violet);margin:0 0 .8em}
.sub{color:var(--fg2);max-width:62ch;font-size:1.05rem}
.note{color:var(--fg3);font-size:.88rem}
.cap{color:var(--fg3);font-size:.86rem;text-align:center;margin-top:16px}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;color:var(--fg);text-decoration:none;letter-spacing:-.035em}
.brand b{background:linear-gradient(135deg,var(--mint),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.links{display:flex;gap:22px;margin-left:12px}
.links a{color:var(--fg2);text-decoration:none;font-size:.93rem;font-weight:500}
.links a:hover{color:var(--fg)}
.tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;color:var(--fg3);font:700 .78rem/1 inherit;padding:7px 10px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--card);color:var(--fg);box-shadow:0 1px 0 var(--line)}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--fg2);cursor:pointer}
.icon-btn:hover{color:var(--fg)}
[data-theme=dark] .i-moon,[data-theme=light] .i-sun{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;text-decoration:none;border-radius:12px;padding:12px 20px;border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .2s,background .2s;white-space:nowrap}
.btn.sm{padding:8px 14px;font-size:.88rem;border-radius:10px}
.btn.lg{padding:15px 24px;font-size:1.02rem}
.btn.block{display:flex;width:100%}
.btn.primary{background:var(--mint);color:var(--on-mint);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--mint) 70%,transparent)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{border-color:var(--line);color:var(--fg);background:color-mix(in srgb,var(--card) 60%,transparent)}
.btn.ghost:hover{border-color:var(--fg3)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.cta.center{justify-content:center}

/* hero */
.hero{position:relative;isolation:isolate;padding:72px 0 56px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at 25% 30%,color-mix(in srgb,var(--mint) 22%,transparent),transparent 70%),radial-gradient(35% 45% at 80% 20%,color-mix(in srgb,var(--violet) 24%,transparent),transparent 70%),radial-gradient(30% 40% at 70% 80%,color-mix(in srgb,var(--coral) 16%,transparent),transparent 70%);pointer-events:none;z-index:-1}
.hero-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.tagline{text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;font-weight:700;color:var(--fg3);margin:0 0 18px}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,1.2rem + 3.4vw,4rem);letter-spacing:-.025em;line-height:1.02}
.lead{font-size:1.14rem;color:var(--fg2);max-width:54ch}
.trust{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;padding:0;margin:30px 0 0;color:var(--fg3);font-size:.9rem}
.trust b{color:var(--fg);font-size:1.15rem;margin-right:4px}
.shot{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--card)}
.hero-shot{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);transition:transform .8s var(--ease)}
.hero-shot:hover{transform:none}
[data-theme=dark] .only-light,[data-theme=light] .only-dark{display:none}

/* demo */
.demo-sec{padding:40px 0 80px}
.demo-sec h2{text-align:center}
.demo-sec .eyebrow{text-align:center}
.demo{display:grid;grid-template-columns:1fr 60px 1fr;gap:12px;align-items:stretch;margin-top:28px}
.lane{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;min-height:220px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.lane::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c)}
.lane.me{--c:var(--mint);--ct:var(--mint-t)}.lane.they{--c:var(--coral);--ct:var(--coral-t)}
.lane-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.lane-h .dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
.lane-h b{font-family:var(--display);font-size:1.2rem}
.pair{font:700 .74rem/1 inherit;padding:6px 9px;border-radius:8px;border:1px solid var(--line);color:var(--fg2)}
.bars{margin-left:auto;display:flex;gap:3px;align-items:flex-end;height:18px}
.bars i{width:4px;height:4px;border-radius:2px;background:var(--c);opacity:.35;transition:height .15s}
.lane.speaking .bars i{opacity:1;animation:eq .9s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.15s}.bars i:nth-child(3){animation-delay:.3s}.bars i:nth-child(4){animation-delay:.1s}.bars i:nth-child(5){animation-delay:.25s}
@keyframes eq{0%,100%{height:4px}50%{height:18px}}
.src{color:var(--fg3);min-height:3.2em;margin:0 0 6px;font-size:.98rem}
.out{font-weight:600;font-size:1.22rem;min-height:3.2em;margin:0;color:var(--fg)}
.out.typing::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--ct);animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hint{margin:auto 0 0;padding-top:14px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ct);font-weight:700}
.bridge{display:grid;place-items:center}.bridge svg{width:40px;height:100%;max-height:160px}

/* sections */
.sec{padding:88px 0}
.sec.alt{background:var(--bg2)}
.flow{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.flow li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:34px;color:var(--fg3);font-weight:700;z-index:1}
.flow .ico{font-size:1.6rem;display:block;height:40px;line-height:40px}
.flow .z{border-color:color-mix(in srgb,var(--violet) 55%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 12%,transparent)}
.flow .z img{margin-bottom:0}
.flow h3{margin-top:12px}
.flow p{color:var(--fg2);margin:0;font-size:.94rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card p{color:var(--fg2);margin:0;font-size:.95rem}
.card h3::before{content:"";display:block;width:28px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--mint),var(--coral));margin-bottom:16px}
.lang-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.langs{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.langs li{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.langs b{display:grid;place-items:center;width:38px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--violet) 18%,transparent);color:var(--violet);font-size:.82rem}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.opt{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.opt.hot{border-color:color-mix(in srgb,var(--mint) 55%,var(--line))}
.opt ul,.ticks{list-style:none;padding:0;margin:14px 0 0}
.opt li,.ticks li{position:relative;padding-left:28px;margin:10px 0;color:var(--fg2)}
.opt li::before,.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--mint) 20%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%233DDBB4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--violet);margin-bottom:14px}
.opt.hot .badge{background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint-t)}

/* mini bar */
.minibar{background:#0E1322;color:#EEF0FA;border:1px solid #2A6E5E;border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);max-width:520px;justify-self:center;width:100%;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.mb-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem}
.mb-top .live{width:10px;height:10px;border-radius:50%;background:#3DDBB4;box-shadow:0 0 0 4px rgba(61,219,180,.2)}
.chip{padding:4px 10px;border-radius:8px;background:#1A2136;font-weight:700;font-size:.78rem}
.chip.m{color:#3DDBB4}.chip.t{color:#FF7A59}
.stop{margin-left:auto;background:#FF5D6C;color:#2a0508;font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:8px}
.mb-src{color:#8C94BA;margin:12px 0 2px;font-size:.92rem}
.mb-src .tag{font:700 .7rem/1 inherit;padding:3px 6px;border-radius:5px;background:#1E2A4A;color:#8FB2FF;margin-right:6px}
.mb-out{font-weight:700;font-size:1.12rem;margin:0}

/* pricing */
.price-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;margin-top:36px;max-width:900px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:32px;position:relative;display:flex;flex-direction:column}
.pcard.main{border-color:color-mix(in srgb,var(--mint) 60%,var(--line));box-shadow:0 0 0 6px color-mix(in srgb,var(--mint) 10%,transparent),var(--shadow)}
.pcard .ticks{flex:1;margin-bottom:22px}
.ribbon{position:absolute;top:22px;right:22px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:6px 11px;border-radius:999px;background:var(--coral);color:#fff}
[data-theme=light] .ribbon{background:var(--coral-t)}
.amount{font-family:var(--display);font-size:3.2rem;font-weight:700;margin:6px 0 0;line-height:1;font-variant-numeric:tabular-nums}
.amount span{font-size:1.4rem;margin-left:4px;color:var(--fg2)}
.per{color:var(--fg2);margin:10px 0 0}

/* download */
.dl{display:flex;gap:32px;align-items:center}
.dl>img{border-radius:22px;flex:none}

/* faq */
.faq{margin-top:28px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.5rem;color:var(--fg3);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--fg2);margin:0 0 20px}

.final{padding:100px 0;text-align:center;background:radial-gradient(50% 70% at 50% 100%,color-mix(in srgb,var(--violet) 20%,transparent),transparent)}
.final h2{font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem)}
.foot{border-top:1px solid var(--line);padding:28px 0;color:var(--fg3);font-size:.9rem}
.foot-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}
.foot p{margin:0}.foot a{color:var(--fg2)}

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

@media (max-width:980px){
  .links{display:none}
  .hero-grid,.lang-grid{grid-template-columns:1fr;gap:40px}
  .hero-shot{transform:none}
  .flow{grid-template-columns:1fr 1fr}
  .flow li::after{display:none}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero{padding:44px 0 32px}
  .nav .buy{display:none}
  .demo{grid-template-columns:1fr}
  .bridge{display:none}
  .flow,.cards,.compare,.price-grid{grid-template-columns:1fr}
  .dl{flex-direction:column;align-items:flex-start}
  .sec{padding:64px 0}
  .cta .btn{flex:1 1 100%}
  .lane{min-height:190px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}