/* =========================================================
   IAM WORKS — GLASS THEME (ZP Cinema style)
   Michroma display, Manrope body, DM Mono labels,
   liquid-glass panels and red ambient light.
   Loaded after styles.css; remove the <link> to revert.
   ========================================================= */
:root{
  --display:"Michroma","Manrope",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --glass-bg:rgba(255,255,255,.035);
  --glass-bg-strong:rgba(255,255,255,.06);
  --glass-line:rgba(255,255,255,.11);
  --glass-hi:rgba(255,255,255,.14);
  --glass-blur:blur(22px) saturate(150%);
  --r-panel:30px;
  --gap:14px;
}

/* ---------- ambient light ---------- */
html{background:#050404}
body{background:transparent}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 88% 4%,rgba(227,25,43,.26),transparent 62%),
    radial-gradient(34vw 34vw at 0% 46%,rgba(193,18,31,.16),transparent 65%),
    radial-gradient(46vw 36vw at 78% 84%,rgba(227,25,43,.12),transparent 70%),
    radial-gradient(70vw 50vw at 25% 115%,rgba(94,8,16,.5),transparent 70%),
    #050404;
}

/* ---------- glass primitive ---------- */
.hero,.stats,.ticker,.num:not(.hot),.card,.detail-panel,.steps li,.crew,.qv-box,.drawer,.look,.bikes figure,.search,.chips,.nav{
  background:linear-gradient(155deg,var(--glass-bg-strong),var(--glass-bg) 55%,rgba(255,255,255,.015));
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.03),0 30px 80px -40px rgba(0,0,0,.9);
}
.look,.bikes figure{background:#0c0b0b}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.08}
.h2{font-size:clamp(24px,3vw,40px)}
.h3{font-size:clamp(19px,2vw,27px)}
.kicker{font:400 11px/1 var(--mono);letter-spacing:1.6px}
.side-word span{font-weight:400;letter-spacing:.02em}

/* ---------- buttons ---------- */
.pill-btn{font:500 11.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;gap:14px}
.pill-btn.lg{font-size:12px;height:54px;padding:0 26px}
.pill-btn.red{
  background:linear-gradient(180deg,#ff5a66 0%,var(--red-hot) 42%,#a80f1b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 34px -8px rgba(227,25,43,.6);
}
.pill-btn.red:hover{background:linear-gradient(180deg,#ff6e78 0%,#ef2435 42%,#b8121f 100%);transform:translateY(-2px)}
.pill-btn.ghost{background:rgba(255,255,255,.04);border-color:var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.pill-btn.ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.round-btn{background:rgba(255,255,255,.04);border-color:var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.link-btn{font-family:var(--body)}

/* ---------- floating glass header ---------- */
.site-head,.site-head.small{
  top:12px;margin:12px auto 0;width:min(var(--wrap),100% - var(--gut)*2);
  height:66px;padding:0 10px 0 22px;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(14,11,11,.55);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 50px -30px #000;
}
.site-head.small{height:60px}
.logo{font:400 15px/1 var(--display);letter-spacing:.04em}
.logo>b{font:400 11px var(--display);border-radius:10px;width:34px;height:34px;background:linear-gradient(180deg,#ff5a66,var(--red) 55%,#7a0a14);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.nav{padding:4px;background:rgba(255,255,255,.03);box-shadow:inset 0 1px 0 var(--glass-hi)}
.nav a{font:400 11px var(--mono);letter-spacing:1.2px;text-transform:uppercase;padding:10px 15px}
.bag-btn{height:44px}

/* ---------- hero panel ---------- */
.hero{
  margin-top:var(--gap);border-radius:var(--r-panel);
  padding:clamp(24px,3.4vw,52px);min-height:min(640px,calc(100svh - 140px));
  overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 45%,transparent 60%)}
.hero-title{font-size:clamp(38px,5.2vw,82px);line-height:1.04;letter-spacing:.02em;margin:0 0 20px}
.chrome{
  background:linear-gradient(178deg,#ffffff 0%,#f4f2f2 14%,#bdb7b7 34%,#5e5656 47%,#2a2424 50%,#ece6e6 53%,#ffffff 60%,#b4abab 78%,#ffd0d4 92%,#ff8a94 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.22);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 22px 40px rgba(227,25,43,.16));
}
.chrome.red{
  background:linear-gradient(178deg,#fff 0%,#ffc9ce 16%,#ff5a66 34%,#8e0c17 48%,#3a0408 51%,#ff7a85 55%,#ffd6da 62%,#e3192b 82%,#7a0a14 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(255,180,186,.3);
}
.hero-sub{font:500 clamp(16px,1.5vw,20px)/1.4 var(--body);letter-spacing:-.01em;color:#f1eded}
.hero-intro p{font-size:14.5px;line-height:1.8;color:#b0a9a9;max-width:400px}
.rule{margin:26px 0}
.compat{font:400 11px var(--mono);letter-spacing:1.1px;text-transform:uppercase;background:rgba(255,255,255,.03);border-color:var(--glass-line)}
.compat>span:first-child{background:linear-gradient(180deg,#ff5a66,var(--red-hot) 45%,#a80f1b)}
.screen b{font:400 26px/1 var(--display);letter-spacing:.04em}
.screen small{font:400 9px var(--mono)}
.hero-visual{border-radius:calc(var(--r-panel) - 8px)}

/* ---------- stats strip ---------- */
.stats{
  margin-top:var(--gap);padding:0;gap:0;border-radius:var(--r-panel);
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr);overflow:hidden;
}
.stat{display:flex;flex-direction:column;gap:12px;padding:28px clamp(18px,2vw,30px);border:0;border-right:1px solid var(--glass-line)}
.stat b{font:400 clamp(28px,2.8vw,42px)/1 var(--display);color:#f6f2f2;letter-spacing:.02em;margin:0}
.stat p{font-size:12.5px;line-height:1.5;color:#a59e9e}
.stat-quote{margin:0;padding:28px clamp(18px,2vw,30px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.stat-quote p{margin:0;font-size:14.5px;line-height:1.7;color:#ddd6d6}
.stat-quote cite{font:400 11px var(--mono);letter-spacing:1.2px;color:var(--red-text);font-style:normal}

/* ---------- ticker ---------- */
.ticker{margin-top:var(--gap);margin-bottom:100px;border-radius:999px;overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;align-items:center;gap:34px;padding:20px 34px 20px 0;font:500 13px var(--mono);letter-spacing:2.2px;color:#f1eded;animation:marq 38s linear infinite}
.ticker i{font-style:normal;color:var(--red-hot);text-shadow:0 0 12px rgba(227,25,43,.7)}

/* ---------- sections ---------- */
.why{padding-top:0}
.num b{font:400 17px/1 var(--display)}
.num.hot{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 30px 60px -25px #e3192bb3}
.toolbar .search,.toolbar .chips{border-color:var(--glass-line)}
.chips button{font:400 11px var(--mono);letter-spacing:1.1px;text-transform:uppercase;background:rgba(255,255,255,.05)}
.chips button[aria-pressed="true"]{background:linear-gradient(180deg,#ff5a66,var(--red-hot) 45%,#a80f1b);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.row-meta{font:400 11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.card-badge{font:500 9.5px/1 var(--mono);letter-spacing:1px}
.card-type{font-size:12.5px}
.card-foot b.ask{font:500 11px var(--mono);letter-spacing:.8px;text-transform:uppercase}
.look-meta small{font:400 10px var(--mono)}
.look-meta b{font:400 clamp(15px,1.4vw,20px)/1.2 var(--display);letter-spacing:.02em}
.rail-list li b{font-weight:600}
.orb-ctrl button{box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 8px 24px -10px #000}
.steps li::before{font:400 11px var(--mono);letter-spacing:1px}
.bikes figcaption{font:400 10px var(--mono);letter-spacing:1.2px}
.bikes figcaption b{font:400 13px/1.25 var(--display);letter-spacing:.02em}
.crew-card-front b{font:400 15px/1.3 var(--display)}
.crew-card-front i{font:400 15px var(--display)}
.crew-card-front small{font:400 8.5px var(--mono)}
.site-foot nav{font:400 11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}

/* ---------- overlays ---------- */
.qv-box{background:rgba(16,13,13,.88)}
.qv-info h2{font-size:clamp(20px,2.3vw,28px);line-height:1.2}
.label{font:500 11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.label small{font-family:var(--body);text-transform:none;letter-spacing:0}
.sizes button{font:500 12px var(--mono)}
.sizes button[aria-checked="true"]{background:linear-gradient(180deg,#ff5a66,var(--red-hot) 45%,#a80f1b)}
.gps-btn{font:400 11px var(--mono);letter-spacing:.6px}
.drawer{background:rgba(16,13,13,.9)}
.drawer-head h2{font-size:17px}
.sum{font:400 11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.sum b{font:400 20px var(--display);letter-spacing:.02em;text-transform:none}
.done h3{font-size:19px;line-height:1.3}
.bag-empty b,.empty b{font:400 22px/1.2 var(--display)}
.mbar{font:500 12px var(--mono);letter-spacing:1px;background:linear-gradient(180deg,#ff5a66,var(--red-hot) 45%,#a80f1b)}
.toast{font:500 12px var(--mono);letter-spacing:.6px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat:nth-child(4){border-right:0}
  .stat-quote{grid-column:1/-1;border-top:1px solid var(--glass-line)}
}
@media (max-width:900px){
  .site-head,.site-head.small{height:60px;padding:0 8px 0 18px}
  .nav,.nav.open{border-radius:22px;top:calc(var(--head,72px) + 8px);left:var(--gut);right:var(--gut);padding:8px 18px 14px;background:rgba(14,11,11,.94)}
  .nav a{font-size:12px;padding:15px 4px}
  .hero{padding:16px 16px 28px;border-radius:24px}
  .hero-visual{margin-inline:0}
  .ticker{margin-bottom:70px}
}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-bottom:1px solid var(--glass-line);padding:22px 18px}
  .stat:nth-child(2n){border-right:0}
  .stat-quote{border-top:0}
  .hero-title{font-size:clamp(30px,10vw,46px)}
  .ticker-track{font-size:11.5px;gap:24px;padding:16px 24px 16px 0}
}