/* MENDO homepage - Supaste-style product landing */

/* ── Hero ─────────────────────────────────────────────────────── */
.supa-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--nav-h) + clamp(140px, 18vh, 220px)) var(--pad-x) 80px;
    overflow: hidden;
    text-align: center;
}

.supa-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.supa-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.06);
    will-change: transform;
}

.supa-hero__orbs {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.supa-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    animation: supa-orb-drift 14s ease-in-out infinite;
}

.supa-orb--1 {
    width: min(52vw, 420px);
    height: min(52vw, 420px);
    left: 8%;
    top: 18%;
    background: radial-gradient(circle, rgba(227, 69, 43, 0.55) 0%, transparent 70%);
}

.supa-orb--2 {
    width: min(44vw, 360px);
    height: min(44vw, 360px);
    right: 6%;
    top: 28%;
    background: radial-gradient(circle, rgba(255, 180, 120, 0.4) 0%, transparent 72%);
    animation-delay: -4s;
    animation-duration: 18s;
}

.supa-orb--3 {
    width: min(36vw, 280px);
    height: min(36vw, 280px);
    left: 38%;
    bottom: 22%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
    animation-delay: -7s;
    animation-duration: 16s;
}

@keyframes supa-orb-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33% { transform: translate3d(24px, -18px, 0) scale(1.08); }
    66% { transform: translate3d(-16px, 12px, 0) scale(0.94); }
}

.supa-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 90%,
        rgba(255, 255, 255, 0.55) 94%,
        rgba(255, 255, 255, 0.92) 97%,
        #fff 100%
    );
}

.supa-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
}

/* Text-only hero (about, careers, etc.) */
.supa-hero--compact {
    min-height: clamp(440px, 58vh, 620px);
    padding-bottom: clamp(56px, 8vw, 88px);
}

.supa-hero--compact .supa-title {
    font-size: clamp(34px, 7vw, 76px);
    margin-bottom: 0;
}

.supa-hero--compact .supa-lead {
    margin-bottom: 0;
}

.supa-page {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 24px) var(--pad-x) clamp(72px, 10vw, 120px);
}

.supa-page .m-prose h2:first-child {
    margin-top: 0;
}

.supa-hero__back {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
}

.supa-hero__back:hover {
    color: #fff;
}

.supa-hero__meta {
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.supa-page--legal .legal-intro {
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 32px;
}

.supa-page--legal .legal-intro a {
    color: var(--accent);
}

.supa-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 28px;
}

.supa-hero__item {
    opacity: 0;
    transform: translateY(22px);
}

.supa-hero.is-ready .supa-hero__item {
    animation: supa-hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.supa-kicker.supa-hero__item { animation-delay: 0.12s; }
.supa-hero__back.supa-hero__item { animation-delay: 0.06s; }
.supa-lead.supa-hero__item { animation-delay: 0.48s; }
.supa-hero__meta.supa-hero__item { animation-delay: 0.58s; }
.supa-actions.supa-hero__item { animation-delay: 0.62s; }
.supa-meta.supa-hero__item { animation-delay: 0.76s; }

.supa-hero.is-ready .supa-demo {
    animation:
        supa-demo-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.88s both,
        supa-float 5s ease-in-out 1.95s infinite;
}

@keyframes supa-hero-rise {
    to {
        opacity: 1;
        transform: none;
    }
}

.supa-title {
    font-family: var(--font-title);
    font-size: clamp(32px, 7.2vw, 88px);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #fff;
    margin-bottom: 8px;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.supa-line {
    display: block;
}

.supa-line .word {
    display: inline-block;
    white-space: nowrap;
}

.supa-line .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    animation: supa-char 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes supa-char {
    to { opacity: 1; transform: none; }
}

.supa-lead {
    max-width: 520px;
    margin: 28px auto 32px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

.supa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.supa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1f;
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

.supa-btn:hover {
    background: #000;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.supa-btn--ghost {
    background: rgba(255, 255, 255, 0.7);
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
}

.supa-btn--ghost:hover {
    background: #fff;
}

.supa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 48px;
}

.supa-meta span {
    font-size: 12px;
    font-weight: 500;
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 7px 14px;
    border-radius: 999px;
}

.supa-demo {
    position: relative;
    max-width: min(300px, 78vw);
    margin-inline: auto;
    opacity: 0;
    padding: 0 2px;
}

.supa-demo__inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.12s ease-out;
}

@keyframes supa-demo-in {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.88);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes supa-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* Phone device mockup */
.supa-device {
    position: relative;
    padding: 8px;
    border-radius: 48px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.22) 0%, transparent 38%),
        linear-gradient(145deg, #5a5a5e 0%, #2a2a2c 28%, #1a1a1c 52%, #3d3d40 78%, #6e6e73 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.14) inset,
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 20px 40px rgba(0, 0, 0, 0.14),
        0 8px 16px rgba(0, 0, 0, 0.08);
}

.supa-device::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 44px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 3;
}

.supa-device__bezel {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.supa-device__screen {
    position: relative;
    line-height: 0;
    background: #000;
}

.supa-device__screen img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
}

.supa-device__island {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24%;
    min-width: 68px;
    max-width: 92px;
    height: 22px;
    border-radius: 12px;
    background: #000;
    z-index: 4;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 -1px 2px rgba(255, 255, 255, 0.04);
}

.supa-demo-glow {
    position: absolute;
    inset: 8% -8%;
    background: radial-gradient(ellipse, rgba(227, 69, 43, 0.1) 0%, transparent 68%);
    filter: blur(28px);
    z-index: -1;
}

/* ── Marquee (service categories) ──────────────────────────────── */
.supa-marquee-wrap {
    margin-top: clamp(20px, 4vw, 40px);
    padding: clamp(28px, 4vw, 40px) 0 clamp(32px, 5vw, 48px);
    background: #fff;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.supa-marquee {
    overflow: hidden;
    width: 100%;
}

.supa-marquee + .supa-marquee {
    margin-top: 14px;
}

.supa-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: none;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.supa-marquee-wrap.is-shuffled .supa-marquee__track {
    animation-name: supa-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.supa-marquee__set {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.supa-marquee--rev .supa-marquee__track {
    animation-direction: reverse;
}

.supa-marquee-wrap:not(.is-shuffled) .supa-marquee__track {
    visibility: hidden;
}

.supa-marquee-wrap .supa-marquee__track span,
.supa-marquee-wrap .supa-marquee__pill {
    position: relative;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 9px 18px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    transition: none;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.supa-marquee-wrap .supa-marquee__track span::before,
.supa-marquee-wrap .supa-marquee__pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.35) 45%,
        rgba(255, 255, 255, 0.05) 100%
    );
    pointer-events: none;
}

.supa-marquee-wrap .supa-marquee__track span::after,
.supa-marquee-wrap .supa-marquee__pill::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 10%;
    right: 10%;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

.supa-marquee__pill--physical {
    color: #7a4038;
    background: linear-gradient(
        160deg,
        rgba(255, 252, 251, 0.96) 0%,
        rgba(255, 244, 241, 0.92) 50%,
        rgba(255, 236, 232, 0.88) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        0 1px 2px rgba(227, 69, 43, 0.06),
        0 4px 14px rgba(227, 69, 43, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(227, 69, 43, 0.06);
}

.supa-marquee-wrap .supa-marquee__pill--physical:hover {
    transform: none;
}

.supa-marquee__pill--online {
    color: #356278;
    background: linear-gradient(
        160deg,
        rgba(252, 253, 255, 0.96) 0%,
        rgba(241, 248, 255, 0.92) 50%,
        rgba(232, 244, 252, 0.88) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        0 1px 2px rgba(120, 188, 228, 0.06),
        0 4px 14px rgba(120, 188, 228, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(120, 188, 228, 0.07);
}

.supa-marquee-wrap .supa-marquee__pill--online:hover {
    transform: none;
}

@keyframes supa-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* ── Sections ───────────────────────────────────────────────── */
.supa-section {
    position: relative;
    padding: clamp(80px, 12vw, 120px) var(--pad-x);
    background: #fff;
}

.supa-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.supa-section__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.supa-section__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(250, 250, 250, 0.82);
}

.supa-section__shade--light {
    background: rgba(250, 250, 250, 0.88);
}

.supa-wrap {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin-inline: auto;
}

.supa-h2 {
    font-family: var(--font-title);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.08;
    text-align: center;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.supa-sub {
    text-align: center;
    max-width: 580px;
    margin: 0 auto 36px;
    font-size: 17px;
    line-height: 1.6;
    color: #6e6e73;
}

.supa-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 900px;
    margin-inline: auto;
}

.supa-pills span {
    font-size: 13px;
    font-weight: 500;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

/* ── Feature rows ───────────────────────────────────────────── */
.supa-feature,
.supa-built,
.supa-quotes,
.supa-download,
.supa-faq,
.supa-story {
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

.supa-feature {
    position: relative;
    padding: clamp(72px, 10vw, 100px) var(--pad-x);
    background: #fff;
}

.supa-feature .supa-section__bg,
.supa-feature .supa-section__shade,
.supa-section .supa-section__bg,
.supa-section .supa-section__shade,
.supa-download .supa-section__bg,
.supa-download .supa-section__shade {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.supa-feature .supa-section__shade,
.supa-section .supa-section__shade,
.supa-download .supa-section__shade {
    z-index: 1;
}

.supa-line .char {
    margin-right: 0.04em;
}

.supa-faq .faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.supa-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.supa-faq .faq-item.active .faq-answer {
    max-height: 280px;
}

.supa-faq .faq-answer p {
    padding: 0 24px 20px;
    color: #6e6e73;
    font-size: 15px;
    line-height: 1.6;
}

.supa-feature__grid {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
}

.supa-feature--flip .supa-feature__grid {
    direction: rtl;
}

.supa-feature--flip .supa-feature__grid > * {
    direction: ltr;
}

.supa-feature h3 {
    font-family: var(--font-title);
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: #1d1d1f;
}

.supa-feature p {
    font-size: 16px;
    line-height: 1.65;
    color: #6e6e73;
    margin-bottom: 20px;
}

.supa-feature ul {
    display: grid;
    gap: 8px;
}

.supa-feature li {
    font-size: 14px;
    color: #6e6e73;
    padding-left: 18px;
    position: relative;
}

.supa-feature li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E3452B;
}

.supa-screen {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.6);
    background: #fff;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.supa-screen--tilt {
    transition: transform 0.18s ease-out, box-shadow 0.3s ease;
}

.supa-screen--tilt.is-in {
    box-shadow: 0 28px 72px rgba(227, 69, 43, 0.12), 0 20px 60px rgba(0, 0, 0, 0.1);
}

.supa-screen:not(.supa-screen--tilt) {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.supa-screen:not(.supa-screen--tilt):hover {
    transform: translateY(-6px) scale(1.01);
}

.supa-screen img {
    width: 100%;
    display: block;
}

/* ── Testimonials ───────────────────────────────────────────── */
.supa-quotes {
    padding: 56px 0;
    background: #fff;
    border-block: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.supa-quotes__track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: supa-scroll 44s linear infinite;
}

.supa-quote {
    flex-shrink: 0;
    width: clamp(300px, 34vw, 380px);
    padding: 28px;
    border-radius: 20px;
    background: #f5f5f7;
    border: 1px solid #e8e8ed;
    margin: 0;
}

.supa-quote p {
    font-size: 15px;
    line-height: 1.55;
    color: #1d1d1f;
    margin-bottom: 16px;
}

.supa-quote cite {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6e6e73;
    font-style: normal;
}

/* ── Built for grid ─────────────────────────────────────────── */
.supa-built {
    padding: clamp(80px, 12vw, 120px) var(--pad-x);
    background: #fff;
}

.supa-built__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 40px auto 0;
}

.supa-built__card {
    padding: 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e8e8ed;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.supa-built__card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 48px rgba(227, 69, 43, 0.08);
    border-color: rgba(227, 69, 43, 0.2);
}

.supa-built__card h4 {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1d1d1f;
}

.supa-built__card p {
    font-size: 14px;
    line-height: 1.55;
    color: #6e6e73;
}

/* ── Download ─────────────────────────────────────────────────── */
.supa-download {
    position: relative;
    padding: clamp(80px, 12vw, 120px) var(--pad-x);
    background: #fff;
    text-align: center;
}

.supa-download__card {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(40px, 6vw, 56px);
    border-radius: 28px;
    background: #f5f5f7;
    border: 1px solid #e8e8ed;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.supa-download__card::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, transparent, rgba(227, 69, 43, 0.18), transparent 40%, rgba(227, 69, 43, 0.12), transparent);
    animation: supa-dl-glow 6s linear infinite;
    pointer-events: none;
}

@keyframes supa-dl-glow {
    to { transform: rotate(360deg); }
}

.supa-download__card > * {
    position: relative;
    z-index: 1;
}

.supa-download__card h2 {
    font-family: var(--font-title);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.supa-download__card p {
    color: #6e6e73;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.55;
}

.supa-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.supa-stores img {
    height: 44px;
    width: auto;
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.supa-faq {
    padding: clamp(80px, 12vw, 120px) var(--pad-x);
    background: #fff;
}

.supa-faq .faq-list {
    max-width: 720px;
    margin: 40px auto 0;
    border: 1px solid #e8e8ed;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}

.supa-faq .faq-item {
    border-bottom: 1px solid #e8e8ed;
    background: #fff;
}

.supa-faq .faq-item:last-child {
    border-bottom: none;
}

.supa-faq .faq-question {
    padding: 20px 24px;
    font-size: 16px;
}

/* ── Reveal ───────────────────────────────────────────────────── */
.supa-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.supa-reveal.is-in {
    opacity: 1;
    transform: none;
}

.supa-reveal--left {
    transform: translateX(-48px);
}

.supa-reveal--right {
    transform: translateX(48px);
}

.supa-reveal--scale {
    transform: scale(0.9);
}

.supa-reveal--left.is-in,
.supa-reveal--right.is-in,
.supa-reveal--scale.is-in {
    transform: none;
}

.supa-reveal--stagger {
    opacity: 1;
    transform: none;
    transition: none;
}

[data-reveal-child] {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
}

.supa-reveal--stagger.is-in [data-reveal-child].is-in {
    animation: supa-pop-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--reveal-i, 0) * 0.055s);
}

@keyframes supa-pop-in {
    to {
        opacity: 1;
        transform: none;
    }
}

.supa-h2.supa-reveal {
    transition: none;
}

.supa-h2.supa-reveal.is-in {
    animation: supa-headline-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes supa-headline-in {
    from {
        opacity: 0;
        transform: translateY(32px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .supa-feature__grid,
    .supa-built__grid {
        grid-template-columns: 1fr;
    }

    .supa-feature--flip .supa-feature__grid {
        direction: ltr;
    }

    .supa-demo {
        max-width: min(260px, 72vw);
    }
}

/* ── Origin story ───────────────────────────────────────────── */
.supa-story {
    position: relative;
    padding: clamp(72px, 11vw, 120px) var(--pad-x);
    background: #fff;
}

.supa-story--teaser {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.supa-story__grid {
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(36px, 6vw, 72px);
    align-items: center;
}

.supa-story__grid--flip {
    grid-template-columns: 0.95fr 1.05fr;
}

.supa-story__grid--flip .supa-story__copy {
    order: 2;
}

.supa-story__kicker {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E3452B;
}

.supa-story__copy h2,
.supa-story__copy h3 {
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #1d1d1f;
    line-height: 1.1;
}

.supa-story__copy h2 {
    font-size: clamp(30px, 4.4vw, 48px);
    margin-bottom: 18px;
}

.supa-story__copy h3 {
    font-size: clamp(24px, 3.2vw, 34px);
    margin-bottom: 14px;
}

.supa-story__copy p {
    font-size: 16px;
    line-height: 1.65;
    color: #6e6e73;
    max-width: 36em;
}

.supa-story__copy p + p {
    margin-top: 14px;
}

.supa-story__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 15px;
    font-weight: 600;
    color: #E3452B;
    text-decoration: none;
    transition: gap 0.25s ease, color 0.2s ease;
}

.supa-story__cta:hover {
    gap: 12px;
    color: #cc3d26;
}

.supa-story__visual {
    position: relative;
    border-radius: 28px;
    background:
        radial-gradient(ellipse 70% 55% at 50% 40%, rgba(227, 69, 43, 0.06), transparent 70%),
        linear-gradient(180deg, #fbfbfc 0%, #f4f4f6 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 280px;
}

.supa-story__visual img,
.supa-story__visual svg {
    display: block;
    width: 100%;
    height: auto;
}

.supa-story__visual--device {
    background: transparent;
    border: 0;
    min-height: 0;
    max-width: 260px;
    margin-inline: auto;
}

.supa-story__visual.is-in .story-draw {
    animation: story-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.supa-story__visual.is-in .story-rise {
    animation: story-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes story-draw {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: none; }
}

@keyframes story-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.supa-story__pair {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.supa-story__pair .supa-story__visual {
    min-height: 220px;
}

.supa-stats {
    max-width: 1100px;
    margin: clamp(48px, 7vw, 72px) auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.supa-stats__item {
    padding: 28px 20px 8px;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    text-align: left;
}

.supa-stats__item:last-child {
    border-right: 0;
}

.supa-stats__value {
    display: block;
    font-family: var(--font-title);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #1d1d1f;
    line-height: 1.1;
    margin-bottom: 8px;
}

.supa-stats__label {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: #6e6e73;
    max-width: 16em;
}

.supa-stats__note {
    max-width: 1100px;
    margin: 20px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: #86868b;
}

.supa-story-chapters {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--pad-x) clamp(64px, 9vw, 100px);
}

.supa-story-block {
    padding: clamp(48px, 7vw, 80px) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.supa-story-block:last-child {
    border-bottom: 0;
}

.supa-worlds {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.supa-worlds article {
    padding-top: 16px;
    border-top: 2px solid rgba(227, 69, 43, 0.35);
}

.supa-worlds h4 {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.supa-worlds p {
    font-size: 13px;
    line-height: 1.5;
    color: #6e6e73;
}

.supa-worlds strong {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #E3452B;
}

.supa-layers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 28px;
}

.supa-layers article {
    padding: 8px 0 0;
}

.supa-layers .supa-stats__value {
    font-size: clamp(26px, 3vw, 34px);
}

@media (max-width: 900px) {
    .supa-story__grid,
    .supa-story__grid--flip,
    .supa-story__pair,
    .supa-layers {
        grid-template-columns: 1fr;
    }

    .supa-story__grid--flip .supa-story__copy {
        order: 0;
    }

    .supa-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .supa-stats__item:nth-child(2) {
        border-right: 0;
    }

    .supa-stats__item:nth-child(1),
    .supa-stats__item:nth-child(2) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .supa-worlds {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .supa-built__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .supa-stats {
        grid-template-columns: 1fr;
    }

    .supa-stats__item {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .supa-stats__item:last-child {
        border-bottom: 0;
    }

    .supa-worlds {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .supa-title {
        font-size: clamp(28px, 9vw, 40px);
    }

    .supa-hero--compact .supa-title {
        font-size: clamp(28px, 8.5vw, 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .supa-marquee__track,
    .supa-quotes__track,
    .supa-demo,
    .supa-orb,
    .supa-download__card::before,
    .supa-story__visual.is-in .story-draw,
    .supa-story__visual.is-in .story-rise {
        animation: none;
    }

    .supa-line .char {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .supa-hero__item {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .supa-reveal,
    [data-reveal-child] {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
        filter: none;
    }

    .supa-hero__bg img {
        transform: none;
        will-change: auto;
    }
}