/*!
 * AIpic.ru landing page styles.
 *
 * Standalone stylesheet for the static marketing page. Bumping the version
 * query string in index.html (?v=YYYYMMDD) forces clients to re-download
 * after edits.
 */

:root {
  --ink-50: #fafafa;
  --ink-100: #f4f4f5;
  --ink-200: #e4e4e7;
  --ink-300: #d4d4d8;
  --ink-400: #a1a1aa;
  --ink-500: #71717a;
  --ink-600: #52525b;
  --ink-700: #3f3f46;
  --ink-800: #27272a;
  --ink-900: #18181b;
  --ink-950: #09090b;
  --amber-500: #f59e0b;

  /* Brand gradient: deep violet → magenta pink. Per-page templates can
     override --brand-from/--brand-to/--brand-accent/--brand-shadow with
     an inline <style> block in <head>; everything that uses --brand-*
     (buttons, card icons, cta-band, hero blobs) re-themes for free. */
  --brand-from: rgb(90, 0, 255);
  --brand-to: rgb(255, 0, 139);
  --brand-accent: rgb(0, 210, 255);
  --brand-gradient: linear-gradient(45deg, var(--brand-from) 0%, var(--brand-to) 100%);
  --brand-gradient-soft: linear-gradient(
    45deg,
    color-mix(in oklab, var(--brand-from) 12%, transparent) 0%,
    color-mix(in oklab, var(--brand-to) 12%, transparent) 100%
  );
  --brand-shadow: 0 10px 40px -10px rgba(160, 0, 200, 0.45);

  --bg: #ffffff;
  --fg: var(--ink-900);
  --muted: var(--ink-500);
  --subtle: var(--ink-100);
  --border: var(--ink-200);
  --card: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 8px 24px -8px rgba(0, 0, 0, 0.06);
}
.dark {
  --bg: var(--ink-950);
  --fg: var(--ink-100);
  --muted: var(--ink-400);
  --subtle: var(--ink-900);
  --border: var(--ink-800);
  --card: var(--ink-900);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --brand-shadow: 0 12px 40px -8px rgba(160, 0, 200, 0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
section[id] { scroll-margin-top: 72px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Gradient utilities ───────────────────────────────── */
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Header ───────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(180%) blur(12px);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.01em;
}
.brand .logo {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand .logo svg { width: 100%; height: 100%; display: block; }

/* ── Header navigation ────────────────────────────────── */
.nav-links {
  display: flex; align-items: center; gap: 28px;
  font-size: 14px; font-weight: 500;
}
.nav-links > a { color: var(--muted); transition: color .15s; }
.nav-links > a:hover { color: var(--fg); }

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

/* ── Dropdown menus (desktop) ─────────────────────────── */
.nav-dropdown { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none; padding: 0; margin: 0;
  font: inherit; color: var(--muted); cursor: pointer;
  transition: color .15s;
}
.nav-trigger:hover { color: var(--fg); }
.nav-trigger[aria-expanded="true"] { color: var(--fg); }
.nav-chevron { transition: transform .2s ease; }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 280px;
  padding: 10px;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.18);
}
.dark .nav-panel {
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
}
/* Bridge the gap between the trigger and the panel so the cursor crossing
   from one to the other doesn't collapse the dropdown (when hover is in
   play) and so click-outside detection still includes the panel area. */
.nav-panel::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.nav-panel--wide { min-width: 540px; }
.nav-panel-grid {
  display: grid; grid-template-columns: 1fr; gap: 2px;
}
.nav-panel-grid--two { grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.nav-panel-item {
  /* Default: title above hint, no icon (used by the Models dropdown). */
  display: flex; flex-direction: column;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--fg);
  transition: background .12s;
  text-decoration: none;
}
/* Tools dropdown items have an .nav-panel-icon chip — switch to a
   row layout in that case so icon | title+hint sit side by side. */
.nav-panel-item:has(.nav-panel-icon) {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.nav-panel-item:hover { background: var(--subtle); }
.nav-panel-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--subtle);
  color: var(--muted);
}
.nav-panel-item:hover .nav-panel-icon {
  background: rgba(0, 0, 0, 0.06);
  color: var(--fg);
}
.nav-panel-text {
  display: flex; flex-direction: column; min-width: 0;
}
.nav-panel-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
}
.nav-panel-hint {
  font-size: 11.5px; font-weight: 400; color: var(--muted);
  margin-top: 2px;
}

/* Mobile/burger nav-panel: same anchors get an inline icon. The mobile
   anchors are plain text with the icon sitting before the label, so we
   just align them on the row. */
.nav-panel-icon-m {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 10px;
  color: var(--muted);
}

.burger {
  display: none;
  width: 40px; height: 40px; border-radius: 10px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  color: var(--fg); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.burger:hover { background: var(--subtle); }
.burger .icon-close { display: none; }
.burger[aria-expanded="true"] .icon-menu { display: none; }
.burger[aria-expanded="true"] .icon-close { display: inline; }

.mobile-menu { display: none; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
  .nav-actions .btn-brand { display: none; }

  .mobile-menu {
    display: block;
    position: fixed; top: 60px; left: 0; right: 0; z-index: 9;
    padding: 12px 24px 20px;
    background: color-mix(in oklab, var(--bg) 96%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.18);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease-out, opacity .2s ease-out;
  }
  .mobile-menu[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-menu > a {
    display: block;
    padding: 14px 4px;
    font-size: 16px; font-weight: 500;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
  }
  .mobile-menu > a:last-of-type { border-bottom: none; }
  .mobile-menu .btn {
    display: inline-flex; width: 100%;
    margin-top: 14px; padding: 12px 18px;
    justify-content: center;
    color:#fff;
  }

  /* Dropdowns in the mobile menu collapse inline like an accordion. */
  .mobile-menu .nav-dropdown { border-bottom: 1px solid var(--border); }
  .mobile-menu .nav-trigger {
    display: flex; width: 100%;
    align-items: center; justify-content: space-between;
    padding: 14px 4px; margin: 0;
    font-size: 16px; font-weight: 500;
    color: var(--fg);
  }
  .mobile-menu .nav-panel {
    /* Override desktop absolute-positioned styles. */
    position: static; transform: none;
    min-width: 0; padding: 4px 0 12px 16px;
    background: transparent; backdrop-filter: none;
    border: none; border-radius: 0; box-shadow: none;
  }
  .mobile-menu .nav-panel::before { display: none; }
  .mobile-menu .nav-panel a {
    display: block;
    padding: 10px 4px;
    font-size: 14px; font-weight: 500;
    color: var(--muted);
    border-bottom: none;
  }
  .mobile-menu .nav-panel a:hover { color: var(--fg); }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 12px;
  font-weight: 500; font-size: 14px; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .1s ease, filter .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-brand {
  background: var(--brand-gradient);
  /* Constrain the gradient to the padding box so it doesn't bleed past
     the rounded corners through the 1px transparent border on .btn —
     visible as little triangular nubs at the top-left/top-right. */
  background-clip: padding-box;
  color: #fff;
  box-shadow: var(--brand-shadow);
  font-weight: 600;
}
.btn-brand:hover { filter: brightness(1.08); }

.btn-secondary {
  background: var(--subtle); color: var(--fg);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--ink-200); }
.dark .btn-secondary:hover { background: var(--ink-800); }

/* ── Hero ────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 80px;
  text-align: center;
}
/* Compact split hero used on tool landing pages — text on the left,
   preview thumbnails on the right. Shorter vertical padding because
   the previews give the section visual weight on their own. */
.hero--split { padding: 64px 0 56px; }
.hero--split > .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}
.hero--split .hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 900px) {
  .hero--split > .container {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 48px;
  }
  .hero--split .hero-text {
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-start;
  }
  .hero--split .hero-text .lead { margin-left: 0; margin-right: 0; max-width: 560px; }
  .hero--split .hero-text .cta { justify-content: flex-start; }
  .hero--split h1 { font-size: clamp(34px, 4.2vw, 52px); margin-bottom: 14px; }
  .hero--split .hero-text .lead { margin-bottom: 24px; }
  .hero--split .hero-previews {
    flex: 0 0 auto;
    margin-top: 0;
    justify-content: flex-end;
  }
  .hero--split .hero-preview-card { width: 220px; }
}
@media (min-width: 1200px) {
  .hero--split .hero-preview-card { width: 240px; }
}
.hero::before {
  content: ''; position: absolute; inset: -40% -20% auto;
  height: 640px; z-index: -1; opacity: 0.55; filter: blur(80px);
  background:
    radial-gradient(circle at 30% 40%, rgba(90, 0, 255, 0.45), transparent 55%),
    radial-gradient(circle at 70% 50%, rgba(255, 0, 139, 0.4), transparent 55%),
    radial-gradient(circle at 50% 70%, rgba(255, 200, 90, 0.2), transparent 55%);
}
.dark .hero::before { opacity: 0.35; }

/* ── Animated hero (opt-in via .hero--animated) ──────────
   Mirrors the .gen-blob/.gen-canvas drift used in the SPA's generation
   skeleton (public/src/styles/index.css). Three radial-gradient blobs
   travel along different elliptical paths with staggered durations so
   the composition never lines up the same way twice. The static
   ::before blob is suppressed so the two systems don't fight. */
.hero--animated::before { display: none; }
.hero-blobs {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.hero-blob {
  position: absolute;
  width: 65%;
  height: 75%;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: multiply;
  will-change: transform;
}
.dark .hero-blob {
  opacity: 0.45;
  mix-blend-mode: screen;
}
.hero-blob-a {
  top: -15%;
  left: -15%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand-from) 95%, transparent) 0%,
    transparent 65%);
  animation: hero-drift-a 9s ease-in-out infinite alternate;
}
.hero-blob-b {
  top: 5%;
  right: -20%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand-to) 92%, transparent) 0%,
    transparent 65%);
  animation: hero-drift-b 11s ease-in-out infinite alternate;
  animation-delay: -2s;
}
.hero-blob-c {
  bottom: -25%;
  left: 15%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand-accent) 85%, transparent) 0%,
    transparent 65%);
  animation: hero-drift-c 13s ease-in-out infinite alternate;
  animation-delay: -4s;
}
@keyframes hero-drift-a {
  0%   { transform: translate(-10%, -10%) scale(1); }
  50%  { transform: translate(35%, 25%) scale(1.2); }
  100% { transform: translate(15%, 40%) scale(0.95); }
}
@keyframes hero-drift-b {
  0%   { transform: translate(5%, 15%) scale(1.1); }
  50%  { transform: translate(-25%, -10%) scale(0.9); }
  100% { transform: translate(20%, -30%) scale(1.2); }
}
@keyframes hero-drift-c {
  0%   { transform: translate(0, 15%) scale(1.05); }
  50%  { transform: translate(30%, -30%) scale(0.85); }
  100% { transform: translate(-20%, 25%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blob { animation: none; }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--brand-gradient-soft);
  border: 1px solid color-mix(in oklab, var(--brand-from) 20%, transparent);
  font-size: 12px; color: var(--fg); font-weight: 500;
  margin-bottom: 22px;
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand-gradient);
}

h1 {
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 800; letter-spacing: -0.025em;
  margin: 0 0 18px; line-height: 1.05;
}
.hero p.lead {
  max-width: 660px; margin: 0 auto 32px;
  color: var(--muted); font-size: clamp(16px, 1.6vw, 18px);
}
.hero .cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Hero preview thumbnails (tool landing pages). Up to two square tiles
   sit centred under the small fine-print line — same images that the
   visitor can scroll to in the Examples section below. Clicking a tile
   anchors to #examples. The cards have a soft brand-tinted glow and a
   subtle hover lift so they read as preview chips, not heavy buttons. */
.hero-previews {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-preview-card {
  position: relative;
  display: block;
  width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 14px 36px -16px var(--brand-shadow-color, rgba(90, 0, 255, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hero-preview-card:nth-child(1) { transform: rotate(-2.5deg); }
.hero-preview-card:nth-child(2) { transform: rotate(2.5deg); }
.hero-preview-card:hover,
.hero-preview-card:focus-visible {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 22px 50px -16px var(--brand-shadow-color, rgba(90, 0, 255, 0.55));
}
.hero-preview-card img,
.hero-preview-card video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .hero-previews { gap: 12px; margin-top: 22px; }
  .hero-preview-card { width: 132px; border-radius: 14px; }
}

/* 2×2 grid variant — used by the homepage hero. Four tiles in a square
   arrangement next to the text block. Each cell keeps its 1:1 aspect.
   The first cell tilts slightly left, the diagonally opposite one
   slightly right, others stay flat — gives the cluster a hand-arranged
   collage feel without rotating every tile. */
.hero-previews--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  flex-wrap: initial;
}
.hero-previews--grid .hero-preview-card {
  width: 100%;
}
.hero-previews--grid .hero-preview-card:nth-child(1) { transform: rotate(-2deg); }
.hero-previews--grid .hero-preview-card:nth-child(2) { transform: rotate(1.5deg); }
.hero-previews--grid .hero-preview-card:nth-child(3) { transform: rotate(-1.5deg); }
.hero-previews--grid .hero-preview-card:nth-child(4) { transform: rotate(2deg); }
.hero-previews--grid .hero-preview-card:hover,
.hero-previews--grid .hero-preview-card:focus-visible {
  transform: rotate(0deg) translateY(-3px);
}
@media (min-width: 900px) {
  .hero--split .hero-previews--grid {
    /* The flex sibling in .hero--split's row layout grows; cap it so
       the 2×2 grid stays a comfortable square, not stretched. */
    flex: 0 0 auto;
    width: clamp(360px, 38vw, 480px);
  }
  .hero--split .hero-previews--grid .hero-preview-card { width: 100%; }
}
@media (max-width: 640px) {
  .hero-previews--grid { gap: 10px; width: min(100%, 320px); }
}
/* Larger, more tap-friendly hero CTA buttons — bumps padding + font-size
   vs the default .btn so the primary action reads as the hero on the
   landing page. Only scopes to .hero so in-body .btn instances keep the
   compact sizing. */
.hero .btn {
  padding: 16px 28px;
  font-size: 15px;
  border-radius: 14px;
}
.hero .small { margin-top: 22px; font-size: 12px; color: var(--muted); }

@media (max-width: 640px) {
  .hero .btn {
    padding: 16px 24px;
    font-size: 14.5px;
  }
}

/* ── Sections ────────────────────────────────────────── */
section { padding: 80px 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head .eyebrow {
  display: inline-block; padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-gradient-soft);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand-from) 65%, var(--fg));
  margin-bottom: 12px;
}
/* Hide the per-tool model-name chip rows on mobile. Each tool card on
   the homepage Tools grid shows the available models as small pill
   chips ("FLUX.1.1 Pro", "Ideogram v2", "Recraft v3", …). At phone
   widths those chips wrap onto 3-4 lines per card, doubling the card
   height. The card title + description already make the tool clear,
   and the dedicated model pages list everything for users who want
   the catalog. */
.section-head h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px;
}
.section-head p { color: var(--muted); margin: 0 auto; font-size: 15px; max-width: 640px; }

/* ── Card grid base ──────────────────────────────────── */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Homepage tools section: 2 columns on phones and tablets, 4 columns
   at desktop (≥1024 px). On phones the model-name chip row inside
   each card is hidden (see `.tool-card .chips` rule above) so the
   2-column tiles stay compact. */
#tools .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 1024px) {
  #tools .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--ink-300);
}
.dark .card:hover { border-color: var(--ink-700); }
.card .icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--brand-gradient-soft);
  color: var(--brand-from);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.dark .card .icon {
  color: color-mix(in oklab, var(--brand-to) 50%, var(--ink-100));
}
.card h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.55; }

/* ── Tool card variant — image-first layout for #tools section ────── */
.tool-card {
  padding: 0;                /* override .card padding so cover image bleeds to edges */
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tool-card .cover {
  aspect-ratio: 16 / 10;
  background: var(--brand-gradient-soft);
  overflow: hidden;
  display: block;
}
.tool-card .cover img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .3s ease;
}
.tool-card:hover .cover img { transform: scale(1.03); }
.tool-card .body {
  display: flex; flex-direction: column; flex: 1;
  gap: 10px;
  padding: 16px 18px 18px;
}
.tool-card .body h3 { margin: 0; }
.tool-card .body p {
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: var(--muted);
}
.tool-card .chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 4px;
}
/* Hide the per-tool model chip row whenever the homepage tools grid
   is in its 2-column layout (everything below the 4-column desktop
   breakpoint). Must come AFTER the .tool-card .chips base rule above
   so the cascade actually wins — both rules have the same specificity,
   later one applies. */
@media (max-width: 1023px) {
  .tool-card .chips { display: none; }
}
.tool-card .chip {
  background: color-mix(in oklab, var(--ink-100) 70%, transparent);
  color: var(--fg);
  font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  /* Reset .chip base — its 22px bottom margin and brand-color border are
     designed for the hero badge usage, not for tightly-packed model lists. */
  border: none;
  margin: 0;
  white-space: nowrap;
}
.dark .tool-card .chip {
  background: var(--ink-800);
  color: var(--ink-300);
}

/* ── Models (grouped) ────────────────────────────────── */
/* ── Model category tabs ─────────────────────────────── */
.model-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px;
  margin: 0 auto 28px;
  /* Vertical padding gives the active tab's drop-shadow room to render
     without being clipped by the container's scroll box on mobile
     (overflow-x: auto below forces overflow-y to auto too per CSS spec,
     which would otherwise crop the shadow halo). */
  padding: 10px 4px;
  max-width: 100%;
}
@media (max-width: 768px) {
  /* Horizontal scroll on narrow screens — wrapping pills look messy. */
  .model-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    /* Hide the scrollbar but keep behaviour. */
    scrollbar-width: none;
  }
  .model-tabs::-webkit-scrollbar { display: none; }
}
.model-tab {
  flex: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.2;
}
.model-tab:hover {
  background: var(--subtle);
  color: var(--fg);
}
.model-tab.is-active {
  background: var(--brand-gradient);
  /* Clip the gradient to the padding edge so it never shows through the
     transparent 1px border — stops the gradient from bleeding past the
     rounded corners and creating a ragged outline. */
  background-clip: padding-box;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--brand-from) 55%, transparent);
}

.models-groups { display: grid; gap: 28px; }
.model-group h3 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.model-group h3::after {
  content: '';
  flex: 1; height: 1px; background: var(--border);
}
.model-grid {
  display: grid; gap: 12px;
  /* auto-fit (not auto-fill) collapses empty tracks so rows with 2 cards
     don't leave ghost slots to the right. Upper bound 340px prevents a
     pair of cards from stretching to half the viewport each; combined
     with `justify-content: center`, leftover space splits symmetrically
     on both sides of the row. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
  justify-content: center;
}
.model-card {
  /* Per-card brand vars. Default to the site brand (violet → pink) so
     cards without an override (e.g. on landing pages where models are
     listed plainly) still look correct. The home page model cards set
     --card-from / --card-to inline to colour the cost badge, the top
     stripe, and the hover border. */
  --card-from: var(--brand-from);
  --card-to:   var(--brand-to);

  position: relative;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  /* Reset for <a class="model-card"> on the home page so the card looks
     identical whether it's a link or a plain div. */
  display: block; color: inherit; text-decoration: none;
}
/* 2-px brand-gradient stripe at the very top of each card. Sits above
   the border, picks up the per-card colours via the CSS vars. */
.model-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
  opacity: 0.85;
  transition: opacity .15s, height .15s;
}
.model-card:hover::before { opacity: 1; height: 3px; }
.model-card:hover {
  border-color: color-mix(in oklab, var(--card-from) 35%, var(--border));
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 12px 28px -10px color-mix(in oklab, var(--card-from) 25%, transparent);
}
.model-card .head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.model-card .name {
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25;
}
.model-card .provider {
  font-size: 11px; color: var(--muted); margin-top: 3px;
}
.model-card .cost {
  display: inline-flex; align-items: center; gap: 4px;
  flex: none;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(45deg, var(--card-from) 0%, var(--card-to) 100%);
  color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px -2px color-mix(in oklab, var(--card-from) 40%, transparent);
}
.model-card p {
  font-size: 12.5px; color: var(--muted);
  margin: 10px 0 0; line-height: 1.55;
}

/* ── Personas ────────────────────────────────────────── */
.personas-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ── Tariffs ─────────────────────────────────────────── */
.tariffs-group-head {
  max-width: 960px;
  margin: 0 auto 16px;
  text-align: center;
}
.tariffs-group-head--gap { margin-top: 40px; }
.tariffs-group-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.tariffs-group-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.tariffs-group-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.tariffs-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 960px; margin: 0 auto;
}
.tariff {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.tariff:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tariff.popular {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--brand-gradient) border-box;
  border: 2px solid transparent;
  box-shadow: var(--brand-shadow);
}
.tariff .badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px;
  background: var(--brand-gradient);
  color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.tariff h3 {
  font-size: 40px; font-weight: 800; margin: 0 0 2px;
  letter-spacing: -0.02em;
  text-align: center;
}
.tariff .plan-name {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 6px;
}
.tariff .size-label {
  color: var(--muted); font-size: 12px;
  text-align: center;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 4px;
}
.tariff .price {
  font-size: 22px; font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}
.tariff .price .period {
  font-size: 14px; font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.tariff .per-credit {
  font-size: 11px; letter-spacing: 0.08em; color: var(--muted);
  text-transform: uppercase; margin-top: 2px;
}
.tariff .discount {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(16, 185, 129, 0.14); color: rgb(4, 120, 87);
}
.dark .tariff .discount { color: rgb(110, 231, 183); background: rgba(16, 185, 129, 0.2); }
.tariff ul {
  list-style: none; padding: 0; margin: 18px 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--fg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.tariff ul li {
  display: flex; align-items: center; gap: 8px;
}
.tariff ul li svg { color: var(--brand-from); flex: none; }
.dark .tariff ul li svg { color: color-mix(in oklab, var(--brand-to) 50%, var(--ink-100)); }
.tariff .cta {
  margin-top: auto;
  text-align: center;
}
.tariff .cta a {
  display: block; width: 100%;
  padding: 12px 16px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  background: var(--ink-900); color: #fff;
  transition: background .15s;
}
.tariff.popular .cta a { background: var(--brand-gradient); box-shadow: var(--brand-shadow); }
.dark .tariff .cta a { background: #fff; color: var(--ink-900); }
.dark .tariff.popular .cta a { background: var(--brand-gradient); color: #fff; }
.tariff .cta a:hover { filter: brightness(1.08); }

.tariffs-note {
  max-width: 720px; margin: 28px auto 0;
  padding: 14px 18px; border-radius: 12px;
  background: var(--brand-gradient-soft);
  border: 1px solid color-mix(in oklab, var(--brand-from) 15%, transparent);
  text-align: center; font-size: 13px; color: var(--fg);
}

/* ── Why (improved) ──────────────────────────────────── */
.why-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.why-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}
.why-item .icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--brand-gradient);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: var(--brand-shadow);
}
.why-item h3 {
  font-size: 16px; font-weight: 700; margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.why-item p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }

/* ── FAQ ─────────────────────────────────────────────── */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.faq details[open] { border-color: color-mix(in oklab, var(--brand-from) 30%, var(--border)); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  font-size: 15px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  margin-left: 14px;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p {
  margin: 0; padding: 0 20px 18px;
  color: var(--muted); font-size: 14px; line-height: 1.6;
}

/* ── CTA band ────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden;
  text-align: center;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 28px; padding: 60px 24px;
  box-shadow: var(--brand-shadow);
}
.cta-band::before {
  content: ''; position: absolute; inset: -50%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.15), transparent 50%);
  pointer-events: none;
}
.cta-band h2 {
  position: relative;
  font-size: clamp(26px, 3.4vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 12px;
}
.cta-band p {
  position: relative;
  color: rgba(255, 255, 255, 0.85); margin: 0 auto 28px; font-size: 16px;
  max-width: 520px;
}
.cta-band .btn {
  position: relative;
  background: #fff; color: var(--ink-900);
  font-size: 15px; padding: 12px 26px;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.4);
}
.cta-band .btn:hover { background: var(--ink-100); }

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  margin-top: 60px;
  border-top: 1px solid var(--border);
  padding: 56px 0 28px;
  color: var(--muted); font-size: 13px;
}
.footer-grid {
  display: grid;
  /* Brand column gets 1.4fr so the tagline has room; the three link
     columns share the rest equally. */
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.footer-col { min-width: 0; }
.footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.footer-brand .logo { width: 26px; height: 26px; display: inline-flex; }
.footer-brand .logo svg { width: 100%; height: 100%; display: block; }
.footer-tagline {
  margin: 0; max-width: 320px;
  color: var(--muted); font-size: 13px; line-height: 1.55;
}
.footer-title {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg);
}
.footer-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.footer-links a, .footer-links button {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.footer-links a:hover, .footer-links button:hover { color: var(--fg); }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  font-size: 12px; color: var(--muted);
}
.footer-bottom-spacer { color: var(--ink-300); }
.dark .footer-bottom-spacer { color: var(--ink-700); }
.footer-bottom-link {
  color: var(--muted);
  transition: color .15s;
}
.footer-bottom-link:hover { color: var(--fg); }

@media (max-width: 768px) {
  .site-footer { padding: 40px 0 24px; margin-top: 40px; }
  .footer-grid {
    /* Brand stretches full-width above the link columns; the three link
       columns split evenly. */
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-tagline { max-width: 100%; }
}

/* Legacy class kept for the support modal trigger button — used inline
   inside <li> in the new footer markup, retains its zero-padding reset. */
.footer-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-align: left;
}
.footer-link:focus-visible {
  outline: 2px solid var(--brand-from); outline-offset: 2px; border-radius: 2px;
}

/* ── Support modal ───────────────────────────────────── */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 9, 11, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-dialog {
  position: relative;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 32px 28px 28px;
  width: 100%; max-width: 420px;
  text-align: center;
}
.modal-dialog h3 {
  margin: 0 0 8px; font-size: 20px; font-weight: 600;
}
.modal-dialog p {
  margin: 0 0 20px; color: var(--muted); font-size: 14px;
}
.modal-email {
  display: inline-block;
  padding: 12px 20px; border-radius: 12px;
  background: var(--brand-gradient); color: #fff;
  font-weight: 600; font-size: 15px;
  box-shadow: var(--brand-shadow);
  transition: filter .15s ease;
}
.modal-email:hover { filter: brightness(1.08); }
.modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px;
  background: none; border: 0; padding: 0;
  font-size: 24px; line-height: 1; color: var(--muted);
  cursor: pointer; border-radius: 8px;
}
.modal-close:hover { background: var(--subtle); color: var(--fg); }

@media (max-width: 640px) {
  .hero { padding: 72px 0 56px; }
  section { padding: 60px 0; }
  .cta-band { padding: 48px 20px; border-radius: 20px; }
}

/* ── Examples gallery (tool pages) ─────────────────────────────
   Three layouts: single image per tile, before/after stacked pair,
   or autoplay-loop video. CSS shared across all 12 tool pages. */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  /* When rendered inside an intro section (the default for tool pages),
     give the grid breathing room below the intro text. */
  margin-top: 28px;
}
@media (min-width: 640px)  { .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .ex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.ex-grid--before-after {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px)  { .ex-grid--before-after { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ex-grid--before-after { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-card {
  margin: 0;
  border-radius: 14px;
  border: 1px solid var(--ink-100, #e5e7eb);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ex-media {
  position: relative;
  background: var(--ink-100, #f3f4f6);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.ex-card--video .ex-media { aspect-ratio: 9 / 16; }
.ex-media > img,
.ex-media > video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ex-card figcaption {
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--ink-700, #374151);
  margin: 0;
}

/* Photoshoot layout: input photo on the left, transform-arrow badge in the
   middle, 2×2 grid of outputs on the right. On mobile (single column) the
   arrow rotates 90° so it points down between the stacked rows. */
.ex-photoshoot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 28px;
  align-items: center;
}
.ex-photoshoot-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ex-photoshoot-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
.ex-photoshoot-arrow-badge {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-from, #5a00ff), var(--brand-to, #b300ff));
  box-shadow: var(--brand-shadow, 0 10px 25px -10px rgba(90, 0, 255, 0.5));
  transform: rotate(90deg);
  transition: transform 200ms ease;
}
@media (min-width: 720px) {
  .ex-photoshoot {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
  }
  .ex-photoshoot-out { gap: 16px; }
  .ex-photoshoot-arrow-badge { transform: none; }
}

/* Before/after compare slider. The slider container holds both images
   stacked; the .ex-slider-after is clipped via inline clip-path that JS
   updates as the user drags. CSS pre-paints the 50/50 split so the
   experience works even before JS hydrates. */
.ex-slider {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background: var(--ink-100, #f3f4f6);
}
.ex-slider:focus-visible {
  outline: 2px solid var(--brand-from, #5a00ff);
  outline-offset: 2px;
}
.ex-slider-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ex-slider-label {
  position: absolute;
  top: 10px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.92);
  color: var(--ink-900, #111827);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
.ex-slider-label--before { left: 10px; }
.ex-slider-label--after  { right: 10px; }
.ex-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.ex-slider-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}
.ex-slider-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #fff;
  color: var(--ink-700, #374151);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.dark .ex-card { background: #1a1a1a; border-color: rgba(255,255,255,0.08); }
.dark .ex-card figcaption { color: #d4d4d8; }
.dark .ex-media,
.dark .ex-slider { background: rgba(255,255,255,0.04); }
.dark .ex-slider-label { background: rgba(17,17,17,0.92); color: #fff; }
.dark .ex-slider-knob { background: #1a1a1a; color: #fff; }
