/* Orynr_OS website — themed to match the OS itself (components/orynr-theme).
   Three themes, switchable in the nav and remembered per visitor:
     • Frost    — clean light silver. The OS default, and the site default.
     • Graphite — dark silver.
     • Midnight — deeper dark.
   Red belongs to the brand mark only; the surfaces are silver/graphite. */

/* ───────────── Frost (light) — DEFAULT ───────────── */
:root{
  --bg0:#e2e6ed; --bg1:#c4cad6;
  --surface:#f5f6f9; --surface2:#ffffff;
  --panel:#fafbfd; --panel2:#ffffff;
  --text:#23262d; --muted:#6d727c;
  --hairline:rgba(15,23,42,.11);
  --accent:#4a6b9b; --accent2:#7c9cc9; --on-accent:#ffffff;
  /* headline gradient — must read as ink on light, silver on dark */
  --head-a:#2c3340; --head-b:#5a6474; --head-c:#8c94a3;
  /* card body */
  --card-a:rgba(255,255,255,.96); --card-b:rgba(246,248,251,.96);
  --nav-bg:rgba(250,251,253,.82);
  --glow1:rgba(74,107,155,.13); --glow2:rgba(124,156,201,.10);
  --ok:#2e7d5b; --warn:#8a6414; --danger:#b4453c;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 14px 40px rgba(16,24,40,.10);
  --brand:#e1131f; --brand-hi:#ff5a63;
  --radius:14px; --maxw:1180px;
  color-scheme:light;
}

/* ───────────── Graphite (dark silver) ───────────── */
:root[data-theme="graphite"]{
  --bg0:#12151b; --bg1:#07090d;
  --surface:#171b22; --surface2:#1d222b;
  --panel:#171b22; --panel2:#1c212a;
  --text:#e7e9ee; --muted:#8b919c;
  --hairline:rgba(255,255,255,.075);
  --accent:#6c84a6; --accent2:#9db4d4; --on-accent:#0d1117;
  --head-a:#ffffff; --head-b:#cbced4; --head-c:#8d9199;
  --card-a:rgba(27,33,43,.92); --card-b:rgba(20,25,33,.92);
  --nav-bg:rgba(18,21,27,.74);
  --glow1:rgba(108,132,166,.16); --glow2:rgba(157,180,212,.08);
  --ok:#4cc38a; --warn:#e3b341; --danger:#e5786d;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ───────────── Midnight (deeper dark) ───────────── */
:root[data-theme="midnight"]{
  --bg0:#06080b; --bg1:#000000;
  --surface:#0d0f14; --surface2:#14171e;
  --panel:#0d0f14; --panel2:#12151b;
  --text:#eceef2; --muted:#7d8490;
  --hairline:rgba(255,255,255,.06);
  --accent:#7e97bd; --accent2:#adc2de; --on-accent:#06080b;
  --head-a:#ffffff; --head-b:#d5d8de; --head-c:#8a909b;
  --card-a:rgba(16,19,25,.94); --card-b:rgba(9,11,15,.94);
  --nav-bg:rgba(6,8,11,.8);
  --glow1:rgba(126,151,189,.15); --glow2:rgba(173,194,222,.07);
  --ok:#4cc38a; --warn:#e3b341; --danger:#e5786d;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 20px 56px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 700px at 78% -12%, var(--glow1), transparent 62%),
    radial-gradient(900px 600px at 8% 8%, var(--glow2), transparent 60%),
    linear-gradient(160deg, var(--bg0) 0%, var(--bg1) 100%);
  background-attachment:fixed;
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease, color .2s ease;
}
a{color:var(--accent); text-decoration:none}
:root[data-theme="graphite"] a, :root[data-theme="midnight"] a{color:var(--accent2)}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ───────────── nav ───────────── */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--nav-bg); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.nav-in{display:flex; align-items:center; gap:22px; height:64px; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:.2px; white-space:nowrap; color:var(--text)}
.brand:hover{text-decoration:none}
.brand img{width:32px; height:32px; display:block}
.brand .wordmark{font-size:18px}
.nav-links{display:flex; gap:3px; margin-left:auto; align-items:center}
.nav-links a{padding:8px 12px; border-radius:9px; color:var(--muted); font-size:14.5px; font-weight:500}
.nav-links a:hover{background:var(--surface2); color:var(--text); text-decoration:none}
.nav-links a.cta{background:var(--accent); color:var(--on-accent); font-weight:700}
.nav-links a.cta:hover{background:var(--accent2); color:var(--on-accent)}
.nav-toggle{display:none; background:none; border:1px solid var(--hairline); color:var(--text); border-radius:9px; padding:7px 11px; font-size:16px; cursor:pointer}

/* theme switcher */
.theme-pick{display:flex; gap:2px; padding:3px; border:1px solid var(--hairline); border-radius:10px; background:var(--surface)}
.theme-pick button{
  width:28px; height:24px; border-radius:7px; border:1px solid transparent; cursor:pointer;
  background:none; padding:0; display:grid; place-items:center;
}
.theme-pick button:hover{border-color:var(--hairline)}
.theme-pick button[aria-pressed="true"]{border-color:var(--accent); background:var(--surface2)}
.theme-pick .sw{width:14px; height:14px; border-radius:50%; border:1px solid rgba(128,128,128,.45); display:block}
.sw-frost{background:linear-gradient(140deg,#eef1f6,#c4cad6)}
.sw-graphite{background:linear-gradient(140deg,#2a3140,#0b0e13)}
.sw-midnight{background:linear-gradient(140deg,#12161d,#000)}

/* ───────────── hero ───────────── */
.hero{position:relative; overflow:hidden; padding:76px 0 60px}
#orb{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.hero-in{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; padding:6px 14px; border-radius:99px;
  border:1px solid var(--hairline); background:var(--panel); backdrop-filter:blur(6px);
  color:var(--muted); font-size:12.5px; letter-spacing:1.3px; text-transform:uppercase;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok)}
h1.head{
  font-size:clamp(38px,6.4vw,68px); line-height:1.04; letter-spacing:-1.6px; margin:22px 0 0;
  font-weight:800; max-width:16ch;
  background:linear-gradient(180deg,var(--head-a) 8%,var(--head-b) 52%,var(--head-c) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub{font-size:19px; color:var(--muted); max-width:60ch; margin:20px 0 0}
.sub strong{color:var(--text); font-weight:600}
.btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:11px; font-weight:700; font-size:15px; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent2); color:var(--on-accent); text-decoration:none}
.btn-ghost{background:var(--panel); border-color:var(--hairline); color:var(--text)}
.btn-ghost:hover{border-color:var(--accent); text-decoration:none}
.hero-note{margin-top:18px; font-size:13.5px; color:var(--muted)}

/* ───────────── sections ───────────── */
section{padding:74px 0; position:relative}
.sec-head{max-width:64ch; margin-bottom:38px}
.kicker{color:var(--accent); font-size:12.5px; letter-spacing:1.7px; text-transform:uppercase; font-weight:700; margin:0 0 12px}
:root[data-theme="graphite"] .kicker, :root[data-theme="midnight"] .kicker{color:var(--accent2)}
h2{font-size:clamp(27px,3.4vw,40px); line-height:1.16; letter-spacing:-.7px; margin:0 0 14px; font-weight:750}
h3{font-size:18px; margin:0 0 8px; letter-spacing:-.2px}
.lede{font-size:17.5px; color:var(--muted); margin:0}
p{margin:0 0 14px}

/* ───────────── cards ───────────── */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.card{
  background:linear-gradient(180deg,var(--card-a),var(--card-b));
  border:1px solid var(--hairline); border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--accent2),transparent); opacity:.5}
.card .ico{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:15px;
  background:linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid var(--hairline); color:var(--accent);
}
.card .ico svg{width:21px; height:21px}
.card p{color:var(--muted); margin:0; font-size:15px}

.tilt{transform-style:preserve-3d; transition:transform .18s ease, border-color .18s ease}
.tilt:hover{border-color:var(--accent)}
@media (hover:hover){
  .tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(6px)}
}
.pillar{text-align:center}
.pillar .num{font:800 13px/1 ui-monospace,monospace; color:var(--accent); letter-spacing:2px; display:block; margin-bottom:12px}

/* ───────────── feature rows ───────────── */
.row{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; margin-bottom:74px}
.row:last-child{margin-bottom:0}
.row.rev .txt{order:2}
.row .shot{border-radius:var(--radius); border:1px solid var(--hairline); overflow:hidden; box-shadow:var(--shadow); display:block; background:var(--surface)}
.row .shot img{display:block; width:100%}
.row ul{padding-left:19px; margin:16px 0 0; color:var(--muted)}
.row li{margin:7px 0}
.row li strong{color:var(--text)}

/* ───────────── security stack ───────────── */
.stack{display:flex; flex-direction:column; gap:10px}
.layer{
  display:flex; gap:16px; align-items:flex-start; padding:17px 20px; border-radius:12px;
  background:linear-gradient(90deg,var(--card-a),var(--card-b));
  border:1px solid var(--hairline); transition:transform .16s ease, border-color .16s ease;
}
.layer:hover{transform:translateX(6px); border-color:var(--accent)}
.layer .lv{flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--surface2); color:var(--accent); font:700 12px/1 ui-monospace,monospace; border:1px solid var(--hairline)}
.layer h3{margin:0 0 3px; font-size:16px}
.layer p{margin:0; color:var(--muted); font-size:14.5px}

/* ───────────── gallery ───────────── */
.gal{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.gal figure{margin:0}
.gal img{border-radius:12px; border:1px solid var(--hairline); box-shadow:var(--shadow); cursor:zoom-in; transition:transform .2s ease; display:block; width:100%}
.gal img:hover{transform:translateY(-4px)}
.gal figcaption{margin-top:9px; font-size:13.5px; color:var(--muted); text-align:center}

/* ───────────── pills / callouts ───────────── */
.pill{display:inline-block; padding:2px 10px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.4px; vertical-align:middle}
.pill.ship{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok)}
.pill.build{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}
.pill.road{background:color-mix(in srgb,var(--muted) 18%,transparent); color:var(--muted)}
.note{border-left:3px solid var(--accent); background:var(--panel); padding:15px 19px; border-radius:0 11px 11px 0; margin:18px 0; box-shadow:var(--shadow)}
.note strong{display:block; margin-bottom:3px}

/* ───────────── CTA band ───────────── */
.band{
  border:1px solid var(--hairline); border-radius:20px; padding:52px 40px; text-align:center;
  background:radial-gradient(600px 300px at 50% -30%, var(--glow1), transparent 70%),
             linear-gradient(180deg,var(--card-a),var(--card-b));
  box-shadow:var(--shadow);
}
.band h2{margin-bottom:12px}
.band .lede{margin:0 auto 26px; max-width:56ch}

/* ───────────── footer ───────────── */
footer{border-top:1px solid var(--hairline); padding:44px 0 60px; margin-top:40px; color:var(--muted); font-size:14px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
footer h4{color:var(--text); font-size:12px; letter-spacing:1.4px; text-transform:uppercase; margin:0 0 12px}
footer a{display:block; color:var(--muted); padding:4px 0; font-size:14px}
footer a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid var(--hairline); padding-top:22px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px}

/* ───────────── lightbox + reveal ───────────── */
#lb{position:fixed; inset:0; background:rgba(8,10,14,.9); display:none; place-items:center; z-index:100; padding:28px; cursor:zoom-out}
#lb.on{display:grid}
#lb img{max-width:100%; max-height:100%; border-radius:10px; box-shadow:var(--shadow)}
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}

@media (max-width:900px){
  .nav-links{display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:2px; background:var(--panel2); border-bottom:1px solid var(--hairline); padding:12px 18px 18px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .row{grid-template-columns:1fr; gap:26px; margin-bottom:52px}
  .row.rev .txt{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  section{padding:56px 0}
  .band{padding:38px 24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}