:root{
  /* Surfaces - widened gap between --bg and --surface (visual-audit.md's
     "Yüzey ayrımı" finding: was #f6f0e7/#fffdf9, both near-max lightness,
     cards barely read as separated from the page). Same beige family,
     just a real step apart now. */
  --bg:#efe4d0;
  --bg-soft:#f7f0e4;
  --surface:#fffefb;
  --surface-strong:#fff;
  --text:#3D210E;
  --text-secondary:#6f4a32;
  --muted:#8b715f;
  --border:#c9bbaa;
  --primary:#3D210E;
  --primary-hover:#5a341c;
  --primary-active:#2f190b;
  --primary-soft:#efe3d3;
  --success:#247a4b;
  --success-soft:#eaf6ee;

  /* Hero - the one deliberate dark tonal break; the rest of the page
     stays on --bg/--surface above. Near-black brown (not pure black) to
     stay in --primary's own family rather than reading as a generic
     dark-mode panel. */
  --hero-bg:#1a0f06;
  --hero-bg-rgb:26,15,6;
  --hero-text:#fffaf2;
  --hero-text-rgb:255,250,242;
  --hero-text-secondary:#d9c3a6;
  --video-frame-bg:#21150d;

  /* Gold accent - hero primary CTA + hero eyebrow/trust-row only. Kept
     out of --primary/--primary-hover on purpose so every other button
     and link on the page is untouched by this. */
  --accent-gold:#e3a63a;
  --accent-gold-hover:#f0b950;
  --accent-gold-ink:#241704;
  --accent-gold-rgb:227,166,58;

  /* Two shadow tiers - rest state was near-invisible (was a flat
     0 4px 16px at 8% opacity), cards didn't read as lifted off --bg.
     Hover stays a clear, larger jump. Tinted with --hero-bg's near-black
     brown rather than --primary's lighter one, for more depth. */
  --shadow-rest:0 1px 2px rgba(var(--hero-bg-rgb),.08),0 6px 20px rgba(var(--hero-bg-rgb),.10);
  --shadow-hover:0 4px 10px rgba(var(--hero-bg-rgb),.14),0 18px 44px rgba(var(--hero-bg-rgb),.20);

  /* Radius - collapsed from 10 distinct fixed-size values (visual-audit.md
     finding) to 3: pill controls, buttons/small icon boxes, everything
     else (cards, panels, media frames). Perfect circles (decorative
     blobs, icon badges) are a separate case - 50% isn't comparable to a
     fixed px value, so it gets its own token rather than being force-fit
     into one of the 3 or left as an untracked literal. */
  --radius-pill:999px;
  --radius-btn:8px;
  --radius-card:12px;
  --radius-circle:50%
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Poppins",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3,.brand{font-family:"Poppins",sans-serif}
h1{font-size:clamp(2.6rem,4.2vw,3.9rem);line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.04em}
h3{font-size:1.12rem;line-height:1.3}
:focus-visible{outline:3px solid rgba(61,33,14,.35);outline-offset:3px}

.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid transparent;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(18px)}
.nav.is-scrolled{border-color:var(--border);box-shadow:0 10px 30px rgba(38,34,30,.06)}
.nav__inner{max-width:1280px;height:72px;margin:auto;padding:0 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.brand span,.preview-logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-btn);background:var(--primary);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(61,33,14,.2)}
.nav-menu{position:relative;display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--border);border-radius:var(--radius-pill);background:rgba(255,253,249,.72);box-shadow:var(--shadow-rest);color:var(--text-secondary);font-size:.9rem;font-weight:600}
.nav-menu>a,.nav-link--capabilities{min-height:34px;padding:0 13px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);font:inherit;cursor:pointer}
.nav-menu>a:hover,.nav-link--capabilities:hover,.nav-capabilities.is-open .nav-link--capabilities,.nav-capabilities:focus-within .nav-link--capabilities{background:var(--primary-soft);color:var(--primary)}
.nav-link--capabilities{display:inline-flex;align-items:center;gap:5px}
.nav-link--capabilities span{font-size:.78rem}
.nav-capabilities{position:relative}
.nav-hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:38px;height:38px;padding:0;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--surface);cursor:pointer}
.nav-menu-i18n{display:none}
.nav-hamburger span{display:block;width:18px;height:2px;border-radius:var(--radius-pill);background:var(--text)}
.nav-hamburger span+span{margin-top:4px}
.mega-menu{position:fixed;left:50%;top:72px;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;width:min(910px,calc(100vw - 56px));padding:18px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-hover);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.nav-capabilities:hover .mega-menu,.nav-capabilities:focus-within .mega-menu,.nav-capabilities.is-open .mega-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-menu__groups{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mega-menu section{display:grid;align-content:start;gap:8px}
.mega-menu section>p{color:var(--primary);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mega-link{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px;border:1px solid transparent;border-radius:var(--radius-card);color:var(--text);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.mega-link:hover,.mega-link:focus-visible{background:var(--bg-soft);border-color:var(--border);transform:translateY(-1px)}
.mega-link svg{width:34px;height:34px;padding:7px;border-radius:var(--radius-btn);background:var(--primary-soft);color:var(--primary)}
.mega-link strong{display:block;font-size:.84rem;line-height:1.22}
.mega-link small{display:block;margin-top:4px;color:var(--muted);font-size:.72rem;line-height:1.35}
.mega-link--soon{opacity:.55;cursor:not-allowed}
.mega-link--soon:hover{background:none;border-color:transparent;transform:none}
.plan-note{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.66rem;font-weight:700;line-height:1.3}
.mega-promo{display:grid;align-content:start;gap:10px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);color:var(--text)}
.mega-promo img{display:block;width:100%;aspect-ratio:1.34/1;object-fit:cover;object-position:top left;border-radius:var(--radius-card);border:1px solid var(--border)}
.mega-promo span{width:max-content;padding:6px 9px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.66rem;font-weight:800;text-transform:uppercase}
.mega-promo strong{font-size:.84rem;line-height:1.32}
.nav nav a:hover{color:var(--primary)}
.nav__actions{justify-self:end;display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius-btn);font-weight:700;font-size:.9rem;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(61,33,14,.2)}
.btn--primary:hover{background:var(--primary-hover);box-shadow:0 12px 28px rgba(61,33,14,.24)}
.btn--quiet{border-color:var(--border);background:var(--surface);color:var(--text)}

.hero{position:relative;overflow:hidden;max-width:none;margin:0;padding:72px max(28px,calc((100vw - 1224px)/2)) 64px;display:grid;grid-template-columns:1fr;gap:48px;background:linear-gradient(to bottom,var(--bg),transparent 56px),var(--hero-bg);background-repeat:no-repeat;color:var(--hero-text)}
.hero .eyebrow{color:var(--accent-gold)}
.hero__copy{position:relative;max-width:700px}
.hero__copy:before{content:"";position:absolute;z-index:-1;right:-180px;top:-40px;width:620px;height:620px;border-radius:var(--radius-circle);background:radial-gradient(circle,rgba(var(--accent-gold-rgb),.18),rgba(var(--accent-gold-rgb),0) 68%)}
.hero__copy h1{margin-top:12px;color:var(--hero-text)}
.hero__lede{max-width:650px;margin-top:26px;color:var(--hero-text-secondary);font-size:1.08rem}
.hero__actions{display:flex;align-items:center;gap:12px;margin-top:32px}
.hero__actions>div{display:grid;gap:6px}
.hero__actions small{color:var(--hero-text-secondary);text-align:center;font-size:.72rem}
.hero__actions .btn--primary{background:var(--accent-gold);color:var(--accent-gold-ink);box-shadow:0 10px 26px rgba(var(--accent-gold-rgb),.28)}
.hero__actions .btn--primary:hover{background:var(--accent-gold-hover);box-shadow:0 14px 32px rgba(var(--accent-gold-rgb),.34)}
.hero__actions .btn--quiet{border-color:rgba(var(--hero-text-rgb),.28);background:transparent;color:var(--hero-text)}
.hero__actions .btn--quiet:hover{border-color:rgba(var(--hero-text-rgb),.5)}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none;color:var(--success);font-size:.82rem;font-weight:700}
.trust-row li:before{content:"✓";margin-right:7px}
.hero .trust-row{color:var(--hero-text-secondary)}
.hero .trust-row li:before{color:var(--accent-gold)}

/* Mirrors the real Anasayfa "Ne yapmak istiyorsun?" grid (public/app.js,
   simpleFlowHomeHtml()) so a visitor sees the exact same 7 actions before
   registering - same content/order/icons via public/shared/simple-flow-cards.js,
   restyled with this page's own tokens (the app uses --ac-* names, this
   page uses plain names) rather than pulling in app.js's full stylesheet.
   Sits inside the now-dark .hero band (same <section>, see landing.html) -
   its own heading needs an explicit light color, and its cards need an
   explicit dark text color pinned back down since they keep their light
   --surface background regardless of what .hero's own text color is. */
.simple-flow-section{margin-top:8px}
.simple-flow-section h2{font-size:1.4rem;margin-bottom:18px;color:var(--hero-text)}
.simple-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.simple-flow-card{display:grid;align-content:start;gap:7px;min-height:116px;padding:18px;text-align:left;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest);transition:.18s ease;color:var(--text)}
.simple-flow-card:hover{border-color:#b9895f;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.simple-flow-card i{font-style:normal;font-size:20px;color:var(--primary)}
.simple-flow-card span{color:var(--text);font-family:"Poppins",sans-serif;font-size:15px;font-weight:600}
.simple-flow-card small{color:var(--text-secondary);font-size:12px;line-height:1.45}
.simple-flow-card.is-primary{background:var(--primary);border-color:var(--primary)}
.simple-flow-card.is-primary i,.simple-flow-card.is-primary span{color:#fff}
.simple-flow-card.is-primary small{color:rgba(255,255,255,.78)}
.simple-flow-card.is-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
/* Inside the dark .hero band specifically, --primary and --hero-bg are
   both near-black brown - the is-primary card's own fill nearly matches
   the section it sits on and disappears next to the six white cards
   around it. Give it the same white surface as its siblings and mark it
   as the recommended pick with the gold accent instead (border + icon),
   rather than a fill color that only works on a light page background. */
.hero .simple-flow-card.is-primary{background:color-mix(in srgb,var(--accent-gold) 10%,var(--surface));border-color:var(--accent-gold);color:var(--text)}
.hero .simple-flow-card.is-primary i{color:var(--accent-gold-ink)}
.hero .simple-flow-card.is-primary span{color:var(--text)}
.hero .simple-flow-card.is-primary small{color:var(--text-secondary)}
.hero .simple-flow-card.is-primary:hover{background:color-mix(in srgb,var(--accent-gold) 18%,var(--surface));border-color:var(--accent-gold-hover);box-shadow:var(--shadow-hover)}

.command-preview{position:relative;padding:20px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-hover)}
.preview-label{position:absolute;right:18px;top:-14px;padding:6px 10px;border:1px solid #d8c4ad;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.68rem;font-weight:800;text-transform:uppercase}
.command-preview header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:17px;border-bottom:1px solid var(--border)}
.command-preview header>div{display:flex;align-items:center;gap:10px}
.safe-chip{padding:7px 10px;border:1px solid #b9d7c5;border-radius:var(--radius-pill);background:var(--success-soft);color:var(--success);font-size:.68rem;font-weight:800}
.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}
.preview-metrics article,.preview-actions article{padding:14px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft)}
.preview-metrics span,.preview-actions span{display:block;color:var(--muted);font-size:.67rem}
.preview-metrics strong{display:block;margin-top:5px;font-size:.8rem}
.preview-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.preview-actions article{min-height:88px;background:var(--surface-strong)}
.preview-actions strong{font-size:.82rem}
.preview-actions span{margin-top:7px}

.section{max-width:1280px;margin:auto;padding:78px 28px}
.section-head{max-width:720px;margin-bottom:30px}
.section-head h2{margin-top:9px}
.section-head>p:last-child{margin-top:16px;color:var(--text-secondary)}
.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.capability-grid a{display:flex;flex-direction:column;min-height:236px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest);transition:.18s ease}
.capability-grid a:hover{border-color:#b9895f;box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.capability-grid .capability-soon{display:flex;flex-direction:column;min-height:236px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);opacity:.65;cursor:not-allowed}
.capability-grid span{color:var(--primary);font-weight:800}
.capability-grid h3{margin-top:30px}
.capability-grid p{margin:10px 0 22px;color:var(--text-secondary);font-size:.9rem}
/* Badge (.plan-note) and CTA are pinned to the card's bottom as one
   unit, not just the CTA - otherwise a card whose badge text wraps to 2
   lines (e.g. the Turkish "Starter'dan itibaren · Ücretsizde araştırma
   dahil") pushes only its own CTA down while a 1-line/no-badge card's
   CTA stays higher, so the badges themselves end up at different
   heights across the row even though the CTAs still bottom-align.
   strong always carries the auto margin (handles the one card with no
   badge at all); when a badge does precede it, the badge takes the auto
   margin instead and strong falls back to a small fixed gap - two auto
   margins on the same axis would otherwise split the free space between
   them instead of bunching badge+CTA together at the bottom. flex
   (not grid+align-content) is needed for auto margins to reliably
   consume the leftover space here at all. */
.capability-grid strong{margin-top:auto;color:var(--primary);font-size:.82rem}
.capability-grid .plan-note{margin-top:auto}
.capability-grid .plan-note+strong{margin-top:8px}

.studios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.studios-grid article{padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest);transition:.18s ease}
.studios-grid article:hover{border-color:#b9895f;box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.studio-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-btn);background:var(--primary-soft);color:var(--primary)}
.studio-icon svg{width:22px;height:22px}
.studios-grid h3{margin-top:16px}
.studios-grid p{margin-top:8px;color:var(--text-secondary);font-size:.9rem}

.before-after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ba-card{display:grid;align-content:start;padding:18px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest)}
.ba-card--wide,.ba-card--stat{grid-column:span 1}
.ba-card__label{width:max-content;padding:6px 10px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ba-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:14px}
.ba-pair figure{margin:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);aspect-ratio:1/1}
.ba-pair img{display:block;width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;margin:8px;padding:4px 8px;border-radius:var(--radius-pill);background:rgba(var(--hero-bg-rgb),.7);color:var(--hero-text);font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ba-pair figure{position:relative}
/* The source image has a generic mockup-template caption baked into its
   bottom edge ("Wall art frame preview" / "Seller-review mockup
   template") that isn't real product-specific content and visually
   clashes with the card's own "After" tag - faded out here rather than
   re-cropped, since this image's 4:3 source can't be vertically cropped
   inside a 1:1 frame without changing this one card's aspect ratio and
   breaking row symmetry with its siblings. */
.ba-figure--fade-bottom:after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(to bottom,transparent,var(--bg-soft) 70%);pointer-events:none}
.ba-arrow{display:grid;place-items:center;color:var(--primary);font-size:1.2rem;font-weight:800}
.ba-card>p{margin-top:14px;color:var(--text-secondary);font-size:.86rem}
.ba-pair--text-image{grid-template-columns:1.15fr auto 1fr}
.ba-text-panel{position:relative;display:grid;gap:8px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);aspect-ratio:1/1;align-content:center}
.ba-text-panel .ba-tag{position:static;width:max-content;background:var(--primary-soft);color:var(--primary)}
.ba-quote{color:var(--text);font-size:.86rem;line-height:1.4;font-style:italic}
.ba-text-panel small{color:var(--muted);font-size:.72rem}
.ba-card--stat{justify-content:center}
.ba-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ba-stat{padding:14px 10px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);text-align:center}
.ba-stat strong{display:block;font-size:1.6rem;color:var(--primary)}
.ba-stat span{display:block;margin-top:4px;color:var(--text-secondary);font-size:.7rem}
.before-after-note{margin-top:18px;color:var(--muted);font-size:.82rem}

.pricing{position:relative}
.pricing-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pricing-card{display:grid;align-content:start;gap:14px;min-height:390px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest)}
.pricing-card--featured{position:relative;border-color:#b9895f;background:var(--primary-soft);box-shadow:var(--shadow-hover)}
.pricing-featured-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:var(--radius-pill);background:var(--primary);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px rgba(61,33,14,.28)}
.pricing-plan{width:max-content;padding:7px 10px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pricing-card h3{font-size:2.5rem;line-height:1;color:var(--text)}
.pricing-card h3 span{margin-left:4px;color:var(--muted);font-family:"Poppins",sans-serif;font-size:.9rem;font-weight:600}
.pricing-note{min-height:44px;color:var(--text-secondary);font-size:.88rem}
.pricing-card ul{display:grid;gap:9px;margin:4px 0 10px;padding:0;list-style:none;color:var(--text-secondary);font-size:.88rem}
.pricing-card li{display:flex;gap:8px;align-items:flex-start}
.pricing-card li:before{content:"✓";color:var(--success);font-weight:900}
.pricing-generations-wrap{display:block}
.pricing-generations-wrap strong{display:block}
.pricing-breakdown{display:block;margin-top:4px;color:var(--muted);font-size:.76rem;line-height:1.4}
.pricing-card .btn{align-self:end;margin-top:auto;width:100%}

.proof-showcase,.capability-preview,.proof-trail{position:relative}
.action-video{max-width:1060px}
.action-video__frame{margin:28px 0 0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--video-frame-bg);box-shadow:var(--shadow-hover)}
.action-video__frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--video-frame-bg)}
.action-video__frame figcaption{padding:12px 16px;background:var(--surface);color:var(--text-secondary);font-size:.84rem}
.proof-comparison{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px}
.proof-panel{padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest)}
.proof-panel__label,.preview-grid span,.trail-grid span{display:inline-flex;align-items:center;width:max-content;padding:7px 10px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.proof-panel h3{margin-top:16px}
.proof-panel p{margin-top:8px;color:var(--text-secondary);font-size:.92rem}
.proof-panel figure,.preview-grid figure,.trail-grid article{margin:16px 0 0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft)}
.proof-panel img,.preview-grid img,.trail-grid img{display:block;width:100%;height:auto}
.proof-panel--before figure{display:grid;align-items:center;min-height:178px;padding:22px;background:var(--bg-soft)}
.proof-panel--before img{border-radius:var(--radius-card);box-shadow:0 10px 24px rgba(61,33,14,.08)}
.proof-after-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:12px}
.proof-after-grid figure{margin-top:16px}
.preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.preview-grid--products{grid-template-columns:repeat(3,1fr)}
.preview-grid article{display:grid;align-content:start;padding:14px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest)}
.preview-grid figure{margin:0 0 14px;aspect-ratio:1.22/1}
.preview-grid img{height:100%;object-fit:cover;object-position:top left}
.preview-grid--products figure{aspect-ratio:4/3}
.preview-grid--products article:nth-child(1) figure,.preview-grid--products article:nth-child(3) figure{background:#f5f0e9}
.preview-grid h3{margin-top:14px;font-size:1rem}
.preview-grid p{margin-top:8px;color:var(--text-secondary);font-size:.84rem}
.trail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.trail-grid article{display:grid;align-content:start;gap:10px;margin:0;padding:12px}
.trail-grid img{aspect-ratio:1.28/1;object-fit:cover;object-position:top left;border-radius:var(--radius-card)}
.trail-grid article:first-child img{object-fit:contain;padding:12px;background:var(--surface)}
@media(max-width:950px){
  .proof-comparison,.proof-after-grid{grid-template-columns:1fr}
  .preview-grid,.trail-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .proof-panel{padding:16px}
  .proof-panel--before figure{min-height:122px;padding:14px}
  .preview-grid,.trail-grid{grid-template-columns:1fr}
}

.workflow{max-width:none;padding-inline:max(28px,calc((100vw - 1224px)/2));border-block:1px solid var(--border);background:var(--bg-soft)}
.workflow .section-head{max-width:1224px}
.workflow ol{max-width:1224px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.workflow li{position:relative;display:grid;gap:12px;padding:18px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.workflow li:not(:last-child):after{content:"→";position:absolute;right:-13px;top:40%;z-index:2;color:var(--primary);font-weight:800}
.workflow li span{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-btn);background:var(--primary-soft);color:var(--primary);font-size:.72rem;font-weight:800}
.workflow-copy{max-width:1224px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;color:var(--text-secondary)}
.workflow-copy p{padding:15px;border-left:3px solid var(--primary);background:var(--surface)}

.safety{display:grid;grid-template-columns:1fr .78fr;gap:52px;align-items:center}
.safety h2{margin:9px 0 16px}
.safety>div>p:last-child{color:var(--text-secondary)}
.safety-card{padding:28px;border:1px solid #b9d7c5;border-radius:var(--radius-card);background:var(--success-soft)}
.safety-card span{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-btn);background:var(--success);color:#fff}
.safety-card strong{display:block;margin-top:18px}
.safety-card p{margin-top:8px;color:#47705a}

.beta{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:48px;border-radius:var(--radius-card);border:1px solid #e4d2bd;background:var(--surface);color:var(--text);box-shadow:var(--shadow-hover)}
.beta .eyebrow{color:#8a4f21}
.beta h2{margin:8px 0 14px;color:var(--text)}
.beta p{max-width:650px;color:var(--text-secondary)}
.beta ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;padding:0;list-style:none;color:var(--text-secondary);font-size:.83rem}
.beta li:before{content:"✓";color:#80d6a4;margin-right:6px}
.beta .btn--primary{background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(61,33,14,.2)}

.final-cta{max-width:920px;margin:52px auto;padding:68px 28px;text-align:center}
.final-cta h2{margin:10px 0 17px}
.final-cta p:not(.eyebrow){max-width:660px;margin:0 auto 28px;color:var(--text-secondary)}

.footer{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:38px;padding:52px max(28px,calc((100vw - 1224px)/2));border-top:1px solid var(--border);background:var(--surface)}
.footer>div p{max-width:310px;margin-top:12px;color:var(--muted);font-size:.82rem}
.footer nav{display:flex;flex-direction:column;gap:8px;font-size:.82rem}
.footer nav strong{margin-bottom:6px}
.footer nav a{color:var(--text-secondary)}
.footer nav a:hover{color:var(--primary)}

@media(max-width:950px){
  .nav__inner{grid-template-columns:1fr auto auto;gap:10px}
  .nav-menu{justify-self:end;padding:0;border:0;background:transparent;box-shadow:none}
  .nav-menu>a{display:none}
  .mega-menu{left:16px;right:16px;top:72px;grid-template-columns:1fr;width:auto;max-height:calc(100vh - 92px);overflow:auto;transform:translate(0,8px)}
  .nav-capabilities:hover .mega-menu,.nav-capabilities:focus-within .mega-menu,.nav-capabilities.is-open .mega-menu{transform:translate(0,0)}
  .mega-menu__groups{grid-template-columns:1fr 1fr}
  .mega-promo{grid-template-columns:112px 1fr;align-items:center}
  .mega-promo img{height:92px}
  .mega-promo span{grid-column:2}
  .mega-promo strong{grid-column:2}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:64px}
  .command-preview{max-width:720px}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .studios-grid{grid-template-columns:repeat(2,1fr)}
  .before-after-grid{grid-template-columns:repeat(2,1fr)}
  .simple-flow-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workflow ol{grid-template-columns:1fr}
  .workflow li:after{display:none}
  .workflow-copy{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr 1fr}
  .safety{grid-template-columns:1fr}
  .beta{margin-inline:24px}
}
@media(max-width:600px){
  .nav__inner{height:64px;padding:0 16px;gap:8px}
  .brand span{width:30px;height:30px}
  .nav-link--capabilities{min-height:38px;padding-inline:10px;background:var(--surface);border:1px solid var(--border);font-size:.82rem;width:100%;justify-content:space-between}
  .nav-hamburger{display:inline-flex}
  .nav-menu{display:none;position:absolute;justify-self:stretch;left:16px;right:16px;top:64px;flex-direction:column;align-items:stretch;gap:4px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-hover);z-index:30}
  .nav.mobile-nav-open .nav-menu{display:flex}
  .nav.mobile-nav-open .nav-menu>a{display:block;padding:10px 12px;border-radius:var(--radius-btn)}
  .nav-capabilities{width:100%}
  .nav__actions>[data-i18n-switcher]{display:none}
  .nav-menu-i18n{display:block;margin-top:4px;padding-top:10px;border-top:1px solid var(--border)}
  .mega-menu{left:12px;right:12px;top:66px;padding:14px;border-radius:var(--radius-card)}
  .mega-menu__groups{grid-template-columns:1fr}
  .mega-promo{grid-template-columns:1fr}
  .mega-promo span,.mega-promo strong{grid-column:auto}
  .nav__actions .btn--quiet{display:none}
  .nav__actions .btn{min-height:42px;padding-inline:14px}
  .hero,.section{padding-inline:16px}
  .hero{padding-top:48px;padding-bottom:44px;gap:42px}
  h1{font-size:clamp(2rem,10.4vw,2.9rem)}
  .hero__actions{align-items:stretch;flex-direction:column}
  .hero__actions .btn{width:100%}
  .trust-row{display:grid}
  .command-preview{padding:13px;border-radius:var(--radius-card)}
  .preview-metrics,.preview-actions,.capability-grid,.simple-flow-grid,.workflow ol,.studios-grid,.before-after-grid{grid-template-columns:1fr}
  .ba-pair,.ba-pair--text-image{grid-template-columns:1fr}
  .ba-arrow{transform:rotate(90deg);justify-self:center}
  .ba-stat-row{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card{min-height:0}
  .preview-metrics article{display:flex;justify-content:space-between;align-items:center}
  .preview-metrics strong{margin:0;text-align:right}
  .capability-grid a,.capability-grid .capability-soon{min-height:205px}
  .workflow{padding-inline:16px}
  .beta{margin-inline:16px;padding:32px 22px;align-items:flex-start;flex-direction:column}
  .footer{grid-template-columns:1fr;padding:42px 20px}
  .final-cta{margin:24px auto;padding:42px 16px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}