:root{
  --bg:#120b0c;
  --bg-2:#1a0f10;
  --surface:#1d1213;
  --surface-2:#281819;
  --line:#3d2723;
  --bone:#efe6d8;
  --muted:#b6a799;
  --ember:#ff6b2c;
  --amber:#ffb24a;
  --ice:#8fc3d9;
  --on-ember:#1a0a06;
  --f-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --f-body:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:radial-gradient(90% 55% at 50% -8%,#3b1512 0%,rgba(59,21,18,0) 70%) no-repeat,var(--bg);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit}
h1,h2,h3,p{margin:0}
h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.mono{font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.wrap{
  width:100%;max-width:1200px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-block:8px}
.brand{display:flex;align-items:center;text-decoration:none;min-width:0}
.brand img{display:block;height:50px;width:auto;max-width:100%}
.nav-r{display:flex;align-items:center;gap:12px;min-width:0}
.badge{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);border:1px solid color-mix(in srgb,var(--ember) 45%,var(--line));
  background:color-mix(in srgb,var(--ember) 9%,transparent);padding:7px 12px;border-radius:2px;
}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.links{display:flex;gap:8px}
.links a{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:9px 14px;border:1px solid var(--line);border-radius:2px;color:var(--bone);text-align:center;white-space:nowrap;
  transition:border-color .2s,background .2s,color .2s;
}
.links a:hover{border-color:var(--ember)}
.links a.cta{background:var(--ember);border-color:var(--ember);color:var(--on-ember);font-weight:500}
.links a.cta:hover{background:var(--amber);border-color:var(--amber)}
.links a.cta.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ember)}
#navFollow svg{display:none;width:18px;height:18px;fill:currentColor}
@media (max-width:900px){.badge{display:none}}
@media (max-width:560px){
  .nav-in{flex-wrap:nowrap;justify-content:space-between;gap:8px}
  .nav-r{flex:0 0 auto}
  .links{display:flex;align-items:center;gap:6px}
  .links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px;font-size:11px;letter-spacing:.06em}
  #navFollow{width:44px;padding:10px}
  #navFollow .follow-label{display:none}
  #navFollow svg{display:block}
  .brand{flex:0 1 auto}
  .brand img{height:44px;width:auto}
}

/* ---------- Views ---------- */
.view{display:block}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(26px,4vw,52px) 8px;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice);
}
.eyebrow::before,.eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.title{position:relative;z-index:2;pointer-events:none;margin-top:14px;line-height:.8;text-transform:uppercase;font-family:var(--f-display);font-weight:900}
.title .until{
  display:block;font-size:clamp(34px,8vw,92px);letter-spacing:.34em;margin-right:-.34em;
  color:transparent;-webkit-text-stroke:1.5px var(--bone);
}
.title .zero{
  --sx:0px;--sy:3px;
  display:block;font-size:clamp(104px,27vw,320px);letter-spacing:.01em;margin-top:.04em;color:var(--bone);
  text-shadow:
    calc(var(--sx)*1) calc(var(--sy)*1) 0 #e0551f,
    calc(var(--sx)*2) calc(var(--sy)*2) 0 #cc4a1a,
    calc(var(--sx)*3) calc(var(--sy)*3) 0 #b84016,
    calc(var(--sx)*4) calc(var(--sy)*4) 0 #9f3713,
    calc(var(--sx)*5) calc(var(--sy)*5) 0 #852e10,
    calc(var(--sx)*6) calc(var(--sy)*6) 0 #6b250d,
    calc(var(--sx)*7) calc(var(--sy)*7) 0 #521c09,
    calc(var(--sx)*8) calc(var(--sy)*8) 0 #3b1407,
    calc(var(--sx)*9) calc(var(--sy)*9) 26px rgba(255,107,44,.38);
  transition:text-shadow .12s linear;
}
.tagline{position:relative;z-index:3;margin-top:clamp(6px,1.4vw,14px);font-family:var(--f-mono);font-size:clamp(11px,2.6vw,14px);letter-spacing:.32em;color:var(--amber);text-transform:uppercase}

.stage{
  position:relative;height:clamp(340px,60vw,640px);margin-top:clamp(-96px,-8vw,-30px);
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 52%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 52%,transparent 100%);
}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.stage.dragging canvas{cursor:grabbing}
.stage.nogl::before{
  content:"";position:absolute;left:50%;top:50%;width:min(62%,420px);aspect-ratio:1;max-width:100%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 70% 35%,#ff9a4a 0%,#c4431a 22%,#3a1a1c 55%,#10202b 100%);box-shadow:0 0 90px rgba(255,107,44,.45);
}
.hint{
  position:absolute;right:6%;bottom:16%;z-index:2;pointer-events:none;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.hint svg{width:18px;height:18px}
@media (max-width:640px){.hint{right:auto;left:50%;transform:translateX(-50%);bottom:10%;white-space:nowrap}}

.count{position:relative;z-index:3;margin:-4px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.count > .mono{font-size:11px;color:var(--muted);letter-spacing:.26em}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,92px));gap:8px;justify-content:center;width:100%}
.tile{border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 80%,transparent);padding:10px 4px 8px;border-radius:3px}
.tile b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(34px,9vw,52px);line-height:1;font-variant-numeric:tabular-nums}
.tile span{display:block;margin-top:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}

.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border:1px solid var(--ember);border-radius:3px;
  background:var(--ember);color:var(--on-ember);font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.btn:hover{background:var(--amber);border-color:var(--amber)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ember);background:color-mix(in srgb,var(--ember) 10%,transparent)}
.btn.sm{min-height:40px;padding:9px 16px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(34px,5vw,60px);border-block:1px solid var(--line)}
.stat{padding:22px 12px;text-align:center;border-left:1px solid var(--line);min-width:0}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(40px,6vw,68px);line-height:1;color:var(--bone);font-variant-numeric:tabular-nums}
.stat b.sm{font-size:clamp(30px,4.4vw,50px);padding-block:clamp(4px,.9vw,10px)}
.stat span{display:block;margin-top:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
@media (max-width:700px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(54px,8vw,110px) 0}
.sec-h{max-width:760px}
.sec-h .eyebrow{justify-content:flex-start}
.sec-h .eyebrow::before{display:none}
.sec-h h2{margin-top:14px;font-family:var(--f-display);font-weight:900;font-size:clamp(38px,6.4vw,76px);line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.sec-h p{margin-top:16px;color:var(--muted);max-width:58ch;font-size:17px}

.grid{display:grid;gap:14px;margin-top:34px}
.g-months{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.g-facts{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.card{
  position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:22px 20px 24px;
}
.tilt{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out,border-color .2s;transform-style:preserve-3d;will-change:transform;
}
.tilt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--ember) 20%,transparent),transparent 62%);
}
.tilt:hover{border-color:color-mix(in srgb,var(--ember) 70%,var(--line))}
.tilt:hover::after{opacity:1}

.month .no{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between;gap:8px}
.month h3{margin-top:14px;font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.02em;transform:translateZ(24px)}
.month p{margin-top:10px;color:var(--muted);font-size:15px}
.month.now{border-color:var(--ember);background:linear-gradient(180deg,color-mix(in srgb,var(--ember) 14%,var(--surface)),var(--surface))}
.month.now .no em{font-style:normal;color:var(--ice)}
.month.last h3{color:var(--ember)}

/* Collection */
.fact .lab{display:block;font-size:11px;letter-spacing:.22em;color:var(--muted)}
.fact b{display:block;margin-top:14px;font-family:var(--f-display);font-weight:900;font-size:clamp(56px,9vw,104px);line-height:.9;text-transform:uppercase;color:var(--bone);transform:translateZ(30px)}
.fact:nth-child(even) b{color:var(--ember)}
.fact p{margin-top:12px;color:var(--muted);font-size:15px}
.about{margin-top:26px;max-width:68ch;color:var(--muted);font-size:17px}
.about strong{color:var(--bone);font-weight:600}

.band{
  margin-top:clamp(54px,8vw,110px);padding:clamp(28px,5vw,56px) clamp(18px,4vw,48px);border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--ember) 18%,var(--surface)),var(--surface) 62%);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.band h2{font-family:var(--f-display);font-weight:900;font-size:clamp(34px,5.4vw,60px);line-height:.95;text-transform:uppercase;max-width:18ch}
.band p{margin-top:12px;color:var(--muted);max-width:46ch}
.band .cta-row{margin:0;justify-content:flex-start}

/* ---------- Bunker page ---------- */
.page{padding-block:clamp(34px,6vw,76px) 0}
.formcard{margin-top:44px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:clamp(18px,3.4vw,34px);max-width:860px}
.tag{font-size:11px;color:var(--ember);letter-spacing:.2em}
.fc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:10px}
.fc-head h3{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,4.4vw,42px);line-height:1;text-transform:uppercase}
input[type=text],textarea{
  font:inherit;font-size:15px;color:var(--bone);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:11px 12px;min-width:0;
}
textarea{width:100%;resize:vertical;min-height:110px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
::placeholder{color:#7d6e63}
.err{font-size:11.5px;letter-spacing:.06em;color:var(--amber);text-transform:none;font-family:var(--f-mono)}
.fields{display:grid;grid-template-columns:1fr;gap:18px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{width:100%}
.field input[aria-invalid="true"]{border-color:var(--amber)}
.lab-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.chip{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color .15s;
}
.chip.bad{color:var(--amber)}
.chip.ok{color:var(--ice)}
.field input.ok{border-color:var(--ice)}
.field input.bad{border-color:var(--amber)}
.meter{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--muted);transition:width .12s linear,background .15s}
.meter.ok i{background:var(--ice)}
.meter.bad i{background:var(--amber)}
.live{min-height:1.4em;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.live.ok{color:var(--ice)}
.live.bad{color:var(--amber)}
.fc-foot{border-top:1px solid var(--line);margin-top:26px;padding-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.fc-foot .muted{font-size:11px;color:var(--muted);letter-spacing:.1em}
.result{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.result .st{font-family:var(--f-display);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.02em;color:var(--ice)}
.result .sd{margin-top:6px;color:var(--muted);font-size:14.5px}
.result textarea{margin-top:14px;min-height:96px}
.result .ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* ---------- Footer & toast ---------- */
.foot{margin-top:clamp(60px,9vw,120px);border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:26px calc(30px + env(safe-area-inset-bottom,0px));font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;max-width:calc(100% - 32px);
  background:var(--bone);color:var(--bg);padding:11px 18px;border-radius:3px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}