.container {
    max-width: 1056px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
.site-logo img { height: 32px; width: auto; }
.site-nav { display: flex; gap: var(--space-5); align-items: center; }
/* Tekst-links in nav: zwart, hover oranje. .btn class wordt expliciet
   overgeslagen zodat de primaire knop z'n eigen wit-op-oranje styling
   behoudt (zie .btn in components.css). */
.site-nav a:not(.btn) {
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--motion-fast) var(--easing-out);
}
.site-nav a:not(.btn):hover { color: var(--color-orange); }
/* Hover op .btn in nav: tekst BLIJFT wit, achtergrond gaat naar
   donkerder oranje (--color-orange-hover). Dat staat al in .btn:hover
   in components.css — we moeten alleen voorkomen dat .site-nav-rules
   het overschrijven. */

/* === HERO ===
   Mobile-first, in de hoogte werken. Hero vult ~100svh op mobile zodat
   het direct alle aandacht trekt. Op desktop zakt het terug naar
   natuurlijke hoogte met max-width op de chat-card. */

.hero {
    min-height: 100svh;
    min-height: 100vh; /* fallback */
    padding: var(--space-5) 0 var(--space-6);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* === Zwevende achtergrond-invoices ===
   24 invoices door elkaar, lage opacity, ademen + zacht driften.
   Wrapper-div doet positie + animatie; SVG erin doet de tekening. */
.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    color: var(--color-text);
}
.hero-bg-invoice {
    position: absolute;
    width: 80px;
    height: auto;
    color: inherit;
    opacity: 0.035;
    will-change: transform;
}
.hero-bg-invoice svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Posities + animaties — bewust verspreid, soms overlappend */
.ifloat-1  { top:  4%; left:  2%; animation: ifloat-a 22s ease-in-out infinite; }
.ifloat-2  { top:  8%; right: 3%; animation: ifloat-b 26s ease-in-out infinite; }
.ifloat-3  { top: 14%; left: 22%; animation: ifloat-c 24s ease-in-out infinite; animation-delay: -3s; }
.ifloat-4  { top: 18%; right:24%; animation: ifloat-d 28s ease-in-out infinite; animation-delay: -7s; }
.ifloat-5  { top: 24%; left:  9%; animation: ifloat-e 30s ease-in-out infinite; animation-delay: -12s; }
.ifloat-6  { top: 28%; right:11%; animation: ifloat-f 26s ease-in-out infinite; animation-delay: -2s; }
.ifloat-7  { top: 33%; left: 30%; animation: ifloat-a 32s ease-in-out infinite; animation-delay: -15s; }
.ifloat-8  { top: 36%; right:32%; animation: ifloat-c 28s ease-in-out infinite; animation-delay: -8s; }
.ifloat-9  { top: 40%; left:  4%; animation: ifloat-b 24s ease-in-out infinite; animation-delay: -18s; }
.ifloat-10 { top: 44%; right: 6%; animation: ifloat-d 30s ease-in-out infinite; animation-delay: -5s; }
.ifloat-11 { top: 48%; left: 18%; animation: ifloat-e 26s ease-in-out infinite; animation-delay: -10s; }
.ifloat-12 { top: 52%; right:20%; animation: ifloat-f 32s ease-in-out infinite; animation-delay: -16s; }
.ifloat-13 { top: 56%; left: 38%; animation: ifloat-a 28s ease-in-out infinite; animation-delay: -4s; }
.ifloat-14 { top: 58%; right:38%; animation: ifloat-c 22s ease-in-out infinite; animation-delay: -11s; }
.ifloat-15 { top: 62%; left:  8%; animation: ifloat-d 26s ease-in-out infinite; animation-delay: -6s; }
.ifloat-16 { top: 64%; right:10%; animation: ifloat-b 30s ease-in-out infinite; animation-delay: -13s; }
.ifloat-17 { top: 70%; left: 25%; animation: ifloat-f 24s ease-in-out infinite; animation-delay: -1s; }
.ifloat-18 { top: 72%; right:28%; animation: ifloat-e 28s ease-in-out infinite; animation-delay: -9s; }
.ifloat-19 { top: 78%; left:  3%; animation: ifloat-c 30s ease-in-out infinite; animation-delay: -14s; }
.ifloat-20 { top: 80%; right: 5%; animation: ifloat-a 26s ease-in-out infinite; animation-delay: -7s; }
.ifloat-21 { top: 86%; left: 18%; animation: ifloat-d 24s ease-in-out infinite; animation-delay: -3s; }
.ifloat-22 { top: 88%; right:22%; animation: ifloat-b 28s ease-in-out infinite; animation-delay: -17s; }
.ifloat-23 { top: 92%; left: 36%; animation: ifloat-f 32s ease-in-out infinite; animation-delay: -10s; }
.ifloat-24 { top: 94%; right:36%; animation: ifloat-e 26s ease-in-out infinite; animation-delay: -5s; }

@media (max-width: 720px) {
    /* Op mobiel houden we ~12 zichtbaar zodat de hero rustig blijft */
    .ifloat-3, .ifloat-4, .ifloat-7, .ifloat-8,
    .ifloat-13, .ifloat-14, .ifloat-17, .ifloat-18,
    .ifloat-23, .ifloat-24 { display: none; }
    .hero-bg-invoice { width: 60px; opacity: 0.04; }
}

/* 6 verschillende ademhalings-keyframes met combinaties van translate + lichte rotatie-drift */
@keyframes ifloat-a {
    0%, 100% { transform: rotate(-8deg) translate(0, 0); }
    50%      { transform: rotate(-6deg) translate(4px, -14px); }
}
@keyframes ifloat-b {
    0%, 100% { transform: rotate(7deg) translate(0, 0); }
    50%      { transform: rotate(9deg) translate(-5px, -12px); }
}
@keyframes ifloat-c {
    0%, 100% { transform: rotate(13deg) translate(0, 0); }
    50%      { transform: rotate(11deg) translate(6px, -16px); }
}
@keyframes ifloat-d {
    0%, 100% { transform: rotate(-5deg) translate(0, 0); }
    50%      { transform: rotate(-7deg) translate(-3px, -10px); }
}
@keyframes ifloat-e {
    0%, 100% { transform: rotate(3deg) translate(0, 0); }
    50%      { transform: rotate(5deg) translate(8px, -8px); }
}
@keyframes ifloat-f {
    0%, 100% { transform: rotate(-12deg) translate(0, 0); }
    50%      { transform: rotate(-10deg) translate(-7px, -13px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-invoice { animation: none; }
}

.hero-stack { position: relative; z-index: 1; }

.hero-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: center;
    width: 100%;
}

.hero-title {
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hero-title-main {
    font-size: clamp(2rem, 8vw, 3.5rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero-title-sub {
    font-size: clamp(1rem, 4vw, 1.35rem);
    color: var(--color-text-muted);
    font-weight: 500;
    line-height: 1.35;
}

/* === PHONE-FRAME === Replica van de echte Pinflo-app (mobile-first) === */

.phone-frame {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    padding: 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.phone-screen {
    display: flex;
    flex-direction: column;
    padding: 14px 18px 18px;
    gap: 10px;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

.phone-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
}
.phone-brand {
    font-family: var(--font-display, 'Ahroni', system-ui, sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-orange);
}
.phone-brand-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: #f3f3f3;
    color: var(--color-text-muted);
    padding: 2px 8px;
    border-radius: 4px;
}

/* === ORB (kopie van de échte app-orb) === */

.demo-orb-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.demo-orb {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease;
}
.demo-orb-inner {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--color-orange) 0%, #d8651e 70%, #B8421A 100%);
    box-shadow: 0 12px 32px rgba(255, 118, 54, 0.30);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.demo-orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    pointer-events: none;
}

/* IDLE — zachte ademhaling */
.demo-orb-idle .demo-orb-inner {
    animation: demo-orb-breathe 3.2s ease-in-out infinite;
}
@keyframes demo-orb-breathe {
    0%, 100% { transform: scale(1);    opacity: 0.92; }
    50%      { transform: scale(1.04); opacity: 1; }
}

/* LISTENING — snellere pulse + ring-glow */
.demo-orb-listening .demo-orb-inner {
    animation: demo-orb-pulse 0.8s ease-in-out infinite;
}
.demo-orb-listening .demo-orb-ring {
    animation: demo-orb-glow 0.8s ease-in-out infinite;
}
@keyframes demo-orb-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
@keyframes demo-orb-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 118, 54, 0.55); }
    50%      { box-shadow: 0 0 0 18px rgba(255, 118, 54, 0); }
}

/* THINKING — spinning ring */
.demo-orb-thinking .demo-orb-ring {
    border-top-color: var(--color-orange);
    border-right-color: var(--color-orange);
    animation: demo-orb-spin 1.1s linear infinite;
}
@keyframes demo-orb-spin {
    to { transform: rotate(360deg); }
}

/* SPEAKING — softere pulse */
.demo-orb-speaking .demo-orb-inner {
    animation: demo-orb-speak 0.55s ease-in-out infinite;
}
@keyframes demo-orb-speak {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* READY — groene success-state */
.demo-orb-ready .demo-orb-inner {
    background: radial-gradient(circle at 30% 30%, #34D399 0%, #10B981 70%, #047857 100%);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.35);
}

.demo-orb-label {
    font-family: var(--font-display, 'Ahroni', system-ui, sans-serif);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 700;
}
.demo-orb-status {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-align: center;
    margin: 0;
    min-height: 1.2em;
    transition: opacity 0.25s ease;
}
.demo-orb-status.is-fading { opacity: 0; }

/* Pill-knop, exact zoals in de app */
.demo-pill {
    width: 100%;
    min-height: 44px;
    background: var(--color-orange);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: default;
    transition: transform 0.2s;
    box-shadow: 0 6px 16px rgba(255, 118, 54, 0.25);
}
.demo-pill:active { transform: scale(0.98); }

/* === CHAT === */

.demo-chat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 395px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
    margin-top: 0;
    overflow: hidden;
}

/* Garanderen dat de verticale afstand tussen elke twee zichtbare bubbels
   exact 6px is, ongeacht type (user/daphne/typing/receipt) of richting-
   wissel (links↔rechts). Flex `gap: 6px` doet het werk over display:none-
   children heen; we reseten elke bubble expliciet op margin: 0 zodat een
   onverwachte browser- of reset-stijl geen extra ruimte kan toevoegen
   tussen specifieke alignment-wisseling (rechts-daphne ↔ links-user). */
.chat-bubble.is-visible,
.chat-typing.is-visible,
.chat-receipt.is-visible {
    margin-top: 0;
    margin-bottom: 0;
}

/* Alle nog-niet-zichtbare bubbels uit de layout halen — anders zien we
   "ghost-gaps" tussen verschenen bubbels door de flex-gap die ook over
   onzichtbare children loopt. Bij is-visible krijgen ze hun juiste display
   terug + een korte chat-in animatie zodat het verschijnen vloeiend voelt.
   Géén animation-fill-mode 'both' — dat hield typing-dots zichtbaar zelfs
   na het wegnemen van .is-visible omdat de end-state werd vastgehouden. */
.chat-bubble, .chat-typing, .chat-receipt {
    display: none;
    opacity: 0;
}
.chat-bubble.is-visible {
    display: block;
    opacity: 1;
    animation: chat-in 0.28s ease;
}
.chat-typing.is-visible {
    display: flex;
    opacity: 1;
    animation: chat-in 0.28s ease;
}
.chat-receipt.is-visible {
    display: flex;
    opacity: 1;
    animation: chat-in 0.28s ease;
}
@keyframes chat-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.35;
    word-wrap: break-word;
}

.bubble-user {
    background: var(--color-bg-soft);
    color: var(--color-text);
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.bubble-daphne {
    background: var(--color-orange);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.chat-typing {
    background: var(--color-orange);
    width: fit-content;
    padding: 12px 14px;
    border-radius: 16px;
    border-bottom-right-radius: 4px;
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    animation: typing-dot 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.chat-receipt {
    background: #ecfae9;
    color: #0a5d2c;
    padding: 12px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #b9e6b3;
}
.chat-receipt-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2a8c4a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
}
.chat-receipt-title {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
}
.chat-receipt-meta {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* Bubble verschijning is JS-gestuurd (zie main.js): elke step in
   SCRIPT toggelt de .is-visible class. Bij loop-reset worden ALLE
   classes weggehaald zodat de chat écht leeg is voor de nieuwe loop. */

/* === CTA === */
.hero-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    max-width: 360px;
}
.hero-cta .btn { width: 100%; }

/* Desktop: hero blijft compact, niet vol-scherm */
@media (min-width: 720px) {
    .hero {
        min-height: auto;
        padding: var(--space-7) 0;
    }
    .hero-stack {
        gap: var(--space-6);
    }
    .hero-cta {
        flex-direction: row;
        justify-content: center;
        max-width: none;
        width: auto;
    }
    .hero-cta .btn { width: auto; }
}

/* Reduceer animatie voor users die motion uit hebben staan — script wordt
   niet uitgevoerd, dus tonen we de hele chat statisch zonder bubble-in. */
@media (prefers-reduced-motion: reduce) {
    .chat-bubble { display: block; }
    .chat-typing, .chat-receipt { display: flex; }
    .chat-bubble, .chat-typing, .chat-receipt,
    .daphne-orb-pulse, .daphne-dot {
        animation: none;
        opacity: 1;
    }
}

/* Padding-shorthand zou de horizontale padding van .container
   (waarmee .section vaak gecombineerd wordt) wegvegen — daarom
   alleen top/bottom expliciet. */
.section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.section-soft { background: var(--color-bg-soft); }
.section-title {
    text-align: center;
    margin-bottom: var(--space-6);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}
.feature {
    padding: var(--space-5);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.feature h3 {
    margin-bottom: var(--space-2);
    color: var(--color-orange);
}

/* === Drie stappen === */
.steps {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}
@media (min-width: 880px) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

.step {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: transform var(--motion-base) var(--easing-out),
                box-shadow var(--motion-base) var(--easing-out),
                border-color var(--motion-base) var(--easing-out);
}

.step:hover {
    transform: translateY(-3px);
    border-color: var(--color-orange);
    box-shadow: var(--shadow-lg);
}

.step:hover .step-number {
    background: var(--color-orange-hover);
    transform: scale(1.05);
}

/* Het oranje cijfer dat boven elke stap zit */
.step-number {
    position: absolute;
    top: -22px;
    left: var(--space-5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-orange);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: 0 6px 18px var(--color-orange-shadow);
    transition: background var(--motion-fast) var(--easing-out),
                transform var(--motion-fast) var(--easing-out);
}

.step-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: var(--leading-snug);
}

.step-text {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    font-size: var(--text-base);
}

.step-detail {
    margin: 0;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.step-quote {
    display: block;
    margin-top: 4px;
    color: var(--color-text);
    font-style: italic;
    line-height: var(--leading-snug);
}

/* === Reveal-on-scroll animatie ===
   Elementen met data-reveal starten onzichtbaar (translateY + opacity 0)
   en faden in zodra IntersectionObserver hen "ziet". Stagger via
   --reveal-delay zodat de drie cards na elkaar inkomen. */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--motion-slow) var(--easing-out),
                transform var(--motion-slow) var(--easing-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respect prefers-reduced-motion: instant zichtbaar, geen animatie */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .step:hover {
        transform: none;
    }
}

.site-footer {
    background: var(--color-bg-soft);
    color: var(--color-text);
    border-top: 3px solid var(--color-orange);
    padding: var(--space-9) 0 var(--space-6);
    margin-top: 0;
}
.site-footer a { color: var(--color-text-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--color-orange); }
/* CTA-knop in de footer houdt witte tekst (niet de footer-linkkleuren erven) */
.site-footer .btn,
.site-footer .btn:hover { color: var(--color-white); }

/* Getekende onderlijn onder de titel van leespagina's (contact/privacy/...) */
.content-page > h1:first-of-type {
    display: inline-block;
    background-image: linear-gradient(var(--color-orange), var(--color-orange));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 4px;
    padding-bottom: 8px;
    animation: site-underline 1s ease forwards .35s;
}
@keyframes site-underline { to { background-size: 100% 4px; } }
@media (prefers-reduced-motion: reduce) {
    .content-page > h1:first-of-type { animation: none; background-size: 100% 4px; }
}

/* Smooth scroll voor élke anchor-link (in-page #links) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.site-footer__top { display: grid; gap: var(--space-7); padding-bottom: var(--space-7); }
.site-footer__brand { max-width: 30ch; }
.site-footer__logo { display: inline-block; }
.site-footer__logo img { height: 30px; width: auto; }
.site-footer__tagline {
    margin: var(--space-4) 0 var(--space-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
}
.footer-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.footer-row small { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (min-width: 880px) {
    .site-footer__top { grid-template-columns: 1fr 2fr; gap: var(--space-9); align-items: start; }
}
.footer-links {
    display: flex;
    gap: var(--space-5);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* === Hero subnote === */
.hero-subnote {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* === Hero USPs — chip-stijl met groot cijfer + label === */
.hero-usps {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    width: 100%;
    max-width: 640px;
}
.hero-usps li {
    background: var(--color-orange-soft, rgba(255, 118, 54, 0.10));
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
.hero-usp-figure {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-orange);
    font-size: clamp(1.75rem, 7vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.hero-usp-text {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.3;
    max-width: 180px;
}
@media (min-width: 720px) {
    .hero-usps { gap: var(--space-3); }
    .hero-usp-text { font-size: var(--text-sm); }
}

/* Pricing-followup: kleine regel onder Early Adopter prijs */
.pricing-followup {
    margin: var(--space-2) 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Live Early Adopter-teller — schaarste zichtbaar maken. */
.pricing-counter {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-orange);
    background: rgba(255, 118, 54, 0.08);
    border: 1px solid rgba(255, 118, 54, 0.35);
    border-radius: 8px;
}
.pricing-card[data-ea-full="true"] .pricing-counter {
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--color-border);
}

/* === Section helpers (eyebrow / lead / foot) === */
.section-eyebrow {
    margin: 0 auto var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-orange);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.section-lead {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.section-foot {
    text-align: center;
    margin: var(--space-5) auto 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* === Sectie: Jouw eigen agent (5 cartoon-gezichten) === */
.section-ai-agent {
    padding: var(--space-7) 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.ai-agent-faces {
    list-style: none;
    padding: 0;
    margin: var(--space-5) auto 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
    max-width: 760px;
}
.ai-agent-faces li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.ai-agent-faces img,
.ai-agent-faces svg {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--color-orange);
    object-fit: cover;
    display: block;
}
.ai-agent-faces span {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
@media (max-width: 700px) {
    .ai-agent-faces { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); max-width: 380px; }
    .ai-agent-faces span { font-size: var(--text-xs); }
}

/* === Boekhoud-integraties marquee (continu rechts→links scrollen) ===
   Extra padding-top/bottom + min-height geven de marquee meer adem; titel
   en logo's krijgen visuele rust ten opzichte van de naburige secties. */
.section-integrations {
    padding: clamp(var(--space-8), 12vh, var(--space-10)) 0;
}
.section-integrations .section-title {
    margin-bottom: var(--space-7);
}
.section-integrations .section-foot {
    margin-top: var(--space-6);
}
.platform-marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.platform-marquee-track {
    display: flex;
    gap: var(--space-3);
    width: max-content;
    animation: pinflo-marquee 60s linear infinite;
}
.platform-marquee:hover .platform-marquee-track {
    animation-play-state: paused;
}
.platform-marquee-item {
    flex: 0 0 auto;
}
.platform-marquee-item .platform-tile {
    width: 180px;
    height: 140px;
    aspect-ratio: auto;
}
@media (min-width: 720px) {
    .platform-marquee-item .platform-tile {
        width: 220px;
        height: 160px;
    }
}
@keyframes pinflo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .platform-marquee-track { animation: none; }
    .platform-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
}
.platform-grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    max-width: 880px;
}
@media (min-width: 720px) {
    .platform-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
    .platform-grid { grid-template-columns: repeat(4, 1fr); }
}
.platform-tile {
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--motion-fast) var(--easing-out),
                box-shadow var(--motion-fast) var(--easing-out);
}
.platform-tile:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 4px 14px rgba(15, 14, 13, 0.06);
}
.platform-tile-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background: transparent;
}
.platform-tile-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;            /* uniforme hoogte zodat alle logo's op één lijn staan */
    padding: var(--space-2) var(--space-3);
}
/* Uniforme max-height: voorkomt dat het ene logo enorm groot, het andere klein staat.
   Werkt voor zowel SVG-wordmarks als echte logo-images uit /assets/images/logo/. */
.platform-tile-content svg,
.platform-tile-content .platform-logo-image {
    max-width: 100%;
    max-height: 36px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
}
.platform-tile-clean {
    /* Marketing-variant: GEEN frame — logo's staan vrij in de marquee.
       Witte achtergrond + border + shadow weg, focus volledig op het logo. */
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: var(--space-2);
}
.platform-tile-clean:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
}
.platform-tile-clean .platform-tile-content {
    padding: 0;
}
.platform-tile-status {
    margin-top: var(--space-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
}
.platform-tile-status.is-live { color: var(--color-success); }
.platform-tile-status.is-soon { color: var(--color-orange); }

/* === Pricing-toggle (segmented control) === */
.pricing-toggle {
    display: inline-flex;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 4px;
    margin: 0 auto var(--space-5);
    gap: 4px;
    /* center binnen container */
    display: flex;
    width: fit-content;
}
.pricing-toggle-btn {
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast) var(--easing-out),
                color var(--motion-fast) var(--easing-out);
}
.pricing-toggle-btn:hover:not(.is-active) {
    color: var(--color-text);
}
.pricing-toggle-btn.is-active {
    background: var(--color-orange);
    color: var(--color-white);
}

/* === Pricing-cards (zelfde regels als app/upgrade.html) === */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: 1080px;
    margin: 0 auto;
}
@media (min-width: 880px) {
    /* minmax(0, 1fr) houdt de drie kaarten exact even breed, ook bij brede inhoud. */
    .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}
/* Jaarlijks-besparing: doorgehaalde maandprijs + hint (overal geladen) */
.pricing-toggle-hint {
    text-align: center;
    margin: var(--space-3) auto var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.pricing-anchor {
    margin-right: var(--space-2);
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-size: var(--text-lg);
    font-weight: 400;
    vertical-align: middle;
    -webkit-text-stroke: 0;
}
.pricing-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: none;
}
.pricing-card:hover {
    box-shadow: none;
}
.pricing-card-featured {
    border-color: var(--color-orange);
    border-width: 2px;
}
.pricing-card-special {
    background: #fff;
    border-color: var(--color-border);
}
.pricing-eyebrow {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pricing-amount {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}
.pricing-currency { font-size: 1.5rem; vertical-align: top; margin-right: 4px; }
.pricing-period { font-size: 1rem; font-weight: 500; color: var(--color-text-muted); margin-left: 4px; }
.pricing-yearly {
    margin: var(--space-2) 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    flex: 1;
}
.pricing-features li {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.pricing-features li:first-child { border-top: 0; padding-top: 0; }
.pricing-cta {
    width: 100%;
    text-align: center;
}

/* === Fase 5 — homepage-finetuning === */

/* Inline accent in koppen ("Spraak tot factuur in 120 seconden") */
.accent-orange {
    color: var(--color-orange);
}

/* Hoe-sectie iets meer view-height zodat het ademt bij Daphne-uitleg */
#hoe {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

/* Last pricing tier (Early Adopter) is nu de dominant-oranje highlight.
   pricing-card-featured (Pro) blijft een subtielere border-highlight zodat
   "meest gekozen" niet ten onder gaat, maar de Early Adopter springt eruit. */
.pricing-card-special {
    background: var(--color-orange);
    border: 0;
    color: #fff;
    box-shadow: 0 8px 24px rgba(255, 118, 54, 0.25);
    transform: translateY(0);
}
.pricing-card-special .pricing-eyebrow,
.pricing-card-special .pricing-amount,
.pricing-card-special .pricing-currency,
.pricing-card-special .pricing-period,
.pricing-card-special .pricing-yearly,
.pricing-card-special .pricing-followup,
.pricing-card-special .pricing-features li,
.pricing-card-special .pricing-features li strong {
    color: #fff;
}
.pricing-card-special .pricing-features li {
    border-top-color: rgba(255, 255, 255, 0.25);
}
.pricing-card-special .pricing-followup {
    opacity: 0.85;
}
.pricing-card-special .pricing-cta {
    background: #fff;
    color: var(--color-orange);
    border: 0;
    font-weight: 700;
}
.pricing-card-special .pricing-cta:hover {
    background: rgba(255, 255, 255, 0.92);
}

/* === FAQ-sectie === */
.section-faq {
    padding: var(--space-7) 0;
    background: var(--color-bg-soft, #FAF8F5);
}
.faq-list {
    max-width: 100%;
    margin: var(--space-5) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-orange);
    line-height: 1;
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
}
.faq-item[open] summary {
    color: var(--color-orange);
    border-bottom: 1px solid var(--color-border);
}
.faq-item .faq-answer {
    padding: var(--space-3) var(--space-4) var(--space-4);
    color: var(--color-text-muted);
    line-height: 1.6;
}
.faq-item .faq-answer p {
    margin: 0 0 var(--space-2);
}
.faq-item .faq-answer p:last-child {
    margin: 0;
}
.faq-item .faq-answer a {
    color: var(--color-orange);
    font-weight: 600;
}

/* === BREADCRUMBS === */
.breadcrumbs {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.breadcrumbs a:hover { color: var(--color-orange); }
.breadcrumbs span[aria-current] { color: var(--color-text); font-weight: 500; }
.breadcrumbs .sep { color: var(--color-border); }

/* === CONTENT PAGES (hub + leaf pages) ===
   Géén eigen max-width: erft 1056px van .container zodat de edge
   gelijk loopt met de site-header. */
.content-page { margin: 0 auto; }
.content-page h1 { margin: 0 0 var(--space-3); }
.content-page > .lead { margin-bottom: var(--space-6); font-size: 1.1rem; color: var(--color-text-muted); }
.content-page h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.content-page h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.content-page p, .content-page li { line-height: 1.65; }
.content-page p { margin: 0 0 var(--space-3); }
.content-page ul, .content-page ol { padding-left: var(--space-4); margin: 0 0 var(--space-4); }
.content-page li { margin-bottom: 6px; }
.content-page hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

/* === HUB GRID — voor /hoe-werkt-het/ en /boekhoudsoftware/ === */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
.hub-card { display: block; padding: var(--space-4); border: 1px solid var(--color-border);
            border-radius: 12px; background: var(--color-white); text-decoration: none;
            color: var(--color-text); transition: border-color 0.15s ease, transform 0.15s ease; }
.hub-card:hover { border-color: var(--color-orange); transform: translateY(-2px); }
.hub-card h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--color-text); }
.hub-card p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.5; }
.hub-card .hub-card__tag { display: inline-block; font-size: 0.7rem; text-transform: uppercase;
                            letter-spacing: 0.06em; color: var(--color-orange); font-weight: 600;
                            margin-bottom: 6px; }

/* Steps list voor "Hoe koppelen" secties */
.steps-list { counter-reset: step; list-style: none; padding-left: 0; }
.steps-list li { counter-increment: step; padding-left: 38px; position: relative;
                 margin-bottom: var(--space-3); }
.steps-list li::before { content: counter(step); position: absolute; left: 0; top: 0;
                          width: 28px; height: 28px; border-radius: 50%;
                          background: var(--color-orange); color: white; font-weight: 700;
                          display: flex; align-items: center; justify-content: center;
                          font-size: 0.9rem; }

/* CTA-blok onderaan content-paginas */
.content-cta {
    background: var(--color-bg-soft);
    border-radius: 16px;
    padding: var(--space-5);
    text-align: center;
    margin: var(--space-6) 0;
}
.content-cta h2 { margin-top: 0; margin-bottom: var(--space-2); }
.content-cta p { color: var(--color-text-muted); margin-bottom: var(--space-3); }

/* Related-pages footer per pagina */
.related-pages {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
    margin-top: var(--space-6);
}
.related-pages h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
                    color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.related-pages ul { list-style: none; padding: 0; margin: 0; display: flex;
                    gap: var(--space-3); flex-wrap: wrap; }
.related-pages a { color: var(--color-orange); text-decoration: none; font-weight: 500; }
.related-pages a:hover { text-decoration: underline; }

/* Compact footer-uitbreiding met sitelinks */
.site-footer__sitelinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-6);
}
.site-footer__sitelinks h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}
.site-footer__sitelinks ul { list-style: none; padding: 0; margin: 0; }
.site-footer__sitelinks li { margin-bottom: var(--space-2); }
.site-footer__sitelinks a { font-size: 0.92rem; }

/* === MOBILE NAV (hamburger) ============================================
   < 720px: site-nav krijgt slide-down drawer-stijl, getoggled via een
   knop met 3 lijntjes. Knop alleen op mobile zichtbaar; op desktop
   blijft alles zoals voorheen. */

.site-nav__toggle {
    display: none;
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.site-nav__toggle:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}
.site-nav__toggle-bars {
    position: relative;
    width: 22px;
    height: 16px;
    display: block;
}
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after,
.site-nav__toggle-bars span {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.18s ease, top 0.18s ease, bottom 0.18s ease;
}
.site-nav__toggle-bars::before { top: 0; }
.site-nav__toggle-bars span    { top: 50%; margin-top: -1px; }
.site-nav__toggle-bars::after  { bottom: 0; }

/* Geopende staat: kruis (transformeert de 3 lijntjes) */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::before {
    top: 50%; margin-top: -1px;
    transform: rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::after {
    bottom: auto; top: 50%; margin-top: -1px;
    transform: rotate(-45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars span {
    opacity: 0;
}

@media (max-width: 720px) {
    .container { padding: 0 var(--space-3); }
    .site-header .container { height: 60px; }
    .site-logo img { height: 26px; }

    .site-nav__toggle { display: flex; }

    /* Nav-drawer: fullscreen-overlay onder de header */
    .site-nav {
        position: fixed;
        inset: 60px 0 0 0;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-4) var(--space-4) var(--space-6);
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
        z-index: 9;
    }
    .site-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }
    .site-nav a:not(.btn) {
        padding: 14px 4px;
        border-bottom: 1px solid var(--color-border);
        font-size: 1.05rem;
    }
    .site-nav a.btn {
        margin-top: var(--space-4);
        text-align: center;
        width: 100%;
    }

    /* Body-scroll lock wanneer drawer open is */
    body.is-nav-open { overflow: hidden; }
}

/* === MOBILE FOOTER ==================================================== */
@media (max-width: 720px) {
    .site-footer__sitelinks {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
        padding: var(--space-4) 0;
    }
    .site-footer__sitelinks h4 { font-size: 0.78rem; }
    .site-footer__sitelinks a { font-size: 0.88rem; }
    .footer-row {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
        padding: var(--space-3) 0;
    }
    .footer-row small { font-size: 0.78rem; line-height: 1.4; }
}
@media (max-width: 420px) {
    .site-footer__sitelinks { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* === MOBILE CONTENT-PAGES ============================================= */
@media (max-width: 720px) {
    .content-page { padding: 0; }
    .content-page h1 { font-size: 1.7rem; line-height: 1.2; }
    .content-page > .lead { font-size: 1rem; margin-bottom: var(--space-4); }
    .content-page h2 { font-size: 1.3rem; margin-top: var(--space-5); }
    .content-page h3 { font-size: 1.05rem; }
    .content-page p, .content-page li { font-size: 0.96rem; line-height: 1.55; }
    .content-page blockquote {
        margin: var(--space-3) 0;
        padding: 10px 14px;
        border-left: 3px solid var(--color-orange);
        background: var(--color-bg-soft);
        font-size: 0.92rem;
        font-style: italic;
        border-radius: 4px;
    }

    .breadcrumbs { font-size: 0.78rem; margin-bottom: var(--space-3); }

    .hub-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .hub-card { padding: var(--space-3); }
    .hub-card h3 { font-size: 1rem; }
    .hub-card p { font-size: 0.88rem; }

    .steps-list li {
        padding-left: 34px;
        margin-bottom: var(--space-3);
        font-size: 0.96rem;
    }
    .steps-list li::before { width: 26px; height: 26px; font-size: 0.85rem; }

    .content-cta {
        padding: var(--space-4);
        border-radius: 12px;
        margin: var(--space-5) 0;
    }
    .content-cta h2 { font-size: 1.2rem; }
    .content-cta p { font-size: 0.92rem; }

    .related-pages ul { flex-direction: column; gap: var(--space-1); }
    .related-pages a { font-size: 0.92rem; }
}

/* === MOBILE FAQ-ITEMS (lighter padding) ================================ */
@media (max-width: 720px) {
    .faq-item summary {
        padding: 14px 12px;
        font-size: 0.96rem;
    }
    .faq-item .faq-answer {
        padding: 12px 12px 16px;
        font-size: 0.92rem;
    }
}

/* === PRIJZEN-PAGINA: savings/ROI/team-secties ====================== */

.savings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
}
.savings-card {
    background: linear-gradient(180deg, #fff8f3 0%, #fff 100%);
    border: 1px solid #ffd5be;
    border-radius: 14px;
    padding: var(--space-5) var(--space-4);
    text-align: center;
}
.savings-figure {
    display: block;
    font-family: 'Ahroni', system-ui, sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--color-orange);
    font-weight: 700;
    margin-bottom: var(--space-2);
}
.savings-text {
    margin: 0;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.5;
}
.savings-text strong { display: block; margin-bottom: 4px; font-size: 1.02rem; }

.roi-box {
    background: var(--color-orange);
    color: #fff;
    border-radius: 16px;
    padding: var(--space-5);
    margin: var(--space-5) auto;
    max-width: 720px;
}
.roi-box h3 {
    margin: 0 0 var(--space-2);
    color: #fff;
    font-size: 1.2rem;
}
.roi-box p {
    color: #fff;
    margin: 0;
    line-height: 1.55;
}
.roi-box p:not(:last-child) { margin-bottom: var(--space-2); }
.roi-box strong { color: #fff; font-weight: 700; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}
.team-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--space-4);
}
.team-card h3 {
    margin: 0 0 var(--space-2);
    font-size: 1.02rem;
    color: var(--color-text);
}
.team-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .savings-grid, .team-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .savings-card { padding: var(--space-4); }
    .savings-figure { font-size: 2.4rem; }
    .roi-box { padding: var(--space-4); margin: var(--space-4) auto; }
    .roi-box h3 { font-size: 1.1rem; }
    .roi-box p { font-size: 0.95rem; }
}