@layer reset, base, components, sections, responsive;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body, h1, h2, h3, p, ul, ol { margin: 0; }
    ul, ol { padding: 0; }
    img, svg { display: block; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
}

@layer base {
    :root {
        --ink: #171513;
        --ink-soft: #55514c;
        --paper: #f7f5ef;
        --paper-strong: #fffdf8;
        --line: #dcd8ce;
        --purple: #8b67e8;
        --purple-dark: #6844c4;
        --purple-soft: #ded3ff;
        --lime: #c7f36b;
        --peach: #ff8a65;
        --blue: #75c8f8;
        --radius-sm: .8rem;
        --radius-md: 1.4rem;
        --radius-lg: 2rem;
        --shadow-soft: 0 24px 80px rgb(37 31 27 / 10%);
        --container: 74rem;
    }

    body {
        min-width: 20rem;
        color: var(--ink);
        background: var(--paper);
        font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        line-height: 1.6;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    ::selection { color: var(--ink); background: var(--lime); }

    .container {
        width: min(calc(100% - 2.5rem), var(--container));
        margin-inline: auto;
    }

    .section { padding-block: clamp(5rem, 9vw, 8.5rem); }

    h1, h2, h3 {
        font-weight: 760;
        line-height: .98;
        letter-spacing: -.055em;
    }

    h1 { font-size: clamp(3.7rem, 7.7vw, 7.1rem); }
    h2 { font-size: clamp(2.8rem, 5vw, 5rem); }
    h3 { font-size: 1.45rem; line-height: 1.15; letter-spacing: -.035em; }
    em { color: var(--purple-dark); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }

    a:focus-visible {
        outline: 3px solid var(--purple);
        outline-offset: 4px;
        border-radius: .35rem;
    }

    .skip-link {
        position: fixed;
        z-index: 100;
        top: .75rem;
        left: .75rem;
        padding: .7rem 1rem;
        color: white;
        background: var(--ink);
        border-radius: .5rem;
        transform: translateY(-150%);
        transition: transform .2s ease;
    }

    .skip-link:focus { transform: translateY(0); }
}

@layer components {
    .brand {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        font-size: 1rem;
        font-weight: 760;
        letter-spacing: -.03em;
    }

    .brand strong { color: var(--purple-dark); }

    .brand-mark {
        width: 2.2rem;
        height: 2.2rem;
        padding: .4rem;
        overflow: visible;
        color: var(--ink);
        background: var(--lime);
        border-radius: .65rem;
    }

    .brand-mark path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.1; }
    .brand-mark path:nth-last-child(1) { fill: currentColor; stroke-width: 0; }

    .button {
        display: inline-flex;
        min-height: 3.35rem;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        padding: .8rem 1.35rem;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: .9rem;
        font-weight: 700;
        transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    }

    .button:hover { transform: translateY(-2px); }
    .button svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
    .button-primary { color: white; background: var(--ink); box-shadow: 0 12px 30px rgb(23 21 19 / 18%); }
    .button-primary:hover { background: #2b2825; box-shadow: 0 16px 36px rgb(23 21 19 / 23%); }
    .button-ghost { border-color: var(--line); background: rgb(255 255 255 / 35%); }
    .button-ghost:hover { background: var(--paper-strong); }

    .eyebrow, .section-kicker {
        color: var(--purple-dark);
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .eyebrow { display: flex; align-items: center; gap: .6rem; }
    .eyebrow span { width: .5rem; height: .5rem; background: var(--purple); border-radius: 50%; box-shadow: 0 0 0 .3rem var(--purple-soft); }

    .section-heading {
        display: grid;
        grid-template-columns: 1.3fr .7fr;
        align-items: end;
        gap: 3rem;
        margin-bottom: 4rem;
    }

    .section-heading .section-kicker { display: block; margin-bottom: 1rem; }
    .section-heading > p { max-width: 31rem; color: var(--ink-soft); font-size: 1.05rem; }
}

@layer sections {
    .site-header {
        position: absolute;
        z-index: 20;
        top: 0;
        left: 0;
        width: 100%;
        border-bottom: 1px solid rgb(23 21 19 / 8%);
    }

    .header-inner { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; }
    .nav-links { display: flex; align-items: center; gap: 2rem; color: #5b5651; font-size: .84rem; font-weight: 650; }
    .nav-links a, .header-cta { transition: color .2s ease; }
    .nav-links a:hover, .header-cta:hover { color: var(--purple-dark); }
    .header-cta { display: inline-flex; align-items: center; gap: .45rem; font-size: .83rem; font-weight: 750; }
    .header-cta svg { width: .9rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

    .hero {
        position: relative;
        min-height: 52rem;
        padding: clamp(8.5rem, 14vw, 11rem) 0 6rem;
        overflow: hidden;
        isolation: isolate;
        background:
            radial-gradient(circle at 72% 52%, rgb(222 211 255 / 50%), transparent 27rem),
            linear-gradient(135deg, #faf8f2 0%, #f1eee7 100%);
    }

    .hero::after {
        position: absolute;
        z-index: -2;
        inset: 0;
        opacity: .28;
        background-image: radial-gradient(rgb(23 21 19 / 18%) .55px, transparent .55px);
        background-size: 9px 9px;
        content: "";
        mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
    }

    .hero-grid { display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
    .hero-copy { position: relative; z-index: 3; }
    .hero-copy h1 { max-width: 10ch; margin: 1.4rem 0 1.8rem; }
    .hero-lead { max-width: 39rem; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
    .hero-facts { display: flex; gap: 1.7rem; margin-top: 2.6rem; list-style: none; }
    .hero-facts li { display: flex; align-items: center; gap: .65rem; color: var(--ink-soft); font-size: .76rem; font-weight: 650; }
    .fact-icon { display: grid; width: 2.35rem; aspect-ratio: 1; place-items: center; color: var(--ink); background: var(--paper-strong); border: 1px solid var(--line); border-radius: 50%; font-size: .67rem; font-weight: 850; }

    .hero-visual { position: relative; min-height: 37rem; perspective: 1000px; }
    .hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(4px); }
    .hero-glow-one { top: 9rem; right: -5rem; width: 20rem; height: 20rem; background: rgb(199 243 107 / 26%); }
    .hero-glow-two { bottom: -8rem; left: 34%; width: 16rem; height: 16rem; background: rgb(255 138 101 / 17%); }
    .orbit { position: absolute; top: 50%; left: 52%; border: 1px solid rgb(104 68 196 / 16%); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
    .orbit-one { width: 33rem; height: 22rem; }
    .orbit-two { width: 26rem; height: 36rem; }

    .phone-shell {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 52%;
        width: min(17rem, 48vw);
        padding: .52rem;
        background: #171513;
        border: 1px solid #3a3733;
        border-radius: 2.7rem;
        box-shadow: 0 45px 85px rgb(45 35 74 / 25%), inset 0 0 0 1px rgb(255 255 255 / 12%);
        transform: translate(-50%, -50%) rotate(3deg);
    }

    .phone-top { position: absolute; z-index: 4; top: 1rem; left: 50%; width: 5rem; height: 1.35rem; background: var(--ink); border-radius: 999px; transform: translateX(-50%); }
    .phone-screen { position: relative; aspect-ratio: 9 / 17.3; overflow: hidden; background: linear-gradient(155deg, #efd786 0 38%, #e78b5c 38% 62%, #5e855c 62%); border-radius: 2.18rem; }
    .scene-noise { position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#172018 1px, transparent 1px); background-size: 5px 5px; mix-blend-mode: multiply; }
    .scene-sun { position: absolute; top: 15%; right: 12%; width: 4rem; aspect-ratio: 1; background: #fff1ad; border-radius: 50%; box-shadow: 0 0 0 1rem rgb(255 241 173 / 17%); }
    .scene-leaf { position: absolute; width: 6rem; height: 13rem; background: #244b33; border-radius: 100% 0 100% 0; opacity: .9; }
    .leaf-one { right: -3rem; bottom: 12%; transform: rotate(-25deg); }
    .leaf-two { left: -4rem; bottom: 3%; transform: rotate(16deg) scale(.85); }
    .character { position: absolute; top: 31%; left: 50%; width: 9.5rem; height: 14rem; transform: translateX(-50%); }
    .character-body { position: absolute; inset: 2rem .6rem .3rem; background: linear-gradient(135deg, #9b76ef, #7652cb); border: 2px solid rgb(23 21 19 / 35%); border-radius: 47% 47% 42% 42% / 34% 34% 58% 58%; box-shadow: inset -1.2rem -1rem 2rem rgb(64 35 124 / 20%), 0 1rem 2rem rgb(39 27 16 / 18%); }
    .character-leaf { position: absolute; z-index: 1; top: .7rem; left: 49%; width: 4rem; height: 2.5rem; background: #4e7d42; border: 2px solid rgb(23 21 19 / 35%); border-radius: 100% 0 100% 0; transform: translateX(-50%) rotate(-12deg); }
    .eye { position: absolute; top: 38%; width: .72rem; height: .85rem; background: var(--ink); border-radius: 50%; }
    .eye::after { position: absolute; top: .12rem; left: .14rem; width: .2rem; height: .2rem; background: white; border-radius: 50%; content: ""; }
    .eye-left { left: 31%; transform: rotate(8deg); }
    .eye-right { right: 31%; transform: rotate(-8deg); }
    .mouth { position: absolute; top: 57%; left: 50%; width: 2.2rem; height: 1.15rem; background: #442431; border-radius: 15% 15% 60% 60%; transform: translateX(-50%); }
    .mouth::after { position: absolute; right: .38rem; bottom: .1rem; left: .38rem; height: .35rem; background: #e97d8a; border-radius: 50%; content: ""; }
    .scene-caption { position: absolute; right: .7rem; bottom: 4.4rem; left: .7rem; color: white; font-size: 1.05rem; font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 2px 6px rgb(0 0 0 / 50%); transform: rotate(-2deg); }
    .scene-caption span, .scene-caption strong { display: block; }
    .scene-caption strong { margin-top: .2rem; color: var(--lime); font-size: 1.35rem; }
    .player-row { position: absolute; right: .8rem; bottom: .8rem; left: .8rem; display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; color: white; background: rgb(23 21 19 / 68%); border: 1px solid rgb(255 255 255 / 15%); border-radius: 999px; backdrop-filter: blur(10px); }
    .play-button { display: grid; width: 1.55rem; aspect-ratio: 1; place-items: center; background: var(--lime); border-radius: 50%; }
    .play-button svg { width: .85rem; fill: var(--ink); }
    .sound-wave { display: flex; flex: 1; height: 1.1rem; align-items: center; gap: 2px; }
    .sound-wave i { flex: 1; height: 35%; background: rgb(255 255 255 / 58%); border-radius: 99px; }
    .sound-wave i:nth-child(2), .sound-wave i:nth-child(6) { height: 65%; }
    .sound-wave i:nth-child(3), .sound-wave i:nth-child(5) { height: 90%; }
    .sound-wave i:nth-child(4) { height: 55%; }
    .player-row small { font-size: .62rem; }

    .floating-card { position: absolute; z-index: 5; display: flex; min-width: 13.5rem; align-items: center; gap: .7rem; padding: .75rem .9rem; background: rgb(255 253 248 / 83%); border: 1px solid rgb(255 255 255 / 70%); border-radius: 1rem; box-shadow: var(--shadow-soft); backdrop-filter: blur(15px); }
    .floating-card-script { top: 17%; left: -3%; transform: rotate(-4deg); }
    .floating-card-video { right: -1%; bottom: 19%; transform: rotate(3deg); }
    .floating-card > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
    .floating-card small { color: var(--ink-soft); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .floating-card strong { font-size: .78rem; }
    .floating-icon { display: grid; width: 2.35rem; aspect-ratio: 1; place-items: center; border-radius: .7rem; }
    .floating-icon svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
    .icon-spark { color: #6542bd; background: var(--purple-soft); }
    .icon-video { color: #325e29; background: #dff5b1; }
    .status-dot { width: .48rem; aspect-ratio: 1; background: #5eb54c; border-radius: 50%; box-shadow: 0 0 0 .25rem rgb(94 181 76 / 13%); }
    .approval-chip { position: absolute; z-index: 6; right: 17%; bottom: 5%; display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem; color: white; background: var(--ink); border-radius: 999px; box-shadow: 0 15px 35px rgb(23 21 19 / 22%); font-size: .7rem; font-weight: 750; }
    .approval-chip svg { width: 1rem; fill: none; stroke: var(--lime); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }

    .trust-strip { border-block: 1px solid var(--line); background: var(--paper-strong); }
    .trust-inner { display: flex; min-height: 6rem; align-items: center; justify-content: space-between; gap: 2rem; }
    .trust-inner p { color: #77716a; font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .service-list { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); color: #6b655f; font-size: clamp(.78rem, 1.4vw, 1rem); font-weight: 750; letter-spacing: -.02em; }
    .service-list i { width: .25rem; aspect-ratio: 1; background: var(--purple); border-radius: 50%; opacity: .45; }

    .features { background: var(--paper); }
    .feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
    .feature-card { position: relative; grid-column: span 4; min-height: 23rem; padding: 2rem; overflow: hidden; background: var(--paper-strong); border: 1px solid var(--line); border-radius: var(--radius-md); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .feature-card:hover { border-color: #c4bdb2; box-shadow: var(--shadow-soft); transform: translateY(-4px); }
    .feature-card-large { grid-column: span 5; background: var(--ink); color: white; }
    .feature-card-wide { display: grid; grid-column: span 7; grid-template-columns: auto 1fr auto; min-height: 14rem; align-items: center; gap: 1.5rem; }
    .feature-number { position: absolute; top: 1.3rem; right: 1.5rem; color: #928b84; font-family: Georgia, serif; font-size: .75rem; font-style: italic; }
    .feature-icon { display: grid; width: 3.4rem; aspect-ratio: 1; margin-bottom: 4.8rem; place-items: center; color: var(--purple-dark); background: var(--purple-soft); border-radius: 1rem; transform: rotate(-4deg); }
    .feature-icon svg { width: 1.6rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
    .feature-card-large .feature-icon { color: var(--ink); background: var(--lime); }
    .feature-card-wide .feature-icon { margin: 0; }
    .feature-card h3 { margin-bottom: .8rem; }
    .feature-card p { color: var(--ink-soft); font-size: .9rem; }
    .feature-card-large p { color: #bbb5af; }
    .feature-meta { position: absolute; bottom: 1.7rem; left: 2rem; color: #8f8982; font-size: .67rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
    .approval-mini { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; color: #456334; background: #e9f7cf; border-radius: 999px; padding: .65rem .85rem; font-size: .7rem; font-weight: 750; }
    .approval-mini i { width: .45rem; aspect-ratio: 1; background: #68a747; border-radius: 50%; }

    .workflow { color: white; background: #191715; }
    .workflow em { color: var(--lime); }
    .workflow-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(4rem, 10vw, 9rem); }
    .workflow-intro { position: sticky; top: 2rem; align-self: start; }
    .workflow-intro h2 { margin: 1rem 0 1.6rem; }
    .workflow-intro > p { max-width: 31rem; color: #aaa49e; }
    .workflow-note { display: flex; align-items: center; gap: .9rem; margin-top: 2.3rem; padding-top: 1.5rem; border-top: 1px solid #37332f; }
    .workflow-note svg { width: 2rem; flex: 0 0 auto; fill: none; stroke: var(--lime); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
    .workflow-note span { display: flex; flex-direction: column; color: #8f8984; font-size: .72rem; }
    .workflow-note strong { color: white; font-size: .8rem; }
    .workflow-steps { list-style: none; counter-reset: workflow; }
    .workflow-steps li { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: 1rem; padding: 1.7rem .4rem; border-bottom: 1px solid #37332f; }
    .workflow-steps li:first-child { border-top: 1px solid #37332f; }
    .step-index { display: grid; width: 2.55rem; aspect-ratio: 1; place-items: center; color: #8e8780; border: 1px solid #45403b; border-radius: 50%; font-family: Georgia, serif; font-size: .72rem; font-style: italic; }
    .workflow-steps strong { font-size: 1.05rem; }
    .workflow-steps p { margin-top: .18rem; color: #8f8984; font-size: .8rem; }
    .step-tag { padding: .4rem .7rem; color: #b7afb0; background: #2b2825; border-radius: 999px; font-size: .62rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
    .step-tag-live { color: var(--ink); background: var(--lime); }

    .integrations { overflow: hidden; background: var(--paper-strong); }
    .integration-panel { display: grid; min-height: 34rem; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 3rem; padding: clamp(2rem, 5vw, 5rem); overflow: hidden; background: #eee9df; border-radius: var(--radius-lg); }
    .integration-copy { position: relative; z-index: 3; }
    .integration-copy h2 { margin: 1rem 0 1.5rem; }
    .integration-copy p { max-width: 31rem; color: var(--ink-soft); }
    .integration-cloud { position: relative; min-height: 27rem; }
    .cloud-center { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 8rem; aspect-ratio: 1; place-items: center; background: var(--ink); border: .6rem solid #dfd9cf; border-radius: 50%; box-shadow: 0 20px 50px rgb(44 37 32 / 20%); transform: translate(-50%, -50%); }
    .cloud-center svg { width: 2.8rem; color: var(--lime); }
    .cloud-center svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
    .cloud-center span { margin-top: -1.5rem; color: white; font-size: .65rem; font-weight: 750; }
    .integration-node { position: absolute; z-index: 2; display: flex; min-width: 7rem; align-items: center; gap: .6rem; padding: .65rem .85rem; background: var(--paper-strong); border: 1px solid #d5cfc5; border-radius: .85rem; box-shadow: 0 15px 35px rgb(44 37 32 / 9%); font-size: .72rem; font-weight: 750; }
    .integration-node b { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; color: white; background: var(--purple); border-radius: .6rem; font-size: .9rem; }
    .node-telegram { top: 5%; left: 42%; }
    .node-instagram { top: 29%; right: 0; }
    .node-youtube { right: 9%; bottom: 10%; }
    .node-tiktok { bottom: 4%; left: 18%; }
    .node-drive { top: 23%; left: 0; }
    .node-telegram b { background: #42a8df; }
    .node-instagram b { background: linear-gradient(135deg, #7e45d2, #ee476e, #f0ae42); }
    .node-youtube b { background: #ef3838; }
    .node-tiktok b { background: #222; }
    .node-drive b { color: var(--ink); background: var(--lime); }
    .cloud-line { position: absolute; z-index: 1; top: 50%; left: 50%; width: 11rem; height: 1px; background: #c4bdb3; transform-origin: left center; }
    .line-one { transform: rotate(-90deg); }
    .line-two { transform: rotate(-21deg); }
    .line-three { transform: rotate(39deg); }
    .line-four { transform: rotate(132deg); }
    .line-five { transform: rotate(199deg); }

    .final-cta { padding-block: 1rem 5rem; background: var(--paper-strong); }
    .final-cta-inner { position: relative; display: flex; min-height: 24rem; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 6vw, 5rem); overflow: hidden; color: white; background: var(--purple-dark); border-radius: var(--radius-lg); isolation: isolate; }
    .final-cta h2 { max-width: 17ch; margin-top: .9rem; }
    .final-cta em { color: var(--lime); }
    .final-cta .section-kicker { color: #d9cafc; }
    .button-light { position: relative; z-index: 2; color: var(--ink); background: white; }
    .button-light:hover { background: var(--lime); }
    .cta-orb { position: absolute; z-index: -1; border: 1px solid rgb(255 255 255 / 13%); border-radius: 50%; }
    .orb-small { top: -6rem; right: 10%; width: 18rem; aspect-ratio: 1; background: rgb(199 243 107 / 8%); }
    .orb-large { right: -12rem; bottom: -18rem; width: 38rem; aspect-ratio: 1; background: rgb(255 255 255 / 4%); }

    .site-footer { padding-block: 2rem; background: var(--paper-strong); border-top: 1px solid var(--line); }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
    .footer-inner > p { color: #77716a; font-size: .75rem; }
    .footer-status { display: flex; align-items: center; gap: .5rem; color: #77716a; font-size: .7rem; }
    .footer-status i { width: .5rem; aspect-ratio: 1; background: #64a84f; border-radius: 50%; box-shadow: 0 0 0 .22rem rgb(100 168 79 / 12%); }
}

@layer responsive {
    @media (max-width: 62rem) {
        .hero-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
        .hero-visual { transform: scale(.9); transform-origin: center; }
        .feature-card, .feature-card-large { grid-column: span 6; }
        .feature-card-wide { grid-column: span 12; }
        .workflow-layout { gap: 4rem; }
        .integration-panel { grid-template-columns: 1fr; }
        .integration-copy { max-width: 40rem; }
    }

    @media (max-width: 48rem) {
        .container { width: min(calc(100% - 1.5rem), var(--container)); }
        .nav-links { display: none; }
        .hero { padding-top: 8rem; }
        .hero-grid { grid-template-columns: 1fr; }
        .hero-copy { text-align: center; }
        .hero-copy h1, .hero-lead { margin-inline: auto; }
        .eyebrow, .hero-actions, .hero-facts { justify-content: center; }
        .hero-visual { min-height: 35rem; transform: none; }
        .floating-card-script { left: 2%; }
        .floating-card-video { right: 2%; }
        .trust-inner { flex-direction: column; justify-content: center; padding-block: 1.5rem; }
        .service-list { flex-wrap: wrap; justify-content: center; }
        .section-heading { grid-template-columns: 1fr; gap: 1.5rem; }
        .feature-card, .feature-card-large, .feature-card-wide { grid-column: span 12; }
        .workflow-layout { grid-template-columns: 1fr; }
        .workflow-intro { position: static; }
        .integration-cloud { transform: scale(.9); }
        .final-cta-inner { align-items: flex-start; flex-direction: column; justify-content: center; }
        .footer-inner { flex-direction: column; text-align: center; }
    }

    @media (max-width: 34rem) {
        .header-cta { display: none; }
        .header-inner { justify-content: center; }
        .hero-facts { gap: .65rem; }
        .hero-facts li { flex-direction: column; }
        .hero-visual { min-height: 32rem; }
        .phone-shell { width: 14.5rem; }
        .orbit-one { width: 25rem; height: 18rem; }
        .orbit-two { width: 21rem; height: 30rem; }
        .floating-card { min-width: 10.7rem; padding: .55rem .65rem; }
        .floating-card-script { top: 13%; left: 0; }
        .floating-card-video { right: 0; bottom: 16%; }
        .floating-icon { width: 2rem; }
        .approval-chip { right: 8%; bottom: 2%; }
        .feature-card-wide { grid-template-columns: 1fr; }
        .feature-card-wide .feature-icon { margin-bottom: .5rem; }
        .approval-mini { justify-self: start; }
        .workflow-steps li { grid-template-columns: 2.7rem 1fr; }
        .step-tag { display: none; }
        .integration-panel { padding-inline: 1rem; }
        .integration-cloud { min-height: 25rem; transform: scale(.76); }
        .node-instagram { right: -10%; }
        .node-drive { left: -10%; }
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }
}