/* ZibraAI homepage - v3 "flowing" */
:root {
    --ink: #16150f;
    --muted: #5f5d55;
    --subtle: #8a877d;
    --faint: #a8a598;
    --body-2: #4a4840;
    --cream: #fffcf5;
    --stone: #f5f4ef;
    --stone-2: #ebe9e1;
    --violet: #5b3df5;
    --violet-hover: #3f24c9;
    --lavender: #ece8ff;
    --lavender-2: #f7f5ff;
    --lime: #d8f26a;
    --lime-ink: #3d4a0a;
    --peach: #ffe3d3;
    --peach-2: #fff4ec;
    --peach-ink: #5c4a40;
    --orange-ink: #c2410c;
    --ok-bg: #e2f3e7;
    --ok: #1f6b3d;
    --warn-bg: #fbf0d9;
    --warn: #8a5a00;
    --bad-bg: #fbeadf;
    --bad: #9a3b1c;
    --line-1: rgba(22, 21, 15, .08);
    --line-2: rgba(22, 21, 15, .1);
    --line-3: rgba(22, 21, 15, .12);
    --sans: 'Schibsted Grotesk', system-ui, sans-serif;
    --mono: 'Geist Mono', ui-monospace, monospace;
    --stripes-dark: repeating-linear-gradient(135deg, var(--ink) 0 4px, var(--stone) 4px 8px);
}

* {box-sizing: border-box}
html {scroll-behavior: smooth}
body {margin: 0;font-family: var(--sans);color: var(--ink);background: var(--cream);-webkit-font-smoothing: antialiased}
a {color: var(--violet);text-decoration: none}
a:hover {color: var(--violet-hover)}
button, input {font: inherit}
[hidden] {display: none !important}
h1, h2, h3, p {margin: 0}

.page {min-height: 100vh;overflow-x: clip;background: linear-gradient(180deg, #fffcf5 0%, #f7f4ff 30%, #fffcf5 50%, #f2faf5 72%, #fff6ee 100%)}
.container {max-width: 1200px;margin: 0 auto;padding: 0 24px}
.section {padding: 100px 0;scroll-margin-top: 64px}
.mono {font-family: var(--mono)}

.eyebrow {font: 500 12px var(--mono);letter-spacing: .08em;color: var(--violet);text-transform: uppercase;margin-bottom: 16px}
.h2 {font-size: clamp(32px, 4.4vw, 56px);line-height: 1.05;letter-spacing: -.03em;font-weight: 800;text-wrap: balance}
.label {font: 500 11px var(--mono);color: var(--subtle);text-transform: uppercase}

/* buttons */
.btn {display: inline-block;border: 0;cursor: pointer;border-radius: 999px;font-weight: 600;font-size: 15px;padding: 12px 20px;white-space: nowrap}
.btn-primary {background: var(--violet);color: #fff}
.btn-primary:hover {background: var(--violet-hover);color: #fff}
.btn-primary:disabled {opacity: .7;cursor: default}

/* logo */
.logo {display: flex;align-items: center;gap: 10px;font-weight: 800;font-size: 19px;letter-spacing: -.02em;color: var(--ink)}
.logo:hover {color: var(--ink)}
.logo-mark {width: 24px;height: 24px;border-radius: 6px;background: var(--stripes-dark);border: 1.5px solid var(--ink);flex: none}

/* 1. nav */
.nav {position: sticky;top: 0;z-index: 20;background: rgba(255, 252, 245, .88);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);border-bottom: 1px solid var(--line-1)}
.nav-in {max-width: 1200px;margin: 0 auto;padding: 14px 24px;display: flex;align-items: center;gap: 32px}
.nav-links {display: flex;gap: 26px;flex: 1;font-size: 14.5px;font-weight: 500}
.nav-links a, .nav-signin {color: var(--ink)}
.nav-links a:hover, .nav-signin:hover {color: var(--violet)}
.nav-right {display: flex;gap: 10px;align-items: center}
.nav-signin {font-size: 14.5px;font-weight: 500;padding: 10px 12px}
.nav-cta {font-size: 14.5px;padding: 10px 18px}
.nav-burger {display: none;flex-direction: column;justify-content: center;align-items: center;gap: 5px;width: 38px;height: 38px;border: 1px solid var(--line-3);border-radius: 10px;background: #fff;cursor: pointer;padding: 0}
.nav-burger span {display: block;width: 16px;height: 2px;background: var(--ink);transition: transform .2s ease, opacity .2s ease}
.nav.menu-open .nav-burger span:nth-child(1) {transform: translateY(7px) rotate(45deg)}
.nav.menu-open .nav-burger span:nth-child(2) {opacity: 0}
.nav.menu-open .nav-burger span:nth-child(3) {transform: translateY(-7px) rotate(-45deg)}
.nav-mobile {display: none;flex-direction: column;position: absolute;top: 100%;left: 0;right: 0;background: var(--cream);border-bottom: 1px solid var(--line-1);padding: 8px 24px 20px;box-shadow: 0 16px 28px rgba(22, 21, 15, .1)}
.nav-mobile a {padding: 13px 4px;font-size: 15px;font-weight: 500;color: var(--ink);border-bottom: 1px solid var(--line-1)}
.nav-mobile a.btn {text-align: center;margin-top: 14px;border-bottom: 0;color: #fff}
.nav.menu-open .nav-mobile {display: flex}

/* 2. hero */
.hero {position: relative;overflow: hidden;padding: 72px 24px 0}
.hero-glow {position: absolute;inset: 0;pointer-events: none;background: radial-gradient(50% 45% at 28% 0%, rgba(91, 61, 245, .16), transparent 70%), radial-gradient(45% 40% at 76% 4%, rgba(255, 160, 110, .24), transparent 70%)}
.hero-in {position: relative;max-width: 1200px;margin: 0 auto;display: flex;flex-direction: column;align-items: center;text-align: center;gap: 22px}
.badge {display: inline-flex;align-items: center;gap: 8px;font-size: 13px;font-weight: 500;padding: 6px 14px 6px 8px;border-radius: 999px;background: #fff;border: 1px solid var(--line-2)}
.badge-chip {background: var(--violet);color: #fff;font-size: 11px;font-weight: 700;padding: 3px 8px;border-radius: 999px}
.hero h1 {font-size: clamp(40px, 6.4vw, 80px);line-height: 1.02;letter-spacing: -.035em;font-weight: 800;max-width: 980px;text-wrap: balance}
.hero-sub {font-size: clamp(17px, 1.6vw, 20px);line-height: 1.5;color: var(--muted);max-width: 640px;text-wrap: pretty}
.reassure {display: flex;gap: 10px 22px;flex-wrap: wrap;justify-content: center;font-size: 13.5px;color: var(--muted)}

/* email capture (hero + final CTA) */
.email-form {display: flex;gap: 8px;background: #fff;border: 1px solid var(--line-3);border-radius: 999px;padding: 6px;width: 100%;max-width: 460px;box-shadow: 0 8px 30px rgba(22, 21, 15, .06)}
.email-form input {flex: 1;min-width: 0;border: 0;outline: 0;background: transparent;font-size: 15px;padding: 0 14px;color: var(--ink)}
.email-form:focus-within {border-color: rgba(91, 61, 245, .45)}
.form-ok {font-size: 14px;color: #1f8a4c;font-weight: 500}
.form-err {font-size: 14px;color: var(--bad);font-weight: 500}

/* product preview */
.preview {width: 100%;max-width: 1080px;margin-top: 28px;-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);mask-image: linear-gradient(180deg, #000 70%, transparent)}
.hero-crop {height: 480px;overflow: hidden;position: relative}
.stack-wrap {position: relative;padding-top: 44px}
.stack-wrap img {width: 100%;display: block;border-radius: 12px;border: 1px solid var(--line-1);background: #fff}
.stack-back2 {position: absolute;top: 0;left: 50%;transform: translateX(-50%) scale(.94)}
.stack-back1 {position: absolute;top: 22px;left: 50%;transform: translateX(-50%) scale(.97)}
.stack-front {position: relative;z-index: 2}

/* 3. ATS marquee */
.marquee {padding-top: 28px;overflow: hidden}
.marquee-in {display: flex;align-items: center;gap: 28px}
.marquee-label {flex: none;padding-left: 24px;font: 500 11.5px var(--mono);letter-spacing: .08em;color: var(--subtle);text-transform: uppercase}
.marquee-view {flex: 1;overflow: hidden;-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee-track {display: flex;width: max-content;animation: zmarquee 32s linear infinite;font-size: 20px;font-weight: 700;letter-spacing: -.01em;color: var(--faint)}
.marquee-track ul {display: flex;gap: 56px;margin: 0;padding: 0 56px 0 0;list-style: none}
.marquee-track li {white-space: nowrap}
@keyframes zmarquee {from {transform: translateX(0)} to {transform: translateX(-50%)}}
@keyframes zpulse {0%, 100% {opacity: 1} 50% {opacity: .35}}

/* 4. problem */
#product {padding: 110px 0 90px}
.problem-h2 {max-width: 950px}
.problem-h2 span {color: var(--faint)}
.problem-body {margin-top: 24px;font-size: 18px;line-height: 1.55;color: var(--muted);max-width: 620px;text-wrap: pretty}
.stats {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));gap: 1px;background: var(--line-2);border: 1px solid var(--line-2);border-radius: 16px;overflow: hidden;margin-top: 56px}
.stat {background: #fff;padding: 32px 28px}
.stat-num {font-size: clamp(48px, 5vw, 68px);font-weight: 800;letter-spacing: -.04em;line-height: 1}
.stat-num small {font-size: .5em;letter-spacing: 0}
.stat-label {margin-top: 12px;font-weight: 600;font-size: 16px}
.stat-cta {background: var(--violet);color: #fff;display: flex;flex-direction: column;justify-content: space-between;gap: 20px}
.stat-cta p {font-size: 22px;font-weight: 700;line-height: 1.2;letter-spacing: -.01em}
.stat-cta a {color: #fff;font-weight: 600;font-size: 15px}
.stat-cta a:hover {color: var(--lime)}
.source {margin-top: 12px;font: 400 12px var(--mono);color: var(--subtle)}

/* 5. workflow */
.wf-head {display: flex;justify-content: space-between;align-items: flex-end;gap: 24px;flex-wrap: wrap;margin-bottom: 44px}
.wf-head .h2 {max-width: 720px}
.wf-note {font-size: 17px;line-height: 1.55;color: var(--muted);max-width: 380px}
.wf-tabs {display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 8px;margin-bottom: 20px}
.wf-tab {position: relative;overflow: hidden;display: block;text-align: left;cursor: pointer;padding: 16px 18px 18px;border-radius: 12px;background: transparent;border: 1px solid rgba(91, 61, 245, .18);color: var(--muted)}
.wf-tab:hover {background: rgba(255, 255, 255, .6)}
.wf-tab:focus-visible {outline: 2px solid var(--violet);outline-offset: 2px}
.wf-num {font: 500 12px var(--mono);color: var(--subtle)}
.wf-label {display: block;margin-top: 6px;font-weight: 700;font-size: 16px}
.wf-bar {position: absolute;left: 0;bottom: 0;height: 3px;width: 0;background: var(--violet)}
.wf-tab[aria-selected="true"] {background: #fff;color: var(--ink)}
.wf-tab[aria-selected="true"] .wf-num {color: var(--violet)}
.wf-panel {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));gap: 20px;background: #fff;border: 1px solid rgba(91, 61, 245, .15);border-radius: 18px;padding: clamp(20px, 3vw, 40px);min-height: 420px}
.wf-copy {display: flex;flex-direction: column;justify-content: center;gap: 16px;max-width: 420px}
.wf-step {font: 500 12px var(--mono);color: var(--violet)}
.wf-copy h3 {font-size: 32px;letter-spacing: -.02em;line-height: 1.1}
.wf-copy p {font-size: 16.5px;line-height: 1.6;color: var(--body-2)}
.wf-visual {background: var(--lavender-2);border-radius: 14px;padding: 22px;display: flex;flex-direction: column;gap: 12px;justify-content: center}
.vbox {background: #fff;border: 1px solid var(--line-2);border-radius: 10px;padding: 12px 14px;font-size: 14px;line-height: 1.5}
.vrow {display: flex;gap: 12px;align-items: center}
.vrow-main {flex: 1;min-width: 0}
.vrow-title {font-weight: 600;font-size: 14px}
.vrow-sub {font-size: 12.5px;color: var(--muted)}
.vjd {padding: 16px;line-height: 1.6;color: var(--muted)}
.vjd b {color: var(--ink)}
.pill-dark {align-self: flex-end;background: var(--ink);color: var(--stone);font-weight: 600;font-size: 14px;padding: 10px 16px;border-radius: 999px}
.vkey {width: 30px;height: 30px;flex: none;border-radius: 8px;background: var(--lavender);color: var(--violet);display: grid;place-items: center;font: 600 12px var(--mono)}
.vweight {font: 500 12px var(--mono);color: var(--muted)}
.vrank {font: 600 13px var(--mono);color: var(--subtle);width: 18px}
.vscore {font: 600 16px var(--mono)}
.vbar {height: 6px;border-radius: 3px;background: var(--stone-2);margin-top: 7px;overflow: hidden}
.vbar span {display: block;height: 100%;background: var(--violet)}
.verdict {background: #e6f4ea;color: var(--ok);border-radius: 10px;padding: 12px 14px;font-weight: 600;font-size: 14px}
.vtag {margin-top: 6px;font: 500 11px var(--mono);color: var(--violet)}
.vdecide {padding: 16px;display: flex;flex-direction: column;gap: 12px}
.vdecide-top {display: flex;justify-content: space-between;font-weight: 600}
.vdecide-btns {display: flex;gap: 8px;flex-wrap: wrap}
.vdecide-btns span {flex: 1;text-align: center;font-weight: 600;font-size: 14px;padding: 11px;border-radius: 8px;border: 1px solid rgba(22, 21, 15, .2)}
.vdecide-btns .go {background: var(--ink);color: var(--stone);border-color: var(--ink)}
.vdecide-note {font-size: 12.5px;color: var(--muted)}

/* 6. where it fits */
.fit {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));gap: 56px;align-items: center}
.fit .h2 {font-size: clamp(32px, 4vw, 50px)}
.points {display: flex;flex-direction: column;gap: 18px;margin-top: 32px}
.point {display: flex;gap: 14px}
.point-n {font: 600 13px var(--mono);color: var(--violet);padding-top: 2px}
.point-t {font-weight: 700;font-size: 17px}
.point-d {color: var(--muted);font-size: 15.5px;line-height: 1.5;margin-top: 3px}
.stack {display: flex;flex-direction: column;gap: 10px}
.stk-recruiters {background: var(--lime);border-radius: 14px;padding: 22px 24px;display: flex;justify-content: space-between;align-items: center;gap: 12px}
.stk-recruiters .label {color: var(--lime-ink)}
.stk-title {font-weight: 700;font-size: 18px;margin-top: 4px}
.stk-chip {font: 600 13px var(--mono);background: var(--ink);color: var(--lime);padding: 6px 10px;border-radius: 6px}
.stk-arrow {display: flex;justify-content: center;gap: 40px;font: 500 13px var(--mono);color: var(--violet)}
.stk-zibra {background-color: var(--violet);background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 10px, transparent 10px 20px);color: #fff;border-radius: 14px;padding: 24px}
.stk-zibra-top {display: flex;justify-content: space-between;align-items: center;gap: 10px;flex-wrap: wrap}
.stk-zibra-title {font-weight: 800;font-size: 22px;letter-spacing: -.01em}
.stk-live {display: flex;align-items: center;gap: 6px;font: 500 12px var(--mono)}
.stk-live span {width: 7px;height: 7px;border-radius: 50%;background: var(--lime);animation: zpulse 1.6s infinite}
.stk-tiles {display: grid;grid-template-columns: repeat(4, 1fr);gap: 6px;margin-top: 16px}
.stk-tiles div {background: rgba(255, 255, 255, .14);border-radius: 8px;padding: 10px 6px;text-align: center;font-size: 13px;font-weight: 600}
.stk-ats {background: #fff;border: 1px solid var(--line-3);border-radius: 14px;padding: 20px 24px}
.chips {display: flex;gap: 8px;flex-wrap: wrap;margin: 12px 0 0;padding: 0;list-style: none}
.chips li {font-size: 13.5px;font-weight: 600;padding: 6px 11px;border-radius: 999px;background: var(--stone)}

/* 7. featured capabilities */
.caps-h2 {margin-bottom: 48px;max-width: 860px}
.caps {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));gap: 20px}
.cap {background: #fff;border-radius: 20px;padding: 32px;display: flex;flex-direction: column;gap: 24px}
.cap-eyebrow {font: 600 13px var(--mono);color: var(--violet)}
.cap h3 {margin-top: 10px;font-size: 28px;letter-spacing: -.02em;line-height: 1.15}
.cap-body {margin-top: 12px;color: var(--muted);font-size: 16px;line-height: 1.55}
.cap-stats {display: grid;grid-template-columns: 1fr 1fr;gap: 12px;border-top: 1px solid var(--line-2);padding-top: 22px;margin-top: auto}
.cap-num {font-size: 40px;font-weight: 800;letter-spacing: -.03em}
.cap-num small {font-size: .5em}
.cap-stat-label {font-size: 14px;color: var(--muted)}
.signals {background: var(--stone);border-radius: 14px;padding: 16px;display: flex;flex-direction: column;gap: 8px}
.signals-hd {display: flex;justify-content: space-between;font-size: 13px;font-weight: 600;padding: 0 2px 4px}
.signals-hd span:last-child {font-family: var(--mono);color: var(--subtle);font-weight: 500}
.signal {background: #fff;border-radius: 9px;padding: 10px 12px;display: flex;gap: 10px;align-items: center}
.signal-icon {width: 22px;height: 22px;flex: none;border-radius: 6px;display: grid;place-items: center;font-weight: 700;font-size: 12px}
.signal-icon.ok {background: var(--ok-bg);color: var(--ok)}
.signal-icon.warn {background: var(--warn-bg);color: var(--warn)}
.signal-icon.bad {background: var(--bad-bg);color: var(--bad)}
.signal-t {font-weight: 600;font-size: 13.5px}
.signal-t span {font-weight: 400;color: var(--subtle)}
.signal-d {font-size: 12.5px;color: var(--muted)}
.cap-peach {background: var(--peach)}
.cap-peach .cap-eyebrow {color: var(--orange-ink)}
.cap-peach .cap-body, .cap-peach .cap-stat-label {color: var(--peach-ink)}
.brief {background: #fff;border: 1px solid var(--line-1);border-radius: 14px;padding: 16px;display: flex;flex-direction: column;gap: 10px}
.brief-who {display: flex;align-items: center;gap: 10px}
.avatar {flex: none;border-radius: 50%;display: grid;place-items: center;font-weight: 700}
.brief-who .avatar {width: 34px;height: 34px;font-size: 12px;background: var(--lime)}
.brief-name {font-weight: 600;font-size: 14.5px}
.brief-id {font-size: 12px;color: var(--subtle)}
.tags {display: flex;gap: 6px;flex-wrap: wrap}
.tag {font-size: 12.5px;padding: 5px 10px;border-radius: 999px}
.tag.ok {background: var(--ok-bg);color: var(--ok)}
.tag.warn {background: var(--warn-bg);color: var(--warn)}
.brief-q {background: var(--peach-2);border-radius: 9px;padding: 11px 13px;font-size: 13.5px;line-height: 1.5}

/* 8. trust */
#trust {padding: 90px 0}
.trust {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));gap: 32px;align-items: start}
.trust .h2 {font-size: clamp(28px, 3vw, 38px);line-height: 1.1;letter-spacing: -.025em}
.trust-item {border-top: 2px solid var(--ink);padding-top: 18px}
.trust-item h3 {font-weight: 700;font-size: 18px}
.trust-item p {margin-top: 8px;color: var(--muted);font-size: 15px;line-height: 1.55}

/* 9. pilot / pricing */
#pricing {padding: 0 0 100px}
.pilot {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));border-radius: 22px;overflow: hidden;border: 1px solid var(--line-3)}
.pilot-l {background-color: var(--violet);background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 14px, transparent 14px 28px);color: #fff;padding: clamp(28px, 4vw, 48px);display: flex;flex-direction: column;gap: 18px}
.pilot-chip {align-self: flex-start;font: 600 12px var(--mono);background: var(--lime);color: var(--ink);padding: 5px 10px;border-radius: 6px}
.pilot-l .h2 {font-size: clamp(30px, 3.6vw, 46px)}
.pilot-l p {font-size: 17px;line-height: 1.55;color: #e4defe}
.pilot-btn {align-self: flex-start;margin-top: 8px;background: #fff;color: var(--ink);font-weight: 700;font-size: 15.5px;padding: 14px 22px;border-radius: 999px}
.pilot-btn:hover {background: var(--lime);color: var(--ink)}
.pilot-r {background: #fff;padding: clamp(28px, 4vw, 48px);display: flex;flex-direction: column;gap: 14px;justify-content: center}
.pilot-r .label {font-size: 12px;margin-bottom: 4px}
.pilot-r ul {margin: 0;padding: 0;list-style: none;display: flex;flex-direction: column;gap: 14px}
.pilot-r li {display: flex;gap: 12px;font-size: 16.5px}
.pilot-r li::before {content: "✓";color: var(--violet);font-weight: 700}

/* 10. FAQ */
#faq {padding: 90px 0}
.faq-grid {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);gap: 48px;align-items: start}
.faq-grid .h2 {font-size: clamp(30px, 3.4vw, 44px);max-width: 380px}
.faq {border-bottom: 1px solid var(--line-3)}
.faq summary {list-style: none;cursor: pointer;display: flex;justify-content: space-between;align-items: center;gap: 16px;padding: 22px 0;font-weight: 600;font-size: 18px}
.faq summary::-webkit-details-marker {display: none}
.faq summary::after {content: "+";font: 500 20px var(--mono);color: var(--violet);flex: none}
.faq[open] summary::after {content: "−"}
.faq summary:hover {color: var(--violet)}
.faq p {margin: 0 0 22px;color: var(--muted);font-size: 16px;line-height: 1.6;max-width: 680px}

/* 11. final CTA */
#demo {padding: 24px 0}
.cta-card {background-color: var(--lime);background-image: repeating-linear-gradient(135deg, rgba(22, 21, 15, .04) 0 14px, transparent 14px 28px);border-radius: 24px;padding: clamp(40px, 6vw, 80px);display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));gap: 36px;align-items: center}
.cta-card .h2 {font-size: clamp(34px, 4.6vw, 58px);line-height: 1.02;letter-spacing: -.035em}
.cta-card p {margin-top: 18px;font-size: 17px;color: var(--lime-ink);line-height: 1.55;max-width: 480px}
.cta-form {display: flex;flex-direction: column;gap: 12px;max-width: 440px;width: 100%;justify-self: end}
.cta-form .email-form {border-color: transparent;box-shadow: none}
.cta-form .cta-note {margin: 0;font-size: 13.5px;color: var(--lime-ink);padding-left: 16px}
.cta-form .form-ok, .cta-form .form-err {padding-left: 16px}
.cta-form .form-ok {color: var(--ok)}

/* 12. footer */
.footer {padding: 60px 0 36px}
.footer-top {display: grid;grid-template-columns: 2fr 1fr 1fr 1.6fr;gap: 32px}
.footer-tagline {margin-top: 12px;color: var(--muted);font-size: 14.5px;line-height: 1.55;max-width: 320px}
.footer-col {display: flex;flex-direction: column;gap: 10px;font-size: 14.5px}
.footer-col h3 {font: 500 11.5px var(--mono);color: var(--subtle);text-transform: uppercase;margin-bottom: 4px}
.footer-col a {color: var(--ink)}
.footer-col a:hover {color: var(--violet)}
.footer-col .email-form {box-shadow: none;max-width: 360px}
.footer-col .btn {font-size: 14px;padding: 10px 16px}
.footer-col .form-ok, .footer-col .form-err {font-size: 13.5px}
.footer-bottom {margin-top: 40px;padding-top: 20px;border-top: 1px solid var(--line-2);display: flex;justify-content: space-between;gap: 16px;flex-wrap: wrap;font-size: 13px;color: var(--subtle)}
.footer-bottom nav {display: flex;gap: 18px}
.footer-bottom a {color: var(--subtle)}
.footer-bottom a:hover {color: var(--ink)}

/* 13. Ask Zibra */
.ask {position: fixed;right: 20px;bottom: 20px;z-index: 30;display: flex;flex-direction: column;align-items: flex-end;gap: 10px}
.ask-panel {width: 300px;max-width: calc(100vw - 40px);background: #fff;border: 1px solid var(--line-3);border-radius: 16px;box-shadow: 0 20px 50px rgba(22, 21, 15, .18);overflow: hidden}
.ask-hd {background: var(--violet);color: #fff;padding: 14px 16px;font-weight: 700;font-size: 15px}
.ask-body {padding: 14px 16px;display: flex;flex-direction: column;gap: 8px}
.ask-body p {font-size: 14px;color: var(--muted);margin-bottom: 4px}
.ask-body a {font-size: 13.5px;padding: 9px 12px;border-radius: 10px;background: var(--stone);color: var(--ink)}
.ask-body a:hover {background: var(--lavender);color: var(--ink)}
.ask-btn {display: flex;align-items: center;gap: 8px;border: 0;cursor: pointer;background: var(--violet);color: #fff;font-weight: 600;font-size: 14.5px;padding: 13px 18px;border-radius: 999px;box-shadow: 0 10px 30px rgba(91, 61, 245, .35)}
.ask-btn:hover {background: var(--violet-hover)}
.ask-btn span {width: 8px;height: 8px;border-radius: 50%;background: var(--lime)}

/* responsive */
@media (max-width: 960px) {
    .nav-links, .nav-signin, .nav-cta {display: none}
    .nav-in {justify-content: space-between}
    .nav-burger {display: flex}
    .faq-grid {grid-template-columns: 1fr;gap: 24px}
    .hero-crop {height: auto}
    .stack-wrap {padding-top: 24px}
    .footer-top {grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px) {
    .section {padding: 72px 0}
    #product {padding: 80px 0 64px}
    #trust, #faq {padding: 64px 0}
    #pricing {padding-bottom: 72px}
    .hero {padding-top: 48px}
    .marquee-in {flex-direction: column;align-items: stretch;gap: 14px}
    .marquee-label {padding: 0 24px;text-align: center}
    .stk-arrow {gap: 24px}
    .cap {padding: 24px}
    .cta-card {padding: 36px 20px}
    .cta-form .cta-note {padding-left: 4px}
    .footer-top {grid-template-columns: 1fr}
    .ask {right: 16px;bottom: 16px}
}
@media (max-width: 480px) {
    .stk-tiles {grid-template-columns: 1fr 1fr}
    .email-form .btn {padding: 12px 16px}
}
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto}
    .marquee-track {animation: none}
    .stk-live span {animation: none}
}