/* ══════════════════════════════════════════════════════════════
   MARZIANI — DESIGN SYSTEM v2 "LUMINA"
   Total visual redesign layer. Overrides the legacy gold/dark theme.
   Art direction: luminous editorial gallery — deep charcoal base,
   champagne-gold light play, oversized display type, generous
   whitespace, hairline rules, glass panels, cinematic motion.
   ══════════════════════════════════════════════════════════════ */

/* ── 0. New token system ─────────────────────────────────────── */
:root{
  /* surfaces — deeper, bluer charcoal for cinematic contrast */
  --ink: #07080a;
  --surface: #0e1013;
  --surface-2: #14171c;
  --surface-3: #1a1e24;
  --line: #262b33;
  --line-soft: #1c2128;

  /* paper — warmer white */
  --paper: #f4f0e8;
  --muted: #9aa0a8;

  /* gold — refined champagne system */
  --gold-deep: #8f6a2a;
  --gold: #c9a45c;
  --gold-bright: #e9d5a3;
  --gold-pale: #faf3dd;
  --grad-gold: linear-gradient(92deg, #8f6a2a 0%, #c9a45c 38%, #faf3dd 100%);
  --grad-gold-diag: linear-gradient(135deg, #8f6a2a 0%, #c9a45c 55%, #faf3dd 100%);

  /* NEW: accent pair for the v2 system */
  --accent-cool: #7da2c0;        /* steel blue — counterpoint to gold */
  --glass: rgba(20, 23, 28, 0.62);
  --glass-line: rgba(201, 164, 92, 0.16);

  /* type — tighter, more editorial */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-accent: 'Instrument Serif', serif;

  --container: 1240px;
  --radius: 20px;
  --radius-sm: 12px;

  /* rhythm */
  --sp-section: clamp(84px, 11vw, 148px);
}

*,*::before,*::after{ box-sizing: border-box; }

body{
  background: var(--ink);
  color: var(--paper);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* faint ambient light field over the whole page */
  background-image:
    radial-gradient(1100px 500px at 85% -5%, rgba(125,162,192,0.05), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(201,164,92,0.045), transparent 55%);
  background-attachment: fixed;
}

::selection{ background: rgba(201,164,92,0.32); color: #fff; }

/* ── 1. Announcement strip ───────────────────────────────────── */
.rd-announce{
  background: linear-gradient(90deg, rgba(143,106,42,0.22), rgba(201,164,92,0.10) 50%, rgba(143,106,42,0.22));
  border-bottom: 1px solid var(--glass-line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  position: relative;
  z-index: 101;
}
.rd-announce-in{
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 24px;
}
.rd-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201,164,92,0.6);
  animation: rd-pulse 2.4s infinite;
}
@keyframes rd-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(201,164,92,0.55); }
  70%{ box-shadow: 0 0 0 7px rgba(201,164,92,0); }
  100%{ box-shadow: 0 0 0 0 rgba(201,164,92,0); }
}
.rd-announce-cta{ color: var(--gold-pale); text-decoration: none; border-bottom: 1px dotted rgba(250,243,221,0.5); }
.rd-announce-cta:hover{ color: #fff; }

/* ── 2. Header / nav ─────────────────────────────────────────── */
header.site{
  background: rgba(7, 8, 10, 0.72);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 12px 40px -18px rgba(0,0,0,0.8);
}
.nav{ padding: 14px 28px; }
.nav-links{ gap: 4px !important; }
.nav-links a{
  font-size: 13px !important;
  letter-spacing: 0.01em;
  padding: 7px 12px !important;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease !important;
}
.nav-links a:hover{
  background: rgba(201,164,92,0.10) !important;
  color: var(--gold-bright) !important;
}
.nav-links a.active{
  background: rgba(201,164,92,0.16);
  color: var(--gold-pale) !important;
}
.nav-tag{
  font-family: var(--font-mono);
  font-size: 9px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent !important;
  border: 1px solid var(--glass-line) !important;
  color: var(--accent-cool) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  margin-left: 6px !important;
  vertical-align: middle;
}

/* ── 3. Hero — oversized editorial frame ─────────────────────── */
.rd-hero-frame{
  outline: 1px solid rgba(201,164,92,0.0);
}
.hero{ padding: clamp(120px, 15vw, 170px) 0 clamp(80px, 10vw, 120px) !important; }
.hero h1{
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(42px, 7.2vw, 92px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.025em !important;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.35em !important;
  text-wrap: balance;
}
.hero h1 em, .hero h1 .accent{
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  -webkit-text-fill-color: var(--gold-pale);
}
.hero .lede, .hero p{
  font-size: clamp(16.5px, 1.6vw, 19.5px) !important;
  color: #cfd4da !important;
  max-width: 56ch !important;
}
.eyebrow{
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}
.eyebrow::before{
  content: "";
  width: 34px; height: 1px;
  background: var(--grad-gold);
  display: inline-block;
}

/* ── 4. Buttons ──────────────────────────────────────────────── */
.btn{
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.015em;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  transition: transform .18s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease !important;
}
.btn-primary{
  background: var(--grad-gold) !important;
  color: #14100a !important;
  border: none !important;
  box-shadow: 0 10px 30px -10px rgba(201,164,92,0.45);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(201,164,92,0.6);
}
.btn-ghost{
  background: rgba(244,240,232,0.03) !important;
  border: 1px solid var(--line) !important;
  color: var(--paper) !important;
}
.btn-ghost:hover{
  border-color: rgba(201,164,92,0.5) !important;
  background: rgba(201,164,92,0.07) !important;
  transform: translateY(-2px);
}

/* ── 5. Sections & panels — glass gallery ────────────────────── */
.section{ padding: var(--sp-section) 0 !important; }
.section-head{ margin-bottom: clamp(40px, 5vw, 64px) !important; }
.section-head h2, .section h2{
  font-family: var(--font-display) !important;
  font-weight: 750;
  font-size: clamp(30px, 4.2vw, 52px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}
.panel{
  background: var(--glass) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
  position: relative;
  overflow: hidden;
}
.panel::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 220px at 20% 0%, rgba(201,164,92,0.07), transparent 70%);
  pointer-events: none;
}
.panel:hover{
  border-color: rgba(201,164,92,0.34) !important;
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.75);
}
.panel-tag, .panel-label{
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--accent-cool) !important;
}

/* hairline dividers between stacked sections */
.section + .section{ border-top: 1px solid var(--line-soft); }

/* ── 6. Cards (shop, use-case, testimonial, teaser) ──────────── */
.shop-card, .use-case-card, .teaser-card, .testi-card{
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease !important;
}
.shop-card:hover, .use-case-card:hover, .teaser-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(201,164,92,0.4) !important;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.8), 0 0 0 1px rgba(201,164,92,0.08);
}
.shop-photo{
  filter: saturate(1.05) contrast(1.03);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.shop-card:hover .shop-photo{
  transform: scale(1.045);
  filter: saturate(1.12) contrast(1.05);
}
.shop-price{
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  color: var(--gold-bright) !important;
  font-weight: 700;
}
.shop-model{
  font-family: var(--font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-size: 11px !important;
  color: var(--accent-cool) !important;
}

/* ── 7. Tables / compare ─────────────────────────────────────── */
.compare, table{
  font-size: 14.5px;
}
.compare th, thead th{
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold) !important;
  border-bottom: 1px solid var(--line) !important;
}
tbody tr:hover, .compare tr:hover{
  background: rgba(201,164,92,0.045) !important;
}

/* ── 8. Manifesto / stats / numbers ──────────────────────────── */
.manifesto{
  position: relative;
}
.manifesto::before{
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--glass-line) 20%, var(--glass-line) 80%, transparent);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.num{
  font-family: var(--font-display) !important;
  font-weight: 800;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 9. CTA band ─────────────────────────────────────────────── */
.cta-band{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--glass-line) !important;
  background:
    radial-gradient(700px 300px at 50% -40%, rgba(201,164,92,0.16), transparent 65%),
    var(--surface) !important;
}
.cta-band h2{
  font-size: clamp(32px, 4.6vw, 56px) !important;
}

/* ── 10. Footer ──────────────────────────────────────────────── */
footer{
  background: #050607 !important;
  border-top: 1px solid var(--line-soft) !important;
}
.footer-grid{ gap: 56px !important; }
.footer-bottom{
  border-top: 1px solid var(--line-soft);
  padding-top: 22px !important;
  color: var(--muted);
}

/* ── 11. Motion — refined reveals ────────────────────────────── */
.reveal{
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1) !important;
}
.reveal.is-visible{ transform: none !important; }

/* focus states — accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 12. Mobile ──────────────────────────────────────────────── */
@media (max-width: 980px){
  .rd-announce-in{ font-size: 10.5px; }
  .hero{ padding: 120px 0 72px !important; }
}
@media (max-width: 560px){
  .btn{ width: 100%; text-align: center; }
  .rd-announce-in{ flex-wrap: wrap; gap: 6px; }
}

/* ── ROUND-1 FIXES: alignment ───────────────────────────────── */

/* nav: no more CTA button — let links breathe, center the row */
.nav{ justify-content: space-between; }
.nav-links{ margin-left: auto; margin-right: auto; }

/* compare panels: equal heights, aligned rows */
.compare{ align-items: stretch; }
.compare .panel{ display:flex; flex-direction:column; }
.compare .stage{ flex: 1 1 auto; }
.compare .caption{ margin-top: auto; padding-top: 16px; }

/* panel headers: reset the global section h2 rule so panel titles are
   identical on both sides; baseline-align title and tag pill */
.compare .panel .panel-label h2,
.panel-label h2,
.panel-label h2 *{
  font-size: 18px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
.panel-label{ align-items: center !important; }
.panel-tag{ align-self: center; }

/* canvases: consistent intrinsic sizing inside equal-height stages */
.field-canvas{ width: 100%; height: 100%; object-fit: contain; display:block; }


/* ── 13. Header Contact pill + nav fit (2026-08-31) ───────────── */
/* Desktop text-nav now requires >=1201px (13 links + Contact pill);
   below that the hamburger takes over (overrides the base 1180px rule). */
@media (max-width: 1200px){
  .nav-links{ display:none !important; }
  .menu-toggle{ display:inline-flex !important; }
  .nav-contact{ display:none !important; }
}
.nav-contact{
  display:inline-flex; align-items:center; margin-left:12px;
  padding:8px 16px; border-radius:999px;
  border:1px solid rgba(201,164,92,.5);
  background:rgba(201,164,92,.08);
  color:var(--gold-pale) !important;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  white-space:nowrap; text-decoration:none;
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nav-contact:hover{
  background:var(--grad-gold); color:#14100a !important;
  border-color:transparent; transform:translateY(-1px);
  box-shadow:0 8px 22px -8px rgba(201,164,92,.55);
}
/* tighten the 13 text links so everything fits >=1201px */
.nav-links{ gap:2px !important; }
.nav-links a{ padding:7px 8px !important; }