/* ArchivPro — shared stylesheet */
:root{
  --bg:#05080f;--bg2:#090e1c;--bg3:#0e1526;--border:#192338;
  --text:#c4d4ee;--muted:#4e6080;--accent:#0077f5;--green:#00c875;
  --hot:#f06428;--warm:#8ba8c8;--cold:#4a9ef5;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'SF Mono','JetBrains Mono',Menlo,Consolas,'Liberation Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%;display:block}

.topbar{background:#0c1428;border-bottom:1px solid var(--border);padding:8px 48px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:12.5px;color:var(--muted)}
.topbar b{color:var(--text);font-weight:500}
.topbar a{color:var(--accent);text-decoration:none;font-weight:500;transition:opacity .2s}
.topbar a:hover{opacity:.8}
.topbar-sep{color:var(--border)}

nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:56px;background:rgba(5,8,15,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;color:#d8eaff;letter-spacing:-.2px}
.logo-mark{width:26px;height:26px;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:400;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-sw{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:4px;overflow:hidden;font-family:var(--mono);font-size:10.5px}
.lang-sw button{padding:4px 9px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:500;transition:all .15s;letter-spacing:.5px}
.lang-sw button.active{background:var(--accent);color:#fff}
.nav-btn{padding:6px 14px;border-radius:4px;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;border:none;transition:all .2s;font-family:var(--sans)}
.nav-btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.nav-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.nav-btn-solid{background:var(--accent);color:#fff}
.nav-btn-solid:hover{background:#005fd4}

.hero-wrap{max-width:1180px;margin:0 auto;padding:72px 48px 80px;display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center;min-height:calc(100vh - 97px)}
.hero-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--muted);background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:5px 12px;margin-bottom:22px}
.hero-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;animation:blink2 2s infinite}
@keyframes blink2{0%,100%{opacity:1}50%{opacity:.2}}
h1{font-size:clamp(28px,3.2vw,46px);font-weight:600;line-height:1.14;letter-spacing:-.5px;margin-bottom:18px;color:#dceaff}
h1 em{font-style:normal;color:var(--accent)}
.hero-sub{font-size:15.5px;color:var(--muted);font-weight:300;line-height:1.75;max-width:520px;margin-bottom:32px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.btn{padding:10px 20px;border-radius:5px;font-size:13.5px;font-weight:500;cursor:pointer;border:none;text-decoration:none;transition:all .2s;display:inline-block;font-family:var(--sans)}
.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:#005fd4}
.btn-o{background:transparent;border:1px solid var(--border);color:var(--text)}.btn-o:hover{border-color:var(--accent);color:var(--accent)}
.compat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.compat-lbl{font-size:12px;color:var(--muted);white-space:nowrap}
.fmt{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--bg3);border:1px solid var(--border);padding:3px 8px;border-radius:3px}

.ap{background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden;font-family:var(--mono)}
.ap-head{background:var(--bg3);border-bottom:1px solid var(--border);padding:9px 14px;display:flex;align-items:center;justify-content:space-between;font-size:10.5px}
.ap-htitle{color:var(--muted);letter-spacing:.5px}
.ap-live{display:flex;align-items:center;gap:5px;color:var(--green);font-size:10px}
.ap-ldot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:blink2 2s infinite}
.ap-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border)}
.ap-stat{padding:12px 14px;border-right:1px solid var(--border)}
.ap-stat:last-child{border-right:none}
.ap-snum{font-size:16px;font-weight:500;color:#d8eaff;margin-bottom:2px}
.ap-slbl{font-size:9.5px;color:var(--muted);letter-spacing:.3px}
.ap-feed{padding:4px 0}
.ap-row{display:flex;align-items:center;padding:5px 14px;font-size:10.5px;color:var(--muted);border-bottom:1px solid rgba(25,35,56,.5)}
.ap-row:last-child{border-bottom:none}
.ap-row:hover{background:rgba(25,35,56,.5)}
.ar-name{color:var(--text);width:120px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-file{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}
.ar-size{width:56px;flex-shrink:0;text-align:right}
.ar-tier{width:20px;flex-shrink:0;text-align:right;margin-left:6px}
.th{color:var(--hot)}.tw{color:var(--warm)}.tc{color:var(--cold)}
.ar-st{width:14px;flex-shrink:0;text-align:right;margin-left:4px}
.ok{color:var(--green)}.up{color:var(--accent)}

.metrics{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 48px}
.met-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.met{padding:0 32px;border-right:1px solid var(--border)}
.met:first-child{padding-left:0}
.met:last-child{border-right:none}
.met-num{font-size:30px;font-weight:600;color:#dceaff;letter-spacing:-.5px;line-height:1;margin-bottom:6px}
.met-num span{color:var(--accent)}
.met-lbl{font-size:13px;color:var(--muted);font-weight:300}

.fmts{border-bottom:1px solid var(--border);padding:13px 48px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fmts-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-right:4px;flex-shrink:0}
.fp{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--bg3);border:1px solid var(--border);padding:3px 9px;border-radius:3px;transition:border-color .2s,color .2s;cursor:default}
.fp:hover{border-color:var(--accent);color:var(--accent)}

.sec{padding:72px 48px}
.sec-wrap{max-width:1100px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:10px}
h2{font-size:clamp(22px,2.8vw,36px);font-weight:600;line-height:1.2;margin-bottom:12px;color:#dceaff}
.sec-sub{color:var(--muted);font-size:15px;font-weight:300;max-width:480px;line-height:1.7}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:44px}
.feat{background:var(--bg2);padding:26px 26px 30px;transition:background .2s}
.feat:hover{background:var(--bg3)}
.feat-icon{width:36px;height:36px;background:rgba(0,119,245,.1);border:1px solid rgba(0,119,245,.18);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feat-icon svg{width:18px;height:18px}
.feat-name{font-size:14.5px;font-weight:500;margin-bottom:7px;color:#d8eaff}
.feat-desc{font-size:13px;font-weight:300;color:var(--muted);line-height:1.65}
.feat-spec{font-family:var(--mono);font-size:10.5px;color:var(--accent);margin-top:9px}

.api-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.api-steps{display:flex;flex-direction:column}
.astep{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.astep:last-child{border-bottom:none}
.astep-n{font-family:var(--mono);font-size:10px;color:var(--accent);background:rgba(0,119,245,.1);border:1px solid rgba(0,119,245,.2);border-radius:4px;padding:3px 7px;height:fit-content;flex-shrink:0;margin-top:3px}
.astep-title{font-size:14.5px;font-weight:500;margin-bottom:5px;color:#d8eaff}
.astep-body{font-size:13px;font-weight:300;color:var(--muted);line-height:1.65}
.terminal{background:#030508;border:1px solid var(--border);border-radius:8px;overflow:hidden;font-family:var(--mono);font-size:12px}
.term-bar{background:var(--bg3);padding:9px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.tdot{width:9px;height:9px;border-radius:50%}
.tpath{margin-left:8px;font-size:10.5px;color:var(--muted)}
.term-body{padding:18px;line-height:2}
.t0{color:#18243a}.tg{color:var(--green)}.tb{color:var(--accent)}.to{color:var(--hot)}.tm{color:var(--muted)}
.tcur{display:inline-block;width:6px;height:12px;background:var(--green);vertical-align:middle;animation:blink 1.1s step-end infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.tier{border-radius:9px;overflow:hidden;border:1px solid var(--border);transition:transform .2s,border-color .2s}
.tier:hover{transform:translateY(-2px)}
.tier-band{height:3px}
.t-hot .tier-band{background:var(--hot)}
.t-warm .tier-band{background:var(--warm)}
.t-cold .tier-band{background:var(--cold)}
.tier-body{padding:26px;background:var(--bg2)}
.t-hot .tier-body{background:linear-gradient(170deg,rgba(240,100,40,.07) 0%,var(--bg2) 45%)}
.t-cold .tier-body{background:linear-gradient(170deg,rgba(74,158,245,.07) 0%,var(--bg2) 45%)}
.tier-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.t-hot .tier-lbl{color:var(--hot)}.t-warm .tier-lbl{color:var(--warm)}.t-cold .tier-lbl{color:var(--cold)}
.tier-name{font-size:19px;font-weight:600;margin-bottom:4px;color:#dceaff}
.tier-price{font-size:34px;font-weight:600;line-height:1;margin-bottom:2px}
.t-hot .tier-price{color:var(--hot)}.t-warm .tier-price{color:var(--warm)}.t-cold .tier-price{color:var(--cold)}
.tier-unit{font-size:12.5px;color:var(--muted);margin-bottom:20px}
.tier-specs{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.tier-specs li{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.sk{color:var(--muted);font-weight:300}
.sv{color:var(--text);font-family:var(--mono);font-size:11.5px}
.tier-hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.tier-use{font-size:13px;color:var(--muted);font-weight:300;line-height:1.6;margin-bottom:18px}
.tier-btn{width:100%;padding:9px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text);text-align:center;text-decoration:none;display:block;transition:all .2s;font-family:var(--sans)}
.t-hot .tier-btn:hover{border-color:var(--hot);color:var(--hot)}
.t-warm .tier-btn:hover{border-color:var(--warm);color:var(--warm)}
.t-cold .tier-btn:hover{border-color:var(--cold);color:var(--cold)}

/* Viewer / preview player */
.viewer-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:44px}
.player{background:#020306;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.player-stage{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;display:flex;align-items:flex-end}
.player-badge{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:#fff;background:rgba(240,100,40,.85);padding:3px 8px;border-radius:3px;display:flex;align-items:center;gap:5px}
.player-badge .d{width:5px;height:5px;border-radius:50%;background:#fff;animation:blink2 1.4s infinite}
.player-res{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:10px;color:#cfe2ff;background:rgba(5,8,15,.6);padding:3px 8px;border-radius:3px;border:1px solid var(--border)}
.player-bar{width:100%;padding:12px 14px;background:linear-gradient(0deg,rgba(2,3,6,.95),rgba(2,3,6,0));display:flex;align-items:center;gap:12px}
.pb-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:rgba(14,21,38,.7);color:#cfe2ff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.pb-track{flex:1;height:4px;border-radius:2px;background:rgba(78,96,128,.4);position:relative;overflow:hidden}
.pb-fill{position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--accent)}
.pb-buf{position:absolute;left:0;top:0;bottom:0;width:52%;background:rgba(120,160,220,.25)}
.pb-time{font-family:var(--mono);font-size:11px;color:#9fb4d6;flex-shrink:0}
.player-tele{border-top:1px solid var(--border);padding:10px 14px;font-family:var(--mono);font-size:10.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.player-tele b{color:var(--green);font-weight:500}
.clips{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.clips-h{padding:11px 14px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;color:var(--muted)}
.clip{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.clip:last-child{border-bottom:none}
.clip:hover{background:var(--bg3)}
.clip.active{background:rgba(0,119,245,.08)}
.clip-th{width:60px;height:34px;border-radius:4px;background:#0a1120 center/cover;flex-shrink:0;border:1px solid var(--border)}
.clip-meta{min-width:0}
.clip-name{font-size:12px;color:#d8eaff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip-sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px}

.dc{background:var(--bg2);border-top:1px solid var(--border);padding:18px 48px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.dc-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.dc-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.dc-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}

footer{border-top:1px solid var(--border);padding:44px 48px 28px;color:var(--muted)}
.foot-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
.foot-brand p{font-size:13px;font-weight:300;margin-top:11px;max-width:230px;line-height:1.75}
.foot-col h4{font-size:11px;font-weight:600;color:var(--text);margin-bottom:13px;text-transform:uppercase;letter-spacing:.5px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-col ul a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:300;transition:color .2s}
.foot-col ul a:hover{color:var(--text)}
.foot-bottom{max-width:1100px;margin:28px auto 0;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;padding-top:18px;border-top:1px solid var(--border)}
.foot-legal{font-family:var(--mono);font-size:10.5px;color:#1e2e48;line-height:1.9}
.status-pill{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;background:var(--bg3);border:1px solid var(--border);padding:4px 11px;border-radius:100px;color:var(--muted);white-space:nowrap}

/* generic page header */
.page-head{max-width:1100px;margin:0 auto;padding:56px 48px 8px}
.page-head h1{font-size:clamp(26px,3vw,38px)}
.crumbs{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}

/* status page */
.st-list{max-width:1100px;margin:32px auto 0;padding:0 48px 60px;display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.st-row{background:var(--bg2);display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.st-name{font-size:14px;color:#d8eaff}
.st-ok{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--green)}
.st-ok .d{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* docs page */
.doc-wrap{max-width:900px;margin:24px auto 0;padding:0 48px 70px}
.doc-block{margin-top:34px}
.doc-block h3{font-size:17px;color:#dceaff;margin-bottom:10px}
.doc-block p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.7;margin-bottom:12px}
.code{background:#030508;border:1px solid var(--border);border-radius:8px;padding:16px 18px;font-family:var(--mono);font-size:12.5px;color:#a9c4e8;line-height:1.8;overflow-x:auto;white-space:pre}

.rev{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.rev.in{opacity:1;transform:none}

@media(max-width:900px){
  .hero-wrap{grid-template-columns:1fr;min-height:auto;padding:48px 20px}
  .ap{display:none}
  .met-inner{grid-template-columns:repeat(2,1fr);gap:16px}
  .feat-grid{grid-template-columns:1fr}
  .api-inner{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .viewer-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr 1fr}
  nav,.metrics,.fmts,.sec,.dc,footer,.page-head,.st-list,.doc-wrap{padding-left:20px;padding-right:20px}
  .topbar{padding:8px 20px;text-align:center;flex-wrap:wrap}
  nav{padding:0 20px}
  .nav-links{display:none}
}