/* ============================================================
   INDI STRAPS — Industrial Atelier design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Archivo+Black&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* palette */
  --bg:        #F2EEE5;   /* warm workshop paper */
  --paper:     #FBFAF6;
  --ink:       #0C0C0D;
  --ink-2:     #19191B;
  --muted:     #6E6A60;
  --line:      rgba(12,12,13,.16);
  --line-soft: rgba(12,12,13,.09);

  /* tweakable */
  --accent:        #2C5BFF;          /* electric blue */
  --accent-deep:   #1E3FB5;
  --on-accent:     #FBFAF6;
  --font-display:  'Archivo Black', sans-serif;
  --display-tracking: -0.03em;
  --display-weight: 400;

  --font-body:  'Archivo', sans-serif;
  --font-mono:  'Space Mono', monospace;

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 72px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--accent); color:var(--on-accent); }

/* ---------- background treatments (toggled via Tweaks) ---------- */
body[data-bg="papier"]{ background:var(--bg); }
body[data-bg="studio"]{
  background:radial-gradient(135% 95% at 50% -20%, #FCFBF8 0%, var(--bg) 56%);
  background-attachment:fixed;
}
body[data-bg="raster"]{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(12,12,13,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,12,13,.05) 1px, transparent 1px);
  background-size:40px 40px;
  background-attachment:fixed;
}
body[data-bg="verlauf"]{
  background:linear-gradient(177deg, #FBFAF6 0%, var(--bg) 42%, #ECE5D6 100%);
  background-attachment:fixed;
}
body[data-bg="duo"]{
  background:
    radial-gradient(80% 55% at 88% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(70% 50% at 6% 96%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- type ---------- */
.display{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  line-height:0.9;
  text-transform:uppercase;
}
.mono{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:0.78rem;
}
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.76rem;
  font-weight:700;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;background:var(--accent);
  display:inline-block;
}
.accent{ color:var(--accent); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; }

/* ---------- buttons ---------- */
.btn{
  --c: var(--ink);
  --t: var(--paper);
  display:inline-flex; align-items:center; gap:0.8em;
  background:var(--c); color:var(--t);
  font-family:var(--font-mono); font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; font-size:0.78rem;
  padding:1.15em 1.6em;
  border:2px solid var(--c);
  border-radius:0;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .18s, color .18s;
  position:relative;
}
.btn .arw{ transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.btn:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--accent); }
.btn:hover .arw{ transform:translateX(4px); }
.btn--accent{ --c:var(--accent); --t:var(--on-accent); }
.btn--accent:hover{ box-shadow:6px 6px 0 var(--ink); }
.btn--ghost{ background:transparent; --t:var(--ink); }
.btn--ghost:hover{ background:var(--ink); --t:var(--paper); box-shadow:6px 6px 0 var(--accent); }
.btn--lg{ padding:1.35em 2em; font-size:0.86rem; }
.btn--block{ width:100%; justify-content:center; }

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden; white-space:nowrap;
  border-block:2px solid var(--ink);
  background:var(--ink); color:var(--paper);
}
.marquee__track{
  display:inline-flex; align-items:center; gap:0;
  animation:scrollx 32s linear infinite;
  will-change:transform;
}
.marquee__track span{
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:0.1em; font-size:0.82rem; font-weight:700;
  padding:0.85em 0; display:inline-flex; align-items:center;
}
.marquee__track span::after{
  content:"●"; color:var(--accent); margin:0 1.4em; font-size:0.6em;
}
@keyframes scrollx{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- header ---------- */
.head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink);
}
.head__in{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; gap:1.5rem;
}
.logo{ display:flex; align-items:center; gap:0.55rem; font-weight:900; }
.logo__mark{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  background:var(--ink); color:var(--accent);
}
.logo__mark svg{ width:27px;height:27px; display:block; }
.logo__txt{ font-family:var(--font-display); font-size:1.32rem; letter-spacing:-0.02em; line-height:1; }
.logo__txt b{ color:var(--accent); }
.logo__img{ height:30px; width:auto; display:block; }
.foot .logo__img{ height:34px; }
.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:0.05em; font-size:0.74rem; font-weight:700;
  position:relative; padding:0.4em 0; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--accent); transition:width .22s ease;
}
.nav a:hover::after, .nav a.is-active::after{ width:100%; }
.head__cta{ display:flex; align-items:center; gap:1.1rem; }
.icon-btn{
  width:42px;height:42px;border:2px solid var(--ink);background:transparent;
  display:grid;place-items:center; position:relative;
  transition:background .18s,color .18s;
}
.icon-btn:hover{ background:var(--ink); color:var(--accent); }
.icon-btn svg{ width:19px;height:19px; }
.cart-dot{
  position:absolute; top:-7px; right:-7px; min-width:18px;height:18px;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-mono); font-size:0.62rem; font-weight:700;
  display:grid;place-items:center; padding:0 4px;
}
.burger{ display:none; }

/* ---------- mobile drawer (built by nav.js) ---------- */
.mnav{
  position:fixed; inset:0; z-index:60; display:none;
  background:var(--ink); color:var(--paper);
  flex-direction:column; padding:calc(74px + 1.4rem) var(--pad) 2rem;
}
.mnav.is-open{ display:flex; animation:mnavIn .26s cubic-bezier(.2,.8,.2,1); }
@keyframes mnavIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.mnav__close{
  position:absolute; top:16px; right:var(--pad);
  width:46px;height:46px;border:2px solid rgba(251,250,246,.4);background:transparent;color:var(--paper);
  display:grid;place-items:center;
}
.mnav__close svg{ width:22px;height:22px; }
.mnav a.mnav__link{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.01em;
  font-size:clamp(2rem,9vw,3rem); line-height:1.1; padding:0.32em 0;
  border-bottom:1px solid rgba(251,250,246,.14); color:var(--paper);
}
.mnav a.mnav__link:active{ color:var(--accent); }
.mnav__cta{ margin-top:auto; padding-top:1.6rem; display:flex; flex-direction:column; gap:0.8rem; }
.mnav__meta{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:1.4rem; }
.mnav__meta span{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(251,250,246,.55); }
body.mnav-lock{ overflow:hidden; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--paper); padding-top:0; }
.foot a{ color:var(--paper); }
.foot__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
  padding-block:5rem 3rem;
}
.foot h4{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.12em;
  font-size:0.7rem; color:var(--accent); margin:0 0 1.3rem; font-weight:700;
}
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
.foot ul a{ font-size:0.92rem; color:rgba(251,250,246,.72); transition:color .15s; }
.foot ul a:hover{ color:var(--accent); }
.foot__bar{
  border-top:1px solid rgba(251,250,246,.16);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding-block:1.6rem; flex-wrap:wrap;
}
.foot__bar .mono{ color:rgba(251,250,246,.5); }

/* reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation:none; }
}

/* ---------- responsive base ---------- */
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .foot__grid{ grid-template-columns:1fr; }
  .icon-btn{ width:46px; height:46px; }
}