:root {
    --bg: #0b0a0a;
    --bg-soft: #121010;

    --panel: rgba(20, 17, 17, 0.84);
    --panel-strong: rgba(16, 14, 14, 0.96);
    --panel-light: rgba(255, 255, 255, 0.04);

    --text: #f5efe8;
    --muted: #aa9f96;
    --muted-strong: #d7ccc3;

    --gold: #efb458;
    --gold-strong: #ff9f43;
    --gold-soft: rgba(239, 180, 88, 0.14);

    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(239, 180, 88, 0.24);

    --glow-1: rgba(255, 159, 67, 0.12);
    --glow-2: rgba(194, 120, 74, 0.08);

    --shadow:
        0 30px 100px rgba(0, 0, 0, 0.42);

    --radius-xl: 36px;
    --radius-lg: 28px;
    --radius-md: 22px;
    --radius-sm: 16px;

    --max-width: 1380px;
}


/* ==========================================================================
   BASE
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(circle at 8% 8%,
            var(--glow-1),
            transparent 24%),
        radial-gradient(circle at 90% 16%,
            var(--glow-2),
            transparent 20%),
        radial-gradient(circle at 50% 65%,
            rgba(255, 184, 107, 0.035),
            transparent 34%),
        linear-gradient(180deg,
            #0b0a0a 0%,
            #0c0a0a 46%,
            #090808 100%);

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}


/* ==========================================================================
   PAGE SHELL
   ========================================================================== */

.landing-shell {
    width: min(calc(100% - 36px),
            var(--max-width));

    margin:
        18px auto 48px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.landing-header {
    position: sticky;

    top: 14px;

    z-index: 100;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 28px;

    padding:
        17px 20px;

    border-radius: 28px;

    border:
        1px solid var(--line);

    background:
        rgba(10, 9, 9, 0.86);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.32);
}


/* ==========================================================================
   BRAND
   ========================================================================== */

.brand {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: max-content;
}

.brand-logo {
    width: 46px;
    height: 46px;

    object-fit: cover;

    border-radius: 14px;

    box-shadow:
        0 0 28px rgba(239, 180, 88, 0.18);
}

.brand-copy {
    min-width: 0;
}

.brand-title {
    font-size: 18px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.035em;
}

.brand-subtitle {
    margin-top: 5px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.landing-nav {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;
}

.landing-nav a {
    padding:
        11px 15px;

    border-radius: 14px;

    color: var(--muted-strong);

    font-size: 14px;

    font-weight: 700;

    transition:
        background 160ms ease,
        color 160ms ease;
}

.landing-nav a:hover {
    color: var(--text);

    background:
        rgba(255, 255, 255, 0.05);
}


/* ==========================================================================
   HEADER ACTIONS
   ========================================================================== */

.landing-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding:
        0 20px;

    border-radius: 16px;

    border:
        1px solid transparent;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.btn:hover {
    transform:
        translateY(-2px);
}

.btn-primary {
    color: #21140b;

    background:
        linear-gradient(135deg,
            var(--gold),
            var(--gold-strong));

    box-shadow:
        0 12px 34px rgba(239, 180, 88, 0.2);
}

.btn-primary:hover {
    box-shadow:
        0 16px 44px rgba(239, 180, 88, 0.28);
}

.btn-secondary {
    color: var(--text);

    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        var(--line);
}

.btn-secondary:hover {
    border-color:
        var(--line-strong);

    background:
        rgba(255, 255, 255, 0.06);
}

.btn.full {
    width: 100%;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.eyebrow {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding:
        9px 14px;

    margin-bottom: 18px;

    border-radius: 999px;

    border:
        1px solid rgba(239, 180, 88, 0.18);

    background:
        var(--gold-soft);

    color: #ebd8ab;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.01em;
}

.eyebrow.small {
    padding:
        8px 12px;

    margin-bottom: 15px;

    font-size: 12px;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero-section {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr) minmax(0, 1.08fr);

    align-items: center;

    gap: 48px;

    min-height: 720px;

    padding:
        72px 0 84px;
}

.hero-copy {
    min-width: 0;
}

.hero-copy h1 {
    margin: 0;

    max-width: 650px;

    font-size:
        clamp(62px,
            7vw,
            108px);

    line-height: 0.88;

    letter-spacing: -0.075em;
}

.hero-text {
    max-width: 620px;

    margin:
        28px 0 0;

    color: var(--muted-strong);

    font-size: 20px;

    line-height: 1.55;
}

.hero-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 30px;
}


/* ==========================================================================
   HERO PRODUCT IMAGE
   ========================================================================== */

.hero-visual {
    min-width: 0;

    padding: 14px;

    border-radius: 38px;

    border:
        1px solid rgba(255, 255, 255, 0.075);

    background:
        radial-gradient(circle at 50% 0%,
            rgba(255, 174, 81, 0.08),
            transparent 38%),
        linear-gradient(180deg,
            rgba(24, 19, 19, 0.9),
            rgba(12, 10, 10, 0.98));

    box-shadow:
        var(--shadow);
}

.app-shot-frame {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 28px;

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

    background:
        rgba(16, 14, 16, 0.88);

    box-shadow:
        0 0 0 1px rgba(255, 184, 107, 0.025) inset,
        0 30px 90px rgba(0, 0, 0, 0.32);
}

.hero-shot {
    aspect-ratio: 16 / 10;
}

.showcase-shot {
    aspect-ratio: 16 / 9;
}

.app-shot-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        top center;
}


/* ==========================================================================
   PRODUCT SHOWCASE
   ========================================================================== */

.product-showcase-section {
    padding:
        72px 0 92px;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);
}

.product-showcase-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 32px;

    margin-bottom: 34px;
}

.product-showcase-heading h2 {
    margin: 0;

    max-width: 780px;

    font-size:
        clamp(46px,
            6vw,
            82px);

    line-height: 0.94;

    letter-spacing: -0.065em;
}

.showcase-instruction {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 8px;

    color: var(--muted);

    font-size: 14px;

    font-weight: 700;
}

.showcase-arrow {
    color: var(--gold);

    font-size: 26px;

    line-height: 1;
}


/* ==========================================================================
   HORIZONTAL SWIPE TRACK
   ========================================================================== */

.product-swipe-track {
    display: flex;

    gap: 22px;

    width: 100%;

    overflow-x: auto;

    overscroll-behavior-x: contain;

    scroll-snap-type:
        x mandatory;

    scrollbar-width: none;

    padding:
        2px 0 20px;
}

.product-swipe-track::-webkit-scrollbar {
    display: none;
}


/* ==========================================================================
   PRODUCT SLIDES
   ========================================================================== */

.product-slide {
    flex:
        0 0 94%;

    scroll-snap-align: start;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.74fr) minmax(0, 1.26fr);

    gap: 36px;

    align-items: center;

    min-height: 600px;

    padding: 36px;

    border-radius: var(--radius-xl);

    border:
        1px solid var(--line);

    background:
        radial-gradient(circle at 80% 14%,
            rgba(239, 180, 88, 0.055),
            transparent 30%),
        linear-gradient(180deg,
            rgba(20, 17, 17, 0.92),
            rgba(10, 9, 9, 0.98));

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.28);
}

.product-slide-copy {
    min-width: 0;
}

.slide-number {
    margin-bottom: 34px;

    color:
        rgba(255, 255, 255, 0.16);

    font-size: 44px;

    font-weight: 800;

    letter-spacing: -0.06em;
}

.product-slide-copy h3 {
    margin: 0;

    max-width: 540px;

    font-size:
        clamp(40px,
            4.5vw,
            64px);

    line-height: 0.96;

    letter-spacing: -0.06em;
}

.product-slide-copy>p {
    max-width: 520px;

    margin:
        22px 0 0;

    color: var(--muted-strong);

    font-size: 18px;

    line-height: 1.6;
}

.product-slide-visual {
    min-width: 0;
}


/* ==========================================================================
   PRODUCT SLIDE STATS
   ========================================================================== */

.slide-stat-row {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 32px;
}

.slide-stat {
    display: grid;

    gap: 6px;

    padding: 16px;

    border-radius: 18px;

    border:
        1px solid var(--line);

    background:
        rgba(255, 255, 255, 0.025);
}

.slide-stat span {
    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.slide-stat strong {
    font-size: 15px;

    font-weight: 800;
}


/* ==========================================================================
   SWIPE PROGRESS
   ========================================================================== */

.swipe-progress {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 10px;
}

.swipe-progress-item {
    width: 8px;
    height: 8px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.15);

    transition:
        width 160ms ease,
        background 160ms ease;
}

.swipe-progress-item.active {
    width: 28px;

    background:
        linear-gradient(90deg,
            var(--gold),
            var(--gold-strong));
}


/* ==========================================================================
   PRICING SECTION
   ========================================================================== */

.pricing-section {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.64fr) minmax(0, 1.36fr);

    gap: 42px;

    align-items: start;

    padding:
        92px 0 84px;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);
}

.pricing-heading {
    position: sticky;

    top: 132px;

    min-width: 0;
}

.pricing-heading h2 {
    margin: 0;

    max-width: 540px;

    font-size:
        clamp(50px,
            6vw,
            82px);

    line-height: 0.92;

    letter-spacing: -0.065em;
}

.pricing-heading p {
    max-width: 460px;

    margin:
        22px 0 0;

    color: var(--muted-strong);

    font-size: 18px;

    line-height: 1.6;
}


/* ==========================================================================
   PRICING OPTIONS
   ========================================================================== */

.pricing-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* ==========================================================================
   PRICING CARDS
   ========================================================================== */

.pricing-card {
    min-height: 590px;

    display: flex;

    flex-direction: column;

    padding: 28px;

    border-radius: 32px;

    color: #211e1a;

    background:
        linear-gradient(180deg,
            #f6f1e9,
            #ece6de);

    border:
        1px solid rgba(255, 255, 255, 0.22);

    box-shadow:
        var(--shadow);
}

.pricing-card.annual {
    position: relative;

    background:
        linear-gradient(180deg,
            #fff8ed,
            #f2e6d3);

    box-shadow:
        0 30px 100px rgba(239, 180, 88, 0.12),
        var(--shadow);
}

.pricing-card.annual::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    box-shadow:
        0 0 0 1px rgba(239, 180, 88, 0.38) inset;
}

.pricing-card-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;
}

.pricing-tier {
    color: #5c574f;

    font-size: 16px;

    font-weight: 800;
}


/* ==========================================================================
   PRICE
   ========================================================================== */

.price-row {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 14px;
}

.price-row strong {
    font-size:
        clamp(56px,
            5vw,
            78px);

    line-height: 0.9;

    letter-spacing: -0.065em;
}

.price-row span {
    margin-top: 12px;

    color: #686158;

    font-size: 16px;

    line-height: 1.25;
}


/* ==========================================================================
   PRICING BADGES
   ========================================================================== */

.pricing-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding:
        0 12px;

    border-radius: 999px;

    background:
        rgba(0, 0, 0, 0.055);

    color: #625b52;

    font-size: 12px;

    font-weight: 800;
}

.pricing-badge.featured {
    color: #35200e;

    background:
        linear-gradient(135deg,
            var(--gold),
            var(--gold-strong));
}


/* ==========================================================================
   ANNUAL SAVING
   ========================================================================== */

.annual-saving {
    width: fit-content;

    margin-top: 20px;

    padding:
        9px 12px;

    border-radius: 999px;

    color: #6a4519;

    background:
        rgba(239, 180, 88, 0.18);

    font-size: 13px;

    font-weight: 800;
}


/* ==========================================================================
   PRICING DIVIDER
   ========================================================================== */

.pricing-divider {
    width: 100%;

    height: 1px;

    margin:
        26px 0;

    background:
        rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   PRICING LIST
   ========================================================================== */

.pricing-list {
    display: grid;

    gap: 14px;

    margin:
        0 0 30px;

    padding: 0;

    list-style: none;

    color: #37332e;

    font-size: 15px;

    line-height: 1.45;
}

.pricing-list li {
    position: relative;

    padding-left: 25px;
}

.pricing-list li::before {
    content: "✓";

    position: absolute;

    left: 0;

    top: 0;

    color: #9a6824;

    font-weight: 900;
}

.pricing-cta {
    margin-top: auto;
}

.pricing-card .btn-secondary {
    color: #28221c;

    border-color:
        rgba(0, 0, 0, 0.11);

    background:
        rgba(0, 0, 0, 0.035);
}

.pricing-card .btn-secondary:hover {
    border-color:
        rgba(0, 0, 0, 0.18);

    background:
        rgba(0, 0, 0, 0.065);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.landing-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 20px;

    padding:
        28px 4px 8px;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);

    color: var(--muted);

    font-size: 13px;
}


/* ==========================================================================
   LAPTOP / SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1180px) {

    .landing-header {
        grid-template-columns:
            auto 1fr auto;

        gap: 14px;
    }

    .landing-nav {
        gap: 2px;
    }

    .landing-nav a {
        padding:
            10px 11px;
    }

    .hero-section {
        grid-template-columns:
            0.9fr 1.1fr;

        gap: 30px;
    }

    .hero-copy h1 {
        font-size:
            clamp(56px,
                7vw,
                84px);
    }

    .product-slide {
        grid-template-columns:
            0.82fr 1.18fr;

        min-height: 540px;

        padding: 28px;
    }

    .pricing-section {
        grid-template-columns: 1fr;
    }

    .pricing-heading {
        position: static;

        max-width: 760px;
    }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .landing-shell {
        width:
            min(calc(100% - 24px),
                var(--max-width));
    }

    .landing-header {
        position: relative;

        top: 0;

        grid-template-columns:
            1fr auto;
    }

    .landing-nav {
        grid-column:
            1 / -1;

        grid-row: 2;

        justify-content: flex-start;

        border-top:
            1px solid var(--line);

        padding-top: 10px;
    }

    .hero-section {
        grid-template-columns: 1fr;

        min-height: auto;

        padding:
            58px 0 70px;
    }

    .hero-copy {
        max-width: 800px;
    }

    .hero-copy h1 {
        max-width: 820px;
    }

    .hero-visual {
        max-width: 900px;
    }

    .product-showcase-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .showcase-instruction {
        padding: 0;
    }

    .product-slide {
        flex-basis: 96%;

        grid-template-columns: 1fr;

        gap: 30px;

        min-height: auto;
    }

    .product-slide-copy {
        max-width: 700px;
    }

    .pricing-options {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        min-height: auto;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .landing-shell {
        width:
            calc(100% - 16px);

        margin:
            8px auto 28px;
    }

    .landing-header {
        display: flex;

        flex-wrap: wrap;

        align-items: center;

        padding: 14px;

        border-radius: 22px;
    }

    .brand {
        flex: 1;
    }

    .brand-logo {
        width: 42px;
        height: 42px;
    }

    .brand-subtitle {
        display: none;
    }

    .landing-actions {
        gap: 6px;
    }

    .landing-actions .btn {
        min-height: 42px;

        padding:
            0 13px;

        border-radius: 13px;

        font-size: 13px;
    }

    .landing-nav {
        order: 3;

        width: 100%;

        margin-top: 10px;

        overflow-x: auto;

        justify-content: flex-start;

        flex-wrap: nowrap;

        scrollbar-width: none;
    }

    .landing-nav::-webkit-scrollbar {
        display: none;
    }

    .landing-nav a {
        white-space: nowrap;
    }

    .hero-section {
        gap: 32px;

        padding:
            46px 0 60px;
    }

    .hero-copy h1 {
        font-size:
            clamp(52px,
                15.5vw,
                76px);

        line-height: 0.9;
    }

    .hero-text {
        margin-top: 22px;

        font-size: 17px;

        line-height: 1.55;
    }

    .hero-actions {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-visual {
        padding: 8px;

        border-radius: 24px;
    }

    .app-shot-frame {
        border-radius: 19px;
    }

    .hero-shot {
        aspect-ratio: 16 / 10;
    }

    .product-showcase-section {
        padding:
            54px 0 64px;
    }

    .product-showcase-heading h2 {
        font-size:
            clamp(44px,
                13vw,
                64px);
    }

    .product-slide {
        flex-basis: 94%;

        padding: 20px;

        border-radius: 26px;
    }

    .slide-number {
        margin-bottom: 20px;

        font-size: 32px;
    }

    .product-slide-copy h3 {
        font-size:
            clamp(36px,
                11vw,
                50px);
    }

    .product-slide-copy>p {
        font-size: 16px;
    }

    .slide-stat-row {
        grid-template-columns: 1fr;
    }

    .showcase-shot {
        aspect-ratio: 16 / 10;
    }

    .pricing-section {
        gap: 34px;

        padding:
            64px 0;
    }

    .pricing-heading h2 {
        font-size:
            clamp(46px,
                13vw,
                64px);
    }

    .pricing-card {
        padding: 22px;

        border-radius: 26px;
    }

    .pricing-card-top {
        flex-direction: column;
    }

    .price-row strong {
        font-size: 58px;
    }

    .landing-footer {
        flex-direction: column;

        align-items: flex-start;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .landing-actions .btn-secondary {
        display: none;
    }

    .brand-title {
        font-size: 16px;
    }

    .hero-copy h1 {
        font-size:
            clamp(48px,
                15vw,
                64px);
    }

    .product-slide {
        flex-basis: 96%;
    }

    .pricing-heading p {
        font-size: 16px;
    }

    .price-row {
        flex-direction: column;

        gap: 4px;
    }

    .price-row span {
        margin-top: 0;
    }
}