/* =====================================================================
   Beef, etc — beefetc.net
   Shared stylesheet. Design tokens + the four selectable "web era" themes
   are carried over from the house design system; marketing components are
   built entirely on those tokens so every page responds to all themes.
   ===================================================================== */

/* ---------- default tokens = Web 2.0 ---------- */
:root{
  --bg: radial-gradient(1600px 700px at 50% -12%, #1d2530 0%, rgba(29,37,48,0) 62%), linear-gradient(180deg,#14171c,#0a0c10);
  --font-body:"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  --font-num:"Helvetica Neue",Arial,sans-serif;
  --txt:#e9eef4; --muted:#98a8bc; --faint:#6d7c90;
  --panel-bg:linear-gradient(180deg,#2b3543,#191f28); --panel-border:#3a4658; --panel-radius:14px;
  --panel-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -18px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.4);
  --head-bg:transparent; --head-txt:var(--txt); --head-border:rgba(0,0,0,.35); --head-weight:800;
  --tile-bg:linear-gradient(180deg,#2a3340,#1a212b); --tile-border:#3a4658; --tile-radius:12px;
  --tile-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 3px 7px rgba(0,0,0,.4);
  --btn-bg:linear-gradient(180deg,#e2564a,#8f1c10); --btn-txt:#fff; --btn-radius:11px;
  --btn-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -8px 12px -6px rgba(0,0,0,.35) inset,0 3px 8px rgba(190,44,26,.55),0 2px 3px rgba(0,0,0,.4);
  --btn-tshadow:0 -1px 0 rgba(0,0,0,.35);
  --btn-ghost-bg:linear-gradient(180deg,#3a4656,#232c38); --btn-ghost-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 5px rgba(0,0,0,.45);
  --field-bg:#0f141b; --field-border:#000; --field-txt:var(--txt);
  --pill-bg:linear-gradient(180deg,#2f3a49,#1c232e); --pill-border:#3a4658; --pill-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 5px rgba(0,0,0,.4);
  --pill-active-bg:linear-gradient(180deg,#e2564a,#8f1c10); --pill-active-txt:#fff; --pill-active-border:#8f1c10;
  --accent:#e2564a; --accent-txt:#fff; --accent-glow:rgba(190,44,26,.55);
  --amber:#ffc02e; --cool:#7fd0ff; --hot:#ff6a45; --green:#63d155;
  --big-color:#dfe9f5; --big-spacing:-3px; --big-weight:800;
  --scroll-thumb:linear-gradient(180deg,#3a4656,#232c38); --scroll-track:#0f141b;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body); color:var(--txt);
  background:var(--bg); background-attachment:fixed; min-height:100vh;
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
.wrap{max-width:min(1200px, 94vw); margin:0 auto; padding:20px 22px 64px;}
a{color:var(--accent);}

/* ---------- panels ---------- */
.panel{position:relative; background:var(--panel-bg); border:1px solid var(--panel-border);
  border-radius:var(--panel-radius); box-shadow:var(--panel-shadow); overflow:hidden;}
.panel > *{position:relative;}

/* ---------- header / nav ---------- */
header.bar{display:flex; align-items:center; gap:14px 16px; flex-wrap:wrap; padding:12px 18px; margin-bottom:18px;}
.logo{display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none;}
.logo .orb{width:46px; height:46px; border-radius:50%; flex:none; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:24px; position:relative;
  box-shadow:0 2px 8px -2px var(--accent-glow);}
.logo h1{font-size:25px; margin:0; letter-spacing:-.5px; font-weight:800; color:var(--txt); line-height:1;}
.logo .tag{display:block; font-size:11px; font-weight:600; color:var(--faint); margin-top:2px; letter-spacing:.2px;}

.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.nav a{text-decoration:none; color:var(--muted); font-weight:700; font-size:14px; padding:9px 13px; border-radius:10px; transition:color .15s ease, background .15s ease;}
.nav a:hover{color:var(--txt);}
.nav a.active{color:var(--accent-txt); background:var(--accent);}
.nav a.nav-cta{color:var(--txt); border:1px solid var(--panel-border);}
.nav a.nav-cta:hover{border-color:var(--accent); color:var(--accent);}
.nav-toggle{display:none;}

/* theme dropdown */
.theme-select{appearance:none; -webkit-appearance:none; font-family:var(--font-body); font-weight:700; font-size:13px;
  color:var(--txt); background-color:var(--field-bg); border:1px solid var(--field-border); border-radius:var(--btn-radius);
  padding:9px 30px 9px 12px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center;}
.theme-select option{color:#000; background:#fff;}

/* ---------- gel buttons ---------- */
.gel{appearance:none; border:0; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:13.5px;
  color:var(--btn-txt); letter-spacing:.2px; padding:11px 18px; border-radius:var(--btn-radius); position:relative;
  background:var(--btn-bg); box-shadow:var(--btn-shadow); text-shadow:var(--btn-tshadow);
  transition:transform .05s ease, filter .15s ease; text-decoration:none; display:inline-block;}
.gel:hover{filter:brightness(1.08);} .gel:active{transform:translateY(1px);}
.gel.ghost{background:var(--btn-ghost-bg); color:var(--txt); box-shadow:var(--btn-ghost-shadow); text-shadow:none;}
.gel.small{padding:8px 12px; font-size:12.5px;}
.gel.icon{padding:10px 12px; font-size:16px; line-height:1;}
.gel.big{padding:14px 24px; font-size:15px;}

/* ---------- fields ---------- */
.field{display:flex; align-items:center; background:var(--field-bg); border-radius:11px; border:1px solid var(--field-border); padding:0 6px 0 12px;}
.field input{background:transparent; border:0; outline:0; color:var(--field-txt); font-size:14px; padding:11px 4px; width:190px; font-family:inherit;}
.field input::placeholder{color:var(--faint);}

/* ---------- pills / tags ---------- */
.pill{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:20px;
  font-size:13px; font-weight:600; background:var(--pill-bg); border:1px solid var(--pill-border); box-shadow:var(--pill-shadow);}
.pill.active{background:var(--pill-active-bg); color:var(--pill-active-txt); border-color:var(--pill-active-border);}

/* ---------- cards ---------- */
.card{display:flex; flex-direction:column;}
.card > .head{display:flex; align-items:center; gap:10px; padding:12px 16px 10px;
  background:var(--head-bg); color:var(--head-txt); border-bottom:1px solid var(--head-border);}
.card > .head .ico{font-size:18px;}
.card > .head h3{margin:0; font-size:15px; font-weight:var(--head-weight); letter-spacing:.3px; color:var(--head-txt);}
.card > .head .sub{margin-left:auto; font-size:11.5px; color:var(--faint); font-weight:600;}
.card-body{padding:16px; flex:1;}
.card-body p{margin:0 0 12px; color:var(--muted); font-size:14px;}
.card-body p:last-child{margin-bottom:0;}
.card-body ul{margin:0; padding-left:18px; color:var(--muted); font-size:13.5px;}
.card-body ul li{margin:5px 0;}
.card-body ul li::marker{color:var(--accent);}

/* ---------- stat ---------- */
.stat .k{font-size:10.5px; color:var(--faint); font-weight:700; letter-spacing:.4px; text-transform:uppercase;}
.stat .v{font-size:24px; font-weight:800; margin-top:3px; color:var(--txt); letter-spacing:-.5px;}
.stat .v small{font-size:12px; font-weight:700; color:var(--muted);}

/* ---------- layout helpers ---------- */
.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.split{display:grid; gap:16px; grid-template-columns:1.5fr 1fr;}
.section{margin-top:26px;}
.section-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 2px 14px;}
.section-head h2{margin:0; font-size:23px; font-weight:800; letter-spacing:-.4px; color:var(--txt);}
.section-head .lead{margin:0; color:var(--muted); font-size:14.5px;}
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:1px; color:var(--accent); text-transform:uppercase;}

/* ---------- hero ---------- */
.hero{padding:44px 40px;}
.hero .eyebrow{margin-bottom:14px; display:block;}
.hero h1{font-size:clamp(34px, 5.5vw, 60px); line-height:1.02; margin:0 0 16px; font-weight:var(--big-weight);
  letter-spacing:var(--big-spacing); color:var(--big-color); max-width:16ch;}
.hero .lead{font-size:clamp(15px,1.6vw,19px); color:var(--muted); margin:0 0 26px; max-width:60ch;}
.btn-row{display:flex; gap:12px; flex-wrap:wrap;}

/* page hero (interior pages) */
.page-hero{padding:34px 34px 30px;}
.page-hero .eyebrow{display:block; margin-bottom:12px;}
.page-hero h1{font-size:clamp(28px,4vw,44px); line-height:1.05; margin:0 0 12px; font-weight:800; letter-spacing:-.6px; color:var(--big-color);}
.page-hero .lead{font-size:16px; color:var(--muted); margin:0; max-width:66ch;}

/* ---------- feature tiles (token-driven so themes flow through) ---------- */
.feature{background:var(--tile-bg); border:1px solid var(--tile-border); border-radius:var(--tile-radius);
  box-shadow:var(--tile-shadow); padding:20px; display:flex; flex-direction:column; height:100%;}
.feature .ico{font-size:26px; line-height:1; margin-bottom:12px;}
.feature h3{margin:0 0 7px; font-size:16px; font-weight:800; color:var(--txt); letter-spacing:-.2px;}
.feature p{margin:0; color:var(--muted); font-size:13.5px; flex:1;}
a.feature{text-decoration:none;}
a.feature:hover{filter:brightness(1.06);}
a.feature .more{margin-top:12px; font-size:12.5px; font-weight:800; color:var(--accent); letter-spacing:.3px;}

/* ---------- tag groups ---------- */
.tag-group{margin-bottom:6px;}
.tag-group .gname{font-size:12px; font-weight:800; letter-spacing:.5px; color:var(--faint); text-transform:uppercase; margin:0 0 10px;}
.tags{display:flex; flex-wrap:wrap; gap:9px;}

/* ---------- process steps (a genuine sequence, so it is numbered) ---------- */
.steps{counter-reset:step; display:grid; gap:14px;}
.step{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:18px;
  background:var(--tile-bg); border:1px solid var(--tile-border); border-radius:var(--tile-radius); box-shadow:var(--tile-shadow);}
.step::before{counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--font-num);
  font-size:22px; font-weight:800; color:var(--accent); min-width:2ch; line-height:1.1;}
.step h3{margin:0 0 5px; font-size:16px; font-weight:800; color:var(--txt);}
.step p{margin:0; color:var(--muted); font-size:13.5px;}

/* ---------- cta band ---------- */
.cta{padding:34px; text-align:center;}
.cta h2{margin:0 0 8px; font-size:26px; font-weight:800; letter-spacing:-.4px; color:var(--big-color);}
.cta p{margin:0 0 20px; color:var(--muted); font-size:15px;}

/* ---------- contact form ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid .full{grid-column:1/-1;}
.form-row{display:flex; flex-direction:column; gap:6px;}
.form-row label{font-size:12px; font-weight:800; letter-spacing:.4px; color:var(--faint); text-transform:uppercase;}
.form-row input,.form-row textarea{
  background:var(--field-bg); border:1px solid var(--field-border); border-radius:11px; color:var(--field-txt);
  font-family:inherit; font-size:14.5px; padding:12px 13px; outline:0; width:100%;}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--faint);}
.form-row input:focus,.form-row textarea:focus{border-color:var(--accent);}
.form-row textarea{resize:vertical; min-height:130px;}
.form-note{font-size:12.5px; color:var(--faint); margin:14px 0 0;}
.form-status{margin:14px 0 0; font-size:13.5px; font-weight:700; color:var(--green); min-height:18px;}

/* ---------- definition rows ---------- */
.deflist{display:grid; gap:0;}
.deflist .row{display:grid; grid-template-columns:200px 1fr; gap:16px; padding:14px 4px; border-bottom:1px solid rgba(128,128,128,.18);}
.deflist .row:last-child{border-bottom:0;}
.deflist .row .t{font-weight:800; color:var(--txt); font-size:14.5px;}
.deflist .row .d{color:var(--muted); font-size:14px;}

/* ---------- footer ---------- */
footer.site{margin-top:34px; padding:22px 20px; }
.foot-grid{display:flex; gap:20px; flex-wrap:wrap; align-items:center;}
.foot-grid .brand{display:flex; align-items:center; gap:10px; margin-right:auto;}
.foot-grid .brand .orb{width:34px; height:34px; font-size:18px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px -2px var(--accent-glow);}
.foot-grid .brand b{font-size:16px; color:var(--txt);}
.foot-nav{display:flex; gap:14px; flex-wrap:wrap;}
.foot-nav a{color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;}
.foot-nav a:hover{color:var(--txt);}
.foot-legal{width:100%; margin-top:16px; padding-top:14px; border-top:1px solid rgba(128,128,128,.2);
  color:var(--faint); font-size:12px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar{width:9px; height:10px;}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:6px;}
*::-webkit-scrollbar-track{background:var(--scroll-track); border-radius:6px;}

/* ============================================================
   THEME: Web 2.0 — glossy (gloss the tokens can't express)
   ============================================================ */
[data-theme="web2"] .panel{border-top-color:rgba(255,255,255,.14);}
[data-theme="web2"] .panel::before{content:""; position:absolute; inset:0 0 auto 0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0)); pointer-events:none;}
[data-theme="web2"] .gel::after{content:""; position:absolute; left:5px; right:5px; top:3px; height:42%; border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)); pointer-events:none;}
[data-theme="web2"] .feature{border-top-color:rgba(255,255,255,.14);}
[data-theme="web2"] .step{border-top-color:rgba(255,255,255,.14);}
[data-theme="web2"] .logo .orb,[data-theme="web2"] .foot-grid .brand .orb{background:radial-gradient(circle at 32% 26%,#ffb59f,#e2564a 42%,#8f1c10 100%);}
[data-theme="web2"] .logo .orb::after{content:""; position:absolute; top:4px; left:8px; right:8px; height:40%; border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));}
[data-theme="web2"] .hero h1,[data-theme="web2"] .cta h2,[data-theme="web2"] .page-hero h1{
  background:linear-gradient(180deg,#fff 0%,#cfe0f2 55%,#9fb6cf 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
[data-theme="web2"] .logo h1{background:linear-gradient(180deg,#fff,#d7c2be); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ============================================================
   THEME: Web 0 — terminal / BBS
   ============================================================ */
[data-theme="web0"]{
  --scan:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(40,0,0,.55) 2px 3px);
  --bg:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(24,0,0,.5) 2px 3px), #0a0002;
  --font-body:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,"DejaVu Sans Mono",monospace;
  --font-num:var(--font-body);
  --txt:#ff5555; --muted:#cf3b3b; --faint:#8f2b2b;
  --panel-bg:var(--scan), #180000; --panel-border:#b3181a; --panel-radius:0;
  --panel-shadow:0 0 0 1px rgba(255,60,60,.10), inset 0 0 22px -6px rgba(255,60,60,.22);
  --head-bg:var(--scan), #260000; --head-txt:#ff8a8a; --head-border:#b3181a; --head-weight:700;
  --tile-bg:var(--scan), #160000; --tile-border:#b3181a; --tile-radius:0; --tile-shadow:none;
  --btn-bg:#180000; --btn-txt:#ff5555; --btn-radius:0; --btn-shadow:0 0 0 1px #b3181a; --btn-tshadow:none;
  --btn-ghost-bg:#180000; --btn-ghost-shadow:0 0 0 1px #b3181a;
  --field-bg:#0a0000; --field-border:#b3181a; --field-txt:#ff5555;
  --pill-bg:#180000; --pill-border:#b3181a; --pill-shadow:none; --pill-active-bg:#3f0a0a; --pill-active-txt:#ffb3b3; --pill-active-border:#ff5555;
  --accent:#ff3b3b; --accent-txt:#180000; --accent-glow:rgba(255,60,60,.5);
  --amber:#ff9a4a; --cool:#e0606e; --hot:#ff3a2a; --green:#ff5555;
  --big-color:#ff8a8a; --big-spacing:0px; --big-weight:700;
  --scroll-thumb:#b3181a; --scroll-track:#0a0000;
}
[data-theme="web0"] .card > .head h3, [data-theme="web0"] .logo h1, [data-theme="web0"] .eyebrow,
[data-theme="web0"] .tag-group .gname, [data-theme="web0"] .section-head h2{text-transform:uppercase; letter-spacing:1.5px;}
[data-theme="web0"] .hero h1,[data-theme="web0"] .page-hero h1,[data-theme="web0"] .cta h2{text-shadow:0 0 12px rgba(255,60,60,.45); text-transform:uppercase; letter-spacing:1px;}
[data-theme="web0"] .gel:hover{filter:none; background:#ff3b3b; color:#180000;}
[data-theme="web0"] .nav a.active{color:#180000;}
[data-theme="web0"] .logo .orb,[data-theme="web0"] .foot-grid .brand .orb{background:#180000; box-shadow:0 0 0 1px #b3181a; border-radius:0; filter:grayscale(.2);}
[data-theme="web0"] .theme-select option{color:#ff5555; background:#180000;}

/* ============================================================
   THEME: Web 1 — Windows 98 / GeoCities
   ============================================================ */
[data-theme="web1"]{
  --bg:#008080;
  --font-body:Tahoma,"MS Sans Serif",Geneva,Verdana,Arial,sans-serif;
  --font-num:"Arial Black",Arial,sans-serif;
  --txt:#000; --muted:#222; --faint:#555;
  --panel-bg:#c0c0c0; --panel-border:#c0c0c0; --panel-radius:0;
  --panel-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --head-bg:linear-gradient(90deg,#000080,#1084d0); --head-txt:#fff; --head-border:transparent; --head-weight:700;
  --tile-bg:#c0c0c0; --tile-border:#c0c0c0; --tile-radius:0;
  --tile-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --btn-bg:#c0c0c0; --btn-txt:#000; --btn-radius:0; --btn-tshadow:none;
  --btn-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --btn-ghost-bg:#c0c0c0; --btn-ghost-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --field-bg:#fff; --field-border:#808080; --field-txt:#000;
  --pill-bg:#c0c0c0; --pill-border:#808080; --pill-active-bg:#000080; --pill-active-txt:#fff; --pill-active-border:#000080;
  --pill-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --accent:#000080; --accent-txt:#fff; --accent-glow:transparent;
  --amber:#9a5a00; --cool:#0a3fb0; --hot:#c0301a; --green:#0a7a1a;
  --big-color:#000080; --big-spacing:-1px; --big-weight:900;
  --scroll-thumb:#c0c0c0; --scroll-track:#dfdfdf;
}
[data-theme="web1"] .panel{border:0;}
[data-theme="web1"] .card > .head{border-radius:0; padding:5px 10px; margin:3px 3px 0;}
[data-theme="web1"] .card > .head h3{color:#fff;}
[data-theme="web1"] .card > .head .sub{color:#c9d6ff;}
[data-theme="web1"] .logo h1,[data-theme="web1"] .foot-grid .brand b{font-family:"Comic Sans MS","Comic Sans",cursive; color:#000080; text-shadow:1px 1px #fff;}
[data-theme="web1"] .logo .orb,[data-theme="web1"] .foot-grid .brand .orb{border-radius:0; background:#000080; box-shadow:inset -1px -1px #000, inset 1px 1px #6a6aff;}
[data-theme="web1"] .field{box-shadow:inset 1px 1px #808080, inset -1px -1px #fff; border-radius:0;}
[data-theme="web1"] .form-row input,[data-theme="web1"] .form-row textarea{box-shadow:inset 1px 1px #808080, inset -1px -1px #fff; border-radius:0; border-color:#808080;}
[data-theme="web1"] .gel:hover{filter:none;}
[data-theme="web1"] .gel:active{transform:none; box-shadow:inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;}
[data-theme="web1"] .theme-select{border-radius:0; box-shadow:inset 1px 1px #808080, inset -1px -1px #fff;}
[data-theme="web1"] .pill,[data-theme="web1"] .nav a{border-radius:0;}
[data-theme="web1"] .hero h1,[data-theme="web1"] .page-hero h1,[data-theme="web1"] .cta h2{color:#000080;}
[data-theme="web1"] .eyebrow{color:#000080;}
[data-theme="web1"] a.feature .more,[data-theme="web1"] .step::before{color:#000080;}

/* ============================================================
   THEME: Web 3 — sleek modern (glass)
   ============================================================ */
[data-theme="web3"]{
  --bg: radial-gradient(1200px 800px at 12% -10%, #241a3a 0%, rgba(0,0,0,0) 52%), radial-gradient(1100px 700px at 100% 0%, #0f2a44 0%, rgba(0,0,0,0) 50%), #0a0b10;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-num:var(--font-body);
  --txt:#eef1f6; --muted:#9aa3b2; --faint:#697084;
  --panel-bg:rgba(255,255,255,.045); --panel-border:rgba(255,255,255,.09); --panel-radius:20px;
  --panel-shadow:0 24px 70px -34px rgba(0,0,0,.9);
  --head-bg:transparent; --head-txt:var(--txt); --head-border:rgba(255,255,255,.07); --head-weight:700;
  --tile-bg:rgba(255,255,255,.04); --tile-border:rgba(255,255,255,.08); --tile-radius:16px; --tile-shadow:none;
  --btn-bg:linear-gradient(180deg,#ff6470,#e8384a); --btn-txt:#fff; --btn-radius:12px; --btn-tshadow:none;
  --btn-shadow:0 8px 22px -10px rgba(255,90,106,.7);
  --btn-ghost-bg:rgba(255,255,255,.06); --btn-ghost-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  --field-bg:rgba(255,255,255,.05); --field-border:rgba(255,255,255,.1); --field-txt:var(--txt);
  --pill-bg:rgba(255,255,255,.05); --pill-border:rgba(255,255,255,.09); --pill-shadow:none; --pill-active-bg:#ff5a6a; --pill-active-txt:#fff; --pill-active-border:transparent;
  --accent:#ff5a6a; --accent-txt:#fff; --accent-glow:rgba(255,90,106,.5);
  --amber:#ffcf5c; --cool:#7cc4ff; --hot:#ff7a5c; --green:#5fd39a;
  --big-color:#f4f7fb; --big-spacing:-2px; --big-weight:600;
  --scroll-thumb:rgba(255,255,255,.18); --scroll-track:rgba(255,255,255,.04);
}
[data-theme="web3"] .panel{backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);}
[data-theme="web3"] .logo h1{letter-spacing:-.8px;}
[data-theme="web3"] .hero h1,[data-theme="web3"] .page-hero h1{letter-spacing:-1.5px;}
[data-theme="web3"] .theme-select option{color:#000; background:#fff;}

/* ---------- hero background photo (index) ----------
   A legibility gradient sits over the image so headline text stays readable.
   Drop a file named hero.jpg next to this stylesheet. Placed after the theme
   blocks so the base rule overrides the default .panel background, and each
   theme can tune the overlay for its own text color. */
.hero-photo{
  background:
    linear-gradient(90deg, rgba(8,10,14,.94) 0%, rgba(8,10,14,.78) 46%, rgba(8,10,14,.45) 100%),
    linear-gradient(0deg, rgba(8,10,14,.55), rgba(8,10,14,.15)),
    url("hero.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero-photo .lead{color:#d7dee8;}
/* Web 0: keep the terminal panel look rather than a photo */
[data-theme="web0"] .hero-photo{background:var(--panel-bg);}
[data-theme="web0"] .hero-photo .lead{color:var(--muted);}
/* Web 1 is a light theme, so force light hero text over the photo */
[data-theme="web1"] .hero-photo h1{color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.65);}
[data-theme="web1"] .hero-photo .lead{color:#eef1f6;}
[data-theme="web1"] .hero-photo .eyebrow{color:#ffcf9a;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .nav-toggle{display:inline-block; order:3;}
  .theme-select{order:2;}
  .nav{display:none; order:4; flex-basis:100%; flex-direction:column; align-items:stretch; gap:2px;}
  .nav.open{display:flex;}
  .nav a{padding:12px 13px;}
  .hero{padding:32px 24px;}
  .deflist .row{grid-template-columns:1fr;}
  .deflist .row .t{margin-bottom:2px;}
  .split{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .foot-legal{flex-direction:column;}
}