:root {
        --bg: #FBF7F0;
        --bg-warm: #F3EADb;
        --bg-card: #FFFFFF;
        --text: #23201B;
        --text-soft: #6B645C;
        --accent: #0F7A5F;
        --accent-hover: #0C6650;
        --accent-soft: #DCEFE7;
        --peach: #FFD4B5;
        --mint: #BFE6CF;
        --lemon: #FFE7A0;
        --lavender: #DED7F0;
        --border: #EEE6D8;
    }
    * { -webkit-font-smoothing: antialiased; }
    html { scroll-behavior: smooth; }
    body {
        font-family: 'Manrope', system-ui, sans-serif;
        background: var(--bg);
        color: var(--text);
    }
    h1, h2, h3, .display {
        font-family: 'Space Grotesk', 'Manrope', sans-serif;
        letter-spacing: -0.01em;
    }
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image:
            radial-gradient(circle at 15% 5%, var(--peach) 0%, transparent 35%),
            radial-gradient(circle at 90% 85%, var(--lavender) 0%, transparent 40%),
            radial-gradient(circle at 60% 40%, var(--mint) 0%, transparent 45%);
        opacity: 0.22;
        pointer-events: none;
        z-index: -1;
    }
    .skip-link {
        position: absolute; left: 12px; top: -60px; z-index: 100;
        background: var(--accent); color: #fff; padding: 10px 18px;
        border-radius: 12px; font-weight: 700; transition: top 0.2s;
    }
    .skip-link:focus { top: 12px; }
    a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
        outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px;
    }
    .btn { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
    .btn:hover { transform: translateY(-3px); }
    .btn:active { transform: translateY(-1px); }
    .card { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
    .card:hover { transform: translateY(-4px); }
    .tag {
        display: inline-block;
        padding: 5px 14px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
    .pill {
        background: var(--bg-warm);
        padding: 7px 16px;
        border-radius: 999px;
        display: inline-block;
        font-weight: 700;
        font-size: 14px;
    }
    .squiggle { position: relative; display: inline; }
    .squiggle::after {
        content: '';
        position: absolute;
        bottom: -6px; left: 0; right: 0;
        height: 9px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 9' preserveAspectRatio='none'><path d='M0,5 Q25,0 50,5 T100,5' stroke='%23FFD4B5' stroke-width='3.5' fill='none' stroke-linecap='round'/></svg>");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .num {
        position: relative; display: inline-flex; align-items: center; justify-content: center;
        width: 64px; height: 64px; font-size: 28px; font-weight: 800; color: var(--text); flex-shrink: 0;
    }
    .num svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
    .num > span { position: relative; z-index: 1; }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
    .float { animation: float 4.5s ease-in-out infinite; }
    .float-d { animation: float 4.5s ease-in-out infinite; animation-delay: 1.2s; }

    /* Hero animated scene */
    .hero-chip { transition: transform .4s, box-shadow .4s, border-color .4s, background .4s, color .4s; }
    .hero-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); transform: scale(1.07); box-shadow: 0 8px 20px rgba(15,122,95,0.18); }
    .hero-arrow path { stroke: var(--border); transition: stroke .4s; }
    .hero-arrow.on path { stroke: var(--accent); }
    .hero-node { transition: box-shadow .4s, border-color .4s; }
    .hero-node.busy { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft); }
    .hero-notif { transition: opacity .45s ease, transform .45s ease; }
    .hero-notif.swap { opacity: 0; transform: translateY(10px) scale(.98); }

    /* Interactive scenario */
    .scenario-tab { transition: background 0.2s, color 0.2s; background: #fff; }
    .scenario-tab.active { background: var(--accent); color: #fff; border-color: var(--accent) !important; }
    .chat-in { background: var(--bg-warm); }
    .chat-bot { background: var(--accent-soft); }
    .chat-msg { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; }
    .chat-msg.in { opacity: 1; transform: none; }
    .typing-dots span {
        display: inline-block; width: 7px; height: 7px; border-radius: 50%;
        background: var(--accent); margin: 0 1.5px; opacity: 0.4;
        animation: blink 1.2s infinite;
    }
    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes blink { 0%,60%,100%{opacity:0.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
    .step-row { background: var(--bg-card); border: 1.5px solid var(--border); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
    .step-row[data-on="true"] { border-color: var(--accent) !important; transform: translateX(4px); box-shadow: 0 4px 16px rgba(15,122,95,0.16); }
    .step-row[data-on="true"] .step-num { color: var(--accent-hover); }
    .step-row[data-on="true"] .step-title { color: var(--accent-hover); }
    .result-bar { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; }
    .result-bar.in { opacity: 1; transform: none; }

    /* Chat popup */
    #chat-popup { opacity: 0; transition: opacity 0.25s ease; }
    #chat-popup.open { opacity: 1; }
    #chat-popup .popup-card { transform: translateY(14px) scale(0.96); transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1); }
    #chat-popup.open .popup-card { transform: none; }

    .field {
        width: 100%; padding: 14px 18px; border-radius: 16px;
        border: 1.5px solid var(--border); background: #fff; font-size: 16px; font-family: inherit;
        transition: border-color 0.2s;
    }
    .field:focus { outline: none; border-color: var(--accent); }
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.shown { opacity: 1; transform: none; }

    /* Cookie + integrations */
    .logo-chip {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 18px; border-radius: 14px; background: var(--bg-card);
        border: 1.5px solid var(--border); font-weight: 700; font-size: 15px;
    }
    /* Floating chat widget */
    #chat-fab { transition: transform .25s, box-shadow .25s; }
    #chat-fab:hover { transform: scale(1.06); }
    #chat-fab .fab-pulse { position:absolute; inset:0; border-radius:50%; animation: fabpulse 2.6s infinite; }
    @keyframes fabpulse { 0%{box-shadow:0 0 0 0 rgba(15,122,95,0.45)} 70%{box-shadow:0 0 0 16px rgba(15,122,95,0)} 100%{box-shadow:0 0 0 0 rgba(15,122,95,0)} }
    #chat-widget { transform: translateY(16px) scale(.96); opacity:0; transition: transform .3s cubic-bezier(0.34,1.4,0.64,1), opacity .25s ease; transform-origin: bottom right; }
    #chat-widget.open { transform:none; opacity:1; }

    /* Anchor offset under sticky header */
    section[id], #lead-form { scroll-margin-top: 84px; }
    /* Keep the chat button clear of the cookie banner */
    body.cookie-open #chat-fab { bottom: 8rem; }
    @media (max-width: 640px) { body.cookie-open #chat-fab { bottom: 10.5rem; } }

    /* ---- Mobile horizontal scroll ---- */
    @media (max-width: 767px) {
        .mscroll {
            display: flex !important;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            scroll-padding-left: 1.25rem;
            -webkit-overflow-scrolling: touch;
            margin-left: -1.25rem;
            margin-right: -1.25rem;
            padding: 4px 1.25rem 1.5rem;
            scrollbar-width: none;
        }
        .mscroll::-webkit-scrollbar { display: none; }
        .mscroll > * {
            flex: 0 0 84%;
            scroll-snap-align: start;
        }
        .mscroll > .reveal { opacity: 1 !important; transform: none !important; }
        .hide-mobile { display: none !important; }
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .btn, .card, .float, .float-d, .chat-msg, .step-row, .result-bar, .reveal { transition: none !important; animation: none !important; }
        #chat-popup, #chat-popup .popup-card { transition: none !important; }
        .reveal { opacity: 1 !important; transform: none !important; }
        .chat-msg { opacity: 1 !important; transform: none !important; }
    }