/* Frita v2 — soft, rounded, filled-italic shared overlay */
/* Loaded AFTER shared/tokens.css and shared/chrome.css to override. */

/* Force dark regardless of stored Tweaks theme (theme switcher could be stored light) */
html, html[data-theme] {
  --bg: #0d0f12;
  --bg-elev: #111216;
  --bg-elev-2: #18191f;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --ink: #f4efe6;
  --ink-dim: rgba(244,239,230,0.72);
  --ink-faint: rgba(244,239,230,0.42);

  --f-display: "Fraunces", "Syne", system-ui, sans-serif;
  --f-body: "Inter Tight", system-ui, sans-serif;
  --radius: 24px;
  --radius-lg: 40px;
  --radius-pill: 999px;

  /* Flavor palette (soft) */
  --c-salt: #7ab0ff;
  --c-ketchup: #e35a3e;
  --c-nacho: #f2b64a;
  --c-jalapeno: #6aa05a;
  --c-secret: #9b7ec8;
  --c-accent: #7ab0ff;
}
html, body { background: #0d0f12; color: #f4efe6; }

/* Nav — always dark, rounded pills */
.nav { background: color-mix(in oklab, #0d0f12 80%, transparent) !important;
       border-bottom-color: rgba(255,255,255,0.08) !important; }
.nav-link, .nav-brand, .cart-btn, .lang-trigger { color: #f4efe6 !important; }
.nav-brand { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.nav-brand-mark { border-radius: 50%; }
.nav-link { border-radius: 999px; padding: 8px 12px; font-size: 13px; }
.nav-link.active::after { display: none; }
.nav-link.active { background: rgba(255,255,255,0.08); color: var(--ink); }
.nav-links { gap: 2px; }
/* Below 1200px allow horizontal scroll; below 760px hide (footer has full set). */
@media (max-width: 1200px) {
  .nav-links { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; flex: none; }
}
@media (max-width: 760px) { .nav-links { display: none; } }
.lang-menu { background: #18191f !important; border-color: rgba(255,255,255,0.1) !important; color: #f4efe6; border-radius: 24px !important; }

/* Buttons — pill everything */
.btn { border-radius: 999px; height: 56px; padding: 0 28px; font-size: 15px; }
.btn-primary { background: #fff; color: #0d0f12; }
.btn-primary:hover { background: var(--c-accent); color: #fff; }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,0.28); background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
.btn-solid-ink { background: #fff; color: #0d0f12; }

/* Layout wrap */
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 760px) { .wrap { padding: 0 24px; } }

/* Footer — rounded top */
.footer { background: #0a0c10 !important; border-radius: 48px 48px 0 0; margin-top: 80px; border-top: 0; }
@media (max-width: 760px) { .footer { border-radius: 32px 32px 0 0; } }

/* Eyebrow pill (reusable) */
.pill-eyebrow {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

/* Large filled italic display */
.display-fr {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.display-fr em { font-style: italic; font-weight: 600; color: var(--c-accent); }

/* Pillow chip (reusable) */
.pillow {
  border-radius: 48% 52% 46% 54% / 56% 48% 52% 44%;
  background: var(--pc, #7ab0ff);
  position: relative;
  box-shadow:
    inset 8px 12px 24px rgba(255,255,255,0.35),
    inset -10px -14px 24px rgba(0,0,0,0.35),
    0 30px 60px rgba(0,0,0,0.35);
}
.pillow::before {
  content: ""; position: absolute; top: 14%; left: 22%;
  width: 34%; height: 24%; background: rgba(255,255,255,0.55);
  border-radius: 50%; filter: blur(4px);
}

/* Falling chips */
.chips-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.chip-tiny {
  position: absolute;
  width: var(--s, 48px);
  height: calc(var(--s, 48px) * 0.85);
  border-radius: 48% 52% 46% 54% / 56% 48% 52% 44%;
  background: var(--c, #f2b64a);
  box-shadow:
    inset 4px 6px 12px rgba(255,255,255,0.4),
    inset -6px -8px 14px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.35);
  opacity: 0.85;
  animation: chip-fall linear infinite;
  animation-duration: var(--d, 14s);
  animation-delay: var(--dl, 0s);
  left: var(--x, 50%);
  top: -80px;
}
.chip-tiny::before {
  content: ""; position: absolute;
  top: 18%; left: 22%; width: 30%; height: 22%;
  background: rgba(255,255,255,0.45); border-radius: 50%; filter: blur(2px);
}
@keyframes chip-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.85; }
  92%  { opacity: 0.85; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

/* Soft rounded panels */
.panel {
  background: linear-gradient(145deg, #141820, #0a0c10);
  border-radius: 48px;
  padding: 72px;
}
@media (max-width: 760px) { .panel { padding: 40px 28px; border-radius: 32px; } }

.card-soft {
  background: rgba(255,255,255,0.04);
  border-radius: 28px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.card-soft:hover { background: rgba(255,255,255,0.07); }

/* Section */
.v2-section { padding: 140px 0 40px; }
.v2-section-hd {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: end; gap: 40px; margin-bottom: 64px;
}
.v2-section-hd .num {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5); text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.06);
}
.v2-section-hd h2 {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.035em; line-height: 0.95;
  color: #fff; text-wrap: balance;
}
.v2-section-hd h2 em { font-style: italic; font-weight: 600; color: var(--c-accent); }
.v2-section-hd .link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: #fff; font-size: 14px;
}
.v2-section-hd .link:hover { background: rgba(255,255,255,0.12); }

/* Meta line */
.meta-line {
  display: flex; gap: 32px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); flex-wrap: wrap;
}
.meta-line b { color: #fff; font-weight: 500; }