/* Zweig — marketing site. Dark "contour" theme. */
:root{
  --bg:#15130F; --bg2:#0F1715; --bg3:#0C1110; --term:#0A0D0C;
  --ink:#F5EEE3; --ink2:#C9C2B6; --ink3:#8FA39B; --ink4:#5E6F67;
  --mint:#7FE0B0; --mint2:#B5F2D3; --mint-d:#13261F; --amber:#E0A458; --red:#E07A5F;
  --line:#1F3A30; --line2:#26302B; --line3:#1F2A26; --line4:#2F4A40;
  --r:22px; --max:1280px;
  --f:'Manrope',system-ui,sans-serif; --fh:'Unbounded','Manrope',sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.5;
  background-image:linear-gradient(rgba(127,224,176,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(127,224,176,.045) 1px,transparent 1px);
  background-size:64px 64px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
main{overflow-x:clip}
a{color:var(--mint);text-decoration:none}a:hover{color:var(--mint2)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sec{padding-top:100px;padding-bottom:100px}
.mono{font-family:var(--fm)}
.tag{font-family:var(--fm);font-size:14px;color:var(--mint)}
.h1{font-family:var(--fh);font-weight:800;font-size:clamp(36px,5vw,60px);line-height:1.05;letter-spacing:-.035em;margin:20px 0 0}
.h2{font-family:var(--fh);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.03em;margin:12px 0 0}
.lead{font-size:19px;line-height:1.55;color:var(--ink2);margin:20px 0 0;max-width:600px}
.mint{color:var(--mint)} .amber{color:var(--amber)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 24px;border-radius:14px;font-weight:800;font-size:16px;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:#15130F}.btn-amber:hover{color:#15130F;box-shadow:0 10px 30px rgba(224,164,88,.3)}
.btn-mint{background:var(--mint);color:#0B0F0E}.btn-mint:hover{color:#0B0F0E;box-shadow:0 10px 30px rgba(127,224,176,.3)}
.btn-ghost{border-color:var(--line4);color:var(--ink);background:transparent}.btn-ghost:hover{color:var(--ink);border-color:var(--mint)}
.btn-lg{min-height:56px;padding:17px 26px;font-size:17px}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(21,19,15,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.hdr .wrap{display:flex;align-items:center;gap:26px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--fh);font-weight:800;font-size:20px}
.logo:hover{color:var(--ink)} .logo img{height:34px;width:auto}
.nav{display:flex;gap:20px;font-family:var(--fm);font-size:14px}
.nav a{color:#B9C4BC;padding:6px 0}.nav a:hover,.nav a[aria-current=page]{color:var(--mint)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px var(--mint)}
.nav a.nav-dl{color:var(--mint)}
.hdr-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);background:transparent;cursor:pointer;font-family:var(--fm);font-size:13px;font-weight:600}
.icon-btn:hover{color:var(--mint);border-color:var(--line4)}
.burger{display:none}
.mnav{display:none}
@media (max-width:1020px){
  .nav,.hdr .hide-m{display:none}
  .burger{display:inline-flex}
  .mnav{position:fixed;inset:72px 0 auto 0;z-index:49;background:rgba(15,23,21,.98);border-bottom:1px solid var(--line);padding:16px 24px 24px;display:none;flex-direction:column;gap:4px}
  .mnav.open{display:flex}
  .mnav a{font-family:var(--fm);color:var(--ink);padding:14px 4px;border-bottom:1px solid var(--line3);font-size:16px}
  .mnav .btn{margin-top:14px;font-family:var(--f)}
}

/* animations */
@keyframes up{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes word{from{opacity:0;transform:translateY(40px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes macIn{from{opacity:0;transform:perspective(1600px) rotateX(22deg) translateY(60px) scale(.96)}to{opacity:1;transform:none}}
@keyframes phoneIn{from{opacity:0;transform:translate(60px,80px) rotate(10deg)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(.55);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes unspin{to{transform:rotate(-360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,224,176,.6)}100%{box-shadow:0 0 0 14px rgba(127,224,176,0)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes type{from{width:0}to{width:100%}}
@keyframes scan{0%{top:-20%}100%{top:110%}}
@keyframes pkt{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes beam{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.w{display:inline-block;animation:word .9s cubic-bezier(.2,.7,.2,1) both}
.u{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
/* scroll reveal (JS adds .in) */
.rv{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.rl{transform:translateX(-80px)} .rv.rr{transform:translateX(80px) rotate(4deg)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
.rings{position:absolute;width:0;height:0;pointer-events:none}
.rings span{position:absolute;border-radius:50%;border:2px solid rgba(127,224,176,.3);animation:ring 4.5s linear infinite}
.rings span:nth-child(2){animation-delay:1.5s}.rings span:nth-child(3){animation-delay:3s;border-color:rgba(224,164,88,.26)}
.sweep{position:absolute;border-radius:50%;background:conic-gradient(from 0deg,rgba(127,224,176,.2),rgba(127,224,176,0) 60deg,transparent);animation:spin 6s linear infinite;pointer-events:none}
.dot-pulse{width:9px;height:9px;border-radius:50%;background:var(--mint);animation:pulse 1.6s infinite;flex:0 0 auto}
.card{border:1px solid var(--line);border-radius:var(--r);background:rgba(15,23,21,.88)}
.hov{transition:transform .25s,box-shadow .25s,border-color .25s}.hov:hover{transform:translateY(-5px);border-color:var(--mint);box-shadow:0 24px 60px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* devices */
.mac{width:100%;container-type:inline-size}
.mac-scr{position:relative;margin:0 7cqw;background:#0c0c0e;border-radius:2.6cqw 2.6cqw .6cqw .6cqw;padding:1.7cqw 1.7cqw 2.6cqw;box-shadow:inset 0 0 0 .25cqw #2b2b30,0 0 0 .15cqw #050506}
.mac-scr::before{content:"";position:absolute;left:50%;top:0;width:13cqw;height:1.9cqw;margin-left:-6.5cqw;background:#0c0c0e;border-radius:0 0 1cqw 1cqw;z-index:2}
.mac-in{border-radius:.8cqw;overflow:hidden;background:#2B2823}
.mac-bar{height:4.4cqw;background:#24211e;display:flex;align-items:center;padding:0 1.6cqw;gap:.9cqw;border-bottom:.12cqw solid #1a1816}
.mac-bar i{width:1.15cqw;height:1.15cqw;border-radius:50%;background:#ff5f57}.mac-bar i:nth-child(2){background:#febc2e}.mac-bar i:nth-child(3){background:#28c840}
.mac-url{flex:0 1 40cqw;margin:0 auto;height:2.6cqw;border-radius:.8cqw;background:#181614;display:flex;align-items:center;justify-content:center;gap:.7cqw;color:#a89e92;font-size:1.35cqw;font-family:-apple-system,'Helvetica Neue',sans-serif}
.mac-url svg{width:1.1cqw;height:1.3cqw}
.mac-in img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.mac-base{position:relative;height:1.9cqw;background:linear-gradient(#e9eaec,#c9cbcf 45%,#9a9da2);border-radius:.3cqw .3cqw 2.2cqw 2.2cqw;box-shadow:0 2cqw 4cqw rgba(0,0,0,.45)}
.mac-base::before{content:"";position:absolute;left:50%;top:0;width:15cqw;height:.9cqw;margin-left:-7.5cqw;border-radius:0 0 1cqw 1cqw;background:linear-gradient(#a7aaaf,#cfd1d4)}
.phone{width:100%;container-type:inline-size}
.phone-f{position:relative;padding:3.6cqw;border-radius:17cqw;background:linear-gradient(145deg,#6b6a70,#2d2c31 28%,#1d1c20 55%,#4a494f);box-shadow:0 0 0 .5cqw #121214,inset 0 0 0 .6cqw rgba(255,255,255,.08),0 14cqw 30cqw rgba(0,0,0,.5)}
.phone-s{position:relative;border-radius:13.6cqw;overflow:hidden;background:var(--bar,#33302C);aspect-ratio:393/852}
.phone-sb{height:11.1cqw;display:flex;align-items:center;justify-content:space-between;padding:1.4cqw 7.5cqw 0 9cqw;color:#F5EEE3;font:600 4.3cqw/1 -apple-system,'Helvetica Neue',sans-serif}
.phone-sb svg{height:3cqw;width:auto}
.phone-di{position:absolute;left:50%;top:2.8cqw;width:31cqw;height:9cqw;margin-left:-15.5cqw;border-radius:6cqw;background:#000}
.phone-s img{width:100%}
.phone-hi{position:absolute;left:50%;bottom:2cqw;width:34cqw;height:1.3cqw;margin-left:-17cqw;border-radius:1cqw;background:rgba(245,238,227,.7)}

/* footer */
.ftr{border-top:1px solid var(--line2);background:rgba(10,13,12,.7);margin-top:40px}
.ftr .wrap{display:flex;gap:40px;flex-wrap:wrap;padding-top:44px;padding-bottom:28px}
.ftr-col{display:flex;flex-direction:column;gap:10px;font-family:var(--fm);font-size:14px}
.ftr-col span{color:var(--ink4)} .ftr-col a{color:#B9C4BC}.ftr-col a:hover{color:var(--mint)}
.ftr-copy{font-family:var(--fm);font-size:13px;color:var(--ink4);padding:0 24px 28px;max-width:var(--max);margin:0 auto}

/* CTA band */
.cta{position:relative;overflow:hidden;border-radius:30px;padding:56px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line)}
.cta h2{position:relative;flex:1 1 440px;margin:0}
.cta .btn{position:relative}
@media (max-width:700px){.cta{padding:32px 22px}.sec{padding-top:70px;padding-bottom:70px}}

/* terminal */
.term{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;padding:26px 28px;background:var(--term);font-family:var(--fm);font-size:15px;line-height:2}
.term .ln{overflow:hidden;white-space:nowrap;width:0}
.term.in .ln{animation:type 1.1s steps(40) forwards}
.term .scan,.scanbox .scan{position:absolute;left:0;right:0;height:70px;background:linear-gradient(rgba(127,224,176,.09),transparent);animation:scan 4s linear infinite;pointer-events:none}
@media (max-width:600px){.term .ln{white-space:normal;width:auto!important;animation:none!important}}

/* segmented control */
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:16px;padding:5px;background:var(--bg2);gap:4px}
.seg button{border:none;cursor:pointer;min-height:44px;padding:10px 18px;border-radius:11px;font-weight:800;font-size:15px;background:transparent;color:#9DB3AA;transition:all .25s}
.seg button[aria-selected=true],.seg button[aria-checked=true]{background:var(--mint);color:#0B0F0E;box-shadow:0 0 24px rgba(127,224,176,.3)}
.seg .badge{font-family:var(--fm);font-size:12px;margin-left:6px;padding:3px 7px;border-radius:6px;background:rgba(224,164,88,.2);color:var(--amber)}

/* checks */
.chk{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:rgba(127,224,176,.13);display:inline-flex;align-items:center;justify-content:center}
.chk.no{background:rgba(224,122,95,.13)}
.chk svg{width:14px;height:14px}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;gap:12px;align-items:center;padding:9px 0;color:#D9D2C6}

/* page hero (inner pages) */
.phero{position:relative;padding:90px 0 60px}
.phero .rings{left:82%;top:55%}.phero .rings span{width:520px;height:520px}
.phero .sweep{left:calc(82% - 230px);top:calc(55% - 230px);width:460px;height:460px}
.phero .inner{position:relative;max-width:760px}
@media (max-width:900px){.phero .rings,.phero .sweep{left:90%;opacity:.5}}
@media (max-width:600px){.btn{white-space:normal;text-align:center}.cta .btn{width:100%}}