@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;600;700;800&display=swap');

/* Ikon varsayilan boyutu.

   Ikonlar eskiden unpkg'deki Lucide betigi tarafindan uretiliyordu ve o
   her <svg>'ye width/height="24" yaziyordu. Artik yerel sprite'tan
   <use> ile geliyorlar; oznitelik olmadigi icin boyutu BURASI verir.
   Bu kural olmazsa ikonlar dev gorunur (yasandi).

   Kendi olcusu olan ikonlar (.nav-chevron, .lang-check gibi) bu kurali
   daha sonra gelen kendi tanimlariyla ezer. */
.lucide {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

:root {
  /* Pepple Brand Palette Tokens (From Brand Book 1.0) */
  --space-cadet: #262d4f;
  --space-cadet-minor: #282c4c;
  --white-chocolate: #eee2d9;
  --isabelline: #f2edea;
  --old-lavender: #9f695e;
  --heliotrope: #6f5379;
  --desert-sand: #e9c1aa;
  --stone-gray: #a39aa4;
  --raisin-black: #1f2022;

  /* Accent Tile Colors */
  --tile-butterscotch: #e5c158;
  --tile-rose: #c45366;
  --tile-iris: #6c63d6;
  --tile-sea: #4c9584;

  /* Text-safe darkenings of the accent tiles. The tile hues are tuned to be
     read as large blocks of fill; at label sizes they fall under 4.5:1 on
     cream, so small text uses these instead. */
  --tile-rose-text: #9d3346;
  --tile-sea-text: #2f6a5b;
  --tile-iris-text: #4a41ad;

  --color-bg: var(--isabelline);
  --color-surface: #ffffff;
  --color-surface-sunken: var(--white-chocolate);
  --color-border: rgba(38, 45, 79, 0.12);
  --color-border-strong: rgba(38, 45, 79, 0.25);

  --color-text: var(--raisin-black);
  --color-text-secondary: color-mix(in oklch, var(--raisin-black) 65%, white);
  --color-text-muted: color-mix(in oklch, var(--stone-gray) 75%, var(--raisin-black));
  --color-text-on-primary: var(--white-chocolate);

  --color-primary: var(--space-cadet);
  --color-primary-hover: #1e2440;
  --color-primary-active: #171b30;
  --color-primary-soft: rgba(38, 45, 79, 0.08);

  --color-success: #2e7d32;
  --color-success-soft: #e8f5e9;
  --color-info: #0288d1;
  --color-info-soft: #e1f5fe;
  --color-purple: #7b1fa2;
  --color-purple-soft: #f3e5f5;

  /* Pastel card-block backgrounds (Pepple CTA grid) */
  --pastel-rose: #f3d9d4;
  --pastel-lavender: #ded4ea;
  --pastel-mint: #d3e4dc;
  --pastel-sand: #f1e2c9;

  /* Spacing */
  --header-h: 88px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(38, 45, 79, 0.04);
  --shadow-md: 0 8px 24px rgba(38, 45, 79, 0.08);
  --shadow-lg: 0 16px 40px rgba(38, 45, 79, 0.12);
  --shadow-hover: 0 20px 48px rgba(38, 45, 79, 0.16);

  --ease-standard: cubic-bezier(.2,.7,.3,1);
  --font-display: 'Ubuntu', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Every in-page anchor must clear the fixed header, otherwise the target
     heading lands underneath it. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  /* Nothing on this site is meant to be reachable by scrolling sideways; the
     entrance animations park elements off-axis and would otherwise widen the
     document. Set on the root (not body) so position:fixed children and the
     sticky header keep behaving. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--space-cadet);
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s var(--ease-standard);
}

/* ==========================================================================
   Navigation Header (Pepple palette)
   Logo + nav are grouped LEFT; actions sit RIGHT. Flat surface, no blur —
   the dropdown panels need an opaque backdrop to stay legible.
   ========================================================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-10);
  z-index: 1000;
  transition: box-shadow 0.3s var(--ease-standard);
}

/* Scrolled state keeps the light surface and only
   gains elevation — swapping to the dark navy would fight the mega panels. */
header.scrolled {
  box-shadow: 0 1px 12px rgba(38, 45, 79, 0.1);
}

.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Horizontal lockup (mark + wordmark) from the brand book. The previous stacked
   asset carried its own whitespace, so a 34px box left the wordmark tiny — the
   horizontal lockup spends the same header height entirely on ink. */
.logo img {
  height: 46px;
  width: auto;
  display: block;
}

/* The header now stays light at every scroll position, so the light-background
   wordmark is always the visible one. The dark variant is kept in the markup
   so a future dark header can swap without an HTML change. */
.logo img.logo-light-bg {
  display: block;
}

.logo img.logo-dark-bg {
  display: none;
}

nav {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  margin-right: auto;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--space-cadet);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease-standard);
}

.nav-link:hover,
.nav-item.open > .nav-link {
  background-color: var(--color-primary-soft);
}

a.nav-link.active {
  font-weight: 700;
  color: var(--old-lavender);
}

.nav-chevron {
  width: 15px;
  height: 15px;
  transition: transform 0.22s var(--ease-standard);
}

.nav-item.open .nav-chevron {
  transform: rotate(180deg);
}

/* --- Dropdown panels --- */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 44px rgba(38, 45, 79, 0.16);
  padding: var(--space-5);
  min-width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* Hidden via opacity (not display) so the fade/lift can animate. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-standard),
              transform 0.2s var(--ease-standard),
              visibility 0.2s;
  z-index: 1001;
}

.nav-item.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown.mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  min-width: 760px;
}

.mega-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 10px;
  margin-bottom: var(--space-2);
}

.mega-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 10px;
  border-radius: var(--radius-md);
  transition: background-color 0.18s var(--ease-standard);
}

.mega-link:hover {
  background-color: var(--isabelline);
}

.mega-link i {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--space-cadet);
}

.mega-link span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

.mega-link strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--space-cadet);
}

/* Promo rail on the far right of the mega panel */
.mega-aside {
  background-color: var(--isabelline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mega-aside p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.mega-aside-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--space-cadet);
}

.mega-aside-link i {
  width: 15px;
  height: 15px;
  transition: transform 0.2s var(--ease-standard);
}

.mega-aside-link:hover i {
  transform: translateX(3px);
}

/* --- Right-side actions --- */
.header-actions {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-shrink: 0;
}

.header-demo-link,
.header-signin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--space-cadet);
  white-space: nowrap;
}

.header-demo-link i {
  width: 17px;
  height: 17px;
}

.header-demo-link:hover,
.header-signin:hover {
  color: var(--old-lavender);
}

.btn-pill {
  border-radius: var(--radius-full);
  padding: 11px 22px;
  white-space: nowrap;
}

/* Between 1024px and ~1300px the 4-column mega panel would overflow the
   viewport, so it drops the promo rail and reflows to 2 columns. */
@media (max-width: 1300px) {
  .nav-dropdown.mega {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    min-width: 620px;
  }

  .mega-aside {
    grid-column: 1 / -1;
  }

  .header-demo-link {
    display: none;
  }
}

/* Panels anchored near the right edge flip their alignment so they open
   inward instead of running off-screen. */
@media (max-width: 1180px) {
  .nav-item:nth-of-type(3) .nav-dropdown {
    left: auto;
    right: 0;
  }

  /* Between the mobile drawer breakpoint (1024px) and ~1180px the header row
     wants ~1113px for logo + nav + three actions, so on a 1100px screen the
     last CTA hung past the right edge and the nav compressed until
     "Contact Us" broke onto a second line. The ghost CTA is the least
     important of the three and is repeated in the hero, so it steps aside
     first; the primary CTA and Login both stay. */
  .btn-demo-header--ghost {
    display: none;
  }

  .header-actions {
    gap: var(--space-4);
  }
}

/* The nav links are a single row of labels — letting them wrap is never the
   right answer, it just makes the header two lines tall. */
nav > .nav-link,
nav .nav-trigger {
  white-space: nowrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.25s var(--ease-standard);
}

.btn-primary {
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
}

.btn-primary:hover {
  background-color: #1e2440;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px rgba(38, 45, 79, 0.25);
}

.btn-secondary {
  background-color: var(--white-chocolate);
  color: var(--space-cadet);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  background-color: #e5d7cb;
  transform: translateY(-1.5px);
}

.btn-ghost {
  background: transparent;
  color: var(--space-cadet);
}

.btn-ghost:hover {
  background-color: rgba(38, 45, 79, 0.08);
}

.btn-lg {
  padding: 14px 28px;
  font-size: 16px;
  border-radius: var(--radius-lg);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

.btn-block {
  width: 100%;
}

/* While the mobile drawer is open the page behind it must not scroll —
   otherwise a swipe past the drawer's own scroll end drags the hero. */
body.nav-drawer-open {
  overflow: hidden;
}

/* Drawer-only CTA block. Lives in the nav markup but is desktop-hidden —
   at desktop width those same actions are already in .header-actions. */
.nav-drawer-actions {
  display: none;
}

/* Menu Toggle for Mobile */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

/* The wordmark next to it is drawn with a fine, even stroke; 2.5px bars read
   as a heavier, cruder mark beside it. 2px at a slightly wider track keeps the
   icon legible while matching the logo's weight. */
.menu-toggle span {
  width: 22px;
  height: 2px;
  background-color: var(--space-cadet);
  transition: transform 0.3s var(--ease-standard),
              opacity 0.2s var(--ease-standard);
  border-radius: 2px;
  transform-origin: center;
}

/* Hero Section — cream ground per Brand Book 1.0. The case study stages the
   brand on White Chocolate with the navy loop mark blown up as a background
   graphic; the previous dark gradient inverted that relationship. */
.hero {
  position: relative;
  padding-top: 150px;
  padding-bottom: 0;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  margin: 0;
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(233, 193, 170, 0.25) 0%, transparent 100%),
    radial-gradient(50% 50% at 85% 15%, rgba(222, 212, 234, 0.3) 0%, transparent 100%),
    radial-gradient(40% 40% at 15% 25%, rgba(211, 228, 220, 0.25) 0%, transparent 100%),
    linear-gradient(180deg, var(--white-chocolate) 0%, var(--isabelline) 60%, var(--white-chocolate) 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle background watermark */
.hero::before {
  content: '';
  position: absolute;
  top: -25%;
  left: -15%;
  width: 48vw;
  height: 140%;
  background: url('assets/logo-mark-navy.png') no-repeat center;
  background-size: contain;
  opacity: 0.035;
  z-index: -2;
  pointer-events: none;
}

/* ==========================================================================
   Hero figures (Brand Signature Characters)
   ========================================================================== */
.hero-figure {
  position: absolute;
  top: 140px;
  height: clamp(260px, 32vw, 420px);
  width: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

.hero-figure-left {
  left: clamp(-20px, 2vw, 60px);
  transform-origin: bottom left;
  animation: figure-enter-left 900ms cubic-bezier(.16,.84,.36,1) 200ms both;
}

.hero-figure-right {
  right: clamp(-30px, 1.5vw, 40px);
  transform-origin: bottom right;
  animation: figure-enter-right 900ms cubic-bezier(.16,.84,.36,1) 340ms both;
}

@keyframes figure-enter-left {
  from { opacity: 0; transform: translateX(-50%) rotate(-6deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes figure-enter-right {
  from { opacity: 0; transform: translateX(50%) rotate(6deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@media (max-width: 1240px) {
  .hero-figure {
    height: clamp(180px, 20vw, 240px);
    opacity: 0.65;
  }
}

@media (max-width: 1024px) {
  .hero-figure {
    display: none;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Modern Hero Pill Badge */
.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 12px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(38, 45, 79, 0.12);
  box-shadow: 0 2px 10px rgba(38, 45, 79, 0.05);
  margin-bottom: var(--space-6);
  font-size: 13px;
  color: var(--space-cadet);
  transition: all 0.25s var(--ease-standard);
}

.hero-pill-badge:hover {
  background-color: #ffffff;
  border-color: rgba(38, 45, 79, 0.22);
  box-shadow: 0 4px 16px rgba(38, 45, 79, 0.08);
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--tile-sea-text);
  box-shadow: 0 0 0 3px rgba(47, 106, 91, 0.2);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.75; }
}

.pill-badge-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--old-lavender);
}

.pill-badge-sep {
  color: rgba(38, 45, 79, 0.25);
}

.pill-badge-text {
  font-weight: 500;
  color: var(--space-cadet);
}

.pill-badge-spark {
  width: 14px;
  height: 14px;
  color: var(--tile-butterscotch);
  margin-left: 2px;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 6.8vw, 88px);
  line-height: 1.05;
  letter-spacing: -2.5px;
  margin-bottom: var(--space-6);
  color: var(--space-cadet);
  max-width: 960px;
  text-wrap: balance;
}

.highlight-text {
  color: var(--old-lavender);
  font-style: italic;
  font-weight: 500;
}

.hero-lead {
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 740px;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.btn-hero-primary {
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
  padding: 16px 32px;
  font-size: 16.5px;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(38, 45, 79, 0.22);
}

.btn-hero-primary i {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease-standard);
}

.btn-hero-primary:hover i {
  transform: translateX(3px);
}

.btn-hero-secondary {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--space-cadet);
  border-color: rgba(38, 45, 79, 0.2);
  padding: 14px 26px;
  font-size: 15.5px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.btn-hero-secondary i {
  width: 18px;
  height: 18px;
  color: var(--old-lavender);
}

.btn-hero-secondary:hover {
  background-color: #ffffff;
  border-color: var(--space-cadet);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 16px rgba(38, 45, 79, 0.08);
}

/* Trust / Feature Points */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-10);
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust-item i {
  width: 15px;
  height: 15px;
  color: var(--tile-sea-text);
}

.trust-sep {
  color: rgba(38, 45, 79, 0.3);
}

/* Semantic text accents. These now sit on light surfaces, so they are the
   darkened variants that clear 4.5:1 on cream. */
.text-success { color: var(--tile-sea-text); }
.text-info { color: #1d6fa5; }
.text-purple { color: var(--tile-iris-text); }

/* Key Metrics Banner — 3 Clean Centered Stat Cards */
.stats {
  background: var(--white-chocolate);
  color: var(--space-cadet);
  padding: 44px var(--space-6) 40px;
  border-bottom: 1px solid var(--color-border);
}

.stats-grid {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: center;
  align-items: center;
}

.stat-card {
  padding: var(--space-2) var(--space-6);
  border-left: 1px solid var(--color-border);
}

.stat-card:first-child {
  border-left: none;
}

.stat-number {
  font-size: 38px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--space-cadet);
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ==========================================================================
   Illustrated Pillars — case study artwork
   The source illustrations are drawn on White Chocolate, so the cards reuse
   that exact ground and the art sits flush with no visible plate seam.
   ========================================================================== */
.pillars {
  padding: 90px var(--space-10);
  max-width: 1280px;
  margin: 0 auto;
}

.pillars .section-header h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--old-lavender);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.pillar-card {
  background-color: var(--white-chocolate);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-standard),
              box-shadow 0.25s var(--ease-standard);
}

.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* aspect-ratio reserves the box before the art decodes, so the grid never
   reflows as the illustrations stream in (CLS). */
.pillar-art {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.pillar-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pillar-card h3 {
  font-size: 18px;
  padding: var(--space-5) var(--space-5) var(--space-2);
  line-height: 1.3;
}

.pillar-card p {
  font-size: 14.5px;
  color: var(--color-text-secondary);
  padding: 0 var(--space-5) var(--space-6);
  margin-top: auto;
}

@media (max-width: 980px) {
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pillar-grid {
    grid-template-columns: 1fr;
  }
}

/* Sections Styling */
.section {
  padding: 90px var(--space-10);
  max-width: 1280px;
  margin: 0 auto;
}

/* The 40px inline padding is too wide for a 375px viewport once the grids
   inside collapse to a single column. */
@media (max-width: 640px) {
  .section {
    padding: 64px var(--space-5);
  }
}

.section-alt {
  background-color: #e9e2db;
  border-radius: var(--radius-xl);
  margin-top: 40px;
  margin-bottom: 40px;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-10) auto;
}

.section-pill {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tile-rose-text);
  margin-bottom: var(--space-2);
  display: inline-block;
}

.section-header h2 {
  font-size: 38px;
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: 17px;
  color: var(--color-text-secondary);
}

/* Zebra Showcase Rows — alternating text/proof + real product UI */
.zebra-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  margin-bottom: var(--space-16);
}

.zebra-row-reverse .zebra-text {
  order: 2;
}

.zebra-text h3 {
  font-size: 28px;
  margin-bottom: var(--space-4);
}

.zebra-text > p {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 460px;
}

.zebra-proof {
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  max-width: 420px;
}

.zebra-proof strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--space-cadet);
  margin-bottom: 2px;
}

.zebra-proof span {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.zebra-proof-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--tile-rose-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.zebra-proof-link i {
  width: 14px;
  height: 14px;
}

.zebra-visual {
  display: flex;
  justify-content: center;
}

.zebra-ui-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.zebra-ui-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: 14px;
  color: var(--space-cadet);
}

.zebra-ui-row span:last-child {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 12.5px;
}

.zebra-ui-line {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 8px 0;
  color: var(--color-text-secondary);
}

.zebra-ui-line strong {
  color: var(--space-cadet);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.zebra-ui-line strong i {
  width: 14px;
  height: 14px;
}

.zebra-ui-dark {
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
  border-color: rgba(255, 255, 255, 0.08);
}

.zebra-ui-dark .zebra-ui-row {
  color: var(--white-chocolate);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.zebra-ui-dark .zebra-ui-line {
  color: rgba(238, 226, 217, 0.75);
}

.zebra-ui-dark .zebra-ui-line strong {
  color: var(--white-chocolate);
}

.zebra-ai-bubble {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(111, 83, 121, 0.35);
  border: 1px solid rgba(111, 83, 121, 0.5);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 12.5px;
  margin-bottom: var(--space-4);
  color: var(--desert-sand);
}

.zebra-ai-bubble i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ==========================================================================
   Feature marquee
   Two full-bleed rows drifting in opposite directions. Each track holds the
   card list twice and translates by exactly -50%, so the loop is seamless.
   Animation is on transform only — no layout work per frame.
   ========================================================================== */
.feat-marquee {
  /* Breaks out of the page's max-width so the rows run edge to edge.

     100vw includes the vertical scrollbar but the page's own width does not,
     so on any desktop with a classic scrollbar this block ended up exactly
     scrollbar-width wider than its container — enough to give every page a
     permanent horizontal scrollbar. 100% of the (already full-width) parent
     measures the same edge-to-edge span without counting the scrollbar. */
  width: 100%;
  margin-left: 0;
  padding: var(--space-4) 0 90px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: hidden;
}

.feat-marquee-row {
  overflow: hidden;
  /* Fades both ends so cards enter and leave instead of being clipped. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.feat-marquee-track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: feat-scroll-left 64s linear infinite;
  will-change: transform;
}

.feat-marquee-row[data-dir="right"] .feat-marquee-track {
  animation-name: feat-scroll-right;
}

/* Holding the row still is what makes it readable — without this the cards
   are decoration you can never actually finish reading. */
.feat-marquee:hover .feat-marquee-track,
.feat-marquee:focus-within .feat-marquee-track {
  animation-play-state: paused;
}

/* -50% lands exactly on the start of the duplicated half, so the jump back
   to 0 is invisible. */
@keyframes feat-scroll-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes feat-scroll-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.feat-mcard {
  flex: 0 0 auto;
  width: 350px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px rgba(38, 45, 79, 0.04);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s var(--ease-standard),
              box-shadow 0.25s var(--ease-standard),
              border-color 0.25s var(--ease-standard);
}

.feat-mcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(38, 45, 79, 0.12);
  border-color: rgba(38, 45, 79, 0.3);
}

.feat-mcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  width: 100%;
}

.feat-mcard .module-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat-mcard .module-icon-wrap i {
  width: 22px;
  height: 22px;
}

.feat-mcard-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white-chocolate);
  color: var(--space-cadet);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s var(--ease-standard);
  border: 1px solid var(--color-border);
}

.feat-mcard-arrow i {
  width: 15px;
  height: 15px;
  transition: transform 0.22s var(--ease-standard);
}

.feat-mcard:hover .feat-mcard-arrow {
  background: var(--space-cadet);
  color: var(--white-chocolate);
  border-color: var(--space-cadet);
}

.feat-mcard:hover .feat-mcard-arrow i {
  transform: translate(2px, -2px);
}

.feat-mcard h3 {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--space-cadet);
}

.feat-mcard p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .feat-marquee {
    padding-bottom: 64px;
  }

  .feat-mcard {
    width: 258px;
    padding: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The drift is decorative; hold the rows still and let them scroll by hand. */
  .feat-marquee-track {
    animation: none;
  }

  .feat-marquee-row {
    overflow-x: auto;
  }
}
.feat-marquee-row:hover .feat-marquee-track {
  animation-play-state: paused;
}

/* ==========================================================================
   Product stage — one large preview, four tabs beneath
   The frame shows the full UI screenshot without cropping or bottom fades.
   ========================================================================== */
.stage {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: var(--space-8) auto var(--space-12);
  --grow: 0;
}

/* transform-origin at the top keeps the frame's header row anchored while the
   rest expands downward, so the screenshot doesn't appear to slide. */
.stage-sticky {
  transform: scale(calc(1 + var(--grow) * 0.08));
  transition: transform 120ms linear;
  transform-origin: top center;
  will-change: transform;
}

.stage-sticky {
  position: relative;
}

.stage-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  background-color: var(--space-cadet);
  border: 8px solid var(--color-surface);
  box-shadow: 0 24px 70px rgba(38, 45, 79, 0.2);
  overflow: hidden;
}

.stage-shots {
  position: absolute;
  inset: 0;
}

.stage-shot {
  position: absolute;
  inset: 0;
  animation: stage-in-right 460ms cubic-bezier(.22,.85,.3,1) both;
}

.stage-shot[data-dir="left"] {
  animation-name: stage-in-left;
}

.stage-shot[hidden] {
  display: none;
}

.stage-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: none;
  display: block;
}

@keyframes stage-in-right {
  from { opacity: 0; transform: translateX(4%) scale(1.01); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes stage-in-left {
  from { opacity: 0; transform: translateX(-4%) scale(1.01); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---- Satellite cards ---- */
.stage-sat {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 230px;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  animation: stage-sat-in 700ms var(--ease-standard) both;
}

/* Positioned against .stage-sticky, not the frame — the frame clips its own
   content, so a child of it could never overhang the edge. */
/* The entrance animation owns `opacity`, so the scroll-driven fade rides on a
   filter instead of fighting the animation's fill. */
.stage-sat {
  filter: opacity(calc(1 - var(--grow) * 4));
}

/* Pushed clear of the frame's edge: they sit beside the screenshot, never on
   top of it, so no UI is hidden behind a callout. */
.stage-sat-left {
  right: calc(100% - 120px);
  top: 14%;
  animation-delay: 520ms;
}

.stage-sat-right {
  left: calc(100% - 120px);
  top: 48%;
  animation-delay: 660ms;
}

.stage-sat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stage-sat-value {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--space-cadet);
}

.stage-sat-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tile-sea-text);
}

.stage-sat-note i {
  width: 13px;
  height: 13px;
}

@keyframes stage-sat-in {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Re-entry when the tab changes: shorter than the first arrival, since the
   card is already in place and only its contents changed. */
.stage-sat.is-swapping {
  animation: stage-sat-swap 420ms var(--ease-standard) both;
}

@keyframes stage-sat-swap {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Tabs ---- */
.stage-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: 5px;
  background-color: rgba(38, 45, 79, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stage-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px min touch target */
  min-height: 44px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-standard),
              color 0.25s var(--ease-standard);
}

.stage-tab i {
  width: 17px;
  height: 17px;
}

.stage-tab:hover {
  color: var(--space-cadet);
}

.stage-tab.is-active {
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 1240px) {
  .stage-sat-left { right: calc(100% - 150px); }
  .stage-sat-right { left: calc(100% - 150px); }
}

@media (max-width: 1080px) {
  .stage-sat { width: 200px; }
  .stage-sat-left { right: calc(100% - 170px); }
  .stage-sat-right { left: calc(100% - 170px); }
}

/* The satellites are positioned against .stage-sticky and hang off both sides
   of a 1040px stage, so they need roughly 1240px of viewport to sit fully on
   screen. Below that the left card crossed x=0 and gave the whole document a
   horizontal scrollbar.

   Clipping the parent does not help here: .stage-sticky carries a transform,
   which makes it the containing block for these absolutely positioned cards,
   so an ancestor's overflow never sees them. They are decorative callouts
   duplicated by the dashboard behind them, so below the width where they fit
   they simply step out — the same thing that already happens at 900px. */
@media (max-width: 1240px) {
  .stage-sat {
    display: none;
  }
}

@media (max-width: 900px) {
  .stage {
    margin-bottom: -60px;
  }

  .stage-sat {
    display: none;
  }

  .stage-frame {
    aspect-ratio: 4 / 3;
    border-width: 6px;
  }

  .stage-tab {
    padding: 0 var(--space-4);
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .stage-tabs {
    width: 100%;
    border-radius: var(--radius-lg);
    gap: 5px;
  }

  /* flex-basis alone was not enough: the label plus icon is wider than half
     the row, and with min-width:auto each tab refused to shrink, so all four
     wrapped onto their own line. Allowing the text to shrink is what makes
     the intended 2x2 grid actually hold. */
  .stage-tab {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
    font-size: 12.5px;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stage-tab i {
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-shot,
  .stage-sat {
    animation: none;
  }

  /* The grow is decorative — hold the frame at its resting size. */
  .stage-sticky {
    transform: none;
  }

  .stage-sat {
    filter: none;
  }
}

@media (max-width: 900px) {
  /* No room to grow into on a phone; the frame is already full-bleed. */
  .stage-sticky {
    transform: none;
  }
}
/* ==========================================================================
   Pricing page
   Square plan tiles, a filterable comparison table, add-on groups and a long
   FAQ. Only loaded classes here are page-scoped — nothing leaks to the home
   page except the shared header/footer.
   ========================================================================== */
.page-pricing {
  background-color: var(--color-bg);
}

/* ---- Hero ---- */
.pricing-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 160px var(--space-6) var(--space-12);
  text-align: center;
}

.pricing-hero h1 {
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--space-cadet);
  margin: var(--space-3) 0 var(--space-4);
}

.pricing-hero > p {
  font-size: 18px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.billing-switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background-color: rgba(38, 45, 79, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.billing-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px min touch target */
  min-height: 44px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-standard),
              color 0.25s var(--ease-standard);
}

.billing-btn:hover {
  color: var(--space-cadet);
}

.billing-btn.is-active {
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
}

.billing-save {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background-color: var(--desert-sand);
  color: var(--space-cadet);
  font-size: 11.5px;
  font-weight: 700;
}

/* ---- Plan tiles ---- */
.plans {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-10) 96px;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.single-plan-wrapper {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.single-enterprise-card {
  position: relative;
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  background: var(--color-surface);
  border: 1.5px solid #e2ded9;
  border-radius: var(--radius-2xl);
  box-shadow: 0 20px 50px -12px rgba(38, 45, 79, 0.09), 0 0 0 1px rgba(38, 45, 79, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single-enterprise-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 60px -12px rgba(38, 45, 79, 0.13), 0 0 0 1px rgba(38, 45, 79, 0.05);
}

.single-plan-header h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--space-cadet);
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.single-plan-header .plan-line {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 820px;
  min-height: auto;
  margin-bottom: 0;
}

.single-plan-price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: #fbf8f5;
  border: 1px solid #ede8e3;
  border-radius: var(--radius-xl);
}

.custom-quote-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custom-quote-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--space-cadet);
}

.custom-quote-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 440px;
}

.single-plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.single-plan-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid #ede8e3;
}

.single-plan-features-grid .feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 15px;
  font-weight: 500;
  color: var(--space-cadet);
}

.single-plan-features-grid .feature-item svg {
  width: 20px;
  height: 20px;
  color: #059669;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .single-plan-features-grid {
    grid-template-columns: 1fr;
  }
  .single-plan-price-box {
    flex-direction: column;
    align-items: stretch;
  }
  .single-plan-actions {
    flex-direction: column;
  }
  .single-plan-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.plan-badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-8);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background-color: var(--desert-sand);
  color: var(--space-cadet);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.plan-card h2 {
  font-size: 22px;
  margin-bottom: var(--space-2);
}

.plan-line {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  min-height: 44px;
}

.plan-price {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: var(--space-2);
}

.plan-currency {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--space-cadet);
  margin-top: 6px;
}

.plan-amount {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--space-cadet);
  /* Tabular figures stop the price jumping width when the period toggles. */
  font-variant-numeric: tabular-nums;
}

.plan-period {
  align-self: flex-end;
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}

.plan-per {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.plan-per strong {
  color: var(--space-cadet);
  font-variant-numeric: tabular-nums;
}

.plan-card .btn {
  margin-top: auto;
}

/* Featured tile inverts: cream text on Space Cadet. */
.plan-card.is-featured h2,
.plan-card.is-featured .plan-currency,
.plan-card.is-featured .plan-amount,
.plan-card.is-featured .plan-per strong {
  color: var(--white-chocolate);
}

.plan-card.is-featured .plan-line,
.plan-card.is-featured .plan-per {
  color: rgba(238, 226, 217, 0.78);
}

.plan-card.is-featured .plan-period {
  color: rgba(238, 226, 217, 0.6);
}

.plan-card.is-featured .btn-primary {
  background-color: var(--white-chocolate);
  color: var(--space-cadet);
}

.plan-card.is-featured .btn-primary:hover {
  background-color: #fff;
}

/* ---- Comparison table ---- */
.compare {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-10) 96px;
}

.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.compare-head h2 {
  font-size: 34px;
}

.compare-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.compare-filter {
  /* 44px min touch target */
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-standard),
              color 0.25s var(--ease-standard),
              border-color 0.25s var(--ease-standard);
}

.compare-filter:hover {
  color: var(--space-cadet);
  border-color: var(--color-border-strong);
}

.compare-filter.is-active {
  background-color: var(--space-cadet);
  border-color: var(--space-cadet);
  color: var(--white-chocolate);
}

/* The table is wide; let it scroll inside its own box rather than pushing the
   page sideways. */
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.compare-table thead th {
  position: sticky;
  top: 0;
  background-color: var(--white-chocolate);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--space-cadet);
  z-index: 1;
}

.compare-table thead th:not(:first-child),
.compare-table tbody td {
  text-align: center;
  width: 130px;
}

.compare-table tbody th {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--color-text);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody tr[hidden] {
  display: none;
}

/* Availability is drawn from a data attribute so the cell carries no text to
   translate — and a text label is exposed to screen readers via ::after. */
.compare-table td[data-has]::after {
  font-size: 15px;
  font-weight: 700;
}

.compare-table td[data-has="yes"]::after {
  content: '✓';
  color: var(--tile-sea-text);
}

.compare-table td[data-has="no"]::after {
  content: '—';
  color: var(--color-text-muted);
}

/* ---- Add-on groups ---- */
.addons {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-10) 96px;
}

.addons-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-10);
}

.addons-head h2 {
  font-size: 34px;
  margin-bottom: var(--space-3);
}

.addons-head p {
  font-size: 16.5px;
  color: var(--color-text-secondary);
}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.addon-group {
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.addon-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.addon-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--white-chocolate);
  color: var(--space-cadet);
}

.addon-icon i {
  width: 20px;
  height: 20px;
}

.addon-group h3 {
  font-size: 19px;
}

.addon-group ul {
  list-style: none;
}

.addon-group li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.addon-group li strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--space-cadet);
}

.addon-group li span {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---- FAQ ---- */
.faq {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--space-6) 96px;
}

.faq h2 {
  font-size: 34px;
  margin-bottom: var(--space-8);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* 44px min touch target */
  min-height: 44px;
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--space-cadet);
  cursor: pointer;
  list-style: none;
}

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

/* A rotating chevron drawn in CSS — no icon dependency inside <summary>. */
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--space-cadet);
  border-bottom: 2px solid var(--space-cadet);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-standard);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item p {
  padding-bottom: var(--space-6);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 68ch;
}

/* ---- Closing CTA ---- */
.pricing-cta {
  background-color: var(--white-chocolate);
  padding: 88px var(--space-10);
  text-align: center;
}

.pricing-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}

.pricing-cta h2 {
  font-size: 34px;
  margin-bottom: var(--space-3);
}

.pricing-cta p {
  font-size: 16.5px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.pricing-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Visually hidden but read aloud — used for the table caption. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1080px) {
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .addons-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pricing-hero {
    padding: 128px var(--space-5) var(--space-10);
  }

  .pricing-hero h1 {
    font-size: 38px;
    letter-spacing: -0.8px;
  }

  .plans,
  .compare,
  .addons {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    padding-bottom: 64px;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .compare-head h2,
  .addons-head h2,
  .faq h2,
  .pricing-cta h2 {
    font-size: 27px;
  }

  .pricing-cta {
    padding: 64px var(--space-5);
  }

  .pricing-cta-actions .btn {
    width: 100%;
  }
}
/* ==========================================================================
   Articles — illustrated editorial row with a pull-quote among the cards
   ========================================================================== */
.articles-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.articles-head h2 {
  font-size: 38px;
  margin-top: var(--space-2);
}

.articles-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 44px min touch target */
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--space-cadet);
  white-space: nowrap;
  transition: background-color 0.25s var(--ease-standard);
}

.articles-all:hover {
  background-color: var(--white-chocolate);
}

.articles-all i {
  width: 16px;
  height: 16px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  align-items: start;
}

/* ---- Story card ---- */
.article-card {
  display: flex;
  flex-direction: column;
}

/* The plate is the coloured block; the artwork sits inside it. A fixed ratio
   reserves the box before the illustration decodes, so nothing shifts. */
.article-art {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  transition: transform 0.3s var(--ease-standard);
}

.article-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The source art is drawn on cream; multiply lets the plate colour through
     instead of stacking two backgrounds. */
  mix-blend-mode: multiply;
}

.art-sand { background-color: var(--pastel-sand); }
.art-mint { background-color: var(--pastel-mint); }
.art-lavender { background-color: var(--pastel-lavender); }
.art-rose { background-color: var(--pastel-rose); }

.article-card:hover .article-art {
  transform: translateY(-4px);
}

.article-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tile-rose-text);
  margin-bottom: var(--space-2);
}

.article-card h3 {
  font-size: 21px;
  line-height: 1.28;
  margin-bottom: var(--space-3);
}

.article-card h3 a {
  color: var(--space-cadet);
}

.article-card:hover h3 a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.article-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--space-cadet);
  border-bottom: 1.5px solid var(--space-cadet);
  padding-bottom: 2px;
  align-self: flex-start;
}

.article-link i {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--ease-standard);
}

.article-link:hover i {
  transform: translateX(3px);
}

/* ---- Pull quote ---- */
.article-quote {
  display: flex;
  flex-direction: column;
  /* Fills the card's full height so the row's rhythm stays intact. */
  height: 100%;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
}

.article-quote-mark {
  width: 28px;
  height: 28px;
  color: var(--desert-sand);
  margin-bottom: var(--space-5);
}

.article-quote blockquote {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--white-chocolate);
  margin-bottom: var(--space-8);
}

.article-quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.article-quote figcaption span:last-child {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: rgba(238, 226, 217, 0.72);
}

.article-quote figcaption strong {
  font-size: 15px;
  color: var(--white-chocolate);
}

.article-quote-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--desert-sand);
  color: var(--space-cadet);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}

@media (max-width: 980px) {
  .articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .articles-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .articles-head h2 {
    font-size: 28px;
  }

  .articles-grid {
    grid-template-columns: 1fr;
  }

  .article-quote blockquote {
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-card:hover .article-art,
  .article-link:hover i {
    transform: none;
  }
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: flex-start;
}

/* Sayfanin ana basligi <h1> oldu (SEO: her sayfada tek h1 olmali).
   Gorunum ayni kalsin diye iki etiket de ayni kurali paylasir. */
.contact-info h1,
.contact-info h2 {
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: 1.15;
  margin-bottom: var(--space-4);
  color: var(--space-cadet);
}

.contact-info p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.contact-reasons {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.contact-reason-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-reason-item .reason-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--white-chocolate);
  color: var(--space-cadet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.contact-reason-item .reason-icon i {
  width: 18px;
  height: 18px;
}

.contact-reason-item strong {
  display: block;
  font-size: 15px;
  color: var(--space-cadet);
  margin-bottom: 2px;
}

.contact-reason-item p {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.contact-form-container,
.contact-form-wrap {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: 0 16px 40px rgba(38, 45, 79, 0.08);
  border: 1px solid var(--color-border);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--space-cadet);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  font-size: 14.5px;
  font-family: var(--font-body);
  color: var(--space-cadet);
  background-color: var(--white-chocolate);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all 0.2s var(--ease-standard);
  outline: none;
  box-sizing: border-box;
}

.form-control:focus {
  background-color: #ffffff;
  border-color: var(--space-cadet);
  box-shadow: 0 0 0 3px rgba(38, 45, 79, 0.12);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23262d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

textarea.form-control {
  resize: vertical;
  min-height: 90px;
}

.form-success-message {
  display: none;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.form-success-message i {
  width: 48px;
  height: 48px;
  color: var(--tile-sea);
  margin-bottom: var(--space-4);
}

.form-success-message h3 {
  font-size: 22px;
  margin-bottom: var(--space-2);
}

.form-success-message p {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Closing CTA — the four routes onward
   Copy across the top, then a row of illustrated cards. Each card leads with
   artwork on a pastel plate so the row reads as picture first, label second.
   ========================================================================== */
.closing-cta {
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
  padding: 96px var(--space-10);
}

.closing-cta-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.closing-cta-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: end;
  margin-bottom: var(--space-12);
}

.closing-cta-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(238, 226, 217, 0.3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--desert-sand);
}

.closing-cta-head h2 {
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--white-chocolate);
}

.closing-cta-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.closing-cta-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.closing-cta-steps li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 16px;
  color: rgba(238, 226, 217, 0.85);
}

.closing-cta-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--desert-sand);
}

.closing-cta-aside .btn-secondary {
  background-color: var(--white-chocolate);
  color: var(--space-cadet);
  border-color: var(--white-chocolate);
}

.closing-cta-aside .btn-secondary:hover {
  background-color: #fff;
}

/* ---- Cards ---- */
.closing-cta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.closing-cta-card {
  display: flex;
  flex-direction: column;
  color: var(--white-chocolate);
}

/* The plate is the coloured block; the illustration sits inside it. Fixed
   aspect ratio reserves the box before the art decodes (no layout shift). */
.cta-card-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  transition: transform 0.3s var(--ease-standard);
}

.cta-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The source art is drawn on cream; blending lets the pastel plate show
     through instead of fighting it with a second background. */
  mix-blend-mode: multiply;
}

.cta-card-sand { background-color: var(--pastel-sand); }
.cta-card-lavender { background-color: var(--pastel-lavender); }
.cta-card-mint { background-color: var(--pastel-mint); }
.cta-card-rose { background-color: var(--pastel-rose); }

.cta-card-arrow {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--space-cadet);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-standard);
}

.cta-card-arrow i {
  width: 17px;
  height: 17px;
}

.closing-cta-card:hover .cta-card-art {
  transform: translateY(-4px);
}

.closing-cta-card:hover .cta-card-arrow {
  transform: translateX(3px);
}

.closing-cta-card h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white-chocolate);
  margin-bottom: var(--space-2);
}

.closing-cta-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(238, 226, 217, 0.75);
}

@media (max-width: 1024px) {
  .closing-cta-head {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .closing-cta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .closing-cta {
    padding: 64px var(--space-5);
  }

  .closing-cta-head h2 {
    font-size: 34px;
  }

  .closing-cta-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .closing-cta-card:hover .cta-card-art,
  .closing-cta-card:hover .cta-card-arrow {
    transform: none;
  }
}

/* Footer */
footer {
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
  padding-top: 80px;
  padding-bottom: 40px;
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

.footer-grid {
  max-width: 1280px;
  margin: 0 auto 60px auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-10);
}

.footer-logo {
  height: 52px;
  width: auto;
  margin-bottom: var(--space-5);
}

.footer-col p {
  font-size: 14px;
  opacity: 0.75;
  line-height: 1.6;
}

/* The contact rows are an icon plus a line of text. Left as inline content the
   icon sat on the text baseline and floated above the words; a flex row with a
   fixed icon box aligns them and keeps the text from wrapping underneath it. */
.footer-col p:has(> svg),
.footer-col p:has(> i) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.footer-col p > svg,
.footer-col p > i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer-tagline {
  font-size: 18px;
  color: var(--desert-sand);
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
  font-style: italic;
}

.footer-socials {
  display: flex;
  gap: var(--space-3);
}

.footer-socials a {
  /* 44px is the minimum comfortable touch target; the 36px circle stays as
     the painted size via the inner icon, but the tappable box is bigger. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-chocolate);
}

.footer-socials .social-ico {
  width: 18px;
  height: 18px;
  display: block;
}

.footer-socials a:hover {
  background-color: var(--desert-sand);
  color: var(--space-cadet);
}

.footer-col h4 {
  color: var(--white-chocolate);
  font-size: 16px;
  margin-bottom: var(--space-5);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 14px;
  opacity: 0.75;
}

.footer-links a:hover {
  opacity: 1;
  color: var(--desert-sand);
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  opacity: 0.7;
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-5);
}

.footer-bottom-links a:hover {
  color: var(--white-chocolate);
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .hero {
    padding-top: 130px;
    padding-bottom: 100px;
  }

  .hero h1 {
    font-size: 48px;
  }

  /* A 2-up grid leaves the third card alone on its own row with a divider
     pointing at nothing. Three equal rows read as an intentional list. */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 420px;
  }

  .stat-card {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-4);
  }

  .stat-card:first-child {
    border-top: none;
  }

  .contact-wrap,
  .resources-tools-grid,
  .footer-grid,
  .zebra-row,
  .closing-cta-inner {
    grid-template-columns: 1fr;
  }

  .zebra-row-reverse .zebra-text {
    order: 0;
  }

  .closing-cta-grid {
    grid-template-columns: 1fr 1fr;
  }

  nav {
    display: none;
  }

  /* Burger menusu bu genislikte devreye girdigi anda ikincil header CTA'lari
     da gizlenmelidir. Aksi halde 640-1024px arasinda "Login", "See a demo"
     ve dil ayraci barda kalir, acilan drawer'in ustune BINER ve dugmeler
     ust uste gorunur.
     Bu ogeler kaybolmuyor: ayni baglantilar drawer icindeki
     .nav-drawer-actions blogunda zaten sunuluyor. Barda yalnizca birincil
     CTA (Create account) ve dil secici kalir.
     Not: 640px altindaki blok bunlari zaten gizliyordu; eksik olan
     640-1024px araligiydi.

     DIKKAT: secici .header-actions ile SINIRLANMALIDIR. Ayni siniflar
     (.btn-demo-header--ghost) drawer icindeki .nav-drawer-actions blogunda
     da kullanilir; kapsamsiz yazilirsa drawer'daki Login / See a demo
     dugmeleri de kaybolur ve baglantilar hicbir yerden erisilemez hale
     gelir. */
  .header-actions .header-demo-link,
  .header-actions .header-signin,
  .header-actions .header-divider,
  .header-actions .btn-demo-header--ghost {
    display: none;
  }

  /* Mobile: the whole nav becomes a scrollable drawer and each dropdown
     collapses into an inline accordion instead of a floating panel. */
  nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100%;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background-color: var(--color-surface);
    padding: var(--space-4) var(--space-5)
             calc(var(--space-6) + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--color-border);
  }

  nav.open .nav-item {
    position: static;
  }

  nav.open .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 12px;
    font-size: 16px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }

  /* Accordion: static flow + height animation, not the desktop popover. */
  nav.open .nav-dropdown,
  nav.open .nav-dropdown.mega {
    position: static;
    display: block;
    min-width: 0;
    grid-template-columns: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease-standard);
  }

  nav.open .nav-item.open .nav-dropdown {
    max-height: 1400px;
    padding: var(--space-3) 0 var(--space-4);
  }

  nav.open .mega-aside {
    margin-top: var(--space-3);
  }

  nav.open .mega-label {
    margin-top: var(--space-3);
  }

  /* Below the desktop nav breakpoint the bar carries logo + actions + burger
     only, so it does not need the 88px of desktop breathing room — and the
     shorter bar is what the drawer offset is measured against. */
  header {
    --header-h: 72px;
    padding: 0 var(--space-5);
    gap: var(--space-4);
  }

  /* The logo must be allowed to shrink, otherwise flex-shrink:0 on both it
     and .header-actions forces a horizontal overflow instead of a fit. */
  .logo {
    min-width: 0;
    flex-shrink: 1;
    margin-right: auto;
  }

  .logo img {
    height: 40px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .header-actions {
    gap: var(--space-3);
  }

  .menu-toggle {
    display: flex;
    order: 3;
    flex-shrink: 0;
    /* 44x44 minimum touch target — 24px of bars plus padding was ~36px. */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Burger morphs into a close (X) while the drawer is open, so the control
     reads as a toggle rather than a one-way opener. */
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Drawer footer: the sign-in and demo links hidden from the phone bar are
     surfaced here, so nothing in the header is unreachable on mobile. */
  /* The last nav-link already draws a bottom border; a second border here
     rendered as an empty divider row between the links and the CTAs. */
  nav.open > a.nav-link:last-of-type {
    border-bottom: none;
  }

  .nav-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .nav-drawer-actions a {
    justify-content: center;
    padding: 13px 18px;
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  header {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }

  /* The lockup keeps priority over the CTA at phone width: it shrinks only
     enough to keep the row on one line without a horizontal scroll. */
  .logo img {
    height: 34px;
  }

  /* flex-shrink:0 from the base rule is what pushed the burger off-screen:
     the actions cluster refused to give room back, so the row overflowed
     instead of fitting. */
  .header-actions {
    gap: var(--space-2);
    min-width: 0;
    flex-shrink: 1;
  }

  /* Only the primary CTA survives at phone width — the secondary links
     move into the drawer's footer area conceptually (they exist in nav). */
  .header-demo-link,
  .header-signin,
  .header-divider {
    display: none;
  }

  /* The real header CTAs are .btn-demo-header, not .btn-primary. At phone
     width only the primary one stays in the bar; the ghost "See a demo"
     is reachable from the drawer footer, so keeping both here only cost
     the logo its room. */
  .btn-demo-header--ghost {
    display: none;
  }

  .btn-demo-header {
    padding: 9px 14px;
    font-size: 13px;
  }

  /* The "EN" label is what pushed the row over the edge on a 360px screen.
     The rest of the phone-width switcher styling lives after the base rule
     near the end of this file — a media query does not raise specificity, so
     declared-later is the only thing that wins there. */
  .lang-switch .current-lang-text {
    display: none;
  }

  .lang-dropdown-menu {
    min-width: min(250px, calc(100vw - var(--space-8)));
  }

  /* The panel is right-anchored to a switcher that now sits near the right
     edge; without a clamp it opened past the left edge of the screen. */
  .lang-dropdown-menu {
    right: 0;
    left: auto;
    max-width: calc(100vw - var(--space-8));
  }

  .hero {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .hero h1 {
    font-size: 36px;
    letter-spacing: -0.5px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .closing-cta-grid {
    grid-template-columns: 1fr;
  }
}

/* Narrow phones (iPhone SE / 360dp Android). Logo + a 150px CTA + the burger
   do not fit on one line here — keeping all three is what pushed the burger
   past the right edge, where it could not be tapped at all. The CTA moves
   into the drawer, which already carries it. */
@media (max-width: 430px) {
  header {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .header-actions .btn-demo-header {
    display: none;
  }

  .logo img {
    height: 32px;
  }
}

/* ==========================================================================
   Reduced motion
   Entrance animations and hover lifts are decorative here — none of them
   carry information — so they collapse to near-zero rather than being
   re-timed. Transitions are kept alive (1ms) so state changes still commit.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The reveal classes start at opacity:0 and are only cleared by a class the
     observer adds on intersect. Killing the transition alone would leave
     anything below the fold invisible, so the resting state is neutralised
     outright — content first, entrance second. */
  .scroll-reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .pillar-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
}

/* ==========================================================================
   Feature Detail Pages — Pepple Style
   ========================================================================== */
.feature-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 140px;
  padding-bottom: 80px;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(233, 193, 170, 0.35) 0%, transparent 100%),
    radial-gradient(50% 50% at 85% 20%, rgba(222, 212, 234, 0.4) 0%, transparent 100%),
    radial-gradient(40% 40% at 15% 30%, rgba(211, 228, 220, 0.35) 0%, transparent 100%),
    linear-gradient(180deg, var(--white-chocolate) 0%, var(--isabelline) 100%);
  text-align: center;
  overflow: hidden;
}

.feature-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.8vw, 76px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -2px;
  color: var(--space-cadet);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

.feature-hero p {
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 760px;
  margin-bottom: var(--space-8);
  text-wrap: balance;
}

.feature-hero-art {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: clamp(300px, 32vw, 460px);
  width: auto;
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.feature-hero-art-left {
  left: 1%;
}

.feature-hero-art-right {
  right: 1%;
}

@media (max-width: 1100px) {
  .feature-hero-art {
    display: none;
  }
}

/* Feature Steps (Zebra Rows) */
.feature-steps-section {
  padding: var(--space-16) var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}

.feature-step-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-12);
  align-items: center;
  margin-bottom: 90px;
}

.feature-step-row.reverse {
  grid-template-columns: 1.15fr 1fr;
}

.feature-step-row.reverse .feature-step-text {
  order: 2;
}

.feature-step-row.reverse .feature-step-visual {
  order: 1;
}

.feature-step-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-step-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--old-lavender);
}

.feature-step-text h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -1px;
  color: var(--space-cadet);
}

.feature-step-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.feature-step-visual {
  position: relative;
}

/* Mockup Canvas / Cards */
.mockup-canvas {
  position: relative;
  background: var(--white-chocolate);
  border-radius: var(--radius-xl);
  padding: 32px;
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 32px rgba(38, 45, 79, 0.08);
  overflow: hidden;
}

.mockup-main-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 8px 24px rgba(38, 45, 79, 0.06);
  border: 1px solid var(--color-border);
}

.mockup-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.mockup-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--space-cadet);
}

.mockup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mockup-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--color-text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

.mockup-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(38, 45, 79, 0.06);
  color: var(--space-cadet);
}

.mockup-user-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.mockup-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pastel-lavender);
  color: var(--space-cadet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.mockup-badge-stack {
  position: absolute;
  top: 40px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}

.mockup-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(38, 45, 79, 0.12);
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--space-cadet);
  transition: transform 0.2s ease;
}

.mockup-pill-badge:hover {
  transform: translateX(4px);
}

.mockup-pill-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--space-cadet);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mockup-pill-icon i {
  width: 14px;
  height: 14px;
}

.mockup-pill-sync {
  width: 14px;
  height: 14px;
  color: var(--old-lavender);
}

.mockup-calc-box {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--color-border);
}

.mockup-calc-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}

.mockup-big-stat {
  font-size: 34px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--space-cadet);
  margin: 14px 0 4px;
}

.mockup-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.mockup-btn-primary {
  background: var(--space-cadet);
  color: var(--white-chocolate);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}

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

.mockup-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--space-cadet);
  color: var(--white-chocolate);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(38, 45, 79, 0.25);
  margin-top: 10px;
}

/* Header Demo Action (Navy Blue) & Language Switcher Dropdown */
.btn-demo-header {
  background-color: var(--space-cadet);
  color: var(--white-chocolate);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-md);
  padding: 10px 22px;
  border: 1px solid var(--space-cadet);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  white-space: nowrap;
}

.btn-demo-header:hover {
  background-color: #171c33;
  border-color: #171c33;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px rgba(38, 45, 79, 0.25);
}

/* Header'da iki CTA yan yana durur: "Create account" birincil (dolu),
   "See a demo" ikincil (çerçeveli) — ikisi de dolu olsaydı hangisinin
   asıl eylem olduğu okunmazdı. */
.btn-demo-header--ghost {
  background-color: transparent;
  color: var(--space-cadet);
  border-color: rgba(38, 45, 79, 0.25);
}

.btn-demo-header--ghost:hover {
  background-color: rgba(38, 45, 79, 0.06);
  border-color: rgba(38, 45, 79, 0.45);
  box-shadow: none;
}

.lang-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--space-cadet);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  background: var(--white-chocolate);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-switch:hover,
.lang-dropdown-wrapper:hover .lang-switch,
.lang-dropdown-wrapper.open .lang-switch {
  background: #ffffff;
  border-color: var(--space-cadet);
  box-shadow: 0 2px 8px rgba(38, 45, 79, 0.08);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(38, 45, 79, 0.16);
  padding: 8px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s var(--ease-standard),
              transform 0.22s var(--ease-standard),
              visibility 0.22s;
  z-index: 1002;
}

/* Open on hover on desktop or via .open class */
@media (min-width: 1025px) {
  .lang-dropdown-wrapper:hover .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.lang-dropdown-wrapper.open .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--space-cadet);
  cursor: pointer;
  text-align: left;
  transition: all 0.16s ease;
}

.lang-opt-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lang-code-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  min-width: 20px;
}

.lang-option:hover {
  background-color: var(--isabelline);
  color: var(--space-cadet);
}

.lang-option.is-active {
  background-color: rgba(38, 45, 79, 0.07);
  font-weight: 700;
  color: var(--space-cadet);
}

.lang-check {
  width: 16px;
  height: 16px;
  color: #1f7a55;
  opacity: 0;
  flex-shrink: 0;
}

.lang-option.is-active .lang-check {
  opacity: 1;
}

.header-divider {
  width: 1px;
  height: 22px;
  background-color: var(--color-border);
}

/* ==========================================================================
   Comprehensive Scroll Reveal Animations across the entire site
   ========================================================================== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* The horizontal reveals park their element 42px to the side while waiting to
   be scrolled into view. That offset is real layout overhang: on a viewport
   narrow enough for the section to reach the edges, a left-parked block sits
   at a negative x and gives the whole document a horizontal scrollbar before
   the visitor has even reached that section. Clipping the page's own
   horizontal overflow contains it without touching the animation. */
.reveal-left {
  opacity: 0;
  transform: translateX(-42px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(42px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-up.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Once an element has arrived it no longer needs a compositor layer; holding
   will-change on every card is what makes long pages feel heavy on a phone. */
.scroll-reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-up.is-visible {
  will-change: auto;
}

/* ==========================================================================
   Footer on small screens
   The bottom bar kept its desktop `justify-content: space-between` all the way
   down, so at 360px the copyright squeezed into a ~110px column seven lines
   tall while "Terms of Service" wrapped mid-phrase beside it. Stacking the bar
   and giving the columns real separation is what the layout needed.

   Breakpoint note: .footer-grid collapses to one column at 1024px, so these
   stacked-layout rules have to start there too — at 900px the 901-1024px band
   was left with stacked columns and no dividers between them.
   ========================================================================== */
@media (max-width: 1024px) {
  footer {
    padding-top: 56px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* One column of stacked blocks needs a divider between them; a 40px gap
     alone read as one long undifferentiated list of links. */
  .footer-grid {
    gap: 0;
    margin-bottom: var(--space-6);
  }

  .footer-col + .footer-col {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-logo {
    height: 44px;
  }

  .footer-col h4 {
    margin-bottom: var(--space-3);
  }

  .footer-col p {
    max-width: 46ch;
  }

  .footer-tagline {
    font-size: 17px;
  }

  /* Stacked, left-aligned, and readable — not two columns fighting for a
     360px line. */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-top: var(--space-5);
    line-height: 1.6;
  }

  .footer-bottom > p {
    order: 2;
    max-width: 46ch;
  }

  /* The legal links are the actionable half, so they lead; wrapping is
     allowed but each link stays whole. */
  .footer-bottom-links {
    order: 1;
    flex-wrap: wrap;
    /* A tighter column gap fits all three legal links on one line down to
       ~380px; below that the third wraps cleanly rather than being clipped. */
    gap: 0 var(--space-4);
    margin-bottom: var(--space-2);
    margin-left: -2px;
  }

  .footer-bottom-links a {
    white-space: nowrap;
  }
}

/* Touch targets. On a phone every one of these is finger-driven, and at their
   desktop sizes the footer links were 17px tall — roughly a third of a
   comfortable target, sitting 8px apart. Padding grows the hit box without
   changing where the text sits. */
@media (max-width: 900px) {
  .footer-links li {
    margin-bottom: 0;
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }

  .footer-bottom-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
  }

  .zebra-proof-link,
  .article-link {
    min-height: 44px;
    align-items: center;
  }

  .footer-socials {
    gap: var(--space-2);
  }
}

/* Phones: the same choreography at shorter travel and quicker timing. A 42px
   horizontal slide on a 360px screen reads as the layout being broken rather
   than as an entrance, and the long durations stack up while scrolling. */
@media (max-width: 640px) {
  .scroll-reveal {
    transform: translateY(20px) scale(0.995);
    transition-duration: 0.55s;
  }

  .reveal-left,
  .reveal-right {
    transform: translateY(20px);
    transition-duration: 0.55s;
  }

  .reveal-scale {
    transform: translateY(18px) scale(0.97);
    transition-duration: 0.5s;
  }

  .reveal-up {
    transform: translateY(16px);
    transition-duration: 0.5s;
  }
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 900px) {
  .feature-step-row,
  .feature-step-row.reverse {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .feature-step-row.reverse .feature-step-text {
    order: 1;
  }

  .feature-step-row.reverse .feature-step-visual {
    order: 2;
  }
}

/* ====================================================================
   Legal Pages (Terms, Privacy/KVKK, Cookies)
   Long-form prose with a sticky table of contents. Body copy is capped
   near 70ch so lines stay readable at the sizes these documents are
   actually read at.
   ==================================================================== */
.page-legal {
  background: var(--color-bg);
}

.legal-hero {
  padding: 140px 6vw 56px;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.legal-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--desert-sand);
  margin-bottom: 18px;
}

.legal-eyebrow i {
  width: 15px;
  height: 15px;
}

.legal-hero h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--white-chocolate);
}

.legal-hero p {
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(238, 226, 217, 0.82);
  margin: 0;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(238, 226, 217, 0.18);
  font-size: 13.5px;
  color: rgba(238, 226, 217, 0.75);
}

.legal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legal-meta i {
  width: 15px;
  height: 15px;
  color: var(--desert-sand);
}

/* --- Layout: sidebar + document --- */
.legal-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 6vw 96px;
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.legal-toc {
  /* The global `nav` rule is flex row (built for the header); this sidebar
     needs normal block flow so the label stacks above the list. */
  display: block;
  margin-right: 0;
  position: sticky;
  top: 104px;
  border-left: 2px solid var(--color-border);
  padding-left: 18px;
}

.legal-toc h2 {
  /* Reset the site-wide h2 treatment: inside the sidebar this is a small
     block label sitting above the list, not a section heading. */
  display: block;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.legal-toc li {
  counter-increment: toc;
  margin-bottom: 2px;
}

.legal-toc a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.42;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.16s ease;
}

.legal-toc a::before {
  content: counter(toc) ".";
  margin-right: 7px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.legal-toc a:hover,
.legal-toc a.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Document body --- */
.legal-doc {
  max-width: 74ch;
}

.legal-doc h2 {
  font-size: clamp(21px, 2.3vw, 26px);
  line-height: 1.25;
  margin: 52px 0 16px;
  padding-top: 8px;
  scroll-margin-top: 108px;
  color: var(--color-primary);
}

.legal-doc > h2:first-of-type {
  margin-top: 0;
}

.legal-doc h3 {
  font-size: 17px;
  line-height: 1.35;
  margin: 30px 0 10px;
  scroll-margin-top: 108px;
  color: var(--color-text);
}

.legal-doc p,
.legal-doc li {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--color-text-secondary);
}

.legal-doc p {
  margin: 0 0 16px;
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal-doc li {
  margin-bottom: 8px;
}

.legal-doc li::marker {
  color: var(--old-lavender);
}

.legal-doc strong {
  color: var(--color-text);
  font-weight: 650;
}

.legal-doc a {
  color: var(--old-lavender);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-doc a:hover {
  color: var(--color-primary);
}

/* Identity card: the statutory "who you are contracting with" block */
.legal-identity {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px 26px;
  margin: 0 0 32px;
}

.legal-identity dl {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 10px 20px;
  margin: 0;
  font-size: 14.5px;
}

.legal-identity dt {
  color: var(--color-text-muted);
  font-weight: 600;
}

.legal-identity dd {
  margin: 0;
  color: var(--color-text);
}

/* Callout for material clauses (liability, arbitration, consent) */
.legal-callout {
  border-left: 3px solid var(--old-lavender);
  background: var(--color-surface-sunken);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 0 0 24px;
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

.legal-callout.is-strong {
  border-left-color: var(--tile-rose-text);
}

/* Data tables (cookie inventory, retention periods) */
.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 26px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.legal-table th,
.legal-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.55;
}

.legal-table th {
  background: var(--color-surface-sunken);
  color: var(--color-primary);
  font-weight: 650;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.legal-table td {
  color: var(--color-text-secondary);
}

.legal-table tr:last-child td {
  border-bottom: none;
}

/* Language variants: only the active locale is rendered */
.legal-lang {
  display: none;
}

.legal-lang.is-active {
  display: block;
}

@media (max-width: 960px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 40px;
  }

  .legal-toc {
    position: static;
    border-left: none;
    border-bottom: 1px solid var(--color-border);
    padding-left: 0;
    padding-bottom: 20px;
  }

  .legal-toc ol {
    columns: 2;
    column-gap: 26px;
  }

  .legal-hero {
    padding-top: 116px;
  }
}

@media (max-width: 560px) {
  .legal-toc ol {
    columns: 1;
  }

  .legal-identity dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .legal-identity dt {
    margin-top: 10px;
  }
}

/* Contact form error state — shown only when a submission actually fails. */
.form-error-message {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--tile-rose-text);
  border-radius: 0 8px 8px 0;
  background: color-mix(in oklch, var(--tile-rose) 12%, white);
  color: var(--tile-rose-text);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ==========================================================================
   Blog Post Detail Page Styles
   ========================================================================== */
.page-blog-post .article-hero {
  padding-top: 130px;
  padding-bottom: 40px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.blog-post-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.blog-post-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--pastel-sand);
  color: var(--space-cadet);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blog-post-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.2;
  color: var(--space-cadet);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.blog-post-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.blog-author-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text-muted);
}

.blog-author-bar strong {
  color: var(--space-cadet);
}

.blog-featured-media {
  margin: var(--space-8) 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--pastel-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
}

.blog-featured-media img {
  max-height: 380px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.blog-content {
  padding: var(--space-8) 0 var(--space-12);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text);
}

.blog-content h2 {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--space-cadet);
  margin: 40px 0 16px;
  line-height: 1.3;
}

.blog-content h3 {
  font-size: 20px;
  color: var(--space-cadet);
  margin: 28px 0 12px;
}

.blog-content p {
  margin-bottom: 20px;
  color: var(--color-text);
}

.blog-content ul, .blog-content ol {
  margin: 0 0 24px 24px;
  color: var(--color-text);
}

.blog-content li {
  margin-bottom: 8px;
  line-height: 1.65;
}

.blog-content blockquote {
  margin: 32px 0;
  padding: 20px 28px;
  background: #fbf8f5;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic;
  color: var(--space-cadet);
  font-size: 18px;
}

.blog-takeaways-box {
  margin: 36px 0;
  padding: 28px;
  background: #f4f8f6;
  border: 1px solid #d1fae5;
  border-radius: var(--radius-xl);
}

.blog-takeaways-box h4 {
  font-size: 18px;
  color: #065f46;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.related-posts-section {
  background: #fbf8f5;
  border-top: 1px solid var(--color-border);
  padding: 64px 0 80px;
}

.related-posts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Touch interaction
   Every lift and shadow on this page is written as :hover. A touch browser
   fires :hover on tap and then keeps it applied until you tap elsewhere, so
   cards stayed lifted after being pressed. These rules give touch its own
   feedback — a brief press-in — and hand the hover states back to devices
   that actually have a pointer.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Press feedback: immediate, short, and reversed on release. */
  .btn:active,
  .btn-demo-header:active,
  .stage-tab:active,
  .lang-option:active,
  .menu-toggle:active {
    transform: scale(0.97);
    transition-duration: 90ms;
  }

  .pillar-card:active,
  .article-card:active,
  .closing-cta-card:active,
  .feat-mcard:active,
  .plan-card:active {
    transform: scale(0.985);
    transition-duration: 120ms;
  }

  /* Sticky-hover cleanup: the lift belongs to a real pointer, not to a tap
     that has already ended. */
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-demo-header:hover,
  .pillar-card:hover,
  .article-card:hover,
  .closing-cta-card:hover,
  .plan-card:hover,
  .stat-card:hover {
    transform: none;
  }

  /* Tapping a marquee row should not freeze it for the rest of the session —
     animation-play-state:paused would stick exactly like :hover does. */
  .feat-marquee:hover .feat-marquee-track,
  .feat-marquee-row:hover .feat-marquee-track {
    animation-play-state: running;
  }
}

/* Removes the grey flash Android/iOS paint over a tapped link, which fought
   with the press-scale above. */
a, button, [role="tab"] {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Hero entrance
   .animate-fade-in-up is used on the hero block of every page in the site but
   was never defined, so those blocks simply appeared. Defining it here gives
   each hero a single, quiet lift on load — and because it is an animation
   (not an observer class) it needs no JS and cannot leave content stranded
   at opacity 0 if a script fails.
   ========================================================================== */
@keyframes fade-in-up {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.animate-fade-in-up {
  animation: fade-in-up 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The hero's own children stagger behind it, so the headline leads and the
   buttons arrive last instead of the whole block moving as one slab. */
.hero-content.animate-fade-in-up > * {
  animation: fade-in-up 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-content.animate-fade-in-up > .hero-headline { animation-delay: 80ms; }
.hero-content.animate-fade-in-up > .hero-lead     { animation-delay: 190ms; }
.hero-content.animate-fade-in-up > .hero-actions  { animation-delay: 300ms; }

/* The stage is the largest element on the page; it follows the copy rather
   than competing with it. */
.hero .stage {
  animation: fade-in-up 820ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
}

@media (max-width: 640px) {
  /* Shorter travel and tighter spacing on a phone — the same beat, less drift. */
  .animate-fade-in-up,
  .hero-content.animate-fade-in-up > *,
  .hero .stage {
    animation-duration: 560ms;
  }

  .hero-content.animate-fade-in-up > .hero-headline { animation-delay: 60ms; }
  .hero-content.animate-fade-in-up > .hero-lead     { animation-delay: 140ms; }
  .hero-content.animate-fade-in-up > .hero-actions  { animation-delay: 220ms; }
  .hero .stage { animation-delay: 300ms; }
}

/* An entrance that never finishes would leave the hero blank, so under
   reduced motion the elements are simply present. */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .hero-content.animate-fade-in-up > *,
  .hero .stage {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Phone-width language switcher
   Placed after the base .lang-switch rule on purpose: these overrides are in a
   media query, which sets no extra specificity, so an earlier block loses to
   the base rule no matter how it is written.

   Why it changes at all: with the "EN" label hidden the filled, bordered pill
   carries far more visual weight than the bare hamburger sitting next to it.
   Dropping to a plain icon button puts the two controls on equal footing.
   ========================================================================== */
@media (max-width: 640px) {
  .lang-switch {
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    gap: 1px;
  }

  .lang-switch:hover,
  .lang-dropdown-wrapper:hover .lang-switch,
  .lang-dropdown-wrapper.open .lang-switch {
    background: rgba(38, 45, 79, 0.06);
    border-color: transparent;
    box-shadow: none;
  }

  .lang-switch > i:first-child {
    width: 19px;
    height: 19px;
  }
}