/* ============================================================
   Hood — design tokens + custom utilities (ported from index.css)
   ============================================================ */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --border: 227.14deg 35% 92.16%;
  --card: 0deg 0% 100%;
  --card-foreground: 0 0% 10%;
  --muted: 226.67deg 20% 91.18%;
  --muted-foreground: 230deg 5.26% 44.71%;
  --primary: 19.02deg 89.6% 50.98%;
  --primary-foreground: 210 85% 98%;

  --landing-orange: 24 95% 53%;
  --landing-amber: 38 92% 50%;
  --landing-peach: 28 85% 70%;
  --landing-navy: 222 47% 11%;
  --landing-midnight: 222 47% 6%;
  --landing-cream: 40 33% 97%;
  --landing-champagne: 39 27% 94%;

  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);

  --elevate-1: rgba(0, 0, 0, .03);
  --elevate-2: rgba(0, 0, 0, .08);

  --shadow-medium: 0 8px 30px -6px rgba(0, 0, 0, 0.12);
  --shadow-elevated: 0 24px 60px -12px rgba(0, 0, 0, 0.18);

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-normal: 350ms;
  --duration-reveal: 800ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: clip; }
body {
  font-family: "Inter", "Geist", -apple-system, system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6 { font-family: "DM Sans", "Geist", sans-serif; margin: 0; }
h1 { letter-spacing: -0.02em; }
h2, h3 { letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- premium gradient backgrounds ---------- */
.gradient-hero {
  background: linear-gradient(135deg, hsl(24 95% 53%) 0%, hsl(30 90% 55%) 35%, hsl(38 92% 50%) 70%, hsl(var(--landing-peach)) 100%);
  position: relative;
}
.gradient-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.15) 0%, transparent 60%);
}
.gradient-dark {
  background: linear-gradient(180deg, hsl(var(--landing-navy)) 0%, hsl(var(--landing-midnight)) 100%);
  position: relative;
}
.gradient-dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 70% 20%, rgba(249,115,22,0.08) 0%, transparent 60%);
}
.gradient-warm {
  background: linear-gradient(180deg, hsl(var(--landing-cream)) 0%, hsl(var(--landing-champagne)) 100%);
}

/* ---------- glass ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-border);
}
.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-medium);
}

/* ---------- grain overlay ---------- */
.grain-overlay::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ---------- marquee ---------- */
.marquee-track { display: flex; gap: 14px; width: max-content; }
.animate-marquee { animation: hoodMarquee 60s linear infinite; }
.animate-marquee-reverse { animation: hoodMarquee 60s linear infinite reverse; }
@keyframes hoodMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 9999px;
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground));
  font-size: 14px; font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.mq-chip-alt { background: hsl(var(--card)); color: hsl(var(--foreground)); }
.mq-chip-outline { background: transparent; border: 1.5px solid hsl(var(--border)); color: hsl(var(--foreground)); }
.mq-emoji { font-size: 16px; line-height: 1; flex-shrink: 0; }

/* ---------- card hover + elevate ---------- */
.card-hover { transition: transform var(--duration-normal) var(--ease-premium), box-shadow var(--duration-normal) var(--ease-premium); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); }
.hover-elevate { position: relative; }
.hover-elevate::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: transparent; transition: background .15s; }
.hover-elevate:hover::after { background: var(--elevate-1); }

/* ---------- reveal ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp var(--duration-reveal) var(--ease-out-expo) forwards; }
@keyframes bounceArrow { 0%,100%{transform:translateY(0);} 50%{transform:translateY(25%);} }
.animate-bounce { animation: bounceArrow 1s infinite; }

/* ---------- section padding ---------- */
.section-padding { padding-top: 8rem; padding-bottom: 8rem; }
@media (max-width: 768px) { .section-padding { padding-top: 5rem; padding-bottom: 5rem; } }

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ============================================================
   "Neden Hood?" — dark chaos-chain section
   ============================================================ */

/* chain rail */
.pain-rail { position: relative; display: flex; flex-direction: column; gap: 14px; }
.pain-rail::before {
  content: ""; position: absolute; left: 20px; top: 34px; bottom: 34px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,73,0,.45) 18%, rgba(255,73,0,.45) 82%, transparent);
}
.pain-row { position: relative; display: flex; gap: 16px; align-items: center; }
.pain-node {
  width: 40px; height: 40px; flex: none; z-index: 1;
  display: grid; place-items: center; border-radius: 12px;
  background: #182035; border: 1px solid rgba(255,73,0,.38);
  color: #FF8A5C; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500;
  box-shadow: 0 0 0 5px rgba(13,18,32,.9);
}
.flip-slot { flex: 1; display: grid; min-width: 0; cursor: pointer; }
.flip-slot > * { grid-area: 1 / 1; }
.pain-card {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; padding: 15px 18px;
  transition: opacity .32s var(--ease-premium), transform .32s var(--ease-premium);
}
.fix-card {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  background: rgba(52,199,123,.07); border: 1px solid rgba(52,199,123,.32);
  border-radius: 16px; padding: 15px 18px;
  box-shadow: 0 14px 38px -18px rgba(52,199,123,.4);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .32s var(--ease-premium), transform .32s var(--ease-premium);
}
.pain-row.active .pain-card { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.pain-row.active .fix-card { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pain-row.active .pain-node {
  border-color: rgba(52,199,123,.5); color: #5BE49B;
}
.fix-hint {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(52,199,123,.10); border: 1px solid rgba(52,199,123,.28);
  color: #5BE49B; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.fix-badge {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(52,199,123,.16); border: 1px solid rgba(52,199,123,.4);
  color: #5BE49B; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.pain-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: rgba(248,113,113,.12); color: #F87171;
}
.fix-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: rgba(52,199,123,.13); color: #4ADE8E;
}
.pain-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pain-problem { color: rgba(255,255,255,.92); font-weight: 600; font-size: 15px; line-height: 1.3; }
.pain-result {
  display: inline-flex; align-items: center; gap: 7px;
  color: #FF9A7B; font-weight: 700; font-size: 13px; letter-spacing: -.01em;
}
.pain-result .ri { flex: none; }
.fix-title { color: #5BE49B; font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
.fix-desc { color: rgba(255,255,255,.62); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 640px) {
  .fix-hint, .fix-badge { display: none; }
  .pain-rail::before { display: none; }
  .pain-node { display: none; }
}

/* cost counter card (left column) */
.impact-card {
  margin-top: 42px; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px;
  border-radius: 20px; padding: 26px 28px; max-width: 420px;
  background: linear-gradient(135deg, rgba(255,73,0,.18), rgba(245,158,11,.07) 70%);
  border: 1px solid rgba(255,73,0,.38);
}
.impact-card::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,73,0,.22), transparent 65%);
}
.impact-ico {
  width: 54px; height: 54px; border-radius: 16px; flex: none; position: relative; z-index: 1;
  display: grid; place-items: center; background: #FF4900; color: #fff;
  box-shadow: 0 10px 30px -8px rgba(255,73,0,.6);
}
@media (prefers-reduced-motion: no-preference) {
  .impact-ico { animation: impactPulse 2.6s ease-in-out infinite; }
}
@keyframes impactPulse {
  0%,100% { box-shadow: 0 10px 30px -8px rgba(255,73,0,.5); transform: translateY(0); }
  50% { box-shadow: 0 14px 46px -6px rgba(255,73,0,.9); transform: translateY(-2px); }
}
.impact-kicker { font-size: 13.5px; color: rgba(255,255,255,.66); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.impact-kicker b { color: #FF8A5C; font-weight: 800; }
.calc-pill {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
.calc-pill b {
  min-width: 26px; text-align: center;
  color: #FF8A5C; font-weight: 800; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.calc-pill button {
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.10); border: none; cursor: pointer;
  color: rgba(255,255,255,.85); font-size: 15px; font-weight: 600; line-height: 1;
  transition: background .2s, color .2s, transform .15s;
  padding: 0;
}
.calc-pill button:hover:not(:disabled) { background: #FF4900; color: #fff; transform: scale(1.08); }
.calc-pill button:active:not(:disabled) { transform: scale(0.95); }
.calc-pill button:disabled { opacity: .35; cursor: default; }
.impact-big {
  font-size: clamp(36px, 4.5vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  background: linear-gradient(90deg, #FF6A2B, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.impact-sub { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 2px; }

/* entrance (transform-only — content never hidden) */
@media (prefers-reduced-motion: no-preference) {
  .problem-section.in .pain-row { animation: hoodSlideIn .55s var(--ease-out-expo) backwards; }
  .problem-section.in .pain-row:nth-child(1) { animation-delay: .05s; }
  .problem-section.in .pain-row:nth-child(2) { animation-delay: .15s; }
  .problem-section.in .pain-row:nth-child(3) { animation-delay: .25s; }
  .problem-section.in .pain-row:nth-child(4) { animation-delay: .35s; }
  .problem-section.in .impact-card { animation: hoodRise .65s var(--ease-out-expo) .3s backwards; }
}
@keyframes hoodSlideIn { from { transform: translateX(28px); } to { transform: translateX(0); } }
@keyframes hoodRise { from { transform: translateY(20px); } to { transform: translateY(0); } }

/* Hide slide badges on mobile */
.slide-badge-hide { display: none; }
@media (min-width: 640px) { .slide-badge-hide { display: inline-block; } }