/* ==========================================================================
   Madvise — Landing Page
   Design system per DESIGN.md (v0.3). Plus Jakarta Sans, cream + amber + teal.
   ========================================================================== */

:root {
    /* ---- Raw brand colors (theme-independent; never flip) ---- */
    --cream: #F3EBE2;
    --dark: #1B2725;
    --amber: #E8A838;
    --amber-hover: #D4940A;
    --amber-text: #96580A;                  /* amber for small text on light bg (WCAG AA 4.5:1) */
    --teal: #2A6B5A;
    --error: #E24B4A;
    --success: #2ECC8A;
    --grad: linear-gradient(90deg, #FDC665 0%, #E8A838 50%, #2A6B5A 81%);

    /* ---- Legacy raw tokens (kept as light-theme aliases for back-compat) ---- */
    --card: #FFFFFF;
    --gray: #F1F1F1;
    --ink: #1A1A1A;
    --muted: #5C5C5C;

    /* ---- Semantic tokens — LIGHT theme (default). Flip under [data-theme]. ----
       Components reference these; the brand colors above stay constant. */
    --bg: #F3EBE2;                          /* page background (cream) */
    --surface: #FFFFFF;                     /* card / panel surface */
    --surface-2: #F1F1F1;                   /* input, chip, hover gray */
    --text: #1A1A1A;                        /* primary text */
    --text-muted: #5C5C5C;                  /* secondary text */
    --border: rgba(26, 26, 26, 0.08);       /* hairline border */
    --border-strong: rgba(26, 26, 26, 0.20);/* stronger border */
    --band: #1B2725;                        /* dark "band" sections (diff/final/pcard) */
    --band-surface: #233330;                /* surface inside a band, if needed */
    --band-text: #F3EBE2;                   /* text on a band */
    --band-text-muted: rgba(243, 235, 226, 0.70);
    --band-border: rgba(243, 235, 226, 0.12);
    --nav-glass: rgba(243, 235, 226, 0.60); /* scrolled navbar pill */
    --nav-glass-border: rgba(255, 255, 255, 0.45);
    --nav-glass-opaque: rgba(243, 235, 226, 0.95); /* no-backdrop-filter fallback */
    --hero-base: #F3EBE2;                   /* WebGL hero base color (read by JS) */
    --leak-surface: rgba(243, 235, 226, 0.30);    /* hero light-leak frost */
    --leak-surface-opaque: rgba(243, 235, 226, 0.62);
    --shadow-color: 27, 39, 37;             /* RGB triplet for rgba() shadows */

    /* ---- Frosted-glass tokens (pillar surfaces) — flip under [data-theme] ---- */
    --glass-tint: 255, 255, 255;            /* base film color */
    --glass-film: rgba(255, 255, 255, 0.12);/* opaque-ish base for no-backdrop fallback */
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-hi: rgba(255, 255, 255, 0.55);  /* top inner highlight */

    --maxw: 1280px;
    --pad: 24px;
    color-scheme: light;
}

/* ---- Semantic tokens — DARK theme override ---- */
[data-theme="dark"] {
    --amber-text: #E8A838;                  /* amber already passes AA on dark surfaces */
    --card: #223230;
    --gray: #2A3B38;
    --ink: #F3EBE2;
    --muted: rgba(243, 235, 226, 0.68);

    --bg: #1B2725;                          /* dark green page */
    --surface: #223230;                     /* elevated dark surface (card) */
    --surface-2: #2A3B38;
    --text: #F3EBE2;
    --text-muted: rgba(243, 235, 226, 0.68);
    --border: rgba(243, 235, 226, 0.12);
    --border-strong: rgba(243, 235, 226, 0.28);
    --band: #14201E;                        /* deeper than page → keeps depth */
    --band-surface: #1B2725;
    --band-text: #F3EBE2;
    --band-text-muted: rgba(243, 235, 226, 0.70);
    --band-border: rgba(243, 235, 226, 0.10);
    --nav-glass: rgba(20, 30, 28, 0.62);
    --nav-glass-border: rgba(243, 235, 226, 0.16);
    --nav-glass-opaque: rgba(20, 30, 28, 0.95);
    --hero-base: #1B2725;
    --leak-surface: rgba(27, 39, 37, 0.34);
    --leak-surface-opaque: rgba(20, 30, 28, 0.66);
    --shadow-color: 0, 0, 0;

    /* Frosted glass on dark: warm cream film, softer edges */
    --glass-tint: 243, 235, 226;
    --glass-film: rgba(243, 235, 226, 0.07);
    --glass-border: rgba(243, 235, 226, 0.18);
    --glass-hi: rgba(243, 235, 226, 0.22);
    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    background-color: var(--bg);
    transition: background-color 0.4s ease;
}
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}
::selection { background: rgba(232, 168, 56, 0.3); color: var(--dark); }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
section { position: relative; }
.mono { font-family: 'Plus Jakarta Sans', sans-serif; }
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.label {
    font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--amber-text);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-weight: 600; font-size: 15px;
    padding: 13px 26px; border-radius: 8px; border: none;
    cursor: pointer; transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-amber { background: var(--amber); color: var(--dark); }
.btn-amber:hover { background: var(--amber-hover); box-shadow: 0 0 20px rgba(232, 168, 56, 0.4); }
.btn-grad { background: var(--grad); color: var(--dark); }
.btn-grad:hover { box-shadow: 0 0 26px rgba(232, 168, 56, 0.45); opacity: 0.94; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost-light { background: transparent; color: var(--band-text); border: 1px solid var(--band-border); }
.btn-ghost-light:hover { background: rgba(243, 235, 226, 0.08); }
.btn-lg { padding: 17px 34px; font-size: 17px; }
/* Glassy gradient CTA — per Figma node 72:9: near-vertical brand gradient
   (gold→amber→teal), a faint glass film + glossy top highlight, white text.
   Sizing still comes from .btn / .btn-lg so it matches the rest of the site. */
.btn-glass {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(0deg, rgba(241, 241, 241, 0.05), rgba(241, 241, 241, 0.05)),
        linear-gradient(191deg, #FDC665 0%, #E8A838 48%, #2A6B5A 96%);
    box-shadow: 0 10px 26px rgba(27, 39, 37, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-glass:hover {
    box-shadow: 0 14px 34px rgba(27, 39, 37, 0.34), 0 0 26px rgba(232, 168, 56, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    opacity: 0.97;
}

/* ---------- Navbar — transparent & full-width at the top; on scroll it
   CONTRACTS in width toward center (scale feel) and a frosted-glass pill
   fades in. Height stays ~constant. ---------- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding-top: 18px;
    background: transparent;
    transition: padding-top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* .nav-inner is the SAME element as .wrap (class="wrap nav-inner"): at the top it
   inherits .wrap's full width and is fully transparent (no surface). */
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
    border-radius: 18px;
    background: rgba(243, 235, 226, 0);
    border: 1px solid transparent;
    /* two transparent layers matching the scrolled shadow so it fades in smoothly */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0), 0 12px 34px rgba(27, 39, 37, 0);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease,
                -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
}
/* scrolled (JS toggles .scrolled past 80px): narrower centered glass pill */
.nav.scrolled { padding-top: 10px; }
.nav.scrolled .nav-inner {
    max-width: 920px;
    background: var(--nav-glass);
    border-color: var(--nav-glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 34px rgba(var(--shadow-color), 0.14);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
}
/* fallback where backdrop-filter is unsupported: opaque cream pill only once scrolled */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .nav.scrolled .nav-inner { background: var(--nav-glass-opaque); }
}
.logo { display: flex; align-items: center; gap: 11px; flex: none; }
/* flex: none + explicit height keeps the mark from being squeezed by flexbox
   while .nav-inner animates its max-width narrower on scroll. */
.logo-img { height: 32px; width: auto; flex: none; display: block; }
.nav-right { display: flex; align-items: center; gap: 14px; }
/* Theme toggle — pill matching the lang-switch aesthetic, sits left of it. */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 32px; padding: 0;
    border: none; border-radius: 999px; cursor: pointer;
    background: var(--border); color: var(--text);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.theme-toggle:hover { background: var(--border-strong); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* Sun shows in dark mode (click → light); moon shows in light mode (click → dark). */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.lang-switch {
    display: inline-flex; align-items: center; font-size: 13px; font-weight: 600;
    background: var(--border); border-radius: 999px; padding: 4px; gap: 2px;
}
.lang-switch button {
    border: none; background: transparent; font-family: inherit; font-weight: 600;
    font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer; color: var(--muted);
    transition: background-color 0.2s, color 0.2s;
}
.lang-switch button.active { background: var(--text); color: var(--bg); }
.nav-links { display: flex; align-items: center; gap: 14px; }
/* Navbar CTA sits a touch shorter than the default .btn height. */
.nav-links .btn-glass { padding-top: 9px; padding-bottom: 9px; }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger svg { stroke: var(--text); }

/* ---------- Hero ---------- */
.hero { padding: 128px 0 60px; position: relative; overflow: hidden; }
/* Full-bleed interactive particle canvas behind the hero content. Transparent —
   the page background (--bg) shows through, so dots composite directly over it.
   pointer-events:none keeps clicks on the headline/CTAs; z-index:0 sits below
   .hero .wrap (z-index:2). The JS engine (main.js) sizes it DPR-aware. */
.hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block; }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 64px; align-items: center; }
.hero-visual { position: relative; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* ============================================================================
   Hero scene — a fixed-size design "stage" (1180×1040) is built at natural
   pixel sizes, then uniformly scaled to the column width via --hs-scale (set
   by JS, with a desktop fallback here). The complex Meta Ads dashboard is the
   dimmed backdrop; over it the user's amateur product photo is "captured"
   (viewfinder + flash → B&W instant print) and three generated pro ads fan
   in beside it toward the top-right, each showing only the earnings.
   ============================================================================ */
.hero-scene { --hs-scale: .48; position: relative; width: 100%; aspect-ratio: 1180 / 1040; }
.hs-stage {
    position: absolute; top: 0; left: 0; width: 1180px; height: 1040px;
    transform-origin: top left; transform: scale(var(--hs-scale));
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
    /* Gentle continuous float; keyframes carry the JS scale so it composes. */
    @keyframes hsFloat { 0%,100% { transform: scale(var(--hs-scale)) translateY(0); } 50% { transform: scale(var(--hs-scale)) translateY(-16px); } }
    .hs-stage { animation: hsFloat 7.5s ease-in-out infinite; }
}

/* ---- Backdrop: Meta Ads dashboard (intentionally busy + monochrome) ---- */
.hs-dashboard {
    position: absolute; top: 60px; left: 60px; width: 1044px; z-index: 1;
    background: #f4f4f4; border: 1px solid #dcdcdc; border-radius: 22px; overflow: hidden;
    opacity: .6; color: #333; box-shadow: 0 30px 60px rgba(27,39,37,.12);
    -webkit-user-select: none; user-select: none;
}
.hsd-top { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 20px; background: #ececec; border-bottom: 1px solid #d2d2d2; }
.hsd-title strong { display: block; font-size: 16px; font-weight: 700; color: #333; }
.hsd-title span { font-size: 11px; color: #777; }
.hsd-controls { display: flex; gap: 10px; }
.hsd-btn { background: #fff; border: 1px solid #ccc; border-radius: 7px; padding: 6px 11px; font-size: 11px; font-weight: 600; color: #444; }
.hsd-kpis { display: flex; gap: 10px; padding: 14px 20px 6px; }
.hsd-kpi { flex: 1 0 0; min-width: 0; border: 1px solid #d4d4d4; border-radius: 8px; padding: 9px 10px; }
.hsd-kpi > span { font-size: 11px; color: #777; }
.hsd-kpi > div { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin-top: 4px; }
.hsd-kpi b { font-size: 15px; font-weight: 700; color: #333; font-variant-numeric: tabular-nums; }
.hsd-kpi i { font-size: 10px; font-style: normal; color: #888; white-space: nowrap; }
.hsd-charts { display: flex; gap: 14px; padding: 12px 20px; }
.hsd-chart { flex: 1.3 0 0; min-width: 0; background: #fff; border: 1px solid #d4d4d4; border-radius: 12px; padding: 12px 14px; }
.hsd-chart--wide { flex: 2 0 0; }
.hsd-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hsd-chart-head b { font-size: 12px; font-weight: 700; color: #333; }
.hsd-legend { display: flex; gap: 12px; }
.hsd-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #777; }
.hsd-legend i { width: 9px; height: 9px; border-radius: 2px; background: #444; }
.hsd-legend i.muted { background: #444; opacity: .45; }
.hsd-plot { position: relative; height: 132px; }
.hsd-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hsd-plot line { stroke: #ededed; stroke-width: 1; }
.hsd-plot .ln-solid { fill: none; stroke: #444; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hsd-plot .ln-faint { fill: none; stroke: #9a9a9a; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.hsd-yl { position: absolute; left: 0; font-size: 10px; color: #999; transform: translateY(-50%); }
.hsd-xaxis { display: flex; justify-content: space-between; margin-top: 6px; }
.hsd-xaxis span { font-size: 10px; color: #999; }
.hsd-table { padding: 4px 20px 18px; }
.hsd-table-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.hsd-table-head b { font-size: 12px; font-weight: 700; color: #333; }
.hsd-table-head span { font-size: 11px; color: #999; }
.hsd-tbl { border: 1px solid #ddd; border-radius: 10px; overflow: hidden; }
.hsd-tr { display: grid; grid-template-columns: minmax(0,1.5fr) 78px repeat(6, 1fr); gap: 10px; align-items: center; padding: 9px 14px; font-size: 11px; color: #666; }
.hsd-tr > span:not(.c-name):not(.c-st) { text-align: right; font-variant-numeric: tabular-nums; }
.hsd-tr .c-name { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsd-th { background: #ececec; font-weight: 700; color: #666; }
.hsd-tr.alt { background: #f8f8f8; }
.hsd-tr:not(.hsd-th) { border-top: 1px solid #e6e6e6; }
.hsd-tr i { font-style: normal; display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.hsd-tr .tag-active { background: #e6f4f1; color: #356; }
.hsd-tr .tag-paused { background: #f0f0f0; color: #888; }

/* ---- Foreground 1: the user's own photo, snapped as a B&W instant print ---- */
.hs-snap { position: absolute; left: 56px; top: 300px; width: 348px; z-index: 2; }
.hs-snap-photo {
    margin: 0; background: #fff; padding: 12px 12px 46px; border-radius: 8px;
    transform: rotate(var(--snap-rot, -4deg));
    box-shadow: 0 3px 10px rgba(27,39,37,.08), 0 26px 55px rgba(27,39,37,.22);
}
.hs-snap-photo img {
    display: block; width: 100%; aspect-ratio: 1122 / 1402; object-fit: cover;
    border-radius: 3px; filter: grayscale(1) contrast(1.06) brightness(1.03);
}
/* flash + viewfinder are transition-only chrome: invisible unless animated */
.hs-snap-flash {
    position: absolute; inset: -14px; z-index: 3; border-radius: 16px; opacity: 0;
    background: radial-gradient(closest-side, #fff 62%, rgba(255,255,255,0));
    pointer-events: none;
}
.hs-snap-vf { position: absolute; inset: -20px; z-index: 4; opacity: 0; pointer-events: none; }
.hs-snap-vf i { position: absolute; width: 40px; height: 40px; border: 4px solid var(--amber); }
.hs-snap-vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.hs-snap-vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.hs-snap-vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.hs-snap-vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.hs-snap-vf b {
    position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
    border: 3px solid var(--amber); border-radius: 14px; opacity: 0;
}

/* ---- Foreground 2: generated pro ads — image + earnings only ---- */
.hs-pro {
    position: absolute; width: 366px; box-sizing: border-box;
    background: #f3ebe2; border: 1px solid rgba(26,26,26,.05); border-radius: 22px;
    padding: 11px 11px 0;
    transform-origin: center center; transform: rotate(var(--rot));
    box-shadow: 0 2px 8px rgba(27,39,37,.06), 0 26px 60px rgba(27,39,37,.18);
    color: #1a1a1a;
}
.hs-pro--1 { left: 348px; top: 382px; z-index: 3; }
.hs-pro--2 { left: 590px; top: 218px; z-index: 4; }
.hs-pro--3 { left: 790px; top: 58px;  z-index: 5; }
.hs-pro-media { border-radius: 14px; overflow: hidden; }
.hs-pro-media img { display: block; width: 100%; aspect-ratio: 1122 / 1402; object-fit: cover; }
.hs-pro-foot { display: flex; flex-direction: column; gap: 2px; padding: 15px 10px 18px; }
.hs-pro-label { font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8b857c; }
.hs-pro-num { font-size: 52px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--teal); font-variant-numeric: tabular-nums; }

/* ---- Entrance: dashboard → camera capture (aim, flash, B&W print) → pro ads ---- */
.hs-armed .hs-dashboard,
.hs-armed .hs-snap-photo,
.hs-armed .hs-pro { opacity: 0; }
.hs-armed.is-playing .hs-dashboard  { animation: hsDashIn .9s ease .1s both; }
.hs-armed.is-playing .hs-snap-vf    { animation: hsVfAim 1.05s ease .95s both; }
.hs-armed.is-playing .hs-snap-vf b  { animation: hsVfFocus .8s ease 1.08s both; }
.hs-armed.is-playing .hs-snap-flash { animation: hsFlash .5s ease-out 1.55s both; }
.hs-armed.is-playing .hs-snap-photo { animation: hsPhotoIn .55s cubic-bezier(.2,.8,.25,1) 1.62s both; }
.hs-armed.is-playing .hs-pro { animation: hsProIn .8s cubic-bezier(.22,.8,.24,1.06) var(--delay) both; }
@keyframes hsDashIn {
    from { opacity: 0; transform: translateY(24px) scale(.985); }
    to   { opacity: .6; transform: translateY(0) scale(1); }
}
/* Viewfinder frames the empty spot, holds while "focusing", then clears. */
@keyframes hsVfAim {
    0%   { opacity: 0; transform: scale(1.14); }
    14%  { opacity: 1; transform: scale(1); }
    72%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes hsVfFocus {
    0%   { opacity: 0; transform: scale(1.3); }
    35%  { opacity: 1; transform: scale(1); }
    60%  { opacity: .35; }
    100% { opacity: 1; transform: scale(.96); }
}
@keyframes hsFlash {
    0%  { opacity: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; }
}
/* The print lands as the flash clears: slightly large + straight, settles into
   its resting tilt (matches the static --snap-rot transform). */
@keyframes hsPhotoIn {
    from { opacity: 0; transform: rotate(1deg) scale(1.12); }
    to   { opacity: 1; transform: rotate(var(--snap-rot, -4deg)) scale(1); }
}
@keyframes hsProIn {
    from { opacity: 0; transform: translate(-30px, 64px) rotate(calc(var(--rot) - 5deg)) scale(.82); }
    55%  { opacity: 1; }
    to   { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scale(1); }
}
/* ============================================================================
   Pursuk — the hero mascot, rigged to follow the cursor.
   One continuous take was generated in which his gaze travels a full circle;
   it is cut into 120 WHOLE frames, one per 3 degrees of direction. There is no
   head/body split and no blending — main.js turns the cursor's direction into a
   frame index and paints that frame, so what shows on screen is exactly the
   rendered footage. Without JS (or on touch / reduced motion) the neutral frame
   stays: he looks straight at the reader.
   ============================================================================ */
.pursuk {
    --pursuk-h: clamp(320px, 40vw, 580px);
    position: relative;
    display: grid;
    place-items: end center;
    min-height: calc(var(--pursuk-h) + 48px);
    isolation: isolate;
}

/* warm brand glow behind him — leans toward the cursor */
.pursuk-halo {
    position: absolute;
    left: 50%; top: 46%;
    width: calc(var(--pursuk-h) * 1.18);
    height: calc(var(--pursuk-h) * 1.18);
    transform: translate3d(-50%, -50%, 0);
    background:
        radial-gradient(circle at 50% 42%, rgba(232, 168, 56, .42) 0%, rgba(232, 168, 56, .16) 38%, rgba(232, 168, 56, 0) 68%),
        radial-gradient(circle at 62% 68%, rgba(42, 107, 90, .20) 0%, rgba(42, 107, 90, 0) 62%);
    filter: blur(6px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
[data-theme="dark"] .pursuk-halo {
    background:
        radial-gradient(circle at 50% 42%, rgba(232, 168, 56, .26) 0%, rgba(232, 168, 56, .10) 40%, rgba(232, 168, 56, 0) 70%),
        radial-gradient(circle at 62% 68%, rgba(127, 216, 192, .16) 0%, rgba(127, 216, 192, 0) 64%);
}

.pursuk-anchor {
    position: relative;
    z-index: 2;
    animation: pursukFloat 6.4s ease-in-out infinite;
    will-change: transform;
}
.pursuk-figure {
    position: relative;
    height: var(--pursuk-h);
    aspect-ratio: 276 / 481;
}
.pursuk-body, .pursuk-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.pursuk-body { object-fit: fill; }
.pursuk-canvas { pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.pursuk-canvas.is-on { opacity: 1; }
/* once the canvas owns the figure the still underneath would double-expose */
.pursuk.is-tracking .pursuk-body { visibility: hidden; }

/* ---- advice card deck in front of Pursuk ----
   Sits over his lower half, which is also where the take crops his legs. One
   card is visible at a time; main.js rotates them every 5s and pauses while the
   pointer is on the deck. */
.pursuk-advice {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: calc(var(--pursuk-h) * 0.012);
    width: min(392px, 98%);
    min-height: calc(var(--pursuk-h) * 0.30);
    transform: translateX(-50%);
    /* hovering the deck only pauses the card rotation — the mascot keeps
       following the cursor right across it */
    pointer-events: auto;
}
.pa-card {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px 17px 16px;
    box-shadow:
        0 2px 8px rgba(var(--shadow-color), .07),
        0 22px 48px -20px rgba(var(--shadow-color), .40);
    opacity: 0;
    transform: translateY(12px) scale(.975);
    transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
    pointer-events: none;
    will-change: transform, opacity;
}
.pa-card.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pa-card.is-on:hover {
        transform: translateY(-7px) scale(1.025);
        box-shadow:
            0 4px 10px rgba(var(--shadow-color), .09),
            0 30px 64px -22px rgba(var(--shadow-color), .48);
    }
    .pa-card.is-on:hover .pa-btn { background: var(--amber-hover, #D4940A); }
}
.pa-top { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pa-ic { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; }
.pa-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-meta { min-width: 0; }
.pa-meta b { display: block; font-size: 14px; line-height: 1.25; color: var(--text); }
.pa-meta small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.pa-live { position: absolute; top: 2px; right: 1px; width: 8px; height: 8px; }
.pa-live::before, .pa-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber); }
.pa-card.is-on .pa-live::after { animation: ai-ping 2s ease-out infinite; }
.pa-body {
    border-left: 3px solid var(--amber);
    background: rgba(232, 168, 56, .07);
    border-radius: 0 8px 8px 0;
    padding: 11px 14px 13px;
}
.pa-lbl { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--amber-text); margin-bottom: 5px; }
.pa-txt { font-size: 13px; line-height: 1.5; color: var(--ink); margin: 0; }
.pa-btn {
    display: inline-flex; align-items: center; margin-top: 12px;
    font-size: 12.5px; font-weight: 600; color: var(--dark);
    background: var(--amber); padding: 8px 15px; border-radius: 8px;
    transition: background .25s ease;
}

@keyframes pursukFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -12px, 0); }
}

@media (max-width: 900px) {
    .pursuk { --pursuk-h: clamp(340px, 62vw, 500px); }
}
@media (max-width: 560px) {
    .pursuk { --pursuk-h: clamp(320px, 108vw, 430px); }
    .pursuk-advice { width: min(340px, 100%); }
    .pa-card { padding: 13px 14px 14px; border-radius: 14px; }
    .pa-txt { font-size: 12.5px; }
    .pursuk-halo { filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .pursuk-anchor { animation: none !important; }
    .pa-card { transition: opacity .3s ease; transform: none !important; }
    .pursuk-figure, .pursuk-head, .pursuk-halo { transform: none !important; }
}


.hero-content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.accent-text { color: var(--amber); }
.hero h1 .accent-text { color: #2A6B5A; }
[data-theme="dark"] .hero h1 .accent-text { color: var(--amber); }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--teal); margin-bottom: 20px;
}
[data-theme="dark"] .hero-eyebrow { color: var(--amber); }
.hero h1 {
    font-weight: 700; font-size: clamp(38px, 4.8vw, 60px); line-height: 1.07;
    letter-spacing: -0.03em; color: var(--text); margin: 0 0 22px;
}
.hero-sub {
    font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 560px; margin: 0 auto 0 0;
    font-weight: 400; line-height: 1.7;
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; margin: 36px 0 18px; }
.proof-line { font-size: 13px; color: var(--muted); font-weight: 500; margin: 0; }

/* ---------- Dashboard mockup (optional) ---------- */
.mockup {
    margin: 56px auto 0; max-width: 720px; background: var(--band); border-radius: 24px;
    padding: 28px; box-shadow: 0 24px 60px rgba(var(--shadow-color), 0.22); text-align: left; color: var(--band-text);
}
.mockup-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.mockup-top .dots { display: flex; gap: 6px; }
.mockup-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(243, 235, 226, 0.18); display: inline-block; }
.badge-active { background: var(--amber); color: var(--dark); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ad-row { display: flex; gap: 18px; align-items: center; }
.ad-thumb {
    width: 76px; height: 76px; border-radius: 12px; flex-shrink: 0;
    background: var(--grad); display: flex; align-items: center; justify-content: center;
}
.ad-thumb svg { stroke: var(--dark); }
.ad-name { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.ad-name small { display: block; font-weight: 400; font-size: 12px; color: rgba(243, 235, 226, 0.55); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.metric .val { font-size: 24px; font-weight: 800; }
.metric .val.amber { color: var(--amber); }
.metric .val.success { color: var(--success); }
.metric .lbl { font-size: 11px; font-weight: 500; color: rgba(243, 235, 226, 0.6); letter-spacing: 0.04em; }
.ai-strip {
    border-left: 3px solid var(--amber); background: rgba(232, 168, 56, 0.1);
    border-radius: 0 8px 8px 0; padding: 12px 16px;
}
.ai-strip .ai-lbl { font-size: 11px; font-weight: 600; color: var(--amber); letter-spacing: 0.06em; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.ai-strip .ai-txt { font-size: 14px; color: var(--band-text); min-height: 21px; }
.ai-strip .cursor { display: inline-block; width: 2px; height: 14px; background: var(--amber); margin-left: 1px; animation: blink 1s step-end infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Logo bar ---------- */
.logobar { padding: 40px 0; border-top: 1px solid transparent; }
.divider { height: 2px; background: var(--grad); border-radius: 2px; opacity: 0.7; max-width: 240px; margin: 0 auto 28px; }
.logobar p { text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 26px; letter-spacing: 0.02em; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 18px; width: max-content; animation: scroll-x 28s linear infinite; }
.sector {
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); padding: 12px 22px; border-radius: 999px; white-space: nowrap;
}
.sector .d { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- Section heading ---------- */
.sec { padding: 96px 0; }
.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec h2 { font-size: clamp(28px, 4.5vw, 44px); font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; margin-top: 12px; }
.sec-desc { font-size: 16px; color: var(--muted); margin-top: 18px; }

/* ---------- Problem cards ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pcard { background: var(--band); border-radius: 16px; padding: 30px; color: var(--band-text); border: 1px solid transparent; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.pcard:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 0 0 1px rgba(42, 107, 90, 0.45), 0 16px 34px rgba(42, 107, 90, 0.22); }
.pcard .picon { width: 128px; height: 128px; margin-bottom: 20px; }
.pcard .picon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pcard h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.pcard p { font-size: 14px; color: var(--band-text-muted); line-height: 1.6; }

/* Light theme: brand-aligned light surface + amber hover glow (dark theme keeps the teal band look) */
[data-theme="light"] .pcard {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(var(--shadow-color), 0.05), 0 10px 30px rgba(var(--shadow-color), 0.07);
}
[data-theme="light"] .pcard p { color: var(--text-muted); }
[data-theme="light"] .pcard:hover {
    border-color: rgba(232, 168, 56, 0.55);
    box-shadow: 0 0 0 1px rgba(232, 168, 56, 0.45),
                0 14px 30px rgba(232, 168, 56, 0.28),
                0 26px 60px rgba(232, 168, 56, 0.20);
}

/* ---------- Pillar showcase sections (Tasarım / Kolaylık / Zeki) ----------
   Smartly-style: a gently tilted product-UI FRAME in front of a flat-tinted
   SURFACE panel, with a small PEEK panel behind. Layout alternates via
   grid-column (.pillar--flip) so the DOM stays copy-first for screen readers.
   Theme-aware: amber/teal tints use the fixed brand --acc triplet; the neutral
   pillar uses semantic --surface vars so it flips with the theme. */
.pillar-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.pillar-copy { max-width: 520px; grid-column: 1; grid-row: 1; }
.pillar-stage { grid-column: 2; grid-row: 1; position: relative; min-height: clamp(360px, 42vw, 480px); isolation: isolate; }
.pillar--flip .pillar-copy { grid-column: 2; }
.pillar--flip .pillar-stage { grid-column: 1; }
.pillar-copy .label { display: inline-block; margin-bottom: 16px; }
.pillar-copy h2 { margin-top: 0; }
.pillar-lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-muted); line-height: 1.65; margin: 18px 0 22px; max-width: 460px; }
/* Support line under a pillar lead (İçerik üretimi) */
.pillar-note { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.55; margin: 0 0 26px; max-width: 440px; padding-left: 14px; border-left: 3px solid var(--amber); }
/* Support bullet list (Yayınla) */
.pillar-checks { list-style: none; margin: 0 0 28px; max-width: 460px; display: flex; flex-direction: column; gap: 11px; }
.pillar-checks li { position: relative; padding-left: 28px; font-size: 15px; color: var(--text); line-height: 1.5; }
.pillar-checks li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(42, 107, 90, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%232A6B5A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.pillar-copy { text-align: left; }
.pillar--flip .pillar-note, .pillar--flip .pillar-checks { margin-left: 0; }

/* Per-pillar accent: brand triplets are constant; neutral flips via semantics.
   --acc drives both the glass tint and the soft glow blobs behind the glass. */
.pillar { --acc: 232, 168, 56; }
.pillar--amber { --acc: 232, 168, 56; }
.pillar--teal { --acc: 42, 107, 90; }
.pillar--neutral { --acc: 232, 168, 56; }

/* Layer 0 — soft accent glow blobs sitting BEHIND the glass, so the frosted
   surfaces have luminous colour to refract instead of frosting flat page bg.
   --py is the scroll-linked parallax offset set per stage from JS. */
.pillar-stage::before {
    content: ''; position: absolute; inset: -6% -8%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 46% at 28% 30%, rgba(var(--acc), 0.55), transparent 72%),
        radial-gradient(44% 52% at 76% 74%, rgba(var(--acc), 0.38), transparent 72%);
    filter: blur(34px); opacity: 0.55;
    translate: 0 calc(var(--py, 0px) * 0.4);
}
.pillar--neutral .pillar-stage::before {
    background:
        radial-gradient(38% 46% at 26% 30%, rgba(232, 168, 56, 0.50), transparent 72%),
        radial-gradient(44% 52% at 78% 74%, rgba(42, 107, 90, 0.46), transparent 72%);
}

/* Layer 1 — frosted-glass surface panel, tilted, bleeding toward the page edge.
   Translucent film + backdrop blur + bright top edge = glassmorphism. */
.pillar-surface {
    position: absolute; inset: 8% -4% 10% 8%; border-radius: 24px; z-index: 1;
    background:
        linear-gradient(135deg, rgba(var(--glass-tint), 0.16), rgba(var(--glass-tint), 0.02) 46%),
        rgba(var(--acc), 0.10);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        inset 0 1px 0 var(--glass-hi),
        inset 0 -1px 0 rgba(var(--glass-tint), 0.10),
        0 26px 52px -26px rgba(var(--shadow-color), 0.40);
    rotate: -5deg;
    translate: 0 calc(var(--py, 0px) * 0.55);
}
.pillar--flip .pillar-surface { inset: 8% 8% 10% -4%; rotate: 4deg; }
.pillar--neutral .pillar-surface { rotate: -3deg; }

/* Layer 2 — small frosted panel peeking out from behind the frame, tilted the
   other way so the stack reads as layered glass at playful angles. */
.pillar-peek {
    position: absolute; z-index: 2; width: 42%; aspect-ratio: 4 / 3; border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(var(--acc), 0.30), rgba(var(--acc), 0.08)),
        rgba(var(--glass-tint), 0.06);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(11px) saturate(140%);
    backdrop-filter: blur(11px) saturate(140%);
    box-shadow:
        inset 0 1px 0 var(--glass-hi),
        0 18px 36px -16px rgba(var(--shadow-color), 0.32);
    bottom: -16px; right: -16px;
    rotate: 6deg;
    translate: 0 calc(var(--py, 0px) * 0.75);
}
.pillar--flip .pillar-peek { right: auto; left: -16px; rotate: -6deg; }
.pillar--neutral .pillar-peek { rotate: 7deg; }

/* Fallback where backdrop-filter is unsupported: lean on a more opaque film so
   the glass panels still read as solid tinted surfaces, not invisible. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .pillar-surface { background: linear-gradient(135deg, var(--glass-film), rgba(var(--acc), 0.16)); }
    .pillar-peek { background: linear-gradient(135deg, rgba(var(--acc), 0.30), rgba(var(--acc), 0.16)); }
}

/* Layer 3 — the framed product-UI mock, gently tilted; settles flat on reveal.
   rotate/translate are separate transform properties so the reveal can ease the
   tilt while JS drives the scroll motion. The front card gets a small position
   drift (--py) for depth PLUS the full scroll-velocity nudge (--vy) — the latter
   is the clearly-felt "play" that reacts to scroll direction. */
.pillar-frame {
    position: relative; z-index: 3; width: 88%; max-width: 460px; margin: 0 auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
    box-shadow: 0 8px 32px rgba(var(--shadow-color), 0.10), 0 32px 64px -24px rgba(var(--shadow-color), 0.28);
    rotate: -2.6deg; transform-origin: center;
    translate: 0 calc(var(--py, 0px) * 0.35 + var(--vy, 0px));
    transition: rotate 0.5s cubic-bezier(0.22, 1, 0.36, 1), scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.pillar--flip .pillar-frame { rotate: 2.6deg; }
.pillar-stage.in .pillar-frame { rotate: 0deg; }

/* The Tasarım pillar swaps its static frame for the reused hero camera scene.
   It rides the same z-index-3 "frame" layer so the capture animation floats
   above the frosted surface + peek, and drives the stage height via the
   .hero-scene aspect-ratio (the glass panels size to it). Its background is
   transparent, so the glass panels show through the scene's empty areas. */
.pframe-scene { z-index: 3; }

/* Hover lift — scale is its own property so it never fights the JS-driven
   translate (--py/--vy) or the reveal's rotate. Real pointers only. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pillar-frame:hover {
        scale: 1.025;
        box-shadow: 0 12px 40px rgba(var(--shadow-color), 0.14), 0 44px 84px -24px rgba(var(--shadow-color), 0.36);
    }
}

/* Promote ONLY the in-view stage's opaque moving layers (JS toggles .is-live) so
   scrolling translates cached textures instead of repainting; the ::before glow's
   wide blur then bakes once. The backdrop-filter slabs are intentionally left
   un-promoted — they must re-sample the backdrop when moved (promotion can't avoid
   that and can glitch backdrop-filter in some engines), and they drift only a
   little. will-change is scoped to in-view stages to avoid pinning GPU layers for
   below-the-fold sections. */
.pillar-stage.is-live::before,
.pillar-stage.is-live .pillar-frame,
.pillar-stage.is-live .pf-ghost,
.pillar-stage.is-live .pf-canvas img { will-change: transform; }

/* Frame chrome — the dot bar reads instantly as "product UI" */
.pf-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.pf-bar .pf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.pf-bar b { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--text); }

/* Framed ad preview — shared by the Tasarım (creative studio) and Kolaylık
   (publish sheet) frames. The photo itself counter-drifts inside its clipped
   window (it inherits --py from the stage) so the front creative gets its own
   felt parallax: slightly over-scaled to give pan headroom without ever
   exposing an edge. */
.pf-canvas { position: relative; margin: 14px 16px 0; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; }
.pf-canvas img {
    width: 100%; height: 100%; object-fit: cover;
    scale: 1.14; /* over-scale gives pan headroom; keeps a >4px edge buffer even at the 901px min */
    translate: 0 calc(var(--py, 0px) * -0.28);
}
.pf-tools { display: flex; gap: 8px; padding: 14px 16px 0; }
.pf-chip { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: 6px 12px; }
.pf-chip.is-on { background: rgba(232, 168, 56, 0.16); color: var(--amber); }
.pf-gen { margin: 14px 16px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--dark); background: var(--grad); }

/* Kolaylık frame — one-click publish sheet: a big ad preview (.pf-canvas above)
   then the budget row + publish button, so it reads as a real composer. */
.pf-easy { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 6px; }
.pf-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); border-radius: 12px; padding: 14px 16px; }
.pf-field-lbl { font-size: 14px; color: var(--text-muted); }
.pf-budget { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); }
.pf-publish { width: calc(100% - 36px); margin: 8px 18px 4px; height: 54px; border: none; border-radius: 14px; background: var(--amber); color: var(--dark); font-family: inherit; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: default; }
.pf-publish svg { width: 20px; height: 20px; stroke: var(--dark); }
.pf-foot { display: block; text-align: center; font-size: 12px; color: var(--text-muted); padding: 0 18px 18px; }
/* Publish frame — brand-identity tag on the preview, approval status, FB/IG chips */
.pf-brandtag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px 4px 5px; border-radius: 999px; background: rgba(27, 39, 37, 0.72); color: #fff;
    font-size: 11px; font-weight: 700; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pf-brandtag-dot { width: 14px; height: 14px; border-radius: 4px; background: var(--grad); flex: none; }
.pf-approve { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
    background: rgba(42, 107, 90, 0.12); font-size: 13px; font-weight: 600; color: var(--text); }
.pf-approve-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; flex: none; }
.pf-approve-ic svg { width: 13px; height: 13px; stroke: #fff; }
.pf-identity { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 18px; }
.pf-idchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 6px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text); }
.pf-idchip-ic { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.pf-idchip-ic--fb { background: var(--teal); color: #fff; font-family: Georgia, serif; }
.pf-idchip-ic--ig { background: var(--amber); color: var(--dark); }
.pf-idchip-ic--ig svg { width: 13px; height: 13px; }
/* Advice frame (Madvise tavsiyeleri) — approve-and-apply button under the recommendation */
.pf-apply { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 36px);
    margin: 8px 18px 18px; height: 44px; border: none; border-radius: 12px; background: var(--amber); color: var(--dark);
    font-family: inherit; font-weight: 800; font-size: 14px; cursor: default; }
.pf-apply svg { width: 16px; height: 16px; stroke: var(--dark); }

/* Zeki frame — plain-language advice thread (kept distinct from later .ai-card) */
.pf-spark { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(232, 168, 56, 0.16); }
.pf-spark svg { width: 16px; height: 16px; stroke: var(--amber); }
.pf-time { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.pf-advice { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 6px; }
.pf-line { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.pf-line--good { border-left: 3px solid var(--teal); }
.pf-line--stop { border-left: 3px solid var(--amber); }
.pf-tick { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; }
.pf-line--good .pf-tick { background: rgba(42, 107, 90, 0.15); color: var(--teal); }
.pf-line--stop .pf-tick { background: rgba(232, 168, 56, 0.18); color: var(--amber-hover); }
.pf-evidence { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 18px 18px; }
.pf-ev { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 12px; background: rgba(42, 107, 90, 0.12); color: var(--teal); }
.pf-ev svg { width: 14px; height: 14px; stroke: var(--teal); }
.pf-ev:last-child { background: rgba(232, 168, 56, 0.14); color: var(--amber-hover); }
.pf-ev:last-child svg { stroke: var(--amber-hover); }

/* ZEKİ advice deck — extra recommendation cards fanned in the lower stage so the
   section reads as a stack of different pieces of advice (ZEKİ / .pillar--neutral
   only). Each one mirrors the main advice frame's chrome (header bar + advice
   line), just compact and with its own icon/title/text. They share the stage's
   --py drift + --vy scroll nudge so the whole deck reacts together; the generic
   glass peek is swapped out for them here. */
.pillar--neutral .pillar-peek { display: none; }
.pf-ghost {
    position: absolute; z-index: 2; width: 66%; max-width: 318px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 38px -18px rgba(var(--shadow-color), 0.45);
    translate: 0 calc(var(--py, 0px) * 0.62 + var(--vy, 0px) * 0.85);
    transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.pf-ghost--a { bottom: 15%; left: -3%; rotate: -5deg; }
.pf-ghost--b { bottom: -8%; right: -10px; rotate: 5deg; }
/* Hover: the deck card comes forward — lifts above the main frame, grows a bit
   and eases its tilt toward level, like picking a note off the pile. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pf-ghost:hover { z-index: 4; scale: 1.06; box-shadow: 0 26px 54px -18px rgba(var(--shadow-color), 0.55); }
    .pf-ghost--a:hover { rotate: -2deg; }
    .pf-ghost--b:hover { rotate: 2deg; }
}
/* Compact the shared frame chrome down to deck-card size */
.pf-ghost .pf-bar { height: 34px; padding: 0 12px; }
.pf-ghost .pf-bar b { font-size: 11.5px; }
.pf-ghost .pf-spark { width: 22px; height: 22px; border-radius: 7px; }
.pf-ghost .pf-spark svg { width: 13px; height: 13px; }
.pf-ghost .pf-time { font-size: 10.5px; }
.pf-ghost .pf-advice { padding: 11px 12px 13px; }
.pf-ghost .pf-line { font-size: 12px; padding: 9px 11px; gap: 8px; }
.pf-ghost .pf-tick { width: 18px; height: 18px; font-size: 11px; }
/* deck icon + line variants, distinct from the main card's amber star / ✓ / ! */
.pf-spark--teal { background: rgba(42, 107, 90, 0.15); }
.pf-spark--teal svg { stroke: var(--teal); }
.pf-line--up { border-left: 3px solid var(--amber); }
.pf-line--up .pf-tick { background: rgba(232, 168, 56, 0.18); color: var(--amber-hover); }

/* ---------- How it works — pinned horizontal step slider ----------
   .howx is tall (cards × 100vh); .howx-pin sticks for the run while the JS
   centers one card at a time by translating .howx-track. On entry the JS adds
   .is-active, which flips this section's semantic tokens to the OPPOSITE theme
   (dark band in light mode, cream in dark mode); the transitions below make that
   read as a soft "the site just switched theme" dissolve. Brand colors (amber /
   teal / gradient) stay constant. Mobile + reduced-motion fall back to a static
   carousel / grid (see the responsive + reduced-motion blocks below). */
.howx { --howx-cards: 4; position: relative; background: var(--bg); min-height: calc(var(--howx-cards) * 100vh); transition: background-color 0.7s ease; }
.howx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.howx-stage { height: 100%; display: flex; flex-direction: column; }
.howx-intro { flex-shrink: 0; max-width: 760px; margin: 0 auto; padding: clamp(82px, 11vh, 116px) var(--pad) 0; text-align: center; pointer-events: none; }
.howx-intro .label { display: inline-block; margin-bottom: 14px; }
.howx-title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); margin: 0; transition: color 0.7s ease; }
.howx-track { flex: 1; position: relative; display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; will-change: transform; transform: translate3d(0, 0, 0); }
/* Landscape card: copy on the left, a self-running scene panel on the right. */
.howx-card { flex: 0 0 min(740px, 86vw); width: min(740px, 86vw); box-sizing: border-box; position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: stretch; gap: clamp(22px, 3vw, 34px); min-height: clamp(330px, 44vh, 410px); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 32px 34px; box-shadow: 0 8px 32px rgba(var(--shadow-color), 0.10); opacity: 0.45; transform: scale(0.94); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease, background-color 0.7s ease; will-change: opacity, transform; }
.howx-card.is-focus { opacity: 1; transform: scale(1); border-color: rgba(232, 168, 56, 0.45); box-shadow: 0 0 0 1px rgba(232, 168, 56, 0.30), 0 20px 50px rgba(232, 168, 56, 0.18), 0 8px 32px rgba(var(--shadow-color), 0.12); }
.howx-card--climax.is-focus { border-color: rgba(42, 107, 90, 0.5); box-shadow: 0 0 0 1px rgba(42, 107, 90, 0.35), 0 20px 50px rgba(42, 107, 90, 0.20), 0 8px 32px rgba(var(--shadow-color), 0.12); }
/* Hover affordance — cards are tappable (click to center one; see setupHowX).
   On hover a soft, low-opacity light leaks out from behind the card; a
   non-focused card also lifts part-way toward focus so it reads as selectable,
   while the actively-focused card stays at full presence (kept below). Wrapped
   in (hover: hover) so touch devices never get a sticky tap-hover. Amber by
   default, teal for the climax card. */
@media (hover: hover) {
    .howx-card { cursor: pointer; }
    .howx-card:hover { opacity: 0.72; transform: scale(0.97); border-color: rgba(232, 168, 56, 0.42); box-shadow: 0 0 0 1px rgba(232, 168, 56, 0.28), 0 0 72px 6px rgba(232, 168, 56, 0.22), 0 24px 56px rgba(232, 168, 56, 0.16), 0 8px 32px rgba(var(--shadow-color), 0.12); }
    .howx-card--climax:hover { border-color: rgba(42, 107, 90, 0.5); box-shadow: 0 0 0 1px rgba(42, 107, 90, 0.32), 0 0 72px 6px rgba(42, 107, 90, 0.24), 0 24px 56px rgba(42, 107, 90, 0.18), 0 8px 32px rgba(var(--shadow-color), 0.12); }
    .howx-card.is-focus:hover { opacity: 1; transform: scale(1); }
}
.howx-eyebrow { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-text); }
.howx-eyebrow .howx-total { color: var(--text-muted); letter-spacing: 0.08em; transition: color 0.7s ease; }
/* ---------- Step-card scenes ----------
   Each card pairs its copy with a small self-running scene: geometric, rounded,
   wordless shapes with soft shadows, choreographed AE-style (staggered entries,
   overshoot pops, a hold, then a dissolve-and-replay). Everything is colored
   from the site's tokens, so scenes re-skin for light/dark AND for this
   section's inverted band. Motion is transform/opacity only, on a shared 7s
   loop; container elements carry the hvScene dissolve so children can simply
   hold their end pose. Base styles ARE the composed end state — reduced-motion
   stops the animations (see the reduced-motion block) and shows each scene
   finished instead of empty. */
.howx-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.howx-viz {
    flex: 0 0 46%; position: relative; overflow: hidden; border-radius: 18px;
    background-color: var(--surface-2);
    background-image: radial-gradient(130% 100% at 22% 0%, rgba(232, 168, 56, 0.07), transparent 62%);
    border: 1px solid var(--border);
    transition: background-color 0.7s ease, border-color 0.7s ease;
}
@keyframes hvScene { 0% { opacity: 0; } 5%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* Scene 1 — Markanı anlat: a site address is "typed" into the browser field
   (abstract pills, so it stays wordless) and the page skeleton assembles. */
.hv-browser { position: absolute; inset: 10% 9% 12%; display: flex; flex-direction: column; gap: 9px; padding: 11px 12px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 36px rgba(var(--shadow-color), 0.14); animation: hvScene 7s linear infinite; }
.hv-chrome { display: flex; gap: 5px; flex: none; }
.hv-dot { width: 7px; height: 7px; border-radius: 50%; }
.hv-dot--r { background: var(--error); }
.hv-dot--y { background: var(--amber); }
.hv-dot--g { background: var(--success); }
.hv-url { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 30px; border-radius: 15px; padding: 0 11px; border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; }
.hv-mag { position: relative; flex: none; width: 9px; height: 9px; border: 2px solid var(--text-muted); border-radius: 50%; }
.hv-mag::after { content: ''; position: absolute; right: -3px; bottom: -4px; width: 2px; height: 5px; border-radius: 1px; background: var(--text-muted); transform: rotate(-45deg); }
/* The address is real text in the site font, revealed character-by-character
   with a steps() clip; the caret is the next flex item, so it rides the text's
   growing edge for free. 17 steps = the 17 characters of www.yourbrand.com. */
.hv-type-text { flex: none; overflow: hidden; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; animation: hvTypeText 7s steps(17, end) infinite; }
.hv-type-text i { font-style: normal; color: var(--text-muted); }
.hv-type-text b { font-weight: 700; color: var(--amber-text); }
.hv-caret { flex: none; width: 2px; height: 13px; margin-left: 1px; border-radius: 1px; background: var(--amber-text); animation: hvCaretBlink 1.1s steps(1) infinite; }
.hv-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.hv-ske { border-radius: 8px; background: var(--surface-2); }
.hv-ske--img { flex: 1; min-height: 0; background-image: linear-gradient(135deg, rgba(232, 168, 56, 0.30), rgba(42, 107, 90, 0.24)); animation: hvSkeA 7s infinite; }
.hv-ske--l1 { height: 8px; width: 72%; flex: none; animation: hvSkeB 7s infinite; }
.hv-ske--l2 { height: 8px; width: 48%; flex: none; animation: hvSkeC 7s infinite; }
@keyframes hvTypeText { 0%, 8% { max-width: 0; } 38%, 100% { max-width: 140px; } }
@keyframes hvCaretBlink { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes hvSkeA { 0%, 40% { opacity: 0; transform: translateY(10px); } 49%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes hvSkeB { 0%, 46% { opacity: 0; transform: translateY(10px); } 55%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes hvSkeC { 0%, 52% { opacity: 0; transform: translateY(10px); } 61%, 100% { opacity: 1; transform: translateY(0); } }

/* Scene 2 — İçeriğini üret: a creative composes itself while the progress pill
   fills; brand swatches pop in and sparkles land the finish. */
.hv-canvas { position: absolute; left: 10%; top: 12%; width: 52%; bottom: 30%; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 36px rgba(var(--shadow-color), 0.14); overflow: hidden; animation: hvScene 7s linear infinite; }
.hv-sun { position: absolute; left: 16%; top: 15%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--amber); animation: hvSun 7s infinite; }
.hv-hill { position: absolute; bottom: -34%; width: 66%; aspect-ratio: 1; border-radius: 24%; background: var(--teal); transform: translateY(0) rotate(45deg); animation: 7s infinite; }
.hv-hill--a { left: -16%; animation-name: hvHillA; }
.hv-hill--b { right: -20%; opacity: 0.62; animation-name: hvHillB; }
.hv-swatches { position: absolute; right: 11%; top: 16%; display: flex; flex-direction: column; gap: 10px; animation: hvScene 7s linear infinite; }
.hv-swatches i { width: 22px; height: 22px; border-radius: 8px; box-shadow: 0 8px 18px rgba(var(--shadow-color), 0.16); animation: 7s infinite; }
.hv-swatches i:nth-child(1) { background: var(--amber); animation-name: hvSw1; }
.hv-swatches i:nth-child(2) { background: var(--teal); animation-name: hvSw2; }
.hv-swatches i:nth-child(3) { background: var(--cream); border: 1px solid var(--border); animation-name: hvSw3; }
.hv-spark { position: absolute; width: 18px; height: 18px; transform: scale(0) rotate(80deg); opacity: 0; }
.hv-spark::before, .hv-spark::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 2px; background: var(--amber); }
.hv-spark::before { width: 3px; height: 18px; transform: translate(-50%, -50%); }
.hv-spark::after { width: 18px; height: 3px; transform: translate(-50%, -50%); }
.hv-spark--1 { right: 26%; bottom: 26%; animation: hvSpark1 7s infinite; }
.hv-spark--2 { right: 9%; top: 44%; width: 13px; height: 13px; animation: hvSpark2 7s infinite; }
.hv-spark--2::before { height: 13px; }
.hv-spark--2::after { width: 13px; }
.hv-progress { position: absolute; left: 10%; right: 11%; bottom: 13%; height: 8px; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; animation: hvScene 7s linear infinite; }
.hv-progress i { display: block; height: 100%; border-radius: 4px; background: var(--grad); transform-origin: left center; animation: hvProgFill 7s infinite; }
@keyframes hvSun { 0%, 16% { transform: scale(0); } 24% { transform: scale(1.14); } 29%, 100% { transform: scale(1); } }
@keyframes hvHillA { 0%, 22% { transform: translateY(80%) rotate(45deg); } 34%, 100% { transform: translateY(0) rotate(45deg); } }
@keyframes hvHillB { 0%, 28% { transform: translateY(84%) rotate(45deg); } 40%, 100% { transform: translateY(0) rotate(45deg); } }
@keyframes hvSw1 { 0%, 44% { transform: scale(0); } 50% { transform: scale(1.14); } 53%, 100% { transform: scale(1); } }
@keyframes hvSw2 { 0%, 48% { transform: scale(0); } 54% { transform: scale(1.14); } 57%, 100% { transform: scale(1); } }
@keyframes hvSw3 { 0%, 52% { transform: scale(0); } 58% { transform: scale(1.14); } 61%, 100% { transform: scale(1); } }
@keyframes hvSpark1 { 0%, 56% { transform: scale(0) rotate(0deg); opacity: 0; } 60% { opacity: 1; } 63% { transform: scale(1) rotate(40deg); opacity: 1; } 70%, 100% { transform: scale(0) rotate(80deg); opacity: 0; } }
@keyframes hvSpark2 { 0%, 62% { transform: scale(0) rotate(0deg); opacity: 0; } 66% { opacity: 1; } 69% { transform: scale(1) rotate(40deg); opacity: 1; } 76%, 100% { transform: scale(0) rotate(80deg); opacity: 0; } }
@keyframes hvProgFill { 0%, 6% { transform: scaleX(0); } 46%, 100% { transform: scaleX(1); } }

/* Scene 3 — Onayla ve yayınla: a tap ripple lands on the approve pill, the
   check pops as the pill turns teal, and confetti bursts. */
.hv-phone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 84%; aspect-ratio: 10 / 19; box-sizing: border-box; display: flex; flex-direction: column; gap: 7px; padding: 10px 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 16px 40px rgba(var(--shadow-color), 0.18); animation: hvScene 7s linear infinite; }
.hv-notch { align-self: center; flex: none; width: 34%; height: 5px; border-radius: 3px; background: var(--surface-2); }
.hv-shot { flex: 1; min-height: 0; border-radius: 10px; background-color: var(--surface-2); background-image: linear-gradient(135deg, rgba(232, 168, 56, 0.30), rgba(42, 107, 90, 0.26)); }
.hv-row { flex: none; height: 6px; border-radius: 3px; background: var(--surface-2); }
.hv-row--a { width: 82%; }
.hv-row--b { width: 56%; }
.hv-ok { flex: none; height: 26px; border-radius: 13px; background: var(--teal); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(var(--shadow-color), 0.20); animation: hvOkPress 7s infinite; }
.hv-tick { width: 10px; height: 6px; border-left: 2.5px solid var(--cream); border-bottom: 2.5px solid var(--cream); border-radius: 1px; transform: rotate(-45deg) translateY(-1px); animation: hvTick 7s infinite; }
.hv-ripple { position: absolute; left: 50%; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--amber); transform: translateX(-50%) scale(1.7); opacity: 0; animation: hvRipple 7s infinite; }
.hv-conf { position: absolute; left: 50%; top: 66%; width: 7px; height: 11px; border-radius: 3px; opacity: 0; animation: hvConf 7s ease-out infinite; }
.hv-conf--1 { --tx: -78px; --ty: -96px; --rot: 300deg; background: var(--amber); }
.hv-conf--2 { --tx: -48px; --ty: -120px; --rot: -260deg; background: var(--teal); animation-delay: 0.06s; }
.hv-conf--3 { --tx: -16px; --ty: -132px; --rot: 220deg; background: var(--error); animation-delay: 0.1s; width: 6px; height: 6px; border-radius: 50%; }
.hv-conf--4 { --tx: 18px; --ty: -126px; --rot: -320deg; background: var(--success); animation-delay: 0.04s; }
.hv-conf--5 { --tx: 52px; --ty: -112px; --rot: 280deg; background: var(--amber-hover); animation-delay: 0.12s; width: 6px; height: 6px; border-radius: 50%; }
.hv-conf--6 { --tx: 82px; --ty: -88px; --rot: -240deg; background: var(--teal); animation-delay: 0.02s; }
.hv-conf--7 { --tx: -66px; --ty: -60px; --rot: 200deg; background: var(--success); animation-delay: 0.14s; width: 6px; height: 6px; border-radius: 50%; }
.hv-conf--8 { --tx: 64px; --ty: -54px; --rot: -300deg; background: var(--error); animation-delay: 0.08s; }
@keyframes hvOkPress { 0%, 24% { transform: scale(1); background-color: var(--amber); } 29% { transform: scale(0.93); background-color: var(--amber); } 34% { transform: scale(1); } 38%, 100% { transform: scale(1); background-color: var(--teal); } }
@keyframes hvTick { 0%, 32% { transform: rotate(-45deg) translateY(-1px) scale(0); } 40% { transform: rotate(-45deg) translateY(-1px) scale(1.25); } 45%, 100% { transform: rotate(-45deg) translateY(-1px) scale(1); } }
@keyframes hvRipple { 0%, 20% { transform: translateX(-50%) scale(0.35); opacity: 0; } 25% { opacity: 0.5; } 34%, 100% { transform: translateX(-50%) scale(1.7); opacity: 0; } }
@keyframes hvConf { 0%, 35% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 39% { opacity: 1; } 57% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 1; } 72%, 100% { transform: translate(calc(var(--tx) * 1.3), calc(var(--ty) * 0.45)) rotate(calc(var(--rot) * 1.35)); opacity: 0; } }

/* Scene 4 — Satışı ve kârı gör: bars grow in, the winning bar leads, a coin
   drops beside the live pulse. */
.hv-chart { position: absolute; inset: 12% 11%; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 36px rgba(var(--shadow-color), 0.14); animation: hvScene 7s linear infinite; }
.hv-bars { position: absolute; left: 14px; right: 14px; bottom: 12px; top: 38%; display: flex; align-items: flex-end; gap: 9%; padding: 0 4%; border-bottom: 2px solid var(--surface-2); }
.hv-bar { flex: 1; border-radius: 5px 5px 2px 2px; background: var(--surface-2); transform-origin: bottom center; animation: 7s infinite; }
.hv-bar--1 { height: 38%; animation-name: hvBar1; }
.hv-bar--2 { height: 58%; animation-name: hvBar2; }
.hv-bar--3 { height: 46%; animation-name: hvBar3; }
.hv-bar--4 { height: 92%; background: var(--teal); box-shadow: 0 6px 16px rgba(42, 107, 90, 0.35); animation-name: hvBar4; }
.hv-up { position: absolute; right: 13%; top: 14%; width: 26px; height: 26px; border-radius: 50%; background: rgba(232, 168, 56, 0.16); animation: hvUp 7s infinite; }
.hv-up::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-top: 2.5px solid var(--amber-hover); border-right: 2.5px solid var(--amber-hover); border-radius: 1px; transform: translate(-50%, -32%) rotate(-45deg); }
.hv-coin { position: absolute; left: 16%; top: 13%; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); box-shadow: 0 8px 18px rgba(232, 168, 56, 0.40); animation: hvCoin 7s infinite; }
.hv-coin::after { content: ''; position: absolute; inset: 4px; border: 2px solid rgba(27, 39, 37, 0.35); border-radius: 50%; }
.hv-pulse { position: absolute; right: 13px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.hv-pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--success); animation: hvPulseRing 2.4s ease-out infinite; }
@keyframes hvBar1 { 0%, 10% { transform: scaleY(0); } 18% { transform: scaleY(1.08); } 22%, 100% { transform: scaleY(1); } }
@keyframes hvBar2 { 0%, 16% { transform: scaleY(0); } 24% { transform: scaleY(1.08); } 28%, 100% { transform: scaleY(1); } }
@keyframes hvBar3 { 0%, 22% { transform: scaleY(0); } 30% { transform: scaleY(1.08); } 34%, 100% { transform: scaleY(1); } }
@keyframes hvBar4 { 0%, 28% { transform: scaleY(0); } 38% { transform: scaleY(1.12); } 43%, 100% { transform: scaleY(1); } }
@keyframes hvUp { 0%, 48% { transform: scale(0); } 56% { transform: scale(1.18); } 60%, 100% { transform: scale(1); } }
@keyframes hvCoin { 0%, 44% { transform: translateY(-30px) scale(0); opacity: 0; } 50% { transform: translateY(0) scale(1.08); opacity: 1; } 54% { transform: translateY(-6px) scale(1); } 58%, 100% { transform: translateY(0) scale(1); } }
@keyframes hvPulseRing { 0% { transform: scale(0.6); opacity: 0.55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.howx-h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; margin: auto 0 14px; transition: color 0.7s ease; }
.howx-desc { font-size: clamp(15px, 1.5vw, 18px); color: var(--text-muted); line-height: 1.6; margin: 0; transition: color 0.7s ease; }

/* Inverted "the site just switched theme" tokens, applied while the section
   owns the screen (JS toggles .is-active). Light site → dark-band look; dark
   site → light look. Brand colors (amber/teal/grad) are never overridden. */
.howx.is-active {
    --bg: #1B2725;
    --surface: #223230;
    --surface-2: #2A3B38;
    --text: #F3EBE2;
    --text-muted: rgba(243, 235, 226, 0.68);
    --border: rgba(243, 235, 226, 0.12);
    --border-strong: rgba(243, 235, 226, 0.28);
    --shadow-color: 0, 0, 0;
}
[data-theme="dark"] .howx.is-active {
    --bg: #F3EBE2;
    --surface: #FFFFFF;
    --surface-2: #F1F1F1;
    --text: #1A1A1A;
    --text-muted: #5C5C5C;
    --border: rgba(26, 26, 26, 0.08);
    --border-strong: rgba(26, 26, 26, 0.20);
    --shadow-color: 27, 39, 37;
}

/* ---------- Differentiator ---------- */
.diff { background: var(--band); color: var(--band-text); padding: 96px 0 0; }
.diff h2 { font-size: clamp(32px, 5vw, 50px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--band-text); }
.diff .label { color: var(--amber); }
/* The quoted complaint reads as a spoken line: true italic (the 1,500 face is
   loaded for this), medium weight against the bold answer below it. */
.diff-quote { font-style: italic; font-weight: 500; }
/* With the lead paragraph gone, the support line IS the section's subline —
   give it standalone weight and a little air under the headline. */
.diff-support { font-size: clamp(16px, 1.9vw, 20px); font-weight: 600; color: var(--band-text); margin: 20px auto 0; }
/* Pursuk banner bridges the copy and the comparison scrub; the PNG carries its
   own rounded card + transparency, so it needs no extra chrome on the band. */
.diff-banner { max-width: 940px; margin: 0 auto; }
.diff-banner img { display: block; width: 100%; height: auto; }
/* 3-stage mobile carousel: hidden on desktop, shown in the ≤900px block where
   the combined strip (.diff-banner-full) is hidden instead. */
.diff-carousel { display: none; }
.diff-carousel-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px var(--pad);
}
.diff-carousel-track::-webkit-scrollbar { display: none; }
.diff-slide {
    flex: 0 0 88%;
    scroll-snap-align: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.diff-slide img { border-radius: 16px; }
.diff-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.diff-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: var(--band-text-muted); opacity: 0.4; cursor: pointer;
    transition: opacity 0.2s ease, width 0.2s ease, background 0.2s ease, border-radius 0.2s ease;
}
.diff-dot.is-active { opacity: 1; width: 22px; border-radius: 5px; background: var(--amber); }
/* Pinned scroll scrub: .diff-scrub supplies the travel; .diff-pin locks the
   frame center-screen for the run. The user sees the "other tools" dashboard
   first, then continued scroll wipes the madvise panel across (JS scrubs
   --reveal as a pure function of progress through .diff-scrub). */
.diff-scrub { position: relative; min-height: 200vh; padding-bottom: 96px; }
.diff-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px var(--pad); }
.diff-pin .compare { margin: 0 auto; }
.compare {
    position: relative; margin: 40px auto 0; border-radius: 20px;
    /* No overflow:hidden — it would clip the handle knob at the right edge.
       Corners are rounded on the images instead (.cpanel-img). */
    user-select: none; cursor: default; aspect-ratio: 2490 / 1622; background: #1B2725;
    /* Cap by viewport height so the whole frame fits on screen; width follows
       the aspect ratio and never exceeds the container. */
    width: min(100%, calc(70vh * 2490 / 1622));
    transition: box-shadow 0.3s ease;
    box-shadow: 0 24px 60px rgba(var(--shadow-color), 0.45);
}
.compare:hover { box-shadow: 0 0 50px rgba(232, 168, 56, 0.18); }
/* Two full-bleed panels (exported from Figma): other-tools dashboard behind,
   madvise panel sliding over it as the scroll reveal grows. */
.cpanel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; border-radius: 20px; }
.cmeta { z-index: 1; }
.cmad { z-index: 2; clip-path: inset(0 calc(100% - var(--reveal, 50%)) 0 0); }
.handle { position: absolute; top: 0; bottom: 0; left: var(--reveal, 50%); width: 3px; background: linear-gradient(180deg, #FDC665 0%, #E8A838 50%, #2A6B5A 100%); z-index: 5; pointer-events: none; }
.handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 16px rgba(232, 168, 56, 0.5); }
.handle::before { content: '\21C4'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--dark); font-size: 16px; z-index: 6; font-weight: 700; }
/* Desktop: the divider is grabbable so the reveal can be scrubbed by hand
   (vertical scroll still drives it; see the drag handlers in main.js). The
   pointer-events flip is desktop-only — on ≤900px the whole frame is draggable
   and events route through .compare, so the base pointer-events:none stays. */
@media (min-width: 901px) {
    .handle { pointer-events: auto; cursor: grab; }
    .compare.is-dragging, .compare.is-dragging .handle { cursor: grabbing; }
}

/* ---------- Features ---------- */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* AI-layer capability rail — four rows bound 1:1 to the advice deck beside
   them. The row whose card is in front carries .is-live (main.js): its glyph
   chip fills amber and the row lifts onto a surface. Clicking a row brings
   its card forward. Distinct glyph per capability, no hairline-per-row, no
   uniform checkmarks. */
.feat-sync { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.fs-item { width: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 13px 14px; border: 1px solid transparent; border-radius: 14px; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.16s ease; }
.fs-item:hover { background: var(--surface); border-color: var(--border); }
.fs-item:active { transform: scale(0.985); }
.fs-item.is-live { background: var(--surface); border-color: var(--border); box-shadow: 0 10px 28px rgba(var(--shadow-color), 0.08); }
.fs-glyph { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(232, 168, 56, 0.13); color: var(--amber-text); transition: background-color 0.25s ease, color 0.25s ease; }
.fs-glyph svg { width: 17px; height: 17px; stroke: currentColor; }
.fs-item.is-live .fs-glyph { background: var(--amber); color: var(--dark); }
.fs-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fs-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; }
.fs-desc { font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.ai-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px; box-shadow: 0 8px 32px rgba(var(--shadow-color), 0.1); }
.ai-card .acard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ai-card .acard-top .ic { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ai-card .acard-top .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-card .acard-top .ic svg { stroke: var(--text); }
.ai-card .acard-top b { font-size: 16px; color: var(--text); }
.ai-card .acard-top small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.ai-suggest { border-left: 3px solid var(--amber); background: rgba(232, 168, 56, 0.06); border-radius: 0 8px 8px 0; padding: 14px 18px; }
.ai-suggest .as-lbl { font-size: 11px; font-weight: 600; color: var(--amber-text); letter-spacing: 0.06em; margin-bottom: 6px; }
.ai-suggest .as-txt { font-size: 14px; color: var(--ink); min-height: 42px; }
.ai-suggest .as-apply { font-size: 13px; font-weight: 600; color: var(--dark); background: var(--amber); margin-top: 14px; padding: 9px 18px; border: none; border-radius: 8px; cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.ai-suggest .cursor { display: inline-block; width: 2px; height: 14px; background: var(--amber); margin-left: 1px; animation: blink 1s step-end infinite; vertical-align: middle; }

/* ---------- AI summary card deck (right column of the AI-layer section) ----------
   A real stack of "Daily AI Summary" cards. JS assigns each card a slot:
   .pos-0 is the card in front, .pos-1 / .pos-2 are the cards peeking behind it,
   and unclassed cards sit hidden further back, ready to cycle in. On each tick the
   front card lifts up-and-back (.is-exiting) into the deck while the card behind
   rises forward — a looping depth shuffle, not a flat crossfade. JS locks
   .ai-stack to the tallest card so the layout never reflows. */
.ai-col { position: relative; }
/* the 34px top room lets the peeking / exiting cards rise above the front card
   without overflowing; JS adds the same 34px when it locks the stack height. */
.ai-stack { position: relative; min-height: 300px; perspective: 1600px; }

.ai-stack .ai-card {
    position: absolute; top: 34px; left: 0; right: 0; margin: 0;
    opacity: 0; pointer-events: none; z-index: 1;
    transform: translateY(-34px) scale(0.82);
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, box-shadow 0.5s ease;
    will-change: transform, opacity;
}
.ai-stack .ai-card.pos-0 { opacity: 1; transform: translateY(0) scale(1); z-index: 40; pointer-events: auto; }
/* Hover: only the front card is interactive — it floats toward the cursor.
   transform/box-shadow transitions are already on the base rule above. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ai-stack .ai-card.pos-0:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 18px 48px rgba(var(--shadow-color), 0.18);
    }
}
.ai-stack .ai-card.pos-1 { opacity: 0.65; transform: translateY(-18px) scale(0.94); z-index: 30; }
.ai-stack .ai-card.pos-2 { opacity: 0.3; transform: translateY(-32px) scale(0.88); z-index: 20; }
/* the leaving card rides above the deck (z-50) as it recedes, so the card rising
   to the front is revealed cleanly behind it — no z-index pop. */
.ai-stack .ai-card.is-exiting {
    opacity: 0; z-index: 50;
    transform: translateY(-58px) scale(0.76);
    transition: transform 0.62s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.42s ease;
}
.ai-card .acard-top { position: relative; }
.acard-meta { min-width: 0; }

/* live "now" pulse, top-right of each card header — only the front card pulses */
.ai-live { position: absolute; top: 3px; right: 2px; width: 8px; height: 8px; margin-left: auto; }
.ai-live::before, .ai-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber); }
.ai-stack .ai-card.pos-0 .ai-live::after { animation: ai-ping 2s ease-out infinite; }
@keyframes ai-ping { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .ai-stack .ai-card { transition: none; }
    .ai-stack .ai-card.pos-0 .ai-live::after { animation: none; }
}

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.price-card:hover { transform: translateY(-4px); border-color: rgba(232, 168, 56, 0.5); box-shadow: 0 8px 32px rgba(var(--shadow-color), 0.1); }
.price-card.featured { border-color: var(--amber); box-shadow: 0 8px 32px rgba(232, 168, 56, 0.18); }
.price-card .ptier { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.price-card .pamt { font-size: 40px; font-weight: 800; color: var(--text); margin: 14px 0 4px; }
.price-card .pamt span { font-size: 15px; font-weight: 500; color: var(--muted); }
.price-card .pmost { font-size: 11px; font-weight: 700; background: var(--amber); color: var(--dark); padding: 4px 10px; border-radius: 999px; float: right; }
.price-card ul { list-style: none; margin: 22px 0; }
.price-card ul li { font-size: 14px; color: var(--ink); padding: 9px 0; display: flex; gap: 10px; }
.price-card ul li svg { stroke: var(--teal); flex-shrink: 0; }
.price-note { margin-top: 32px; background: rgba(42, 107, 90, 0.08); border: 1px solid rgba(42, 107, 90, 0.2); border-radius: 12px; padding: 18px 22px; font-size: 14px; color: var(--text); text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.price-note b { color: var(--teal); }

/* ---------- Testimonials (right-to-left marquee) ---------- */
.test-marquee { position: relative; margin-top: 12px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.test-track { display: flex; width: max-content; animation: test-scroll 64s linear infinite; }
.test-marquee:hover .test-track { animation-play-state: paused; }
.test-track .tcard { flex: 0 0 360px; width: 360px; margin-right: 24px; }
.tcard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; transition: transform 0.15s ease, border-color 0.15s ease; }
.tcard:hover { transform: translateY(-4px); border-color: rgba(232, 168, 56, 0.5); }
.tcard .quote { font-size: 15px; color: var(--ink); line-height: 1.6; margin-bottom: 22px; }
.tcard .stars { color: var(--amber); margin-bottom: 16px; letter-spacing: 2px; }
.tperson { display: flex; align-items: center; gap: 12px; }
.tperson .av { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--dark); font-size: 17px; }
.tperson img.av { object-fit: cover; object-position: center 20%; }
.tperson b { font-size: 14px; color: var(--text); display: block; }
.tperson small { font-size: 12px; color: var(--muted); }
/* The track holds two identical card sets (the 2nd cloned by JS), so a −50%
   travel lands exactly on the seam — a perfectly seamless right-to-left loop. */
@keyframes test-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .test-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: 24px; }
    .test-track .tcard { margin-right: 0; }
}

/* ---------- Final CTA ---------- */
.final { background: var(--band); color: var(--band-text); padding: 110px 0; text-align: center; position: relative; overflow: hidden; }
.final::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(232, 168, 56, 0.18), transparent 70%); pointer-events: none; }
.final-inner { position: relative; z-index: 2; }
.final h2 { font-size: clamp(36px, 6vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--band-text); }
/* İkinci satır daha uzun; "gör." alta taşmasın diye orantılı (her breakpoint'te %85) küçültülür. */
.final h2 .final-line2 { font-size: 0.85em; }
.final p.note { font-size: 14px; color: var(--band-text-muted); margin-top: 22px; }
/* Final CTA — new supporting copy + dual CTA row */
.final-line2 { font-size: clamp(16px, 2vw, 20px); font-weight: 700; color: var(--band-text); margin: 18px auto 0; max-width: 700px; }
.final-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ---------- Real contribution — 3D ad wheel ----------
   Twelve 9:16 creatives on a concave ring that drifts right → left: a card
   enters big at the right edge, shrinks toward the centre (the far side of the
   ring) and grows back as it leaves on the left. main.js (setupAdWheel)
   measures the stage and writes each card's transform; --wheel-w / --wheel-h
   are set there per breakpoint (8 on screen on desktop, 6 tablet, 4 phone —
   the outermost two always cut by the frame edge). The section, not the stage,
   clips: it is viewport-wide, and its bottom padding leaves room for the card
   shadows the stage box itself would cut off. */
.results { overflow: hidden; }
.results .sec-head { margin-bottom: 40px; }
.wheel {
    position: relative; width: 100%; height: var(--wheel-h, 440px);
    opacity: 0; transition: opacity 0.9s ease;
}
.wheel.is-in { opacity: 1; }
.wheel-track { position: absolute; inset: 0; list-style: none; perspective: 1400px; perspective-origin: 50% 50%; }
.wheel-card {
    position: absolute;
    width: var(--wheel-w, 210px); height: calc(var(--wheel-w, 210px) * 16 / 9);
    left: calc(50% - var(--wheel-w, 210px) / 2);
    top: calc(50% - var(--wheel-w, 210px) * 8 / 9);
    transform-origin: 50% 50%;
    will-change: transform;
}
.wheel-media {
    position: relative; width: 100%; height: 100%;
    border-radius: 18px; overflow: hidden; background: var(--surface-2);
    box-shadow: 0 0 0 1px var(--border), 0 26px 60px -20px rgba(var(--shadow-color), 0.40);
}
.wheel-media img, .wheel-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sales pill, bottom-right. Counter-scaled by --inv (= 1 / card scale, set by
   JS) so the figure reads the same size whether the card is at the far, small
   centre or the near, big edge of the ring. */
.wheel-pill {
    position: absolute; right: 10px; bottom: 10px; z-index: 2;
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 7px 12px; border-radius: 999px;
    background: var(--amber); color: var(--dark);
    font-size: 13px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(27, 39, 37, 0.18);
    transform: scale(var(--inv, 1)); transform-origin: 100% 100%;
}
.wheel-pill-k { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; }
.wheel-pill b { font-weight: 800; letter-spacing: -0.01em; }
.wheel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) {
    /* Phone cards are ~135px wide: the pill keeps the figure only, so it never outgrows its card */
    .wheel-pill { font-size: 12px; padding: 6px 10px; right: 8px; bottom: 8px; }
    .wheel-pill-k { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wheel { transition: none; }
}

/* ---------- Footer ---------- */
.footer { background: var(--bg); border-top: 1px solid var(--border); padding: 56px 0 32px; }
/* 4 kolon: marka + Ürün + Yasal + Dil. Mobilde tek kolona iner (media query). */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer .logo span { color: var(--text); }
.footer-tag { font-size: 14px; color: var(--muted); margin-top: 14px; max-width: 280px; }
.footer-col h4, .footer-col .footer-h { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--ink); padding: 6px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--amber); }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, transform 0.15s; }
.footer-social a:hover { border-color: var(--amber); transform: translateY(-2px); }
.footer-social svg { stroke: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); flex-wrap: wrap; gap: 14px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(42px) scale(0.97); filter: blur(6px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform, filter; }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
/* editorial split-text word reveal */
.split .lw { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.06; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.split .lw-i { display: inline-block; transform: translateY(115%); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.split.in .lw-i { transform: translateY(0); }
.grad-text .lw-i { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: reduce) {
    .reveal, .split .lw-i { transition: none !important; }
    .reveal { opacity: 1; transform: none; filter: none; }
    .split .lw-i { transform: none; }
    /* Pillars sit flat — no tilt, no settle animation, no scroll parallax */
    .pillar-frame { rotate: 0 !important; translate: none !important; transition: none; }
    .pillar-surface, .pillar-peek, .pillar-stage::before, .pf-ghost { translate: none !important; }
    .pf-canvas img { scale: 1 !important; translate: none !important; }
    /* How-it-works: drop the pin + horizontal scroll for a static 2-col grid */
    .howx { min-height: 0; }
    .howx-pin { position: static; height: auto; overflow: visible; display: block; }
    .howx-stage { display: block; height: auto; padding: 64px 0; }
    .howx-intro { position: static; transform: none; max-width: 720px; margin: 0 auto 40px; padding: 0 var(--pad); text-align: center; pointer-events: auto; }
    .howx-intro .howx-hint, .howx-intro .howx-progress { display: none; }
    .howx-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 var(--pad); transform: none !important; will-change: auto; }
    .howx-card { width: auto; flex: initial; opacity: 1; transform: none; transition: none; }
    .howx-hint svg { animation: none; }
    /* Step-card scenes freeze at their composed end state (base styles); the
       transient pieces (caret, ripple, confetti, sparkles) stay hidden. */
    .howx-viz *, .howx-viz *::before, .howx-viz *::after { animation: none !important; }
    .hv-caret, .hv-ripple, .hv-conf, .hv-spark { opacity: 0 !important; }
    /* FARK comparison: drop the pinned scrub; the divider becomes drag-to-slide. */
    .diff-scrub { min-height: 0; padding-bottom: 0; }
    .diff-pin { position: static; height: auto; overflow: visible; display: block; padding: 24px var(--pad) 64px; }
    .compare { touch-action: pan-y; cursor: grab; }
    .compare.is-dragging { cursor: grabbing; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
    .howx-track { grid-template-columns: 1fr; }
}

/* ---------- Micro-polish (redesign pass) ----------
   Balanced headline rag, orphan-free paragraphs, lined-up figures, and a
   visible keyboard focus ring (the outline follows each element's radius). */
h1, h2, .howx-h3 { text-wrap: balance; }
.hero-sub, .sec-desc, .pillar-lead, .pillar-note, .howx-desc, .faq-a, .quote { text-wrap: pretty; }
.pf-budget, .hs-pro-num, .pa-txt, .as-txt { font-variant-numeric: tabular-nums; }
:where(a, button, summary, input, textarea, select, [tabindex="0"]):focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- Mobile menu ---------- */
.mobile-menu { display: none; position: fixed; top: 84px; left: 12px; right: 12px; background: var(--surface); box-shadow: 0 8px 32px rgba(var(--shadow-color), 0.12); padding: 20px 24px; border-radius: 16px; z-index: 99; flex-direction: column; gap: 8px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 12px 0; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--border); }
.mobile-menu .btn { justify-content: center; margin-top: 8px; }

/* ---------- Scroll progress bar ---------- */
.scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad); z-index: 200; pointer-events: none; transition: width 0.1s linear; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    /* Lock the viewport horizontally: the transform-animated marquees leak a few
       px of scrollable overflow past their overflow:hidden parents, which let the
       page be nudged left/right on touch. `clip` on the root removes it without
       creating a scroll container. Scoped to ≤900px because `overflow:clip` on
       <html> breaks position:sticky, and the only sticky elements (the howx/diff
       pins) are already static at this breakpoint. body keeps overflow-x:hidden
       as a fallback for browsers without `clip`. */
    html { overflow-x: clip; }
    .nav-links { display: none; }
    /* The scrolled glass pill otherwise spans edge-to-edge below its 920px
       contract width — keep a screen-edge margin on touch layouts. 12px
       matches .mobile-menu's inset; the slimmer inner padding keeps the
       top-state content roughly aligned with the page's --pad gutter. */
    .nav { padding-left: 12px; padding-right: 12px; }
    .nav-inner { padding-left: 14px; padding-right: 14px; }
    .hamburger { display: block; }
    /* Compact topbar: smaller mark + tighter control cluster on touch layouts */
    .logo-img { height: 26px; }
    .nav-right { gap: 10px; }
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    /* width:100% gives the column a definite width — without it, margin:0 auto
       makes this grid item shrink-to-fit, and the scene's width:100% (no intrinsic
       width) would collapse to 0. */
    .hero-visual { order: 2; width: 100%; max-width: 460px; margin: 0 auto; }
    .hero-content { align-items: center; text-align: center; }
    .hero-content .hero-sub { margin: 0 auto; }
    .hero-content .hero-cta { justify-content: center; }
    .problem-grid, .price-grid { grid-template-columns: 1fr; }
    .test-track .tcard { flex-basis: 300px; width: 300px; }
    .feat-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .price-card .pmost { float: none; display: inline-block; margin-bottom: 10px; }
    /* Pillars stack: copy first, visual below, no tilt */
    .pillar-grid { grid-template-columns: 1fr; gap: 40px; }
    .pillar-copy, .pillar--flip .pillar-copy { grid-column: 1; grid-row: 1; max-width: none; text-align: center; }
    .pillar-stage, .pillar--flip .pillar-stage { grid-column: 1; grid-row: 2; width: 100%; max-width: 460px; margin: 0 auto; min-height: 300px; }
    .pillar-lead { margin-left: auto; margin-right: auto; }
    /* Stacked layout: keep the frame upright but let the glass slabs keep a hint
       of tilt for depth; drop the scroll parallax on touch. */
    .pillar-frame { rotate: 0 !important; translate: none !important; }
    .pillar-surface, .pillar-peek, .pillar-stage::before { translate: none !important; }
    .pf-canvas img { scale: 1 !important; translate: none !important; }
    .pf-ghost { display: none; } /* deck is a desktop flourish; mobile shows just the main card */
    /* How-it-works: drop the pin — stack the four steps vertically (no sideways
       scroll). The JS setupHowX() already treats ≤900px as disabled (clears the
       track transform + focus), so this is a pure static layout. */
    .howx { min-height: 0; padding: 64px 0; }
    .howx-pin { position: static; height: auto; overflow: visible; display: block; }
    .howx-stage { display: block; height: auto; }
    .howx-intro { position: static; transform: none; max-width: none; margin: 0 auto 32px; padding: 0 var(--pad); text-align: center; pointer-events: auto; }
    .howx-intro .howx-hint, .howx-intro .howx-progress { display: none; }
    .howx-track { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 var(--pad); overflow: visible; transform: none !important; will-change: auto; }
    .howx-card { flex: initial; width: 100%; max-width: 520px; min-height: 0; opacity: 1; transform: none; padding: 22px 22px 28px; border-radius: 20px; flex-direction: column-reverse; gap: 20px; }
    .howx-card.is-focus { transform: none; }
    .howx-viz { flex: 0 0 auto; width: 100%; min-height: clamp(200px, 52vw, 250px); }
    .howx-card .howx-h3 { margin: 14px 0 10px; }
    /* FARK comparison: the pinned dashboard-vs-madvise wipe is a desktop
       moment — on mobile the section ends after the Pursuk carousel, so the
       frame (and its drag plumbing) is dropped entirely. */
    .diff-scrub { display: none; }
    .diff { padding-bottom: 72px; }
    /* Pursuk banner: the combined desktop strip turns illegible when squeezed,
       so mobile swaps it for a 3-stage swipeable carousel of standalone panels. */
    .diff-banner img.diff-banner-full { display: none; }
    .diff-carousel { display: block; }
}
@media (max-width: 480px) {
    .hero { padding: 120px 0 60px; }
    .sec { padding: 64px 0; }
    .mockup { padding: 20px; }
    .ad-row { flex-direction: column; align-items: flex-start; }
    .pillar-peek { display: none; }
    .pillar-surface { inset: 4% -2% 6% 4%; }
    .pillar--flip .pillar-surface { inset: 4% 4% 6% -2%; }
    .flow { gap: 8px; }
    .flow .node { padding: 10px 12px; }
    .flow .node .fv { font-size: 16px; }
    /* Topbar: everything a notch smaller so logo + toggles + hamburger
       share the row without crowding. */
    .logo-img { height: 24px; }
    .nav-right { gap: 8px; }
    .theme-toggle { width: 34px; height: 30px; }
    .lang-switch button { padding: 5px 10px; }
    .hamburger { padding: 4px; }
}
/* Very narrow phones: tightest topbar so the hamburger never leaves the screen */
@media (max-width: 374px) {
    .logo-img { height: 22px; }
    .theme-toggle { width: 32px; }
    .lang-switch { font-size: 12px; }
    .lang-switch button { font-size: 12px; padding: 4px 8px; }
    .nav-inner { height: 58px; }
}

/* ---------- Responsive — sections added in the redesign ---------- */
@media (max-width: 860px) {
    .results .sec-head { margin-bottom: 28px; }
    /* Centered pillar copy: keep the support note / checklist left-read */
    .pillar-note, .pillar-checks { margin-left: auto; margin-right: auto; text-align: left; }
}


/* ==========================================================================
   Hero background — Liquid Glass anti-flash + Backlit Light-Leak Surface
   ========================================================================== */
/* Anti-flash: keep the canvas painted the brand base color before the first
   WebGL frame and reinforce the JS CSS-gradient fallback. The shader paints the
   base color itself, so this is only a safety net (the .hero-field positioning /
   z-index / pointer-events:none already exist in the current rule). */
.hero-field { background-color: var(--hero-base); }

/* ---------- Hero compositing layer: Backlit Light-Leak Surface ----------
   A centered frosted panel behind the whole .hero-grid, with heavily-blurred
   brand light sources behind IT, so light bleeds out around / through the
   translucent surface. Sits at z-index:1 — above #heroField (z0), below
   .hero .wrap (z2). Everything is pointer-events:none so CTAs stay clickable.
   The frost is scoped to a centered content band (NOT full-bleed) so it never
   muddies the WebGL field outside the hero text/visual region. */
.hero-leak {
    position: absolute;
    /* a centered, rounded, framed panel whose full frame stays visible on screen
       — sits just below the floating navbar, with margins all around */
    left: 50%;
    top: 92px;
    bottom: 30px;
    width: min(1360px, 96%);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    border-radius: 28px;
    overflow: hidden;                 /* clip the blurred lights to the band */
    will-change: transform;
}

/* --- the blurred brand light sources (behind the surface) --- */
.leak-lights {
    position: absolute; inset: -25%;  /* overscan so blur edges never show */
    pointer-events: none;
    will-change: transform;           /* JS mouse-lean target */
}
.leak-blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);               /* heavy blur => light bleeds */
    opacity: 0.85;
    will-change: transform;
}
.leak-amber {
    width: 42%; height: 52%;
    left: 30%; bottom: 2%;
    background: radial-gradient(circle at 50% 50%, #E8A838 0%, rgba(232,168,56,0) 70%);
    animation: leakDriftA 17s ease-in-out infinite;
}
.leak-lamber {
    width: 52%; height: 56%;
    right: 6%; top: 20%;
    background: radial-gradient(circle at 50% 50%, #FDC665 0%, rgba(253,198,101,0) 70%);
    animation: leakDriftB 21s ease-in-out infinite;
}
.leak-teal {
    width: 46%; height: 60%;
    left: 8%; top: 6%;
    background: radial-gradient(circle at 50% 50%, #2A6B5A 0%, rgba(42,107,90,0) 72%);
    opacity: 0.62;                    /* teal kept calmer */
    animation: leakDriftC 24s ease-in-out infinite;
}

/* --- the translucent frosted surface (in front of the lights) --- */
.leak-surface {
    position: absolute; inset: 0;
    border-radius: 28px;
    /* frost: brand support varies, so this is the enhanced path (see @supports) */
    background: var(--leak-surface);
    -webkit-backdrop-filter: blur(22px) saturate(115%);
    backdrop-filter: blur(22px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 24px 70px rgba(var(--shadow-color), 0.10);
}

/* --- no-backdrop-filter fallback: a soft semi-opaque base panel --- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .leak-surface {
        background: var(--leak-surface-opaque);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 24px 70px rgba(var(--shadow-color), 0.12);
    }
    .leak-blob { opacity: 0.55; }     /* tame the leak so text stays readable */
}

/* --- slow parametric drift of the light sources --- */
@keyframes leakDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(7%, -5%) scale(1.08); }
}
@keyframes leakDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-6%, 6%) scale(1.10); }
}
@keyframes leakDriftC {
    0%, 100% { transform: translate(0, 0) scale(1.02); }
    50%      { transform: translate(5%, -7%) scale(0.94); }
}

/* --- pause drift when the hero is off-screen / tab hidden --- */
.hero.leak-paused .leak-blob { animation-play-state: paused; }

/* --- reduced motion: one static frame, no animation, no mouse reaction --- */
.hero-leak.leak-static .leak-blob { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .leak-blob { animation: none !important; }
    .leak-lights { transform: none !important; }
}

/* --- phone: lighter blur for perf, smaller band --- */
@media (max-width: 560px) {
    .leak-blob { filter: blur(48px); }
    .leak-surface {
        -webkit-backdrop-filter: blur(16px) saturate(112%);
        backdrop-filter: blur(16px) saturate(112%);
    }
    .hero-leak { top: 78px; bottom: 24px; left: 50%; width: 94%; transform: translateX(-50%); border-radius: 22px; }
}


/* ==========================================================================
   Contact page (contact.html)
   A focused, two-column "get in touch" layout: warm intro copy on the left,
   the lead-capture form on the right. Reuses the shared design tokens, so it
   themes (light/dark) exactly like the landing page. Form styling follows
   DESIGN.md §8 (input/label/error).
   ========================================================================== */
.contact-main {
    position: relative;
    overflow: hidden;
    padding: 150px 0 90px;          /* clear the fixed navbar + breathing room */
    min-height: 100vh;
}
/* soft brand glow backdrop (amber top, faint teal lower-left) — CSS only */
.contact-main::before {
    content: '';
    position: absolute; top: -180px; left: 50%;
    transform: translateX(-50%);
    width: 920px; height: 540px;
    background: radial-gradient(ellipse at center, rgba(232, 168, 56, 0.16), transparent 70%);
    pointer-events: none; z-index: 0;
}
.contact-main::after {
    content: '';
    position: absolute; bottom: -120px; left: -60px;
    width: 460px; height: 460px;
    background: radial-gradient(circle at center, rgba(42, 107, 90, 0.12), transparent 70%);
    pointer-events: none; z-index: 0;
}

.contact-grid {
    position: relative; z-index: 1;
    max-width: 1060px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1.05fr;
    gap: 56px; align-items: center;
}

/* ----- Left: intro / reassurance ----- */
.powered-by {
    display: block; margin-bottom: 12px;
    font-size: 12px; font-weight: 400; letter-spacing: 0.04em;
    color: var(--text-muted);
}
.powered-by strong { font-weight: 600; color: var(--text); }
.contact-intro h1 {
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.08;
    color: var(--text);
}
.contact-lead {
    margin-top: 18px; max-width: 460px;
    font-size: 17px; line-height: 1.7; color: var(--text-muted);
}
.contact-points { margin-top: 30px; display: grid; gap: 16px; }
.contact-point {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 15px; line-height: 1.5; color: var(--text);
}
.cp-ic {
    flex: none; width: 28px; height: 28px; margin-top: 1px;
    border-radius: 999px;
    background: rgba(232, 168, 56, 0.14); color: var(--amber);
    display: flex; align-items: center; justify-content: center;
}
.cp-ic svg { width: 16px; height: 16px; display: block; }

/* ----- Right: form card ----- */
.contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(var(--shadow-color), 0.10);
}
.field { margin-bottom: 18px; }
.field-label {
    display: block; margin-bottom: 7px;
    font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--text-muted);
}
.field-label .opt { font-weight: 400; opacity: 0.7; }
.input, .textarea {
    width: 100%;
    font-family: inherit; font-size: 15px; color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.9; }
.textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.input:focus, .textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.15);
}
.field.has-error .input,
.field.has-error .textarea {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.12);
}
.field-error {
    display: none;
    margin-top: 5px; font-size: 12px; color: var(--error);
}
.field.has-error .field-error { display: block; }

.btn-block { display: flex; width: 100%; justify-content: center; margin-top: 6px; }
.form-status {
    display: none;
    margin-top: 12px; text-align: center;
    font-size: 13px; line-height: 1.6; color: var(--error);
}
.form-status.show { display: block; }
.form-status a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
.form-note {
    margin-top: 14px; text-align: center;
    font-size: 12px; line-height: 1.6; color: var(--text-muted);
}

/* ----- Success state (shown after submit) ----- */
.contact-success { display: none; text-align: center; padding: 8px 4px; }
.cs-badge {
    width: 64px; height: 64px; margin: 0 auto 18px;
    border-radius: 999px;
    background: rgba(232, 168, 56, 0.14); color: var(--amber);
    display: flex; align-items: center; justify-content: center;
}
.cs-badge svg { width: 30px; height: 30px; display: block; }
.cs-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 10px; }
.cs-text { max-width: 380px; margin: 0 auto 6px; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.cs-mail {
    display: inline-block; margin-top: 4px;
    font-weight: 600; color: var(--amber);
    text-decoration: underline; text-underline-offset: 3px;
}
.cs-actions { margin-top: 22px; }

@media (max-width: 900px) {
    .contact-main { padding: 124px 0 64px; }
    .contact-grid { grid-template-columns: 1fr; gap: 36px; max-width: 520px; }
    .contact-intro { text-align: center; }
    .contact-lead { margin-left: auto; margin-right: auto; }
    .contact-points { max-width: 380px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
    .contact-card { padding: 24px 20px; border-radius: 18px; }
}

/* ============ FAQ (SSS) ============ */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0 22px;
    transition: border-color .2s ease;
}
.faq-item[open] { border-color: var(--border-strong); }
.faq-q {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 18px 36px 18px 0;
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--text);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
    content: "+";
    position: absolute; right: 2px; top: 50%;
    transform: translateY(-50%);
    font-size: 20px; font-weight: 500; color: var(--amber);
    transition: transform .2s ease;
}
.faq-item[open] .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a {
    margin: 0; padding: 0 0 18px;
    font-size: 15px; line-height: 1.7; color: var(--text-muted);
}
.faq-cta { margin: 0 0 20px; }
@media (max-width: 480px) {
    .faq-item { padding: 0 16px; border-radius: 14px; }
    .faq-q { font-size: 15px; }
}