/* ==========================================================================
   LOKAU CARROSSÉIS™ — DESIGN SYSTEM (INSPIRED BY AICAROUSELS.COM ARCHITECTURE)
   Brand Identity: Lokau Studio (#0F1A22 Deep Slate, #20D68B Emerald, #EEF3EE Ice)
   Typography: Geist Variable (Local @font-face)
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist[wght].ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Italic[wght].ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Editorial Light Surface (Default — Inspired by aicarousels.com) */
  --page: #f6faf8;
  --page-2: #edf4f0;
  --page-3: #e1ece6;
  --card: #ffffff;
  --card-glass: rgb(255 255 255 / 0.86);

  /* Lokau Deep Slate Ink */
  --ink: #0f1a22;
  --ink-2: #172733;
  --text: #15232d;
  --text-soft: #2c3f4d;
  --muted: #4b5f6e;
  --subtle: #526675;

  /* Borders & Hairlines */
  --line: #dfeae4;
  --line-2: #cfe0d7;
  --line-3: #b4cec0;
  --hover: rgb(15 26 34 / 0.045);

  /* Lokau Emerald Mint Brand Accents (WCAG AA 4.5:1+ Calibrated) */
  --emerald: #20d68b;
  --emerald-ink: #066a3f;
  --emerald-deep: #055230;
  --emerald-soft: #e1faee;
  --emerald-line: #9ceac8;
  --marker: #c2f5df;
  --cyan: #16b8c4;

  /* Night Section Tokens (.section.night) */
  --night: #0b141a;
  --night-2: #0f1a22;
  --night-card: #15232e;
  --night-text: #eef3ee;
  --night-muted: #9eb0bd;
  --night-subtle: #667b8a;
  --night-line: rgb(238 243 238 / 0.09);
  --night-line-2: rgb(238 243 238 / 0.16);

  /* Status */
  --success: #18a96b;
  --warning: #d97706;

  /* Typography */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout Rhythm (Exact aicarousels.com metrics) */
  --wrap: 1240px;
  --gutter: 40px;
  --header-h: 70px;
  --section-y: clamp(88px, 10vw, 136px);

  /* Radii */
  --r-chip: 8px;
  --r-ctl: 10px;
  --r-card: 16px;
  --r-panel: 20px;
  --r-stage: 24px;
  --r-pill: 999px;

  /* Multi-layered Elevation Shadows */
  --shadow-btn: 0 1px 2px rgb(15 26 34 / 0.06), 0 0 0 1px rgb(15 26 34 / 0.08);
  --shadow-chip: 0 1px 2px rgb(15 26 34 / 0.05), 0 0 0 1px rgb(15 26 34 / 0.06);
  --shadow-tile: 0 0 0 1px rgb(15 26 34 / 0.055), 0 2px 4px rgb(15 26 34 / 0.03), 0 12px 24px -8px rgb(15 26 34 / 0.05);
  --shadow-popover: 0 0 0 1px rgb(15 26 34 / 0.07), 0 4px 8px -2px rgb(15 26 34 / 0.05), 0 20px 40px -12px rgb(15 26 34 / 0.12);
  --shadow-float: 0 0 0 1px rgb(15 26 34 / 0.07), 0 8px 16px -4px rgb(15 26 34 / 0.05), 0 28px 64px -16px rgb(15 26 34 / 0.14);
  --shadow-slide: 0 0 0 1px rgb(15 26 34 / 0.06), 0 2px 5px rgb(15 26 34 / 0.05), 0 18px 34px -14px rgb(15 26 34 / 0.22);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 150ms;
  --d-menu: 220ms;
  --d-morph: 380ms;
}

/* Optional Full Dark Mode Theme */
[data-theme="dark"] {
  --page: #0b141a;
  --page-2: #0f1a22;
  --page-3: #162530;
  --card: #13202a;
  --card-glass: rgb(15 26 34 / 0.86);
  --ink: #eef3ee;
  --ink-2: #ffffff;
  --text: #e2ebe5;
  --text-soft: #b8c7d1;
  --muted: #9eb0bd;
  --subtle: #9eb0bd;
  --line: rgb(238 243 238 / 0.08);
  --line-2: rgb(238 243 238 / 0.14);
  --line-3: rgb(238 243 238 / 0.24);
  --hover: rgb(238 243 238 / 0.06);
  --emerald-ink: #38e89f;
  --emerald-soft: rgb(32 214 139 / 0.14);
  --emerald-line: rgb(32 214 139 / 0.32);
  --marker: rgb(32 214 139 / 0.22);
  --shadow-tile: 0 0 0 1px rgb(238 243 238 / 0.08), 0 16px 32px -10px rgb(0 0 0 / 0.45);
  --shadow-popover: 0 0 0 1px rgb(238 243 238 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.6);
  --shadow-float: 0 0 0 1px rgb(238 243 238 / 0.12), 0 32px 72px -16px rgb(0 0 0 / 0.7);
}

@media (max-width: 719px) {
  :root {
    --gutter: 20px;
    --header-h: 62px;
  }
}

/* ==========================================================================
   BASE & RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  /* Do not set explicit root font-size so <meta name="text-scale" content="scale"> scales rem units with OS text-scale */
  line-height: 1.5;
  color: var(--text);
  background: var(--page);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
  overflow-x: clip;
  max-inline-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  overflow-x: clip;
  max-inline-size: 100%;
  background: var(--page);
  color: var(--text);
  text-align: start;
  overflow-wrap: break-word;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol {
  margin: 0;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p, blockquote, .fq-ans, .pr-list li, .sty-list p {
  text-wrap: pretty;
  max-inline-size: 75ch;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

button {
  cursor: pointer;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   LAYOUT & TYPOGRAPHY SYSTEM (AICAROUSELS EDITORIAL SCALE)
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section.tint {
  background: var(--page-2);
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}

.section.night {
  background: var(--night);
  color: var(--night-text);
  isolation: isolate;
  overflow: clip;
}

.aura {
  position: relative;
  isolation: isolate;
}

.aura::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -15%;
  pointer-events: none;
  background:
    radial-gradient(45% 40% at 22% 18%, rgb(32 214 139 / 0.14), transparent 70%),
    radial-gradient(40% 45% at 82% 72%, rgb(22 184 196 / 0.11), transparent 70%);
}

/* Editorial Headings (Fluid clamp() constrained to max <= 2.5x min per WCAG 1.4.4 / fluid-scaling) */
.t-hero {
  font-size: clamp(2.25rem, 1.45rem + 3.5vw, 5.05rem);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.042em;
  color: var(--ink);
  text-wrap: balance;
}

.t-hero b, .t-hero strong {
  font-weight: 600;
}

.t-h2 {
  font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3.6rem);
  line-height: 1.14;
  font-weight: 300;
  letter-spacing: -0.038em;
  color: var(--ink);
  text-wrap: balance;
}

.t-h2 b, .t-h2 strong {
  font-weight: 500;
}

.section.night .t-h2,
.eco-box .t-h2,
.fin .t-h2 {
  color: var(--night-text);
}

.t-h3 {
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}

@supports (font-size: 1cqi) {
  .ft-card .t-h3 {
    font-size: clamp(1.125rem, 0.95rem + 1.2cqi, 1.375rem);
  }
}

.t-lead {
  font-size: clamp(1.0625rem, 0.98rem + 0.32vw, 1.25rem);
  line-height: 1.58;
  color: var(--muted);
  text-wrap: pretty;
  max-inline-size: 65ch;
}

.section.night .t-lead,
.eco-box .t-lead,
.fin .t-lead {
  color: var(--night-muted);
}

/* Swoosh & Marker Highlights (Calibrated vertical clearance so .swoosh never overlaps .mark on adjacent lines) */
.swoosh {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  z-index: 2;
}

.swoosh::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.16em;
  pointer-events: none;
  background: linear-gradient(90deg, var(--emerald), var(--cyan));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M3 16.5C62 5.5 148 3.5 237 13.5' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M3 16.5C62 5.5 148 3.5 237 13.5' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.mark {
  display: inline-block;
  padding: 0em 0.2em 0.02em;
  margin-top: 0.08em;
  margin-inline: -0.04em;
  border-radius: 0.22em;
  line-height: 1.02;
  background-image: linear-gradient(100deg, var(--marker) 0%, var(--emerald-soft) 100%);
  color: var(--ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.section.night .mark,
.eco-box .mark,
.fin .mark {
  background-image: linear-gradient(100deg, rgb(32 214 139 / 0.24), rgb(22 184 196 / 0.2));
  color: #5ef2b4;
}

/* Eyebrow with 4-point Sparkle */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--emerald-ink);
}

.eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--emerald);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C8.4 4.4 11.6 7.6 16 8C11.6 8.4 8.4 11.6 8 16C7.6 11.6 4.4 8.4 0 8C4.4 7.6 7.6 4.4 8 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C8.4 4.4 11.6 7.6 16 8C11.6 8.4 8.4 11.6 8 16C7.6 11.6 4.4 8.4 0 8C4.4 7.6 7.6 4.4 8 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.section.night .eyebrow,
.eco-box .eyebrow,
.fin .eyebrow {
  color: var(--emerald);
}

/* Asymmetric Section Header (.head) */
.head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(44px, 5.5vw, 72px);
}

.head-main {
  display: grid;
  gap: 14px;
  align-content: start;
}

@media (min-width: 960px) {
  .head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 24px 48px;
  }
  .head > .t-lead {
    justify-self: end;
    max-width: 44ch;
    padding-bottom: 4px;
  }
}

/* ==========================================================================
   BUTTONS & BADGES
   ========================================================================== */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  gap: 12px;
}

.btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--h);
  padding: 8px 20px;
  border-radius: var(--r-ctl);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  transition: transform var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn-lg {
  --h: 52px;
  padding: 10px 26px;
  border-radius: 12px;
  font-size: 1rem;
}

.btn-sm {
  --h: 48px;
  padding: 8px 16px;
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .btn {
    white-space: normal;
  }
}

.btn-primary {
  background: var(--ink);
  color: var(--page);
  box-shadow: 0 1px 2px rgb(15 26 34 / 0.14), 0 8px 20px -6px rgb(15 26 34 / 0.28);
}

.btn-primary:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
}

.btn-emerald {
  background: var(--emerald);
  color: #082015;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(15 26 34 / 0.1), 0 10px 26px -6px rgb(32 214 139 / 0.45);
}

.btn-emerald:hover {
  background: #2be496;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-btn);
}

.btn-secondary:hover {
  background: var(--page-2);
}

.btn-night {
  background: var(--emerald);
  color: #071f14;
  font-weight: 600;
}

.btn-night:hover {
  background: #33e69b;
}

.ic-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--d-fast) var(--ease);
}

.btn:hover .ic-arrow {
  transform: translateX(3px);
}

.reassure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.reassure i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgb(32 214 139 / 0.2);
}

/* ==========================================================================
   HEADER NAVIGATION (.site-header)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: var(--card-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.header-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  flex: none;
}

.brand-logo img {
  height: 40px;
  width: auto;
}

.logo-dark-only {
  display: none;
}

[data-theme="dark"] .logo-light-only {
  display: none;
}

[data-theme="dark"] .logo-dark-only {
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-soft);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.nav-link:hover {
  background: var(--hover);
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--card);
  box-shadow: var(--shadow-btn);
  color: var(--ink);
  transition: background-color var(--d-fast) var(--ease);
}

.theme-toggle:hover {
  background: var(--page-2);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  place-items: center;
  background: var(--card);
  box-shadow: var(--shadow-btn);
}

@media (max-width: 1080px) {
  .nav-links {
    display: none;
  }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    padding: 16px var(--gutter) 22px;
    background: var(--card);
    border-bottom: 1px solid var(--line-2);
    box-shadow: var(--shadow-popover);
  }
  .menu-toggle {
    display: grid;
  }
}

@media (max-width: 540px) {
  .header-in {
    gap: 8px;
  }
  .brand-logo img {
    height: 34px;
    width: auto;
  }
  .header-actions {
    gap: 8px;
  }
  .header-actions > .btn-sm {
    display: none;
  }
}

/* ==========================================================================
   01. HERO + 5-CARD FLOATING FAN + INTERACTIVE BRIEFING COMPOSER
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(36px, 5vw, 68px);
  padding-bottom: clamp(72px, 8vw, 112px);
  overflow: clip;
}

.hero-top {
  display: grid;
  gap: 24px;
  align-items: end;
}

@media (min-width: 960px) {
  .hero-top {
    grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
    gap: 40px;
  }
}

.hero-title {
  display: grid;
  gap: 16px;
}

.hero-side {
  display: grid;
  gap: 20px;
  align-content: end;
}

.hero-side .btn-lg {
  padding: 10px 18px;
  font-size: 0.9375rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow-chip);
}

.hero-meta b {
  color: var(--ink);
  font-weight: 600;
}

/* Hero Stage & 5-Card Fan (Exact aicarousels.com .fan geometry) */
.hero-stage {
  position: relative;
  margin-top: clamp(38px, 4.8vw, 64px);
}

.fan {
  --cw: clamp(190px, 19.5vw, 248px);
  --step: clamp(128px, 14.5vw, 186px);
  position: relative;
  height: clamp(270px, 27vw, 355px);
  margin: 0 auto;
  max-width: 1120px;
  user-select: none;
}

.fan-card {
  position: absolute;
  left: 50%;
  top: 12px;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 120%;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--rot, 0deg));
  transition: transform 0.65s var(--ease-out), filter 0.45s var(--ease);
}

.fan-card[data-pos="1"] { --tx: calc(var(--step) * -2); --ty: 28px; --rot: -8deg; z-index: 1; }
.fan-card[data-pos="2"] { --tx: calc(var(--step) * -1); --ty: 8px;  --rot: -4deg; z-index: 2; }
.fan-card[data-pos="3"] { --tx: 0px;                    --ty: -4px; --rot: 0deg;  z-index: 3; }
.fan-card[data-pos="4"] { --tx: var(--step);            --ty: 8px;  --rot: 4.5deg; z-index: 4; }
.fan-card[data-pos="5"] { --tx: calc(var(--step) * 2);  --ty: 30px; --rot: 8.5deg; z-index: 3; }

@media (hover: hover) and (pointer: fine) {
  .fan:hover {
    --step: clamp(138px, 15.6vw, 200px);
  }
  .fan-card:hover {
    z-index: 10 !important;
    transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 16px), 0) rotate(calc(var(--rot, 0deg) * 0.4)) scale(1.04);
  }
}

.fan-float {
  position: relative;
  display: block;
  animation: fan-float var(--dur, 7s) ease-in-out var(--del, 0s) infinite alternate;
}

.fan-card:hover .fan-float {
  will-change: transform;
}

.fan-card[data-pos="1"] .fan-float { --dur: 6.8s; --del: -1.2s; }
.fan-card[data-pos="2"] .fan-float { --dur: 7.4s; --del: -3.1s; }
.fan-card[data-pos="3"] .fan-float { --dur: 6.4s; --del: -0.6s; }
.fan-card[data-pos="4"] .fan-float { --dur: 7.8s; --del: -2.4s; }
.fan-card[data-pos="5"] .fan-float { --dur: 7.1s; --del: -4.2s; }

@keyframes fan-float {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-9px); }
}

.fan-pic {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  box-shadow: var(--shadow-slide);
  background: var(--card);
}

.fan-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: #0f1a22;
  color: #20d68b;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgb(15 26 34 / 0.25), 0 0 0 1.5px rgb(32 214 139 / 0.45);
}

@media (max-width: 860px) {
  .fan {
    --cw: clamp(148px, 34vw, 198px);
    --step: clamp(86px, 21vw, 128px);
    height: clamp(210px, 44vw, 270px);
    overflow: hidden;
  }
  .fan-card[data-pos="1"], .fan-card[data-pos="5"] {
    opacity: 0.55;
  }
}

@media (max-width: 540px) {
  .fan {
    --cw: 118px;
    --step: 45px;
    height: 196px;
    overflow: hidden;
  }
  .fan-badge {
    top: -10px;
    font-size: 0.625rem;
    padding: 2px 8px;
  }
}

/* Interactive Briefing Composer Box (.cc-box) */
.cc-wrap {
  position: relative;
  z-index: 12;
  max-inline-size: 820px;
  margin: -34px auto 0;
  container: composer / inline-size;
}

.cc-box {
  padding: 18px 20px 16px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-float), 0 36px 80px -28px rgb(15 26 34 / 0.24);
  border: 1px solid var(--line-2);
}

.cc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cc-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.cc-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
}

.cc-niches {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 6px;
}

.cc-niche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  /* Keep font-weight constant across states to prevent layout jump (card) */
  font-weight: 600;
  color: var(--text-soft);
  background: var(--page-2);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

.cc-niche:hover {
  color: var(--ink);
  background: var(--page-3);
}

.cc-niche[aria-pressed="true"] {
  background: var(--emerald-soft);
  color: var(--emerald-ink);
  box-shadow: inset 0 0 0 1px var(--emerald-line);
}

.cc-input-row {
  position: relative;
  margin-bottom: 14px;
}

.cc-input {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--page);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 0.96rem;
  color: var(--ink);
  transition: box-shadow var(--d-fast) var(--ease);
}

.cc-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--emerald), 0 0 0 3px var(--emerald-soft);
}

/* Safe mobile-first vertical stacked default (size-aware-styling) */
.cc-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.cc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.cc-select {
  flex: 1 1 180px;
  min-height: 48px;
  max-width: 100%;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--page-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

#composerSubmitBtn {
  width: 100%;
}

/* Fallback for browsers without container queries */
@media (min-width: 640px) {
  .cc-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .cc-controls,
  #composerSubmitBtn {
    width: auto;
  }
  .cc-select {
    flex: 0 1 auto;
  }
}

/* Container-aware horizontal layout when composer has >= 580px inline space */
@supports (container-type: inline-size) {
  .cc-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .cc-controls,
  #composerSubmitBtn {
    width: 100%;
  }
  @container composer (min-width: 580px) {
    .cc-bar {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
    .cc-controls,
    #composerSubmitBtn {
      width: auto;
    }
    .cc-select {
      flex: 0 1 auto;
    }
  }
}

.cc-preview-strip {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--page-2);
  border: 1px dashed var(--line-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.cc-preview-slides {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 6px;
}

.cc-preview-slides span {
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--shadow-chip);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
}

/* Live WhatsApp Balloon Preview (.cc-wa-mirror) */
.cc-wa-mirror {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(32 214 139 / 0.09), rgb(22 184 196 / 0.06));
  border: 1px solid var(--emerald-line);
  display: grid;
  gap: 8px;
}

.cc-wa-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--text-soft);
}

.cc-wa-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgb(32 214 139 / 0.22);
  flex: none;
}

.cc-wa-bubble {
  position: relative;
  padding: 10px 14px 8px;
  border-radius: 12px 12px 4px 12px;
  background: var(--card);
  box-shadow: var(--shadow-chip);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.cc-wa-bubble p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink);
  max-inline-size: 100%;
  flex: 1 1 260px;
}

.cc-wa-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

.cc-wa-checks {
  font-style: normal;
  font-weight: 700;
  color: var(--emerald-ink);
  letter-spacing: -2px;
}

/* ==========================================================================
   02. STUDIO 3-STEP INTERACTIVE SHOWCASE (.eds + .edw)
   ========================================================================== */
.eds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

@media (max-width: 820px) {
  .eds {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

.eds-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  padding: 20px 18px 16px;
  border-radius: 16px;
  text-align: left;
  background: var(--card);
  box-shadow: var(--shadow-tile);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

.eds-tab:hover {
  transform: translateY(-2px);
}

.eds-tab[aria-selected="true"] {
  box-shadow: 0 0 0 1.5px var(--emerald), var(--shadow-popover);
}

.eds-bar {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.eds-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--emerald), var(--cyan));
  transition: width 0.4s var(--ease);
}

.eds-tab[aria-selected="true"] .eds-bar i {
  width: 100%;
}

.eds-n {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--page-2);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.eds-tab[aria-selected="true"] .eds-n {
  background: var(--emerald);
  color: #062115;
}

.eds-t {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

.eds-d {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Studio Window (.edw) */
.edw-stage {
  padding: clamp(12px, 2.2vw, 28px);
  border-radius: var(--r-stage);
  background: linear-gradient(145deg, var(--page-2), var(--page-3));
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.edw {
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.edw-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.edw-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

.edw-badge {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--emerald-soft);
  color: var(--emerald-ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.edw-themes {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: safe center;
  gap: 8px;
}

.edw-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 14px 6px 11px;
  border-radius: 10px;
  background: var(--page);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: all var(--d-fast) var(--ease);
}

.edw-theme-btn:hover {
  color: var(--ink);
}

.edw-theme-btn[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.sw-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}

.edw-canvas {
  padding: clamp(20px, 3vw, 34px);
  background: var(--page);
}

.edw-slides-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(170px, 1fr));
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.edw-slide-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-slide);
  transition: transform 0.35s var(--ease-out);
}

.edw-slide-card:hover {
  transform: translateY(-4px);
}

.edw-slide-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.edw-slide-num {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgb(15 26 34 / 0.72);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.edw-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--card);
  font-size: 0.8125rem;
  color: var(--muted);
}

.edw-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edw-thumbs img {
  width: 34px;
  height: 42px;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line-2);
}

/* ==========================================================================
   03. NIGHT SECTION: WHY CAROUSELS WORK + REALISTIC PHONE MOCKUP (.sty)
   ========================================================================== */
.sty-grid-layout {
  display: grid;
  gap: 44px;
  align-items: center;
}

@media (min-width: 980px) {
  .sty-grid-layout {
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
    gap: 56px;
  }
}

.sty-pills {
  display: inline-flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px var(--night-line);
  margin-bottom: 28px;
}

.sty-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  /* Keep font-weight constant across states to prevent layout shift (card) */
  font-weight: 600;
  color: var(--night-muted);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.sty-pill:hover {
  color: var(--night-text);
}

.sty-pill[aria-selected="true"] {
  background: var(--emerald);
  color: #062015;
}

.sty-big {
  font-size: clamp(2.4rem, 1.8rem + 2.5vw, 4.75rem);
  line-height: 0.95;
  font-weight: 300;
  letter-spacing: -0.045em;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
}

.sty-big-label {
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--night-text);
}

.sty-bars {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px var(--night-line);
}

.sty-bar-row {
  display: grid;
  gap: 6px;
}

.sty-bar-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--night-muted);
}

.sty-bar-top b {
  color: var(--night-text);
}

.sty-bar-track {
  height: 8px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
}

.sty-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--emerald), var(--cyan));
  width: var(--w, 100%);
  transition: width 0.6s var(--ease-out);
}

.sty-bar-fill.muted {
  background: rgb(255 255 255 / 0.25);
}

.sty-list {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.sty-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sty-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgb(32 214 139 / 0.14);
  color: var(--emerald);
  box-shadow: inset 0 0 0 1px rgb(32 214 139 / 0.28);
  font-weight: 700;
  font-size: 0.85rem;
}

.sty-list b {
  color: var(--night-text);
  font-weight: 600;
}

.sty-list p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--night-muted);
}

/* Interactive Phone Stage */
.sty-phone-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sty-phone-frame {
  position: relative;
  width: min(350px, 88vw);
  padding: 12px;
  border-radius: 42px;
  background: #14222d;
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 0.14),
    0 30px 80px -20px rgb(0 0 0 / 0.7),
    0 0 90px -20px rgb(32 214 139 / 0.22);
}

.sty-phone-notch {
  width: 96px;
  height: 22px;
  margin: 4px auto 10px;
  border-radius: 99px;
  background: #091117;
}

.sty-phone-screen {
  border-radius: 30px;
  overflow: hidden;
  background: #ffffff;
  color: #0f1a22;
}

.sty-app-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f0;
}

.sty-app-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.sty-app-who b {
  display: block;
  font-size: 0.8125rem;
  color: #0f1a22;
}

.sty-app-who small {
  display: block;
  font-size: 0.7rem;
  color: #64748b;
}

.sty-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #f8fafc;
}

.sty-rail {
  display: flex;
  height: 100%;
  transition: transform 0.45s var(--ease-out);
}

.sty-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.sty-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sty-counter-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgb(15 26 34 / 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}

.sty-phone-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.sty-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 0.08);
  color: var(--night-text);
  box-shadow: inset 0 0 0 1px var(--night-line-2);
  transition: all var(--d-fast) var(--ease);
}

.sty-nav-btn:hover {
  background: var(--emerald);
  color: #062015;
}

.sty-dots {
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.sty-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.24);
  transition: all var(--d-fast) var(--ease);
}

.sty-dot.is-on {
  width: 22px;
  border-radius: 99px;
  background: var(--emerald);
}

/* ==========================================================================
   03.B MULTI-PLATFORM DEVICE MOCKUPS (LINKEDIN, INSTAGRAM, TIKTOK)
   ========================================================================== */
.mockup-view {
  display: none;
  width: min(350px, 88vw);
  animation: mockupFadeIn 0.35s ease-out;
}
.mockup-view.is-active {
  display: block;
}
@keyframes mockupFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Instagram Extras */
.ig-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border-top: 1px solid #f1f5f3;
  color: #0f1a22;
  font-size: 1.15rem;
}
.ig-actions-left {
  display: flex;
  gap: 14px;
}
.ig-caption-box {
  padding: 0 14px 14px;
  background: #ffffff;
  font-size: 0.78rem;
  color: #334155;
  line-height: 1.4;
}

/* LinkedIn Document Viewer */
.linkedin-card {
  background: #14222d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(32, 214, 139, 0.15);
}
.li-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.li-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #1e293b;
  flex-shrink: 0;
}
.li-avatar img { width: 100%; height: 100%; object-fit: cover; }
.li-user h4 { font-size: 0.88rem; font-weight: 700; color: #fff; margin: 0; }
.li-user p { font-size: 0.72rem; color: #94a3b8; margin: 0; }
.li-caption {
  padding: 12px 16px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #e2e8f0;
}
.li-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #0b1319;
  overflow: hidden;
}
.li-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.li-footer {
  padding: 12px 14px;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  background: #101c26;
}
.li-footer span { display: flex; align-items: center; gap: 5px; cursor: pointer; transition: color 0.2s; }
.li-footer span:hover { color: #20d68b; }

/* TikTok Vertical Player */
.tiktok-frame {
  position: relative;
  background: #000;
  border: 4px solid #1e293b;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(32, 214, 139, 0.18);
  aspect-ratio: 9 / 16;
  width: min(310px, 86vw);
  margin: 0 auto;
}
.tiktok-media {
  position: relative;
  width: 100%;
  height: 100%;
}
.tiktok-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tt-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 45%, transparent 80%, rgba(0,0,0,0.6) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 14px 18px;
  pointer-events: none;
}
.tt-top {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
.tt-top span.active {
  border-bottom: 2px solid #20d68b;
  padding-bottom: 2px;
}
.tt-side-actions {
  position: absolute;
  right: 10px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}
.tt-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.tt-bottom {
  max-width: 80%;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #fff;
}
.tt-bottom h5 { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; color: #20d68b; }

/* In-mockup viewer nav pills */
.viewer-nav-pill {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 26, 34, 0.85);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 5;
}
.viewer-nav-pill button {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  transition: background 0.2s;
}
.viewer-nav-pill button:hover {
  background: #20d68b;
  color: #062015;
}

/* 3D Perspective & Hero Fan Enhancements */
.hero-stage {
  perspective: 1200px;
}
.fan {
  transform-style: preserve-3d;
}
.fan-card[data-pos="3"] .fan-pic {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 0 2px #20d68b;
}
@media (hover: hover) and (pointer: fine) {
  .fan:hover .fan-card[data-pos="1"] { transform: translate3d(calc(var(--step) * -2.2), 34px, -15px) rotate(-16deg) scale(0.92); }
  .fan:hover .fan-card[data-pos="2"] { transform: translate3d(calc(var(--step) * -1.1), 10px, 0px) rotate(-8deg) scale(0.96); }
  .fan:hover .fan-card[data-pos="3"] { transform: translate3d(0, -6px, 15px) rotate(0deg) scale(1.03); }
  .fan:hover .fan-card[data-pos="4"] { transform: translate3d(calc(var(--step) * 1.1), 10px, 0px) rotate(8deg) scale(0.96); }
  .fan:hover .fan-card[data-pos="5"] { transform: translate3d(calc(var(--step) * 2.2), 34px, -15px) rotate(16deg) scale(0.92); }

  .fan-card:hover {
    z-index: 10 !important;
    transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 24px), 40px) rotate(0deg) scale(1.08) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 25px rgba(32, 214, 139, 0.4), 0 0 0 2px #20D68B !important;
  }
}

/* Progressive AI Reveal (ft-develop) */
@keyframes ft-develop {
  0% {
    filter: blur(12px) saturate(0.25) brightness(1.1);
    opacity: 0.65;
    transform: scale(0.98);
  }
  60% {
    filter: blur(3px) saturate(0.85) brightness(1.02);
    opacity: 0.92;
  }
  100% {
    filter: blur(0px) saturate(1) brightness(1);
    opacity: 1;
    transform: scale(1);
  }
}
.ft-developing {
  animation: ft-develop 1.2s cubic-bezier(0, 0, 0.2, 1) both;
}

/* ==========================================================================
   04. BENTO GRID FEATURES (#everything / .ft-grid)
   ========================================================================== */
.ft-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .ft-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .ft-span-7 { grid-column: span 7; }
  .ft-span-5 { grid-column: span 5; }
  .ft-span-6 { grid-column: span 6; }
  .ft-span-4 { grid-column: span 4; }
}

.ft-card {
  container: bento-card / inline-size;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-tile);
  transition: box-shadow var(--d-menu) var(--ease), transform var(--d-menu) var(--ease);
}

.ft-card:hover {
  box-shadow: var(--shadow-popover);
}

.ft-vis {
  container: bento-vis / inline-size;
  position: relative;
  min-height: 270px;
  padding: 14px 12px;
  border-radius: 16px;
  background: radial-gradient(80% 70% at 50% 0%, rgb(255 255 255 / 0.7), transparent 72%), var(--page-2);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  align-items: safe center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}

.ft-copy {
  display: grid;
  gap: 6px;
  padding: 20px 16px 14px;
}

.ft-copy p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Brand Kit Switcher inside Bento — Mobile-first vertical stack (size-aware-styling + card) */
.kit-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

.kit-panel {
  width: min(260px, 100%);
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-popover);
}

.kit-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: var(--page-2);
  margin-bottom: 12px;
  max-width: 100%;
}

.kit-switch button {
  min-height: 48px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
}

.kit-switch button[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-chip);
}

.kit-slides-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 290px;
}

.kit-slides-pair img {
  width: calc(50% - 6px);
  max-width: 138px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow-slide);
  transition: transform 0.35s var(--ease);
}

.kit-slides-pair img:first-child {
  transform: rotate(-2.5deg);
}

.kit-slides-pair img:last-child {
  transform: rotate(2.5deg);
}

/* Multi-Source Switcher inside Bento — Mobile-first vertical stack (size-aware-styling + card) */
.src-showcase {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 440px;
}

.src-buttons {
  display: grid;
  gap: 8px;
  flex: 1;
  width: 100%;
}

.src-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-chip);
  font-size: 0.8125rem;
  /* Keep font-weight constant across states to prevent layout jump (card) */
  font-weight: 600;
  color: var(--text-soft);
  text-align: left;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

.src-btn[aria-pressed="true"] {
  background: var(--emerald-soft);
  color: var(--emerald-ink);
  box-shadow: inset 0 0 0 1.5px var(--emerald);
}

.src-preview-card {
  width: min(190px, 100%);
  margin-inline: auto;
  flex: none;
}

.src-preview-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow-slide);
}

/* Fallback media query for browsers without container queries */
@media (min-width: 560px) {
  .ft-vis {
    padding: 22px;
  }
  .kit-showcase {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }
  .src-showcase {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .src-preview-card {
    width: 152px;
    margin-inline: 0;
  }
}

/* Progressive enhancement with @container based on card's actual inline-size (size-aware-styling + card) */
@supports (container-type: inline-size) {
  .ft-vis {
    padding: 14px 12px;
  }
  .kit-showcase {
    flex-direction: column;
  }
  .src-showcase {
    flex-direction: column;
    align-items: stretch;
  }
  .src-preview-card {
    width: min(190px, 100%);
    margin-inline: auto;
  }

  @container bento-vis (min-width: 400px) {
    .ft-vis {
      padding: 22px;
    }
    .src-showcase {
      flex-direction: row;
      align-items: center;
      gap: 18px;
    }
    .src-preview-card {
      width: 152px;
      margin-inline: 0;
    }
  }

  @container bento-vis (min-width: 520px) {
    .kit-showcase {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 24px;
    }
  }
}

/* Before / After Copy Polish inside Bento */
.ask-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.ask-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
}

.ask-cards img {
  flex: 1 1 0;
  min-width: 0;
  width: calc((100% - 20px) / 3);
  max-width: 156px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: var(--shadow-slide);
  transition: all 0.35s var(--ease);
}

/* ==========================================================================
   05. 3 FORMATS, 1 IDENTITY STAGE (.fx-stage)
   ========================================================================== */
.fx-stage {
  padding: clamp(16px, 2.8vw, 36px);
  border-radius: var(--r-stage);
  background: linear-gradient(145deg, #e7f6ef, #edf4f8);
  box-shadow: inset 0 0 0 1px var(--emerald-line);
}

[data-theme="dark"] .fx-stage {
  background: linear-gradient(145deg, #11222b, #0f1a22);
}

.fx-win {
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.fx-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.fx-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: clamp(22px, 3vw, 38px);
  background: var(--page);
  align-items: end;
}

@media (max-width: 860px) {
  .fx-columns {
    grid-template-columns: minmax(0, 1fr);
    max-width: 380px;
    margin: 0 auto;
  }
}

.fx-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.fx-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--muted);
}

.fx-col-head b {
  color: var(--ink);
  font-weight: 600;
}

.fx-media-box {
  position: relative;
  width: 100%;
  max-width: 256px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-slide);
  background: #141c24;
}

.fx-media-box[data-ratio="4:5"] {
  aspect-ratio: 4 / 5;
}

.fx-media-box[data-ratio="9:16"] {
  max-width: 205px;
  aspect-ratio: 9 / 16;
}

.fx-media-box img,
.fx-media-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx-vid-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.fx-mini-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.fx-mini-btn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--card);
  box-shadow: var(--shadow-btn);
  color: var(--ink);
  font-size: 1.1rem;
}

.fx-mini-btn:hover {
  background: var(--emerald-soft);
}

/* ==========================================================================
   06. 304+ SLIDE LAYOUTS BOARD (#inspiration / .ly-board)
   ========================================================================== */
.ly-board {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .ly-board {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
    gap: 36px;
  }
}

.ly-side {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  padding-bottom: 6px;
}

@media (min-width: 1024px) {
  .ly-side {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    flex-direction: column;
    overflow: visible;
  }
}

.ly-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
  /* Keep font-weight constant across states to prevent layout jump (card) */
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

.ly-cat:hover {
  background: var(--hover);
  color: var(--ink);
}

.ly-cat[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-btn);
}

.ly-cat .n {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}

.ly-cat[aria-pressed="true"] .n {
  color: var(--emerald-ink);
}

.ly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 14px;
}

@media (min-width: 640px) {
  .ly-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 18px;
  }
}

@media (min-width: 1200px) {
  .ly-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 20px;
  }
}

.ly-tile {
  display: grid;
  gap: 9px;
}

.ly-tile[hidden] {
  display: none !important;
}

.ly-pic-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-slide);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.ly-tile:hover .ly-pic-wrap {
  transform: translateY(-5px);
}

.ly-pic {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  display: block;
}

.ly-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
}

.ly-cap b {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
}

.ly-cap span {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   07. REVIEWS & INFINITE MARQUEE REEL (.rv-grid + .rv-reel)
   ========================================================================== */
.rv-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 960px) {
  .rv-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .rv-feature {
    grid-row: span 2;
  }
}

.rv-card {
  container: review-card / inline-size;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-tile);
}

.rv-feature {
  background: linear-gradient(145deg, var(--emerald-soft), var(--card));
  box-shadow: inset 0 0 0 1px var(--emerald-line), var(--shadow-tile);
  justify-content: space-between;
}

.rv-stars {
  color: #9a3412;
  font-size: 1rem;
  letter-spacing: 2px;
}

[data-theme="dark"] .rv-stars {
  color: #fbbf24;
}

.rv-quote {
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem);
  line-height: 1.38;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.rv-feature .rv-quote {
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.25rem);
  line-height: 1.22;
}

@supports (font-size: 1cqi) {
  .rv-card .rv-quote {
    font-size: clamp(1.15rem, 0.95rem + 1.4cqi, 1.45rem);
  }
  .rv-feature .rv-quote {
    font-size: clamp(1.4rem, 1.05rem + 2cqi, 2.25rem);
  }
}

.rv-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.rv-who b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.rv-who small {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--muted);
}

.rv-av {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #0f1a22;
  color: #20d68b;
  font-weight: 700;
  font-size: 0.875rem;
}

/* Infinite Marquee Reel (.rv-reel from aicarousels.com) */
.rv-reel {
  --sw: clamp(148px, 13vw, 188px);
  --gap: clamp(14px, 1.4vw, 20px);
  position: relative;
  margin-top: clamp(48px, 5.5vw, 76px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
}

.rv-track {
  display: flex;
  width: max-content;
  padding-block: 10px 22px;
  animation: rv-drift 75s linear infinite;
}

.rv-reel:hover .rv-track,
.rv-reel.is-paused .rv-track {
  animation-play-state: paused;
}

.rv-set {
  display: flex;
  gap: var(--gap);
  padding-right: var(--gap);
}

.rv-set > li {
  width: var(--sw);
  flex: none;
  transition: transform 0.45s var(--ease-out);
}

.rv-set > li:hover {
  transform: translateY(-6px);
}

.rv-pic {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  box-shadow: var(--shadow-slide);
}

@keyframes rv-drift {
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   08. PRICING CARDS + ONE-TIME PACK + LOKAU ECOSYSTEM CROSS-SELL
   ========================================================================== */
.pr-term {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--page-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.pr-term button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 16px;
  border-radius: 9px;
  font-size: 0.875rem;
  /* Keep font-weight constant across states to prevent layout shift (card) */
  font-weight: 600;
  color: var(--text-soft);
}

.pr-term button[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-chip);
}

.pr-save-badge {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--emerald-soft);
  color: var(--emerald-ink);
  font-size: 0.7rem;
  font-weight: 700;
}

.pr-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 920px) {
  .pr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.pr-card {
  container: pricing-card / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 32px;
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-tile);
  isolation: isolate;
  overflow: hidden;
}

.pr-card.is-pop {
  box-shadow: 0 0 0 2px var(--emerald), var(--shadow-float);
}

.pr-card.is-pop::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 220px;
  background: radial-gradient(65% 90% at 85% 0%, rgb(32 214 139 / 0.2), transparent 72%);
  pointer-events: none;
}

.pr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pr-name {
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
}

.pr-flag {
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--emerald);
  color: #062115;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.pr-blurb {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.pr-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 24px;
}

.pr-amt {
  font-size: clamp(2.1rem, 1.8rem + 1.1vw, 3.25rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@supports (font-size: 1cqi) {
  .pr-card .pr-amt {
    font-size: clamp(2.1rem, 1.35rem + 4.5cqi, 3.25rem);
  }
}

.pr-per {
  font-size: 0.9rem;
  color: var(--muted);
}

.pr-rule {
  height: 1px;
  margin: 22px 0 18px;
  border: 0;
  background: var(--line);
}

.pr-list {
  display: grid;
  gap: 13px;
  margin-bottom: 26px;
}

.pr-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.48;
  color: var(--text-soft);
  max-inline-size: 100%;
}

.pr-list li::before {
  content: "✓";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  margin-top: 1px;
  background: var(--emerald-soft);
  color: var(--emerald-ink);
  box-shadow: inset 0 0 0 1px var(--emerald-line);
  font-size: 0.72rem;
  font-weight: 700;
}

.pr-item-text {
  flex: 1 1 0%;
  min-width: 0;
  display: inline;
}

.pr-item-text b {
  color: var(--ink);
  font-weight: 600;
}

.pr-guarantee {
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
  max-inline-size: 100%;
}

/* One-time Entry Pack (.pr-once) — Container-aware 3-zone card */
.pr-once {
  container: once-pack / inline-size;
  margin-top: 28px;
}

.pr-life {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-tile);
}

.pr-life-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pr-life-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 22px;
}

.pr-life-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

@media (min-width: 640px) {
  .pr-life-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .pr-life {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) 250px;
    align-items: center;
    gap: 32px;
  }
}

@supports (container-type: inline-size) {
  .pr-life {
    grid-template-columns: minmax(0, 1fr);
  }
  @container once-pack (min-width: 600px) {
    .pr-life-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container once-pack (min-width: 900px) {
    .pr-life {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) 250px;
      align-items: center;
      gap: 32px;
    }
  }
}

/* Ecosystem Cross-Sell Builder */
.eco-box {
  margin-top: 40px;
  padding: clamp(24px, 3.2vw, 38px);
  border-radius: var(--r-stage);
  background: var(--night);
  color: var(--night-text);
  box-shadow: var(--shadow-float);
}

.eco-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 860px) {
  .eco-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.eco-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px var(--night-line-2);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}

.eco-item.is-selected {
  background: rgb(32 214 139 / 0.12);
  box-shadow: inset 0 0 0 2px var(--emerald);
}

.eco-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.eco-check {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 0.08);
  color: #062115;
  font-size: 0.8rem;
  font-weight: 700;
}

.eco-item.is-selected .eco-check {
  background: var(--emerald);
  color: #062115;
}

.eco-item.is-selected .eco-check::after {
  content: "✓";
}

/* ==========================================================================
   09. SPLIT FAQ (.fq) + FINAL FAN CTA (.fin) + FOOTER
   ========================================================================== */
.fq {
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .fq {
    grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
    gap: 56px;
  }
}

.fq-list {
  border-top: 1px solid var(--line-2);
}

.fq-item {
  border-bottom: 1px solid var(--line-2);
}

.fq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.fq-item summary::-webkit-details-marker {
  display: none;
}

.fq-plus {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--page-2);
  color: var(--ink);
  font-weight: 600;
  transition: transform var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}

.fq-item[open] .fq-plus {
  transform: rotate(45deg);
  background: var(--emerald);
  color: #062115;
}

.fq-ans {
  padding-bottom: 20px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Final Fan Card (.fin) */
.fin {
  display: grid;
  gap: 36px;
  align-items: center;
  padding: clamp(24px, 5vw, 68px);
  border-radius: var(--r-stage);
  background: var(--night);
  color: var(--night-text);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

@media (min-width: 920px) {
  .fin {
    grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr);
  }
}

.fin-fan {
  position: relative;
  width: 100%;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fin-fan img {
  position: absolute;
  width: 175px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.55);
  transition: transform 0.5s var(--ease-out);
}

.fin-fan img:nth-child(1) { transform: translateX(-85px) rotate(-9deg); z-index: 1; }
.fin-fan img:nth-child(2) { transform: translateY(-10px) rotate(0deg); z-index: 3; width: 190px; }
.fin-fan img:nth-child(3) { transform: translateX(85px) rotate(9deg); z-index: 2; }

.fin:hover .fin-fan img:nth-child(1) { transform: translateX(-105px) rotate(-12deg); }
.fin:hover .fin-fan img:nth-child(3) { transform: translateX(105px) rotate(12deg); }

@media (max-width: 540px) {
  .fin-fan {
    height: 230px;
  }
  .fin-fan img {
    width: 132px;
  }
  .fin-fan img:nth-child(1) { transform: translateX(-56px) rotate(-8deg); }
  .fin-fan img:nth-child(2) { width: 144px; transform: translateY(-6px) rotate(0deg); }
  .fin-fan img:nth-child(3) { transform: translateX(56px) rotate(8deg); }
}

/* Footer */
.site-footer {
  padding: 56px 0 92px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 8px 18px;
}

.footer-links a,
.site-footer p a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 6px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Floating WhatsApp Button (Use 100dvw instead of 100vw to avoid scrollbar overflow — css-layout) */
.wa-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: inline-flex;
  align-items: safe center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  max-inline-size: calc(100dvw - 2rem);
  padding: 8px 20px;
  border-radius: var(--r-pill);
  background: var(--emerald);
  color: #062115;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px -6px rgb(32 214 139 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.08);
  transition: transform var(--d-fast) var(--ease);
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.02);
}