/* =========================================================================
   MOG — Müll oder Gold · Design System
   Steel → Gold. Dark, premium, trustworthy.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- surfaces (warm near-black) --- */
  --bg:        #141210;
  --bg-1:      #1a1713;
  --bg-2:      #211d18;
  --bg-3:      #2a251e;
  --bg-card:   #1d1915;

  /* --- ink --- */
  --ink:       #f4efe5;
  --ink-dim:   #c2bcae;
  --ink-mute:  #8a8377;
  --ink-faint: #5f594f;

  /* --- steel (the "Müll" side) --- */
  --steel-1:   #e2e5e8;
  --steel-2:   #aab0b6;
  --steel-3:   #797f85;
  --steel-4:   #4c5055;

  /* --- gold (the payoff) --- */
  --gold-1:    #fbeeb6;
  --gold-2:    #e7c873;
  --gold-3:    #cda53a;
  --gold-4:    #a07e22;
  --gold-deep: #7a5e16;

  /* gradients */
  --grad-gold:   linear-gradient(135deg,#fbeeb6 0%,#e7c873 38%,#cda53a 66%,#f3dd92 100%);
  --grad-gold-v: linear-gradient(180deg,#fbeeb6 0%,#e7c873 45%,#cda53a 100%);
  --grad-steel:  linear-gradient(135deg,#eef0f2 0%,#aab0b6 45%,#71767b 100%);

  /* lines & shadows */
  --line:       rgba(244,239,229,0.085);
  --line-2:     rgba(244,239,229,0.14);
  --gold-line:  rgba(205,165,58,0.34);
  --shadow-sm:  0 2px 10px rgba(0,0,0,.4);
  --shadow:     0 16px 50px -16px rgba(0,0,0,.7);
  --shadow-gold:0 18px 60px -20px rgba(205,165,58,.4);

  /* type */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Manrope', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  /* layout */
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --radius-s: 8px;
  --radius:   14px;
  --radius-l: 22px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(205,165,58,.32); color:#fff; }

/* --- background texture --- */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(205,165,58,.12), transparent 55%),
    radial-gradient(90% 70% at -10% 10%, rgba(120,127,133,.10), transparent 50%),
    var(--bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* =========================================================================
   Typography
   ========================================================================= */
.kicker{
  font-family:var(--mono); font-size:12.5px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold-2);
  display:inline-flex; align-items:center; gap:11px;
}
.kicker::before{
  content:""; width:26px; height:1px; background:var(--gold-line);
}
.kicker.center::after{
  content:""; width:26px; height:1px; background:var(--gold-line);
}
.kicker.steel{ color:var(--steel-2); }
.kicker.steel::before,.kicker.steel.center::after{ background:var(--line-2); }

h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.04; margin:0; letter-spacing:-0.02em; }
h1{ font-size:clamp(2.6rem,6.4vw,5rem); font-weight:900; }
h2{ font-size:clamp(2rem,4.2vw,3.3rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-dim); text-wrap:pretty; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--ink-dim); line-height:1.6; }

.gold-text{
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.steel-text{
  background:var(--grad-steel); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.strike{ text-decoration:line-through; text-decoration-color:var(--steel-3); color:var(--ink-mute); }

/* =========================================================================
   Layout
   ========================================================================= */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); width:100%; }
.wrap-narrow{ max-width:840px; margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }
.section{ padding-block:clamp(72px,11vw,140px); }
.section-tight{ padding-block:clamp(56px,8vw,96px); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

.eyebrow-row{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(34px,5vw,56px); }
.eyebrow-row.center{ align-items:center; text-align:center; }
.eyebrow-row h2{ max-width:18ch; }
.eyebrow-row.center h2{ max-width:24ch; }
.eyebrow-row .sub{ max-width:56ch; }
.eyebrow-row.center .sub{ margin-inline:auto; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:15px 28px; border-radius:var(--radius-s); cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:17px; height:17px; }
.btn-gold{
  background:var(--grad-gold); color:#211900;
  box-shadow:0 10px 30px -10px rgba(205,165,58,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(205,165,58,.75), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-ghost{
  background:rgba(255,255,255,.02); color:var(--ink); border-color:var(--line-2);
}
.btn-ghost:hover{ border-color:var(--gold-line); color:var(--gold-1); transform:translateY(-2px); }
.btn-lg{ padding:18px 34px; font-size:16px; }
.btn-block{ width:100%; }

.text-link{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px;
  font-weight:700; letter-spacing:.04em; color:var(--gold-2); text-transform:uppercase;
  transition:gap .2s ease, color .2s ease;
}
.text-link svg{ width:15px; height:15px; transition:transform .2s ease; }
.text-link:hover{ color:var(--gold-1); gap:12px; }

/* =========================================================================
   Navbar
   ========================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(20,18,16,.82); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:44px; width:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.brand .brand-text{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.brand .bname{ font-family:var(--display); font-weight:900; font-size:19px; letter-spacing:.02em; line-height:1; }
.brand .bname .bm{ color:#9aa0a6; }
.brand .bname .bo{ color:#fff; }
.brand .bname .bg{ color:var(--gold-2); }
.brand .btag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--ink-mute); text-transform:uppercase; margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:14.5px; font-weight:600; color:var(--ink-dim); transition:color .18s ease; position:relative; }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px;
  background:var(--grad-gold);
}
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-login{ display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-weight:700;
  font-size:14px; color:var(--ink-dim); border:1px solid var(--line-2); border-radius:var(--radius-s);
  padding:9px 15px; transition:border-color .2s ease, color .2s ease; white-space:nowrap; }
.nav-login:hover{ border-color:var(--gold-line); color:var(--gold-1); }
.nav-login svg{ width:15px; height:15px; stroke:currentColor; }
.nav-burger{ display:none; background:none; border:1px solid var(--line-2); border-radius:8px;
  width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:.25s; }
.nav-burger span::before{ top:-6px; } .nav-burger span::after{ top:6px; }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:rgba(16,14,12,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:0 var(--pad);
  transform:translateY(-100%); transition:transform .4s cubic-bezier(.7,0,.2,1); visibility:hidden;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; }
.mobile-menu a{ font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,9vw,2.6rem);
  padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink-dim); }
.mobile-menu a:last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:26px; }

/* =========================================================================
   Badges, chips, pills
   ========================================================================= */
.pill{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:100px;
  font-size:13px; font-weight:600; border:1px solid var(--line-2); background:rgba(255,255,255,.025); color:var(--ink-dim); }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-3); box-shadow:0 0 10px var(--gold-3); }
.pill-gold{ border-color:var(--gold-line); color:var(--gold-1); background:rgba(205,165,58,.07); }

.tag{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:5px; }
.tag-steel{ color:var(--steel-2); background:rgba(170,176,182,.1); border:1px solid var(--line-2); }
.tag-gold{ color:#231a02; background:var(--grad-gold); }

.stars{ display:inline-flex; gap:3px; color:var(--gold-2); }
.stars svg{ width:16px; height:16px; }

/* =========================================================================
   Cards
   ========================================================================= */
.card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:border-color .25s ease, transform .25s ease, background .25s ease; }
.card:hover{ border-color:var(--gold-line); transform:translateY(-3px); }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.icon-badge{ width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(205,165,58,.1); border:1px solid var(--gold-line); margin-bottom:20px; }
.icon-badge svg{ width:24px; height:24px; stroke:var(--gold-2); }
.icon-badge.steel{ background:rgba(170,176,182,.08); border-color:var(--line-2); }
.icon-badge.steel svg{ stroke:var(--steel-2); }

/* numeral */
.numeral{ font-family:var(--display); font-weight:900; font-size:54px; line-height:1; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer{ border-top:1px solid var(--line); background:var(--bg-1); padding-block:clamp(56px,8vw,84px) 36px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer h4{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; margin-bottom:18px; }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a{ font-size:14.5px; color:var(--ink-dim); transition:color .18s; }
.footer-links a:hover{ color:var(--gold-1); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-top:28px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-mute); flex-wrap:wrap; }
.footer-brand p{ font-size:14.5px; max-width:34ch; margin-top:18px; }

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .nav-links,.nav-cta .btn{ display:none; }
  .nav-burger{ display:flex; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:440px){
  .footer-grid{ grid-template-columns:1fr; }
}