/* ============================================================
   Marketing site — page-level layout (v2 — dark/glow)
   Foundations come from ../../colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,116,22,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(255,61,139,0.10) 0%, transparent 55%),
    var(--ink-800);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; position: relative; }
.container--narrow { max-width: 920px; margin: 0 auto; padding: 0 24px; }

.section { padding: 120px 0; position: relative; }
.section--tight { padding: 72px 0; }

/* subtle grid texture used on sections */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 100%);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fuchs-400);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content:""; width: 28px; height: 1px; background: currentColor; }

.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.96;
  color: var(--fg-1);
  margin: 0 0 28px;
  hyphens: auto;
  overflow-wrap: break-word;
}
.h1 em {
  font-style: normal;
  background: var(--grad-flame);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.0;
  margin: 0 0 22px;
  color: var(--fg-1);
}
.h2 em {
  font-style: normal;
  background: var(--grad-flame);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 0 36px;
}

/* Buttons */
.btn {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none; color: white;
}
.btn--primary {
  background: var(--fuchs-500);
  box-shadow:
    0 0 0 1px rgba(255,116,22,0.4),
    0 10px 28px -6px rgba(255,116,22,0.55),
    0 0 48px -10px rgba(255,116,22,0.5),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn--primary:hover {
  background: var(--fuchs-400); transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,116,22,0.5),
    0 14px 36px -6px rgba(255,116,22,0.7),
    0 0 60px -10px rgba(255,116,22,0.6),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn--flame {
  background: var(--grad-flame);
  color: white;
  box-shadow:
    0 0 0 1px rgba(255,184,0,0.35),
    0 14px 36px -6px rgba(255,116,22,0.6),
    0 0 80px -16px rgba(255,61,139,0.5),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn--flame:hover { transform: translateY(-1px) scale(1.01); }
.btn--glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border-color: rgba(255,255,255,0.16);
  color: var(--fg-1);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn--glass:hover { border-color: rgba(255,255,255,0.32); background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%); }
.btn--ghost { background: transparent; color: var(--fg-2); border-color: rgba(255,255,255,0.14); }
.btn--ghost:hover { background: rgba(255,255,255,0.04); color: var(--fg-1); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,116,22,0.35); }

.btn--icon-right svg { width: 16px; height: 16px; transition: transform 160ms; }
.btn:hover .btn--icon-right svg { transform: translateX(3px); }

/* Glass cards (used everywhere) */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 32px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.10);
  display: flex; flex-direction: column; gap: 14px;
  transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.glass:hover {
  border-color: rgba(255,255,255,0.20);
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%);
  transform: translateY(-2px);
}

/* Featured card — adds the mirror stroke and orange glow */
.glass--featured {
  background: linear-gradient(180deg, rgba(255,116,22,0.12) 0%, rgba(255,61,139,0.04) 100%);
  box-shadow:
    0 8px 24px -4px rgba(255,116,22,0.22),
    0 0 32px -8px rgba(255,61,139,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.glass--featured::before {
  content:""; position: absolute; inset: 0; border-radius: 20px; padding: 1.5px;
  background: linear-gradient(180deg, rgba(255,184,0,0.7) 0%, rgba(255,255,255,0.06) 50%, rgba(255,61,139,0.55) 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Icon container */
.icon-square {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255,116,22,0.14); color: var(--fuchs-300);
  border: 1px solid rgba(255,116,22,0.28);
  display: flex; align-items: center; justify-content: center;
}
.icon-square svg { width: 22px; height: 22px; }
.icon-square--flame {
  background: var(--grad-flame); color: white; border-color: transparent;
  box-shadow: 0 0 24px -4px rgba(255,116,22,0.5);
}

/* Status dot used in pills */
.dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}

/* ============================================================
   Responsive overrides (tablet ≤ 1024px · phone ≤ 880px ≤ 560px)
   ============================================================ */

/* Tablet — gentle tightening */
@media (max-width: 1024px) {
  .section { padding: 88px 0; }
  .section--tight { padding: 56px 0; }
  .container, .container--narrow { padding: 0 20px; }
}

/* Phone / small tablet */
@media (max-width: 880px) {
  body { font-size: 15.5px; }
  .container, .container--narrow { padding: 0 18px; }
  .section { padding: 64px 0; }
  .section--tight { padding: 44px 0; }
  [data-density="compact"] { --pf-section-pad: 56px; }
  [data-density="luft"]    { --pf-section-pad: 80px; }

  .glass { padding: 22px; border-radius: 18px; }
  .h1 { margin-bottom: 22px; }
  .h2 { margin-bottom: 18px; }
  .lead { font-size: 17px; margin-bottom: 28px; }

  .btn { padding: 13px 22px; font-size: 14.5px; }

  /* Hide subtle grid texture on small screens — it competes with content */
  .grid-bg { opacity: 0.6; }
}

/* Phone */
@media (max-width: 560px) {
  body { font-size: 15px; }
  .container, .container--narrow { padding: 0 16px; }
  .section { padding: 52px 0; }
  .section--tight { padding: 36px 0; }

  .glass { padding: 20px; }
  .lead { font-size: 16px; margin-bottom: 24px; }

  /* Wrap button rows tightly */
  .btn { padding: 12px 18px; font-size: 14px; }
}