:root{
  --bg:#050908;
  --bg-soft:#08110d;
  --panel:#07100b;
  --panel-2:#0b1711;
  --line:#183022;
  --line-soft:rgba(40,92,62,.25);
  --amber:#f4b44a;
  --amber-soft:#ffcf78;
  --green:#74ff86;
  --red:#d13f32;
  --text:#d8decf;
  --muted:#7d8b7f;
  --chrome:#122317;
  --shadow:0 0 0 1px rgba(137,255,164,.08), 0 0 24px rgba(11,25,16,.65), inset 0 0 0 1px rgba(255,186,82,.04);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top, rgba(32,66,44,.24), transparent 32%),
    linear-gradient(180deg, #07100d 0%, #040706 100%);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
.grid-overlay{
  position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,49,31,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,49,31,.18) 1px, transparent 1px);
  background-size:48px 48px; opacity:.25;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.25));
}
.site-header{
  position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:18px 28px; backdrop-filter:blur(12px); background:rgba(3,7,6,.74);
  border-bottom:1px solid rgba(239,180,72,.18);
}
.brand{text-decoration:none;color:var(--text);display:grid;gap:2px}
.brand-main{font-family:Orbitron,sans-serif;font-size:.92rem;letter-spacing:.18em;color:var(--amber)}
.brand-sub{font-size:.68rem;letter-spacing:.26em;color:var(--muted)}
.site-nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{color:var(--text);text-decoration:none;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.site-nav a:hover{color:var(--amber)}
main{padding-bottom:40px}
.panel{
  padding:84px 7vw 56px;
  display:grid;
  align-items:center;
}
.hero{grid-template-columns:1.05fr .95fr; gap:42px; min-height:86svh}
.eyebrow{margin:0 0 14px; text-transform:uppercase; letter-spacing:.24em; color:var(--green); font-size:.74rem}
h1,h2,h3,.price-tag{font-family:Orbitron,sans-serif;font-weight:700}
h1{margin:0; line-height:1; font-size:clamp(2.6rem, 6vw, 5.4rem); letter-spacing:.04em; color:#f2f3e9; text-transform:uppercase}
h2{margin:0 0 14px; line-height:1.05; font-size:clamp(1.8rem,3.1vw,3rem); text-transform:uppercase; color:#eef4e6}
h3{margin:0 0 12px; font-size:1.02rem; color:var(--amber); letter-spacing:.12em; text-transform:uppercase}
p, li{line-height:1.65; color:#b8c0b3; font-size:1rem}
.hero-actions,.button-row{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 18px; text-decoration:none;
  border-radius:999px; text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; font-weight:700;
  border:1px solid transparent; cursor:pointer; background:none;
}
.btn-primary{
  background:linear-gradient(180deg, rgba(255,194,94,.18), rgba(255,175,53,.08));
  color:var(--amber); border-color:rgba(244,180,74,.45);
  box-shadow:0 0 22px rgba(244,180,74,.14), inset 0 0 0 1px rgba(255,255,255,.03);
}
.btn-secondary{color:#dfe8d9; border-color:rgba(126,255,160,.18); background:rgba(11,24,17,.62)}
.btn-danger{color:#ffd7cf; border-color:rgba(209,63,50,.4); background:rgba(45,11,8,.55)}
.btn.full{width:100%}
.signal-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:780px}
.signal-card,.tile,.feature-box,.cta-card,.dashboard-shell,.gallery-card,.blog-card,.form-shell{
  background:linear-gradient(180deg, rgba(8,18,12,.92), rgba(7,14,10,.84));
  border:1px solid rgba(81,129,95,.22); box-shadow:var(--shadow); border-radius:20px;
}
.signal-card{padding:16px 18px}
.signal-card .label{display:block; font-size:.72rem; color:var(--muted); letter-spacing:.16em; margin-bottom:6px}
.signal-card strong{color:var(--amber-soft); font-size:1rem}
.chrome{border-radius:28px; position:relative; overflow:hidden}
.chrome:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,188,72,.06), transparent 14%, transparent 86%, rgba(125,255,134,.04));
}
.product-shot{padding:22px}
.product-shot img{border-radius:22px; box-shadow:0 18px 50px rgba(0,0,0,.45)}
.tile-grid,.gallery-grid,.blog-grid,.three-grid,.cta-grid{display:grid; gap:18px}
.tile-grid{grid-template-columns:repeat(12,1fr)}
.tile{padding:22px}
.tile.wide{grid-column:span 7}
.tile.tall{grid-column:span 5}
.tile.product-preview{grid-column:span 7}
.tile:not(.wide):not(.tall):not(.product-preview){grid-column:span 4}
.inline-product-image{border-radius:18px; margin:16px 0}
.list-clean{padding-left:18px}
.split-panel{grid-template-columns:1fr 1fr; gap:28px}
.dashboard-shell{padding:20px}
.mock-dashboard{
  border-radius:20px; border:1px solid rgba(53,96,68,.28); padding:18px;
  background:radial-gradient(circle at center, rgba(19,44,28,.28), rgba(5,12,8,.95) 70%);
}
.dash-top,.footer-readout{display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:.75rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase}
.badge{padding:6px 10px; border-radius:999px; border:1px solid rgba(244,180,74,.24); color:var(--amber)}
.freq{margin-top:18px; text-align:center; font-family:Orbitron,sans-serif; font-size:clamp(4rem,9vw,6rem); color:var(--amber); text-shadow:0 0 16px rgba(244,180,74,.22)}
.freq-sub{text-align:center; color:#899687; letter-spacing:.22em; text-transform:uppercase; font-size:.72rem}
.scanner{position:relative; height:140px; margin:24px 0 18px; border-radius:18px; border:1px solid rgba(53,96,68,.28); overflow:hidden;
  background:
    linear-gradient(rgba(18,55,35,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,55,35,.12) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(19,44,28,.28), rgba(5,12,8,.95) 70%);
  background-size:24px 24px,24px 24px,100% 100%;
}
.scanner-line{position:absolute; inset:0 auto 0 58%; width:3px; background:linear-gradient(180deg, transparent, rgba(89,228,255,.98), transparent); box-shadow:0 0 18px rgba(73,210,255,.72)}
.scanner-bars{position:absolute; bottom:0; left:0; right:0; display:flex; align-items:flex-end; gap:6px; padding:14px}
.scanner-bars span{flex:1; background:linear-gradient(180deg, rgba(244,180,74,.95), rgba(131,90,17,.45)); border-radius:6px 6px 0 0}
.metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.metric{padding:14px; border-radius:16px; background:rgba(7,14,10,.9); border:1px solid rgba(82,127,94,.2); text-align:center}
.metric span{display:block; color:var(--muted); font-size:.66rem; letter-spacing:.16em; margin-bottom:10px; text-transform:uppercase}
.metric strong{font-size:2rem; color:var(--amber)}
.metric strong.green{color:var(--green)}
.presence-bar{height:14px; border-radius:999px; border:1px solid rgba(87,128,91,.28); background:#07120c; overflow:hidden; margin:16px 0 12px}
.presence-bar span{display:block; width:64%; height:100%; background:linear-gradient(90deg,var(--green), #d9ff86, #ff7652); box-shadow:0 0 18px rgba(116,255,134,.22)}
.feature-box,.cta-card,.gallery-card,.blog-card,.form-shell{padding:22px}
.three-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.price-tag{font-size:2.2rem; color:var(--amber); margin:8px 0 16px}
.kicker{font-size:.84rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green)}
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-card img{aspect-ratio:4/3; object-fit:cover; border-radius:16px; margin-bottom:14px}
.note{font-size:.92rem; color:var(--muted)}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.blog-meta{display:block; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:10px}
.feature-list{display:grid; gap:12px}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:10px}
.dot.amber{background:var(--amber)} .dot.green{background:var(--green)} .dot.red{background:var(--red)}
.demo-frame{min-height:760px; border-radius:22px; overflow:hidden; border:1px solid rgba(81,129,95,.22); box-shadow:var(--shadow); background:#060809}
.demo-frame iframe{width:100%; min-height:760px; border:0}
.video-placeholder{
  min-height:360px; border-radius:22px; position:relative; overflow:hidden; display:grid; place-items:center;
  background:
    linear-gradient(180deg, rgba(6,12,9,.6), rgba(6,12,9,.72)),
    url('spiritbox-hero.jpg') center/cover no-repeat;
  border:1px solid rgba(244,180,74,.18);
}
.video-overlay{padding:26px; max-width:720px}
.video-play{width:74px; height:74px; border-radius:50%; border:1px solid rgba(244,180,74,.38); display:grid; place-items:center; margin-bottom:18px; background:rgba(7,14,10,.72)}
.video-play:before{content:""; width:0; height:0; border-top:16px solid transparent; border-bottom:16px solid transparent; border-left:24px solid var(--amber)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:grid; gap:8px}
label span{font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.15em}
input,textarea,select{
  width:100%; border-radius:14px; border:1px solid rgba(82,127,94,.24); background:rgba(4,10,7,.88); color:var(--text);
  padding:14px 14px; font:inherit;
}
textarea{min-height:120px; resize:vertical}
.form-status{margin-top:14px; min-height:24px; color:var(--green); font-weight:600}
.site-footer{
  display:flex; justify-content:space-between; gap:12px; align-items:center; padding:20px 7vw 34px;
  border-top:1px solid rgba(239,180,72,.14); color:var(--muted); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
}
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:1000; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 20px; border-radius:20px; border:1px solid rgba(244,180,74,.28);
  background:linear-gradient(180deg, rgba(9,18,13,.98), rgba(7,12,9,.96));
  box-shadow:0 0 0 1px rgba(137,255,164,.06), 0 14px 40px rgba(0,0,0,.45); backdrop-filter:blur(10px);
}
.cookie-banner[hidden]{display:none !important}
.cookie-copy strong{display:block; margin-bottom:6px; color:var(--amber); font-family:Orbitron,sans-serif; letter-spacing:.08em; text-transform:uppercase}
.cookie-copy p{margin:0; max-width:70ch; color:#b8c0b3; line-height:1.55; font-size:.96rem}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap}
.small{font-size:.92rem}
.helper{font-size:.9rem; color:var(--muted)}
.file-list{padding-left:18px}
@media (max-width: 1100px){
  .hero,.split-panel,.three-grid,.cta-grid,.gallery-grid,.blog-grid{grid-template-columns:1fr}
  .tile-grid{grid-template-columns:1fr}
  .tile,.tile.wide,.tile.tall,.tile.product-preview{grid-column:span 1}
}
@media (max-width: 760px){
  .site-header{padding:14px 16px}
  .site-nav{gap:10px}
  .panel{padding:76px 5vw 42px}
  .signal-row,.metrics,.form-grid{grid-template-columns:1fr}
  .cookie-banner{left:12px; right:12px; bottom:12px; padding:14px}
  .cookie-actions{width:100%}
  .cookie-actions .btn{flex:1}
  .site-footer{flex-direction:column; align-items:flex-start}
}


/* v2 fixes */
.demo-shell{
  width:100%;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(8,18,12,.92), rgba(7,14,10,.84));
  border:1px solid rgba(81,129,95,.22);
  box-shadow:var(--shadow);
}
.demo-frame{
  width:100%;
  height:760px;
  min-height:760px;
  display:block;
  border:0;
  border-radius:22px;
  overflow:hidden;
  background:#060809;
}
.prototype-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.prototype-card{
  background:linear-gradient(180deg, rgba(8,18,12,.92), rgba(7,14,10,.84));
  border:1px solid rgba(81,129,95,.22);
  box-shadow:var(--shadow);
  border-radius:20px;
  padding:18px;
}
.prototype-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:14px;
}
@media (max-width: 1100px){
  .prototype-grid{grid-template-columns:1fr;}
}


/* mobile + hardware table fixes */
.hardware-panel-wrap .section-head{margin-bottom:18px}
.hardware-panel{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:20px;
  padding:20px;
  background:linear-gradient(180deg, rgba(8,18,12,.92), rgba(7,14,10,.84));
  border:1px solid rgba(81,129,95,.22);
  box-shadow:var(--shadow);
}
.hardware-media{min-width:0}
.hardware-main-image{
  width:100%;
  max-width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.hardware-table{
  display:grid;
  gap:0;
  border:1px solid rgba(81,129,95,.22);
  border-radius:18px;
  overflow:hidden;
  min-width:0;
}
.hardware-row{
  display:grid;
  grid-template-columns:minmax(180px, 220px) 1fr;
  background:rgba(5,12,9,.74);
  border-bottom:1px solid rgba(81,129,95,.16);
}
.hardware-row:last-child{border-bottom:0}
.hardware-key{
  padding:16px 18px;
  color:var(--amber);
  font-family:Orbitron,sans-serif;
  font-size:.84rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(12,24,16,.85);
  border-right:1px solid rgba(81,129,95,.16);
}
.hardware-value{
  padding:16px 18px;
  color:#c1cabd;
  line-height:1.6;
}
.prototype-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.prototype-card img{
  width:100%;
  max-width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:16px;
}
.gallery-card img,
.product-shot img,
.inline-product-image{
  width:100%;
  max-width:100%;
  height:auto;
}
.demo-shell{width:100%}
.demo-frame{
  width:100%;
  height:760px;
  min-height:760px;
  display:block;
  border:0;
}
.form-status{margin-top:12px; min-height:24px}
.is-submitting{opacity:.82}
@media (max-width: 1100px){
  .hardware-panel,
  .hero,
  .split-panel,
  .three-grid,
  .cta-grid,
  .gallery-grid,
  .blog-grid{
    grid-template-columns:1fr;
  }
  .prototype-grid{grid-template-columns:1fr}
  .demo-frame{height:640px; min-height:640px}
}
@media (max-width: 768px){
  .panel{padding:72px 5vw 44px}
  .site-header{padding:14px 16px}
  .site-nav{gap:10px}
  .site-nav a{font-size:.74rem}
  .signal-row{grid-template-columns:1fr}
  .hero-actions,.button-row,.doc-actions{flex-direction:column}
  .btn{width:100%}
  .hardware-panel{padding:14px}
  .hardware-row{grid-template-columns:1fr}
  .hardware-key{border-right:0;border-bottom:1px solid rgba(81,129,95,.16)}
  .doc-grid,.reserve-grid,.form-grid{grid-template-columns:1fr !important}
  .quickstart-panel .doc-grid{grid-template-columns:1fr !important}
  .dashboard-shell,.form-shell,.feature-box,.cta-card,.gallery-card,.blog-card{padding:16px}
  h1{font-size:clamp(2.2rem, 10vw, 3.4rem)}
  h2{font-size:clamp(1.4rem, 6vw, 2rem)}
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 40px;
}

.hero-right {
  display: flex;
  justify-content: center;
}

.countdown-card {
  border: 1px solid rgba(244,180,74,0.2);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  background: rgba(10,20,15,0.6);
  box-shadow: 0 0 25px rgba(244,180,74,0.08);
}

.countdown-label {
  letter-spacing: .2em;
  font-size: 0.8rem;
  opacity: 0.6;
  margin-bottom: 20px;
}

.countdown-display {
  display: flex;
  gap: 15px;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
}

.countdown-display div {
  text-align: center;
}

.countdown-display span {
  font-size: 2rem;
  color: #f4b44a;
  display: block;
  text-shadow: 0 0 10px rgba(244,180,74,0.4);
}

.countdown-display small {
  font-size: 0.7rem;
  opacity: 0.6;
}

.countdown-note {
  margin-top: 20px;
  font-size: 0.85rem;
  opacity: 0.6;
}

@media(max-width:900px){
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-right {
    margin-top: 30px;
  }
}
.hero {
  display: flex;
  justify-content: center;
  padding: 80px 20px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1200px;
}

.hero-left {
  text-align: left;
}

.hero-right {
  display: flex;
  justify-content: center;
}