:root{
  --bg:#0e1218; --panel:#161b23; --border:#262e3a; --btn:#1b212b;
  --text:#e8eaed; --muted:#8b94a3; --subtle:#aeb6c2;
  --accent:#e8731c; --accent-ink:#231003; --green:#7fcf9b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'DejaVu Sans',-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}

/* page-width column */
.site-header,.site-main,.site-footer{ width:100%; max-width:980px; margin:0 auto; padding-left:24px; padding-right:24px; }

/* header */
.site-header{ padding-top:16px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; }
.brand{display:flex; flex-direction:column; line-height:1.1}
.brand-main{font-size:21px; font-weight:bold; color:var(--text)}
.brand-sub{font-size:12px; color:var(--muted); letter-spacing:.04em}
.topbar-right{display:flex; align-items:center; gap:12px}
.who{color:var(--muted); font-size:14px}
.nav-login{border:1px solid var(--accent); border-radius:8px; padding:7px 15px; color:var(--accent)!important; font-size:14px}
.nav-login:hover{background:var(--accent); color:var(--accent-ink)!important; text-decoration:none}
.navbar{ display:flex; gap:6px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:6px; }
.navbar a{ color:var(--subtle); padding:9px 16px; border-radius:7px; font-size:15px; }
.navbar a:hover{ background:var(--btn); color:var(--text); text-decoration:none; }

/* main */
.site-main{ flex:1; padding-top:28px; padding-bottom:32px; }
h1{font-size:34px; margin:.2em 0} h2{font-size:24px; margin:1.5em 0 .5em} h3{font-size:18px}
.lead{font-size:18px; color:var(--subtle); max-width:60ch}
.tag{display:inline-block; font-size:13px; color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:3px 12px; margin-bottom:12px}

/* hero */
.hero{display:flex; gap:34px; align-items:flex-start; flex-wrap:wrap; padding:10px 0 6px}
.hero-text{flex:1 1 300px}
.hero-text h1{margin-top:0}
.hero-phone{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto}
.hero-cap{font-size:12px; color:var(--muted)}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.btn{display:inline-block; border-radius:10px; padding:12px 22px; font-weight:bold; font-size:16px}
.btn-primary{background:var(--accent); color:var(--accent-ink)!important}
.btn-primary:hover{filter:brightness(1.08); text-decoration:none}
.btn-ghost{border:1px solid var(--border); color:var(--text)!important; background:var(--panel)}
.btn-ghost:hover{border-color:var(--accent); text-decoration:none}

/* cards / sections */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px 18px}
.card h3{margin-top:0; color:var(--accent)}
.placeholder{border:1px dashed var(--border); border-radius:12px; padding:20px; color:var(--muted); background:#11161d; margin:14px 0}
.notice{border-left:3px solid var(--accent); background:#191b1a; padding:10px 16px; border-radius:0 8px 8px 0; margin:18px 0; color:var(--subtle)}

/* ── phone frame: life-size 75×155 mm. RULES: no scaling; ~5px pad all around;
   everything fits with NO scroll; only car/logo/knob keep a locked aspect. ── */
.phone{ width:75mm; height:155mm; max-width:90vw; background:#05070a; border:7px solid #11151b; border-radius:34px; padding:6px; box-shadow:0 12px 34px rgba(0,0,0,.45); overflow:hidden; flex:0 0 auto; }
.phone-screen{ width:100%; height:100%; overflow:hidden; border-radius:27px;
  background:linear-gradient(168deg,#1c2b46 0%, #122036 52%, #0d1726 100%); }
.rig-content{ width:100%; height:100%; padding:5px; display:flex; flex-direction:column; gap:3px; color:#eaf0f7; line-height:1.15; }

/* ── header + footer — IDENTICAL for both tiers; logo to top-left, ✕ to top-right ── */
.rig-top{display:flex; align-items:flex-start; justify-content:space-between; gap:6px}
.rig-brand{min-width:0; display:flex; flex-direction:column; line-height:1.04}
.rig-logo-img{height:21px; display:block}
.rig-sub{font-size:9px; color:#9fb2cb; white-space:nowrap; margin-top:2px}
.rig-top-btns{display:flex; align-items:center; gap:4px; flex-shrink:0}
.rig-pill{font-size:8.5px; color:#c3d3e8; background:#22324a; border:1px solid #38496a; border-radius:10px; padding:3px 6px; white-space:nowrap}
.rig-conn{font-size:8.5px; color:var(--green); background:#13301f; border:1px solid #2e6043; border-radius:10px; padding:3px 6px; white-space:nowrap}
.rig-x{font-size:11px; color:#c3d3e8; background:#22324a; border:1px solid #38496a; border-radius:7px; padding:1px 6px; line-height:1.3}
.rig-vehset{text-align:right; font-size:9.5px; color:var(--accent); font-weight:bold}
.rig-legend{display:flex; justify-content:space-between; font-size:11px; font-weight:bold}
.odot{color:var(--accent)}
.lg-active{color:var(--accent); font-weight:bold; font-size:10px}
/* car: whole car always visible, never cropped (aspect locked) */
.rig-car{display:block; width:100%; height:auto; margin:1px auto; border-radius:8px}
/* clicker container — FIXED height, identical for both tiers (so footers line up) */
.appcard{background:linear-gradient(160deg,#27374f,#1a2840); border:1px solid #38496a; border-radius:12px; padding:5px 9px; height:121px; flex:0 0 auto; display:flex; flex-direction:column}
.appcard-head{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:bold; color:#eaf0f7}
.cdot{color:var(--accent); font-size:10px}
.csub{margin-left:auto; font-size:9.5px; color:#9fb2cb; font-weight:normal}
.plabel{font-size:9.5px; color:#9fb2cb; margin:0; line-height:1}
.pchips{display:flex; gap:6px; margin-top:-2px}
.pchip{flex:1; background:#22324a; color:#c3d3e8; border:1px solid #38496a; border-radius:13px; padding:6px 0; font-size:10.5px; cursor:pointer}
.pchip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.psave{width:100%; margin-top:3px; background:transparent; color:#eaf0f7; border:1.5px solid var(--accent); border-radius:10px; padding:6px; font-size:10.5px; cursor:pointer}
.tuning{width:100%; margin-top:3px; background:#1a2840; color:#c3d3e8; border:1px solid #38496a; border-radius:10px; padding:6px; font-size:10.5px; text-align:left; cursor:pointer}
.rig-foot{text-align:center; font-size:8.5px; color:#7f93ad; margin-top:2px}

/* knob component — sized natively, no scaling. Buttons centered in their box. */
.knob-unit{ margin:1px 0 }
.knob-label{font-size:10.5px; color:#9fb2cb; margin-bottom:1px; line-height:1; text-align:left}
.knob-row{display:flex; align-items:center; justify-content:space-between; gap:6px; position:relative}
.knob-grp{display:flex; align-items:center; gap:5px}   /* −/+ kept close to the knob */
.knob-holder{display:inline-block; line-height:0}
.knob-holder .knobsvg{display:block; width:100%; height:100%}
.kbtn{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:38px; border-radius:10px; background:transparent; border:1.5px solid var(--accent); color:#eaf0f7; font-size:21px; line-height:1; cursor:pointer; transition:background .12s }
.kbtn:active,.kbtn.pressed{background:var(--accent); color:var(--accent-ink)}
.knob-val{font-size:9.5px; color:#9fb2cb; line-height:1.05; text-align:left}
.knob-val .v{font-size:30px; font-weight:800; color:#fff; line-height:1; display:block}
/* clickers fill the container and center vertically; 1 knob = R&T, 2 = TTX */
.clickers{flex:1; display:flex; align-items:center; justify-content:center; gap:8px}
.clickers .knob-unit{flex:1; min-width:0; margin:0}
/* R&T (single knob): big number left, − knob + tight on the right */
.clickers .knob-unit:only-child .knob-row{flex-direction:row; justify-content:space-between}
/* TTX (two knobs): label + number stacked on top, − knob + below, centered */
.clickers .knob-unit:not(:only-child){text-align:center}
.clickers .knob-unit:not(:only-child) .knob-label{text-align:center}
.clickers .knob-unit:not(:only-child) .knob-row{flex-direction:column; gap:2px; justify-content:center}
.clickers .knob-unit:not(:only-child) .knob-val{text-align:center}
.clickers .knob-unit:not(:only-child) .knob-val .v{font-size:17px}
.clickers .knob-unit:not(:only-child) .knob-grp{gap:3px}
.clickers .knob-unit:not(:only-child) .kbtn{width:26px; height:32px; font-size:17px; border-radius:8px}
.finger{position:absolute; bottom:-4px; right:0; font-size:30px; pointer-events:none; animation:fingerbob 1.2s ease-in-out infinite}
@keyframes fingerbob{0%,100%{transform:translateY(0)} 45%{transform:translateY(-8px)}}

/* demo: two phones */
.demo-phones{display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.demo-phone-wrap{display:flex; flex-direction:column; align-items:center; gap:10px}
.demo-phone-wrap h3{margin:0; color:var(--accent)}

/* footer + admin menu */
.site-footer{ padding-top:18px; padding-bottom:24px; border-top:1px solid var(--border); }
.admin-menu{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#1a130a; border:1px solid #5a3d12; border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.admin-tag{ font-size:12px; font-weight:bold; color:var(--accent-ink); background:var(--accent); border-radius:6px; padding:3px 8px }
.admin-menu a{color:var(--accent); font-size:14px}
.footer-main{display:flex; flex-direction:column; gap:2px; color:var(--subtle); font-size:13px}

/* forms */
.formwrap{max-width:380px; margin:24px auto; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px}
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 4px}
input{width:100%; padding:11px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:15px}
button{margin-top:18px; width:100%; background:var(--accent); color:var(--accent-ink); border:none; border-radius:10px; padding:12px; font-weight:bold; font-size:16px; cursor:pointer}
.error{color:#f0997b; font-size:14px; margin-top:10px}
.footnote{font-size:13px; color:var(--muted); margin-top:10px}