/* ORV — shared styles for landing + product pages */
:root{
  --midnight:#0B1020; --graphite:#111827; --line:#1F2937; --line-2:#273244;
  --ice:#E5E7EB; --muted:#94A3B8; --muted-2:#64748B;
  --hub:#2563EB; --hub-soft:rgba(37,99,235,.12);
  --ingest:#16E0A0; --ingest-soft:rgba(22,224,160,.12);
  --teal:#0EA5A4; --amber:#D97706; --rust:#EA580C; --violet:#8B5CF6;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* per-page accent (overridden by .p-* body classes) */
  --acc:#2563EB; --acc-soft:rgba(37,99,235,.14);
}
.p-hub{--acc:#2563EB; --acc-soft:rgba(37,99,235,.14)}
.p-ingest{--acc:#16E0A0; --acc-soft:rgba(22,224,160,.14)}
.p-flow{--acc:#8B5CF6; --acc-soft:rgba(139,92,246,.14)}
.p-mon{--acc:#0EA5A4; --acc-soft:rgba(14,165,164,.14)}
.p-card{--acc:#D97706; --acc-soft:rgba(217,119,6,.14)}
.p-clean{--acc:#EA580C; --acc-soft:rgba(234,88,12,.14)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--midnight); color:var(--ice);
  font-family:var(--sans); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-decoration:none}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}

/* ---- header ---- */
header{position:sticky; top:0; z-index:20; background:rgba(11,16,32,.72);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:600; letter-spacing:.02em}
.brand .logo{width:30px; height:30px}
.brand b{font-size:19px; letter-spacing:.14em}
nav.links{display:flex; gap:28px}
nav.links a{color:var(--muted); font-size:14px; transition:color .15s}
nav.links a:hover{color:var(--ice)}
.right{display:flex; align-items:center; gap:14px}
.langsel{display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden}
.lang-btn{appearance:none; background:transparent; color:var(--muted); border:0; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; padding:8px 11px;
  transition:color .15s, background .15s}
.lang-btn:hover{color:var(--ice)}
.lang-btn.active{background:var(--hub); color:#fff}
.btn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px;
  border-radius:8px; font-size:14px; font-weight:500; border:1px solid var(--line-2);
  color:var(--ice); transition:border-color .15s, background .15s; white-space:nowrap; cursor:pointer}
.btn:hover{border-color:#3a4a63}
.btn.primary{background:var(--hub); border-color:var(--hub); color:#fff}
.btn.primary:hover{background:#1d54cf}
.btn.ghost{background:transparent}
.btn:disabled,.btn.disabled{opacity:.6; cursor:default}
@media(max-width:760px){ nav.links{display:none} }
@media(max-width:430px){ .header-cta{display:none} }

/* ---- hero (index) ---- */
.hero{padding:96px 0 72px; text-align:center}
.eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; display:inline-block}
.hero h1{font-size:clamp(40px,7vw,76px); line-height:1.02; margin:26px 0 6px;
  font-weight:600; letter-spacing:-.02em}
.hero .tag{font-family:var(--mono); font-size:clamp(16px,2.4vw,22px); letter-spacing:.02em; margin-top:10px}
.hero .tag .b{color:var(--hub)} .hero .tag .g{color:var(--ingest)}
.hero p.lead{max-width:640px; margin:22px auto 0; color:var(--muted); font-size:17px}
.hero .cta{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap}

/* ---- section ---- */
section{padding:64px 0; border-top:1px solid var(--line)}
.kicker{font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.h2{font-size:clamp(26px,4vw,36px); font-weight:600; letter-spacing:-.01em; margin:10px 0 0}
.sub{color:var(--muted); margin-top:12px; max-width:660px}

/* ---- product/tool cards (index) ---- */
.products{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px}
@media(max-width:760px){ .products{grid-template-columns:1fr} }
.card{background:var(--graphite); border:1px solid var(--line); border-radius:16px; padding:26px}
.card .tile{width:60px; height:60px; border-radius:14px; background:var(--midnight);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center}
.card h3{font-size:22px; font-weight:600; margin:18px 0 4px}
.card .role{font-family:var(--mono); font-size:12.5px; letter-spacing:.03em}
.card.hub .role{color:var(--hub)} .card.ingest .role{color:var(--ingest)}
.card p{color:var(--muted); margin:14px 0 0; font-size:15px}
.card ul{list-style:none; padding:0; margin:18px 0 0}
.card li{position:relative; padding-left:22px; margin:9px 0; color:#cbd5e1; font-size:14.5px}
.card li::before{content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:2px}
.card.hub li::before{background:var(--hub)} .card.ingest li::before{background:var(--ingest)}
.card .more{display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:14px;
  color:var(--ice); border:1px solid var(--line-2); border-radius:8px; padding:8px 13px; transition:border-color .15s, background .15s}
.card .more:hover{border-color:#3a4a63; background:#0f1526}
.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:34px}
@media(max-width:560px){ .tools{grid-template-columns:1fr} }
.card.tool h3{margin-top:16px}
.card a.open{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:14px;
  color:var(--violet); border:1px solid var(--line-2); border-radius:8px; padding:8px 12px; transition:border-color .15s}
.card a.open:hover{ border-color:var(--violet) }

/* ---- features ---- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
@media(max-width:900px){ .grid3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .grid3{grid-template-columns:1fr} }
.feat{background:var(--graphite); border:1px solid var(--line); border-radius:14px; padding:22px}
.feat .ic{width:38px; height:38px; border-radius:10px; background:var(--acc-soft);
  display:flex; align-items:center; justify-content:center; color:var(--acc); font-size:18px}
.feat h4{margin:16px 0 6px; font-size:16px; font-weight:600}
.feat p{margin:0; color:var(--muted); font-size:14px}

/* ---- flow / roadmap / band (index) ---- */
.flow{display:flex; align-items:stretch; gap:14px; margin-top:34px; flex-wrap:wrap}
.step{flex:1 1 180px; background:var(--graphite); border:1px solid var(--line); border-radius:14px; padding:20px; position:relative}
.step .n{font-family:var(--mono); font-size:12px; color:var(--muted-2)}
.step h4{margin:8px 0 6px; font-size:16px}
.step p{margin:0; color:var(--muted); font-size:13.5px}
.step .arrow{position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--line-2); z-index:2}
@media(max-width:760px){ .step .arrow{display:none} }
.road{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:34px}
@media(max-width:760px){ .road{grid-template-columns:1fr} }
.road .card{opacity:.9}
.pill{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:3px 10px}
.band{text-align:center; padding:72px 0}
.band h2{font-size:clamp(26px,4vw,38px); font-weight:600; margin:0}
.band p{color:var(--muted); margin:14px auto 28px; max-width:520px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:38px 0; color:var(--muted-2); font-size:13px}
.footer-in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; margin-bottom:22px}
.footer-in .mono{color:var(--muted)}
.socials{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.socials .mail{color:var(--muted); font-family:var(--mono); font-size:13px}
.socials .mail:hover{color:var(--ice)}
.soc{width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); color:var(--muted);
  display:flex; align-items:center; justify-content:center; transition:color .15s, border-color .15s}
.soc svg{width:20px; height:20px}
.soc.yt:hover{color:#FF0000; border-color:#FF0000}
.soc.tg:hover{color:#229ED9; border-color:#229ED9}

/* =====================  PRODUCT PAGES  ===================== */
.back{font-family:var(--mono); font-size:13px; color:var(--muted)}
.back:hover{color:var(--ice)}
.phero{padding:74px 0 26px; text-align:center; border-top:none}
.ptile{width:76px; height:76px; border-radius:18px; margin:0 auto; background:var(--graphite);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center}
.prole{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc); margin-top:20px}
.phero h1{font-size:clamp(34px,6vw,60px); font-weight:600; letter-spacing:-.02em; margin:8px 0 0}
.phero .lead{max-width:660px; margin:16px auto 0; color:var(--muted); font-size:17px}
.phero .cta{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:8px;
  font-size:13.5px; border:1px solid var(--line-2); color:var(--muted); font-family:var(--mono)}
.chip .dotc{width:8px; height:8px; border-radius:50%; background:var(--acc)}
.dlmeta{max-width:600px; margin:16px auto 0; color:var(--muted-2); font-size:13px; line-height:1.7}
.dlmeta .chip{height:auto; padding:4px 11px; font-size:12px; margin-right:8px; vertical-align:middle}

.who{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:34px}
.who .p{background:var(--graphite); border:1px solid var(--line); border-radius:14px; padding:20px}
.who .p .t{font-weight:600; font-size:15px; margin:0 0 6px}
.who .p p{margin:0; color:var(--muted); font-size:14px}

/* generic mockup app window */
.mock{margin-top:36px; overflow-x:auto; padding-bottom:6px}
.appwin{min-width:660px; max-width:900px; margin:0 auto; border:1px solid var(--line-2); border-radius:14px;
  overflow:hidden; background:var(--midnight); box-shadow:0 26px 70px rgba(0,0,0,.5)}
.appbar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:#0A0F1E; border-bottom:1px solid var(--line)}
.appbar .d{width:11px; height:11px; border-radius:50%}
.appbar .t{margin-left:8px; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.appbody{display:flex; min-height:340px}
.mside{width:188px; flex:none; background:#0A0F1E; border-right:1px solid var(--line); padding:14px 0}
.mbrand{display:flex; align-items:center; gap:9px; padding:0 15px 16px}
.mbrand .sq{width:30px; height:30px; border-radius:8px; background:var(--midnight); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; flex:none}
.mbrand .nm{font-weight:600; font-size:13px; line-height:1.15}
.mbrand .rl{font-family:var(--mono); font-size:8px; letter-spacing:2px; color:var(--muted-2); margin-top:2px}
.mnavlbl{font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--muted-2); padding:2px 16px 8px}
.mnav{display:flex; align-items:center; gap:10px; padding:9px 15px; color:var(--muted); font-size:12.5px;
  border-left:2px solid transparent}
.mnav .gi{width:15px; height:15px; opacity:.85; flex:none}
.mnav.on{color:var(--ice); background:var(--acc-soft); border-left:2px solid var(--acc)}
.mcontent{flex:1; min-width:0; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--midnight)}
.mcard{background:var(--graphite); border:1px solid var(--line); border-radius:12px; padding:14px}
.mcard.grow{flex:1}
.mh{font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--muted-2); text-transform:uppercase; margin-bottom:11px}
.mrow{display:flex; align-items:center; gap:10px; font-size:12.5px; color:#cbd5e1; margin:8px 0}
.mrow .lbl{width:78px; color:var(--muted); flex:none}
.mrow .val{color:var(--muted); font-family:var(--mono); font-size:11px; flex:none}
.bar{flex:1; height:9px; border-radius:5px; background:#94A3B8; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--acc); border-radius:5px}
.bar.slim{height:7px}
.mpill{display:inline-block; font-family:var(--mono); font-size:10px; padding:2px 9px; border-radius:999px;
  background:var(--acc-soft); color:var(--acc); white-space:nowrap}
.mpill.dim{background:#1F2937; color:var(--muted-2)}
.mpill.ok{background:rgba(22,224,160,.14); color:#16E0A0}
.mpill.warn{background:rgba(245,158,11,.14); color:#F59E0B}
.mthumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px}
.mthumb{aspect-ratio:16/9; border-radius:6px; border:1px solid var(--line-2);
  background:linear-gradient(135deg,#16324a,#0e2033)}
.mtable{width:100%; border-collapse:collapse; font-size:12px}
.mtable th{font-family:var(--mono); font-size:9px; letter-spacing:1px; color:var(--muted-2); text-transform:uppercase;
  text-align:left; padding:6px 8px; border-bottom:1px solid var(--line)}
.mtable td{padding:8px; border-bottom:1px solid var(--line); color:#cbd5e1}
.mlog{font-family:var(--mono); font-size:11.5px; line-height:1.7}
.mlog .ok{color:#16E0A0} .mlog .no{color:#F59E0B} .mlog .mut{color:var(--muted-2)}
.mbtns{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.mbtn{font-size:11.5px; padding:6px 11px; border-radius:7px; border:1px solid var(--line-2); color:var(--ice)}
.mbtn.acc{background:var(--acc); border-color:var(--acc); color:#0B1020}
.caption{text-align:center; color:var(--muted-2); font-family:var(--mono); font-size:12px; margin-top:14px}

/* video-call mockup (Flow) */
.vgrid{display:grid; grid-template-columns:2fr 1fr; gap:10px; padding:16px; background:var(--midnight)}
.vmain{aspect-ratio:16/9; border-radius:10px; border:1px solid var(--line-2); position:relative;
  background:linear-gradient(135deg,#241a3d,#141026); overflow:hidden}
.vside{display:flex; flex-direction:column; gap:10px}
.vtile{flex:1; border-radius:10px; border:1px solid var(--line-2); position:relative;
  background:linear-gradient(135deg,#1c2740,#12182b); min-height:78px}
.vname{position:absolute; left:8px; bottom:7px; font-size:11px; font-family:var(--mono);
  background:rgba(11,16,32,.6); padding:2px 7px; border-radius:5px; color:var(--ice)}
.vbadge{position:absolute; left:10px; top:10px; font-family:var(--mono); font-size:10px;
  background:var(--acc-soft); color:var(--acc); padding:3px 9px; border-radius:999px}
.vbar{display:flex; align-items:center; justify-content:center; gap:12px; padding:12px; background:#0A0F1E;
  border-top:1px solid var(--line)}
.vbtn{width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); color:var(--muted);
  display:flex; align-items:center; justify-content:center}
.vbtn.leave{background:#EA3B3B; border-color:#EA3B3B; color:#fff}
.vbtn svg{width:18px; height:18px}