/*
    GLORY BE TO GOD,
    SanifuStudio Landing Page by MAFABI,
    Israel Mafabi Emmanuel,

    -> Main Stylesheet
    Design tokens derived from the SanifuStudio desktop app.
*/

@import url('https://fonts.googleapis.com/css2?family=Fascinate&family=Megrim&family=Poppins:wght@300;400;500;600;700&?family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&display=swap');

:root {
    /* Colors */
    --color-afro-bg: #050505;
    --color-afro-surface: #0A0A0A;
    --color-afro-surface-hover: #0F0F0F;
    --color-afro-bar: #18181A;
    --color-afro-tab-active: #3F3F41;
    --color-afro-border: rgba(255, 255, 255, 0.05);
    --color-afro-border-hover: rgba(255, 255, 255, 0.10);
    --color-afro-brand: #10B981;
    --color-afro-accent: #059669;
    --color-afro-accent-dark: #0a8d66;
    --color-afro-earth: #D4AF37;
    --color-afro-danger: #E63946;
    --color-afro-brand-shadow: #10b98156;
    --color-afro-brand-shadow-bright: #10b98180;

    /* Text */
    --text-primary: #F0F0F0;
    --text-secondary: #9CA3AF;
    --text-tertiary: #6B7280;
    --text-muted: #4B5563;

    /* Patterns */
    --pattern-bogolanfini: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 11l4-4 4 4-4 4-4-4zm12 0l4-4 4 4-4 4-4-4z' stroke='%2310B981' stroke-opacity='0.025' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    --pattern-wavy: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20c10 0 10-10 20-10s10 10 20 10-10 10-20 10S10 20 0 20z' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.015' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    --pattern-afro-motif: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2310B981' stroke-width='1' stroke-opacity='0.05'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z'/%3E%3Cpath d='M30 10L50 30L30 50L10 30Z' stroke-opacity='0.035'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%2310B981' fill-opacity='0.08'/%3E%3Cpath d='M0 0L8 8M60 0L52 8M0 60L8 52M60 60L52 52' stroke-opacity='0.04'/%3E%3C/g%3E%3C/svg%3E");

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;

    /* Layout */
    --max-width: 1200px;
    --navbar-height: 60px;
    --footer-height: 60px;

    /* Z-Index Scale */
    --z-base: 0;
    --z-card-overlay: 10;
    --z-navbar: 100;
    --z-mobile-menu: 200;
    --z-backdrop: 900;
    --z-modal: 1000;

    --sanifu-default-font: 'Poppins', sans-serif;
    --sanifu-logo-font: 'Fascinate', cursive;
    --sanifu-mafabi-font: 'Megrim', cursive;
    --sanifu-code-font: 'Google Sans Code', monospace;
    --sanifu-heading-font: 'Space Grotesk', sans-serif;
}

* {
    font-family: var(--sanifu-default-font);

    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;

    outline: none;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navbar-height) + 20px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-afro-bg);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to left, var(--color-afro-brand), var(--color-afro-accent-dark));

    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to left, #22d3a0, var(--color-afro-brand));

    box-shadow: 0px 1px 4px var(--color-afro-brand-shadow);
}

::-webkit-scrollbar-corner {
    background: var(--color-afro-bg);
}

body {
    background-color: var(--color-afro-bg);

    color: var(--text-primary);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-width: 280px;
    min-height: 100vh;
    overflow-x: hidden;
}

.snf_navbar {
    border-bottom: 1px solid var(--color-afro-border);
    border-radius: 0;

    display: flex;

    position: fixed;
    top: 0;

    z-index: var(--z-navbar);
    justify-content: space-between;
    align-items: center;

    padding: 0 var(--space-lg);

    width: 100%;
    height: var(--navbar-height);

    /* background: var(--color-afro-bg); */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    .snf_logo {
        color: var(--text-primary);
        font-family: var(--sanifu-logo-font);
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;

        cursor: pointer;

        transition: 300ms;

        span {
            color: var(--color-afro-brand);
            font-family: var(--sanifu-logo-font);
        }
    }

    .snf_logo:hover {
        transform: scale(1.05);
    }

    .snf_logo:active {
        transform: scale(0.95);
    }

    /* ── Minimalist Transparent Hamburger Toggle Button ── */
    .snf_nav_toggle {
        background: transparent;

        border: none;
        border-radius: 6px;

        display: none;
        z-index: calc(var(--z-navbar) + 1);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;

        cursor: pointer;

        box-shadow: none;

        padding: 0;

        transition: background 200ms ease, transform 200ms ease;

        width: 36px;
        height: 36px;

        .snf_nav_toggle_bar {
            background-color: var(--text-primary);

            border-radius: 2px;

            display: block;

            transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 200ms ease,
                background-color 250ms ease;
            transform-origin: center;

            width: 20px;
            height: 2px;
        }

        &:hover {
            background: rgba(255, 255, 255, 0.05);

            .snf_nav_toggle_bar {
                background-color: var(--color-afro-brand);
            }
        }

        &.snf_active {
            background: transparent;

            box-shadow: none;

            .snf_nav_toggle_bar:nth-child(1) {
                background-color: var(--color-afro-brand);

                transform: translateY(7px) rotate(45deg);
            }

            .snf_nav_toggle_bar:nth-child(2) {
                opacity: 0;

                transform: scaleX(0);
            }

            .snf_nav_toggle_bar:nth-child(3) {
                background-color: var(--color-afro-brand);

                transform: translateY(-7px) rotate(-45deg);
            }
        }
    }

    .snf_navbar_links {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-xl);

        height: fit-content;

        list-style: none;

        .snf_navbar_link {
            color: var(--text-primary);
            font-size: 0.82rem;
            text-decoration: none;

            pointer-events: auto;

            transition: 200ms;
        }

        .snf_navbar_link:hover {
            color: var(--color-afro-brand);
        }

        .snf_navbar_link:active {
            color: var(--color-afro-accent);
        }

        .snf_btn_nav {
            /* button background ~ being a gradient... simulating a pill or candy.. up to down*/
            background: linear-gradient(to bottom, var(--color-afro-brand), var(--color-afro-accent-dark));

            border-radius: 7px;

            color: var(--text-primary);
            font-size: 13.333px;
            font-weight: 400;
            text-decoration: none;

            display: flex;

            position: relative;
            justify-content: center;
            align-items: center;

            pointer-events: auto;

            box-shadow:
                inset 0px 1px 0px rgba(255, 255, 255, 0.411),
                0px 2px 7px var(--color-afro-brand-shadow);

            /* smooth, slightly springy transitions for the emotional response */
            transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 350ms ease,
                background 300ms ease;

            width: 140px;
            height: 32px;
            overflow: visible;
        }

        /* the shockwave ring — invisible until triggered */
        .snf_btn_nav::after {
            border-radius: inherit;

            position: absolute;
            inset: 0;

            pointer-events: none;
            content: '';

            opacity: 0;
        }

        /* when .snf_pulse is added, the ring fires outward */
        .snf_btn_nav.snf_pulse::after {
            animation: snf-shockwave 500ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
        }

        /* "I'm happy you hovered over me" — gentle lift + glow bloom */
        .snf_btn_nav:hover {
            background: linear-gradient(to bottom, #22d3a0, var(--color-afro-brand));

            box-shadow:
                0px 4px 14px var(--color-afro-brand-shadow-bright),
                0px 0px 20px rgba(16, 185, 129, 0.15);

            transform: translateY(-2px);
        }

        /* "I'm happy you clicked me" — press in + pulse ring */
        .snf_btn_nav:active {
            background: linear-gradient(to bottom, var(--color-afro-brand), var(--color-afro-accent-dark));

            box-shadow:
                0px 1px 4px var(--color-afro-brand-shadow);

            transition: transform 80ms ease,
                box-shadow 80ms ease,
                background 80ms ease;
            transform: translateY(1px) scale(0.97);
        }
    }
}

.snf_section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: var(--max-width);
    min-height: 100vh;
}

/* Hero section — full-bleed, breaks out of max-width for Imani */
.snf_section_hero {
    background:
        radial-gradient(ellipse 700px 500px at 10% 45%, rgba(16, 185, 129, 0.04) 0%, transparent 70%),
        var(--color-afro-bg);

    position: relative;

    width: 100%;
    max-width: none;
    overflow: hidden;
}

.snf_hero {
    display: flex;

    position: relative;
    justify-content: flex-start;
    align-items: center;

    padding: 0 128px;
    padding-top: var(--navbar-height);

    width: 100%;
    height: 100vh;
}

/* ── Imani background image ── */
/* Fills the entire hero, anchored right so she stays visible */
.snf_hero_bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    width: 100%;
    height: 100%;
    /* smooth gradient fade at the bottom edge so her bust & backdrop dissolve gracefully */
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);

    object-fit: cover;
    object-position: right center;
}

/* Left gradient overlay — ensures high contrast text readability on the left */
.snf_hero::before {
    background: linear-gradient(to right,
            var(--color-afro-bg) 0%,
            var(--color-afro-bg) 25%,
            rgba(5, 5, 5, 0.7) 50%,
            transparent 75%);
    content: '';

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;
}

/* Bottom gradient overlay — soft dissolve into the next section (#050505) */
.snf_hero::after {
    background: linear-gradient(to bottom, transparent 0%, var(--color-afro-bg) 100%);

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;

    pointer-events: none;

    height: 180px;

    content: '';
}

/* ── Text content — floats on top ── */
.snf_hero .snf_hero_content {
    display: flex;

    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-sx);

    max-width: 480px;

    .snf_hero_version_text {
        color: var(--text-secondary);
        font-family: var(--sanifu-code-font);
        font-size: 0.82rem;
        font-weight: 400;

        display: flex;
        justify-content: center;
        align-items: center;

        width: fit-content;
        height: fit-content;
    }

    h1 {
        font-family: var(--sanifu-logo-font);
        font-size: 2.5rem;
        font-weight: bold;
        text-align: left;

        span {
            color: var(--color-afro-brand);
            font-family: var(--sanifu-logo-font);
        }
    }

    .snf_about {
        color: var(--text-secondary);
        font-family: var(--sanifu-default-font);
        font-size: 0.93rem;
        font-weight: 400;
        text-align: left;
    }

    .snf_cta_group {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 14px;

        margin-top: 10px;
    }
}

/* ── Primary 3D Pill Button ── */
.snf_btn_hero {
    background: linear-gradient(to bottom, var(--color-afro-brand), var(--color-afro-accent-dark));

    border-radius: 7px;

    color: var(--text-primary);
    font-size: 13.333px;
    font-weight: 400;
    text-decoration: none;

    display: flex;

    position: relative;
    justify-content: center;
    align-items: center;

    gap: 10px;

    pointer-events: auto;

    box-shadow:
        inset 0px 1px 0px rgba(255, 255, 255, 0.411),
        0px 2px 7px var(--color-afro-brand-shadow);

    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 350ms ease,
        background 300ms ease;

    width: 160px;
    height: 32px;
    overflow: visible;
}

.snf_btn_hero::after {
    border-radius: inherit;

    position: absolute;
    inset: 0;

    pointer-events: none;
    content: '';

    opacity: 0;
}

.snf_btn_hero.snf_pulse::after {
    animation: snf-shockwave 500ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.snf_btn_hero:hover {
    background: linear-gradient(to bottom, #22d3a0, var(--color-afro-brand));

    box-shadow:
        0px 4px 14px var(--color-afro-brand-shadow-bright),
        0px 0px 20px rgba(16, 185, 129, 0.15);

    transform: translateY(-2px);
}

.snf_btn_hero:active {
    background: linear-gradient(to bottom, var(--color-afro-brand), var(--color-afro-accent-dark));

    box-shadow: 0px 1px 4px var(--color-afro-brand-shadow);

    transition: transform 80ms ease,
        box-shadow 80ms ease,
        background 80ms ease;
    transform: translateY(1px) scale(0.97);
}

/* ── Secondary 3D Pill Button — White Pearl ── */
.snf_btn_hero_secondary {
    background: linear-gradient(to bottom, #F2F2F4, #BCBCC0);

    border-radius: 7px;

    color: var(--color-afro-accent-dark);
    font-size: 13.333px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;

    display: inline-flex;

    position: relative;
    justify-content: center;
    align-items: center;
    gap: 8px;

    pointer-events: auto;

    box-shadow:
        inset 0px 1px 0px rgba(255, 255, 255, 0.6),
        0px 2px 7px rgba(0, 0, 0, 0.4);

    padding: 0 18px;

    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 350ms ease,
        background 300ms ease,
        color 300ms ease;

    width: fit-content;

    min-width: 160px;
    height: 32px;
    overflow: visible;
}

.snf_btn_hero_secondary::after {
    border-radius: inherit;

    position: absolute;
    inset: 0;

    pointer-events: none;
    content: '';

    opacity: 0;
}

.snf_btn_hero_secondary.snf_pulse::after {
    animation: snf-shockwave-white 500ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.snf_btn_hero_secondary:hover {
    background: linear-gradient(to bottom, #FAFAFC, #D0D0D4);

    color: var(--color-afro-brand);

    box-shadow:
        inset 0px 1px 0px rgba(255, 255, 255, 0.8),
        0px 4px 14px rgba(255, 255, 255, 0.15),
        0px 0px 16px rgba(255, 255, 255, 0.08);

    transform: translateY(-2px);
}

.snf_btn_hero_secondary:active {
    background: linear-gradient(to bottom, #D8D8DC, #ACACB0);

    box-shadow:
        inset 0px 2px 4px rgba(0, 0, 0, 0.15),
        0px 1px 3px rgba(0, 0, 0, 0.3);

    transition: transform 80ms ease,
        box-shadow 80ms ease,
        background 80ms ease;
    transform: translateY(1px) scale(0.97);
}

/* ── Footnote Info Text ── */
.snf_info_text {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;

    display: inline-flex;
    position: relative;
    z-index: 1;
    justify-content: center;
    align-items: center;
    gap: 6px;

    margin-top: 14px;

    span {
        display: inline;
    }

    @media (max-width: 600px) {
        text-align: left;

        align-items: flex-start;

        margin-right: auto;
        margin-left: auto;

        max-width: 320px;
    }
}

/* ──────────────────────────────────────────────────────
   Features & App Showcase — Alternating Spotlight Section
   ────────────────────────────────────────────────────── */
.snf_section_features {
    background: var(--color-afro-bg);

    position: relative;

    padding: var(--space-5xl) var(--space-lg);

    width: 100%;
    max-width: none;
    overflow: hidden;

    &::before {
        background:
            radial-gradient(ellipse 900px 500px at 15% 25%, rgba(16, 185, 129, 0.045) 0%, transparent 70%),
            radial-gradient(ellipse 800px 450px at 85% 75%, rgba(16, 185, 129, 0.035) 0%, transparent 70%),
            radial-gradient(ellipse 600px 350px at 50% 50%, rgba(212, 175, 55, 0.015) 0%, transparent 65%),
            var(--pattern-afro-motif);
        background-size: auto, auto, auto, 60px 60px;

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;
        content: '';
        -webkit-mask-image:
            radial-gradient(ellipse 50% 45% at 0% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%),
            radial-gradient(ellipse 50% 45% at 100% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);
        mask-image:
            radial-gradient(ellipse 50% 45% at 0% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%),
            radial-gradient(ellipse 50% 45% at 100% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);

        opacity: 0.85;
    }

    .snf_features {
        display: flex;
        position: relative;
        z-index: 1;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4xl);

        margin: 0 auto;

        width: 100%;
        max-width: 1180px;

        /* ── Section header ── */
        .snf_features_header {
            text-align: center;

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-xs);

            .snf_features_headline {
                color: var(--text-primary);
                font-family: var(--sanifu-logo-font);
                font-size: 2.5rem;

                span {
                    color: var(--color-afro-brand);
                    font-family: var(--sanifu-logo-font);
                }
            }

            .snf_features_subheadline {
                color: var(--text-secondary);
                font-family: var(--sanifu-default-font);
                font-size: 0.93rem;
                font-weight: 400;

                max-width: 620px;
            }
        }

        /* ── Alternating Showcase List ── */
        .snf_showcase_list {
            display: flex;
            flex-direction: column;
            gap: 140px;

            width: 100%;
        }

        /* ── Showcase Row ── */
        .snf_showcase_row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);

            align-items: center;
            gap: clamp(32px, 5vw, 64px);

            width: 100%;

            &.snf_row_reverse {
                grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);

                .snf_showcase_text {
                    order: 2;
                }

                .snf_showcase_media {
                    order: 1;
                }
            }

            /* ── Text Content Column ── */
            .snf_showcase_text {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-xs);

                width: 100%;
                min-width: 0;

                .snf_showcase_title {
                    color: var(--text-primary);
                    font-family: var(--sanifu-logo-font);
                    font-size: 1.875rem;
                }

                .snf_showcase_desc {
                    color: var(--text-secondary);
                    font-family: var(--sanifu-default-font);
                    font-size: 0.93rem;
                }

                .snf_showcase_points {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    margin-top: 14px;
                    padding: 0;

                    width: 100%;
                    list-style: none;

                    .snf_point_item {
                        color: var(--text-secondary);
                        font-size: 0.93rem;
                        line-height: 1.5;

                        display: flex;
                        align-items: flex-start;
                        gap: 10px;

                        strong {
                            color: #FFFFFF;
                            font-weight: 600;

                            display: inline;

                            margin-right: 4px;
                        }

                        /* ── 3D Edible Checkmark Bullet Icon ── */
                        .snf_point_icon {
                            background: linear-gradient(135deg, #10B981 0%, #059669 100%);

                            border: none;
                            border-radius: 50%;

                            color: #FFFFFF;

                            display: flex;
                            justify-content: center;
                            align-items: center;

                            box-shadow:
                                inset 0px 1px 0px rgba(255, 255, 255, 0.5),
                                0px 2px 7px var(--color-afro-brand-shadow),
                                0px 0px 12px rgba(16, 185, 129, 0.2);

                            margin-top: 1px;

                            width: 20px;
                            height: 20px;
                            flex-shrink: 0;

                            svg {
                                pointer-events: none;
                                stroke: #FFFFFF;
                                stroke-width: 2.8;
                            }
                        }
                    }
                }
            }

            /* ── Media Column / Mock Window Frame ── */
            .snf_showcase_media {
                position: relative;

                width: 100%;
                min-width: 0;

                .snf_window_frame {
                    background: #0D0D0F;

                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 12px;

                    box-shadow:
                        0 16px 48px rgba(0, 0, 0, 0.75),
                        0 0 40px rgba(16, 185, 129, 0.03),
                        0 0 0 1px rgba(16, 185, 129, 0.06);

                    transition:
                        transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 350ms ease,
                        border-color 350ms ease;

                    width: 100%;
                    min-width: 0;
                    max-width: 100%;
                    overflow: hidden;

                    /* Window Chrome Header */
                    .snf_window_chrome {
                        background: #141418;

                        border-bottom: 1px solid rgba(255, 255, 255, 0.06);

                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: var(--space-md);

                        user-select: none;

                        padding: 0 0 0 var(--space-md);

                        width: 100%;
                        min-width: 0;
                        height: 36px;
                        overflow: hidden;

                        .snf_window_brand {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            flex-shrink: 0;

                            .snf_window_brand_logo {
                                color: var(--text-primary);
                                font-family: var(--sanifu-logo-font);
                                font-size: 0.813rem;
                                line-height: 1;

                                span {
                                    color: var(--color-afro-brand);
                                    font-family: var(--sanifu-logo-font);
                                }
                            }
                        }

                        .snf_window_title {
                            color: var(--text-tertiary);
                            font-family: var(--sanifu-default-font);
                            font-size: 0.688rem;
                            font-weight: 500;

                            text-align: center;
                            white-space: nowrap;

                            flex: 1;

                            padding: 0 var(--space-sm);

                            min-width: 0;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .snf_window_controls {
                            display: flex;
                            align-items: stretch;

                            height: 36px;
                            flex-shrink: 0;

                            .snf_win_btn {
                                background: transparent;

                                border: none;

                                color: var(--text-tertiary);
                                font-size: 11px;

                                display: flex;
                                justify-content: center;
                                align-items: center;

                                cursor: default;

                                transition: background 150ms ease, color 150ms ease;

                                width: 42px;
                                height: 100%;

                                &:hover {
                                    background: rgba(255, 255, 255, 0.06);

                                    color: var(--text-primary);
                                }

                                &.snf_win_btn_close:hover {
                                    background: #C42B1C;

                                    color: #fff;
                                }

                                svg {
                                    pointer-events: none;
                                }
                            }
                        }
                    }

                    /* Window Screen Viewport */
                    .snf_window_screen {
                        background: #08080A;

                        position: relative;

                        width: 100%;
                        min-width: 0;
                        max-width: 100%;
                        aspect-ratio: 1366 / 768;
                        overflow: hidden;

                        img {
                            display: block;

                            width: 100%;
                            max-width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: top left;
                        }
                    }
                }
            }
        }
    }
}

/* ──────────────────────────────────────────────────────
   How It Works Section — 3-Step Pipeline Flow
   ────────────────────────────────────────────────────── */
.snf_section_how {
    background: var(--color-afro-bg);

    position: relative;

    padding: var(--space-5xl) var(--space-lg);

    width: 100%;
    max-width: none;
    overflow: hidden;

    &::before {
        background:
            radial-gradient(ellipse 900px 450px at 50% 25%, rgba(16, 185, 129, 0.05) 0%, transparent 70%),
            var(--pattern-afro-motif);
        background-size: auto, 60px 60px;

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;
        content: '';
        -webkit-mask-image:
            radial-gradient(ellipse 50% 45% at 0% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%),
            radial-gradient(ellipse 50% 45% at 100% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);
        mask-image:
            radial-gradient(ellipse 50% 45% at 0% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%),
            radial-gradient(ellipse 50% 45% at 100% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);

        opacity: 0.85;
    }

    .snf_how {
        display: flex;
        position: relative;
        z-index: 1;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3xl);

        margin: 0 auto;

        width: 100%;
        max-width: 1180px;

        /* ── Section header ── */
        .snf_how_header {
            text-align: center;

            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-xs);

            .snf_how_headline {
                color: var(--text-primary);
                font-family: var(--sanifu-logo-font);
                font-size: 2.5rem;

                span {
                    color: var(--color-afro-brand);
                    font-family: var(--sanifu-logo-font);
                }
            }

            .snf_how_subheadline {
                color: var(--text-secondary);
                font-family: var(--sanifu-default-font);
                font-size: 0.93rem;
                font-weight: 400;

                max-width: 620px;
            }
        }

        /* ── 3-Step Process Flow ── */
        .snf_how_steps {
            display: grid;
            position: relative;
            gap: var(--space-xl);

            width: 100%;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            /* Connecting pipeline line on larger screens */
            .snf_how_connector {
                background: linear-gradient(to right,
                        rgba(16, 185, 129, 0.1),
                        rgba(16, 185, 129, 0.4),
                        rgba(16, 185, 129, 0.1));

                position: absolute;
                top: 48px;
                right: 12%;
                left: 12%;
                z-index: 0;

                pointer-events: none;

                height: 2px;

                @media (max-width: 850px) {
                    display: none;
                }
            }

            /* Step Card */
            .snf_how_step_card {
                /* 3D dark glass surface */
                background: linear-gradient(160deg, #181820 0%, #0E0E12 60%, #0A0A0C 100%);

                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 16px;


                display: flex;
                position: relative;
                z-index: 1;
                flex-direction: column;
                gap: var(--space-sm);

                padding: var(--space-xl);

                transition:
                    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    border-color 300ms ease,
                    box-shadow 300ms ease;

                min-height: 190px;
                overflow: hidden;

                /* ── 3D Step Badge ── */
                .snf_how_step_badge {
                    display: inline-flex;
                    position: relative;
                    z-index: 1;
                    align-items: center;
                    gap: 12px;

                    margin-bottom: 4px;

                    width: fit-content;

                    .snf_how_step_num {
                        background: linear-gradient(to bottom, var(--color-afro-brand), var(--color-afro-accent-dark));

                        border-radius: 50%;

                        color: #FFFFFF;

                        font-family: var(--sanifu-logo-font);
                        font-size: 20px;
                        font-weight: 700;
                        line-height: 1;

                        display: inline-flex;
                        justify-content: center;
                        align-items: center;

                        box-shadow:
                            inset 0px 1px 0px rgba(255, 255, 255, 0.45),
                            0px 2px 7px var(--color-afro-brand-shadow);
                        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

                        width: 48px;
                        min-width: 48px;
                        height: 48px;
                        flex-shrink: 0;
                        aspect-ratio: 1 / 1;
                    }

                    .snf_how_step_label {
                        color: #FFFFFF;
                        font-family: var(--sanifu-logo-font);
                        font-size: 1.5rem;

                        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
                    }
                }

                h3 {
                    color: var(--text-primary);
                    font-family: var(--sanifu-default-font);
                    font-size: 1.125rem;
                    font-weight: 600;

                    position: relative;
                    z-index: 1;

                    margin-top: 2px;
                }

                p {
                    color: var(--text-secondary);
                    font-family: var(--sanifu-default-font);
                    font-size: 0.85rem;
                    font-weight: 400;

                    position: relative;
                    z-index: 1;

                    em {
                        font-style: normal;

                        color: var(--color-afro-brand);
                        font-weight: 500;
                    }
                }
            }
        }
    }
}

/* ──────────────────────────────────────────────────────
   Private Alpha Section — 3D Invitation Card
   ────────────────────────────────────────────────────── */
.snf_section_alpha {
    background: var(--color-afro-bg);

    display: flex;
    position: relative;
    justify-content: center;

    padding: var(--space-5xl) var(--space-lg);

    width: 100%;
    max-width: none;
    overflow: hidden;

    &::before {
        background:
            radial-gradient(ellipse 900px 500px at 50% 40%, rgba(16, 185, 129, 0.06) 0%, transparent 70%),
            var(--pattern-afro-motif);
        background-size: auto, 60px 60px;

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;
        content: '';
        -webkit-mask-image:
            radial-gradient(ellipse 50% 45% at 0% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%),
            radial-gradient(ellipse 50% 45% at 100% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);
        mask-image:
            radial-gradient(ellipse 50% 45% at 0% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%),
            radial-gradient(ellipse 50% 45% at 100% 50%, black 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);

        opacity: 0.85;
    }
}

.snf_alpha {
    text-align: center;

    display: flex;
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);

    margin: 0 auto;

    width: 100%;
    max-width: 800px;

    /* ── Section Header ── */
    .snf_alpha_header {
        text-align: center;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-xs);

        .snf_alpha_headline {
            color: var(--text-primary);
            font-family: var(--sanifu-logo-font);
            font-size: 2.5rem;

            span {
                color: var(--color-afro-brand);
                font-family: var(--sanifu-logo-font);
            }
        }

        .snf_alpha_subheadline {
            color: var(--text-secondary);
            font-family: var(--sanifu-default-font);
            font-size: 0.93rem;
            font-weight: 400;

            max-width: 620px;
        }
    }

    /* ── Details & Action CTAs ── */
    .snf_alpha_details {
        display: flex;
        flex-direction: column;

        align-items: center;
        gap: var(--space-sm);

        width: 100%;
    }

    .snf_alpha_cta_group {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .snf_btn_wa {
        white-space: nowrap;

        padding: 0 22px;

        width: fit-content;
        min-width: 190px;
    }

    .alpha {
        white-space: nowrap;

        padding: 0 22px;

        width: fit-content;
        min-width: 190px;
    }

    /* ── Trust Info Footnote ── */
    .snf_alpha_trust_pill {
        color: var(--text-tertiary);
        font-family: var(--sanifu-default-font);
        font-size: 0.75rem;

        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 8px;

        opacity: 0.75;

        margin-top: 4px;
    }
}

/* ── Footer ── */
.snf_footer {
    border-top: 1px solid var(--color-afro-border);

    font-size: 0.82rem;
    font-weight: 400;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 32px;

    padding: 0 var(--space-lg);

    width: 100%;
    height: var(--footer-height);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.snf_footer p {
    color: var(--text-primary);
    font-family: var(--sanifu-default-font);
}

.snf_footer a {
    color: var(--text-primary);

    font-family: var(--sanifu-mafabi-font);
    font-weight: 700;
    text-decoration: none;

    transition: color 240ms ease, text-decoration 240ms ease, text-decoration-color 240ms ease;
}

.snf_footer a:hover {
    color: var(--color-afro-brand);
    text-decoration: underline;
    text-decoration-color: var(--color-afro-brand);
}

/* ── Shockwave keyframes ── */
/* The green energy expands outward as a ring and dissolves */
@keyframes snf-shockwave {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
        opacity: 1;
    }

    70% {
        box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
        opacity: 0.6;
    }

    100% {
        box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
        opacity: 0;
    }
}

/* White pearl energy expands outward */
@keyframes snf-shockwave-white {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
        opacity: 1;
    }

    70% {
        box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
        opacity: 0.6;
    }

    100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
        opacity: 0;
    }
}

/* Live Status Pulse Dot */
@keyframes snf-pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* ──────────────────────────────────────────────────────
   Mobile Menu Backdrop & Body Scroll Lock
   ────────────────────────────────────────────────────── */
.snf_nav_backdrop {
    background: rgba(0, 0, 0, 0.4);

    position: fixed;
    top: var(--navbar-height);
    inset: 0;
    z-index: calc(var(--z-navbar) - 1);

    pointer-events: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    opacity: 0;

    transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.snf_nav_backdrop.snf_active {
    pointer-events: auto;

    opacity: 1;
}

body.snf_no_scroll {
    overflow: hidden !important;
    touch-action: none;
}

/* ──────────────────────────────────────────────────────
   Responsive Breakpoints
   ────────────────────────────────────────────────────── */

/* ── Tablet & Small Laptops (<= 1024px) ── */
@media (max-width: 1024px) {
    .snf_hero {
        padding: 0 48px;
        padding-top: var(--navbar-height);
    }

    .snf_section_preview {
        padding: var(--space-4xl) var(--space-lg);
    }

    .snf_section_features {
        padding: var(--space-4xl) var(--space-lg);
    }

    .snf_section_how {
        padding: var(--space-4xl) var(--space-lg);
    }

    .snf_section_alpha {
        padding: var(--space-4xl) var(--space-lg);
    }

    .snf_alpha_card {
        padding: var(--space-3xl) var(--space-xl);
    }
}

/* ── Tablet & Mobile (<= 860px) — Hamburger Menu & Centered Hero ── */
@media (max-width: 860px) {

    /* Navbar & Mobile Drawer */
    .snf_navbar {
        padding: 0 var(--space-md);
    }

    .snf_navbar .snf_nav_toggle,
    .snf_nav_toggle {
        display: flex !important;
    }

    .snf_navbar .snf_navbar_links,
    .snf_navbar_links {
        background: rgba(5, 5, 5, 0.70);

        border-bottom: 1px solid var(--color-afro-border);

        display: flex;
        position: fixed;
        top: var(--navbar-height);
        right: 0;
        left: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 6px;

        pointer-events: none;

        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);

        opacity: 0;

        padding: 24px 20px 32px 20px;

        transition:
            opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 280ms;
        transform: translateY(-12px);

        width: 100%;
        max-height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        visibility: hidden;
    }

    .snf_navbar .snf_navbar_links.snf_active,
    .snf_navbar_links.snf_active {
        pointer-events: auto !important;

        opacity: 1 !important;

        transform: translateY(0) !important;
        visibility: visible !important;
    }

    .snf_navbar .snf_navbar_links li,
    .snf_navbar_links li {
        width: 100%;
        list-style: none;
    }

    .snf_navbar .snf_navbar_links .snf_navbar_link,
    .snf_navbar_links .snf_navbar_link {
        border-radius: 8px;

        color: var(--text-primary);
        font-size: 0.82rem;
        font-weight: 400;

        display: flex;
        align-items: center;

        padding: 12px 16px;

        transition: all 200ms ease;

        width: 100%;
    }

    .snf_navbar .snf_navbar_links .snf_navbar_link:hover,
    .snf_navbar .snf_navbar_links .snf_navbar_link:focus,
    .snf_navbar_links .snf_navbar_link:hover,
    .snf_navbar_links .snf_navbar_link:focus {
        background: rgba(255, 255, 255, 0.05);

        color: var(--color-afro-brand);

        padding-left: 20px;
    }

    .snf_navbar .snf_navbar_links .snf_nav_cta_item,
    .snf_navbar_links .snf_nav_cta_item {
        margin-top: 10px;

        width: 100%;
    }

    .snf_navbar .snf_navbar_links .snf_btn_nav,
    .snf_navbar_links .snf_btn_nav {
        border-radius: 8px;

        font-size: 14.5px;

        width: 100%;
        height: 42px;
    }

    /* ── Hero Section on Mobile: Illuminated Model + Centered Content ── */
    .snf_hero {
        text-align: center;

        position: relative;
        justify-content: flex-end;
        align-items: center;

        padding: 60px 20px 40px 20px;

        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .snf_hero_bg {
        object-position: 72% 5%;

        opacity: 0.95;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0.5) 65%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, 0.5) 65%, transparent 100%);
    }

    /* Soft top-to-bottom dissolve keeping Imani bright while ensuring text is 100% legible */
    .snf_hero::before {
        background: linear-gradient(to bottom,
                rgba(5, 5, 5, 0.08) 0%,
                rgba(5, 5, 5, 0.20) 30%,
                rgba(5, 5, 5, 0.75) 55%,
                rgba(5, 5, 5, 0.95) 75%,
                var(--color-afro-bg) 100%);
    }

    .snf_hero::after {
        height: 100px;
    }

    .snf_hero .snf_hero_content {
        text-align: center;

        z-index: 2;
        align-items: center;
        gap: 10px;

        margin-top: 28vh;

        width: 100%;
        max-width: 480px;
    }

    .snf_hero .snf_hero_content h1 {
        font-size: 2.5rem;
        text-align: center;

        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8);
    }

    .snf_hero .snf_hero_content .snf_about {
        color: var(--text-secondary);
        font-size: 0.93rem;
        text-align: center;

        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);

        max-width: 400px;
    }

    .snf_hero .snf_hero_content .snf_cta_group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;

        margin-top: 10px;

        width: 100%;
        flex-wrap: wrap;
    }

    .snf_hero .snf_hero_content .snf_cta_group .snf_btn_hero,
    .snf_hero .snf_hero_content .snf_cta_group .snf_btn_hero_secondary {
        font-size: 0.82rem;

        display: inline-flex;
        justify-content: center;
        align-items: center;

        width: 290px;
        min-width: 160px;
        height: 38px;
    }

    .snf_hero .snf_hero_content .snf_info_text {
        font-size: 0.75rem;
        text-align: center;

        justify-content: center;

        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);

        margin-top: 8px;
        flex-wrap: wrap;
    }

    /* Features Section / Showcase */
    .snf_section_features {
        padding: var(--space-3xl) var(--space-md);
    }

    .snf_section_features .snf_features {
        gap: var(--space-2xl);
    }

    .snf_section_features .snf_features .snf_showcase_list {
        gap: 40px;
    }

    .snf_section_features .snf_features .snf_showcase_row,
    .snf_section_features .snf_features .snf_showcase_row.snf_row_reverse {
        grid-template-columns: minmax(0, 1fr);

        gap: 24px;

        width: 100%;
    }

    .snf_section_features .snf_features .snf_showcase_row.snf_row_reverse .snf_showcase_text {
        order: 1;
    }

    .snf_section_features .snf_features .snf_showcase_row.snf_row_reverse .snf_showcase_media {
        order: 2;
    }

    .snf_showcase_media .snf_window_frame .snf_window_chrome {
        padding: 0 0 0 10px;

        height: 32px;
    }

    .snf_showcase_media .snf_window_frame .snf_window_chrome .snf_win_btn {
        width: 36px;
    }

    /* How It Works Section */
    .snf_section_how {
        padding: var(--space-3xl) var(--space-md);
    }

    .snf_section_how .snf_how {
        gap: var(--space-2xl);
    }

    .snf_section_how .snf_how .snf_how_steps {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .snf_section_how .snf_how .snf_how_steps .snf_how_connector {
        display: none;
    }

    .snf_section_how .snf_how .snf_how_steps .snf_how_step_card {
        padding: 22px 18px;

        min-height: 150px;
    }

    /* Private Alpha Section */
    .snf_section_alpha {
        padding: var(--space-3xl) var(--space-md);
    }

    .snf_alpha_cta_group {
        flex-direction: column;
        align-items: center;
        gap: 12px;

        width: 100%;
    }

    .snf_alpha_cta_group .snf_btn_hero,
    .snf_alpha_cta_group .snf_btn_hero_secondary,
    .snf_alpha .snf_btn_wa,
    .snf_alpha .snf_btn_hero_secondary {
        font-size: 0.82rem;

        width: 100%;
        min-width: unset;
        max-width: 290px;
        height: 38px;
    }

    .snf_alpha_trust_pill {
        font-size: 0.75rem;
        text-align: center;

        padding: 5px 12px;

        max-width: 100%;
    }
}

/* ── Compact Mobile Viewports (<= 480px) ── */
@media (max-width: 480px) {
    .snf_hero {
        padding: 55px 16px 36px 16px;
    }

    .snf_hero_bg {
        object-position: 72% 3%;
    }

    .snf_hero .snf_hero_content {
        margin-top: 24vh;
    }

    .snf_hero .snf_hero_content h1 {
        font-size: 2.5rem;
    }

    .snf_hero .snf_hero_content .snf_about {
        font-size: 0.82rem;
    }

    .snf_showcase_text .snf_showcase_desc {
        font-size: 0.82rem;
    }

    .snf_showcase_text .snf_showcase_points .snf_point_item {
        font-size: 0.82rem;

        gap: 10px;
    }

    .snf_how_step_badge .snf_how_step_num {
        font-size: 0.82rem;

        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .snf_how_step_badge .snf_how_step_label {
        font-size: 0.82rem;
    }

    .snf_footer {
        font-size: 0.75rem;

        padding: 0 12px;
    }
}

/* ── Very Narrow Mobile (<= 380px) ── */
@media (max-width: 380px) {
    .snf_hero .snf_hero_content .snf_cta_group {
        flex-direction: column;
        align-items: center;
        gap: 10px;

        width: 100%;
    }

    .snf_hero .snf_hero_content .snf_cta_group .snf_btn_hero,
    .snf_hero .snf_hero_content .snf_cta_group .snf_btn_hero_secondary {
        width: 100%;
        max-width: 290px;
    }
}