/* =========================================================
   HUMBE.AI — NEW LANDING PAGE
   Warm Intelligence • Editorial • Premium • Human
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ---------- Core ---------- */

    --bg: #0d0c0b;
    --bg-soft: #13110f;
    --bg-raised: #181513;

    /* ---------- Surfaces ---------- */

    --surface: rgba(255, 248, 238, 0.055);
    --surface-hover: rgba(255, 248, 238, 0.09);
    --surface-solid: #191613;

    /* ---------- Borders ---------- */

    --border: rgba(255, 241, 220, 0.12);
    --border-bright: rgba(255, 220, 169, 0.24);

    /* ---------- Typography ---------- */

    --white: #fffaf2;
    --cream: #f5ead8;
    --soft: #d9ccbb;
    --muted: #9c9185;
    --dim: #665e57;

    /* ---------- Accent ---------- */

    --amber: #e7b56f;
    --amber-light: #f5ce93;
    --amber-dark: #a87538;

    /* ---------- Layout ---------- */

    --content-width: 1180px;
    --page-padding: 24px;

    /* ---------- Effects ---------- */

    --shadow:
        0 30px 80px rgba(0, 0, 0, 0.38);

    --transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}


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

html {
    background: var(--bg);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            900px 600px at 50% -20%,
            rgba(231, 181, 111, 0.10),
            transparent 70%
        ),
        radial-gradient(
            700px 500px at 100% 45%,
            rgba(185, 117, 47, 0.045),
            transparent 70%
        ),
        var(--bg);

    color: var(--white);

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

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

button {
    cursor: pointer;
}

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

::selection {
    background: rgba(231, 181, 111, 0.25);
    color: var(--white);
}

.page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}


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

.nav {
    position: relative;
    z-index: 20;

    width: min(
        var(--content-width),
        calc(100% - 48px)
    );

    min-height: 82px;

    margin: 0 auto;

    display: flex;
    align-items: center;

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: var(--white);

    font-size: 18px;
    font-weight: 650;

    letter-spacing: -0.035em;
}

.brand-mark {
    color: var(--amber-light);

    font-size: 21px;

    transition:
        transform var(--transition),
        color var(--transition);
}

.brand:hover .brand-mark {
    color: var(--white);
    transform: rotate(15deg) scale(1.12);
}

.nav-right {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 28px;
}

.nav-link {
    position: relative;

    color: var(--muted);

    font-size: 13px;

    transition: color var(--transition);
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -6px;

    height: 1px;

    background: var(--amber);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform var(--transition);
}

.nav-link:hover {
    color: var(--white);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 0 15px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background:
        rgba(255, 248, 238, 0.045);

    color: var(--cream);

    font-size: 13px;
    font-weight: 550;

    backdrop-filter: blur(12px);

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.nav-cta:hover {
    background: rgba(231, 181, 111, 0.10);

    border-color: var(--border-bright);

    transform: translateY(-1px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.22);
}


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

.hero {
    position: relative;

    min-height: calc(100vh - 82px);

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

    padding:
        110px 24px
        150px;

    text-align: center;
}

.hero::before {
    content: "";

    position: absolute;

    top: 8%;
    left: 50%;

    width: 760px;
    height: 500px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(231, 181, 111, 0.13),
            transparent 68%
        );

    filter: blur(20px);

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 70%,
            var(--bg) 100%
        );

    pointer-events: none;
}

.hero-glow {
    display: none;
}

.hero-mark {
    position: relative;
    z-index: 2;

    width: 72px;
    height: 72px;

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

    margin-bottom: 32px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 239, 211, 0.12),
            rgba(255, 255, 255, 0.025)
        );

    color: var(--amber-light);

    font-size: 30px;

    box-shadow:
        0 20px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 60px rgba(231, 181, 111, 0.06);

    backdrop-filter: blur(18px);

    animation:
        heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

.eyebrow {
    position: relative;
    z-index: 2;

    margin-bottom: 20px;

    color: var(--amber);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hero h1 {
    position: relative;
    z-index: 2;

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

    color: var(--white);

    font-size:
        clamp(
            54px,
            9.5vw,
            112px
        );

    line-height: 0.88;

    letter-spacing: -0.075em;

    font-weight: 620;
}

.hero h1 span,
.statement h2 span,
.creator h2 span,
.final-cta h2 span {
    color: var(--muted);
}

.hero-description {
    position: relative;
    z-index: 2;

    width: min(590px, 100%);

    margin-top: 34px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.75;
}

.hero-description strong {
    color: var(--soft);
    font-weight: 500;
}

.hero-actions {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 36px;
}

.primary-button,
.secondary-button {
    min-height: 49px;

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

    gap: 11px;

    padding: 0 20px;

    border-radius: 13px;

    font-size: 13px;
    font-weight: 650;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.primary-button {
    background: var(--cream);
    color: #18130f;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.3);
}

.primary-button:hover {
    transform: translateY(-3px);

    background: #fff4e3;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.38),
        0 0 30px rgba(231, 181, 111, 0.07);
}

.primary-button span {
    color: var(--amber-dark);
    font-size: 17px;
}

.secondary-button {
    border:
        1px solid
        rgba(255, 241, 220, 0.14);

    background:
        rgba(255, 248, 238, 0.045);

    color: var(--cream);

    backdrop-filter: blur(12px);
}

.secondary-button:hover {
    background:
        rgba(255, 248, 238, 0.085);

    border-color:
        rgba(255, 220, 169, 0.28);

    transform: translateY(-3px);
}

.launch-note {
    position: relative;
    z-index: 2;

    margin-top: 14px;

    color: var(--dim);

    font-size: 11px;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );

    margin: 0 auto;
}

.section-label {
    color: var(--amber-dark);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.statement {
    display: grid;

    grid-template-columns:
        0.28fr
        1fr;

    gap: 60px;

    padding: 150px 0;

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

.statement-content {
    max-width: 850px;
}

.statement h2 {
    color: var(--white);

    font-size:
        clamp(
            40px,
            5.5vw,
            72px
        );

    line-height: 1;

    letter-spacing: -0.06em;

    font-weight: 600;
}

.statement p {
    max-width: 650px;

    margin-top: 32px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   FEATURES
   ========================================================= */

.features {
    padding: 40px 0 170px;
}

.feature-grid {
    display: grid;

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

    gap: 14px;

    margin-top: 34px;
}

.feature-card {
    position: relative;

    min-height: 350px;

    padding: 28px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 248, 238, 0.065),
            rgba(255, 248, 238, 0.025)
        );

    overflow: hidden;

    backdrop-filter: blur(15px);

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.feature-card::before {
    content: "";

    position: absolute;

    top: -140px;
    left: -100px;

    width: 300px;
    height: 300px;

    background:
        radial-gradient(
            circle,
            rgba(231, 181, 111, 0.09),
            transparent 70%
        );

    pointer-events: none;

    transition:
        transform 500ms ease;
}

.feature-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(231, 181, 111, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(255, 248, 238, 0.095),
            rgba(255, 248, 238, 0.04)
        );

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

.feature-card:hover::before {
    transform: translate(25px, 25px);
}

.feature-number {
    position: absolute;

    top: 27px;
    right: 28px;

    color: #5f574f;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.12em;
}

.feature-icon {
    width: 46px;
    height: 46px;

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

    margin-bottom: 105px;

    border:
        1px solid
        rgba(255, 220, 169, 0.15);

    border-radius: 15px;

    background:
        rgba(231, 181, 111, 0.055);

    color: var(--amber-light);

    font-size: 18px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);
}

.feature-card h3 {
    color: var(--white);

    font-size: 20px;
    font-weight: 600;

    letter-spacing: -0.03em;
}

.feature-card p {
    margin-top: 11px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   CREATOR
   ========================================================= */

.creator {
    padding-bottom: 170px;
}

.creator-card {
    position: relative;

    padding: 90px;

    border:
        1px solid
        rgba(255, 220, 169, 0.16);

    border-radius: 30px;

    background:
        radial-gradient(
            500px 400px at 85% 15%,
            rgba(231, 181, 111, 0.12),
            transparent 70%
        ),
        linear-gradient(
            135deg,
            #191613,
            #100e0c
        );

    overflow: hidden;

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

.creator-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.025),
            transparent 75%
        );

    pointer-events: none;
}

.creator-card::after {
    content: "";

    position: absolute;

    right: -130px;
    bottom: -150px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(231, 181, 111, 0.08),
            transparent 68%
        );

    pointer-events: none;
}

.creator-star {
    position: absolute;

    top: 45px;
    right: 65px;

    color: var(--amber);

    font-size: 90px;

    opacity: 0.07;
}

.creator h2 {
    position: relative;
    z-index: 2;

    margin-top: 22px;

    color: var(--white);

    font-size:
        clamp(
            42px,
            6.5vw,
            78px
        );

    line-height: 0.95;

    letter-spacing: -0.065em;

    font-weight: 600;
}

.creator-description {
    position: relative;
    z-index: 2;

    max-width: 570px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {
    position: relative;

    width: min(
        var(--content-width),
        calc(100% - 48px)
    );

    min-height: 650px;

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

    margin: 0 auto;

    padding: 100px 24px;

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

    text-align: center;
}

.final-glow {
    position: absolute;

    width: 800px;
    height: 500px;

    background:
        radial-gradient(
            ellipse,
            rgba(231, 181, 111, 0.13),
            transparent 68%
        );

    pointer-events: none;

    filter: blur(12px);
}

.hero-mark.small {
    position: relative;
    z-index: 2;

    width: 55px;
    height: 55px;

    margin-bottom: 25px;

    border-radius: 18px;

    font-size: 22px;
}

.final-cta h2 {
    position: relative;
    z-index: 2;

    max-width: 850px;

    color: var(--white);

    font-size:
        clamp(
            46px,
            7.5vw,
            88px
        );

    line-height: 0.93;

    letter-spacing: -0.07em;

    font-weight: 600;
}

.final-cta > p:not(.eyebrow) {
    position: relative;
    z-index: 2;

    width: min(500px, 100%);

    margin-top: 28px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.75;
}

.final-cta .primary-button {
    position: relative;
    z-index: 2;

    margin-top: 32px;
}


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

footer {
    width: min(
        var(--content-width),
        calc(100% - 48px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    align-items: center;

    padding: 27px 0 34px;

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

    color: var(--dim);

    font-size: 11px;
}

.footer-brand {
    color: var(--soft);

    font-size: 13px;
    font-weight: 650;
}

.footer-brand span {
    margin-right: 6px;
    color: var(--amber);
}

footer p:nth-child(2) {
    text-align: center;
}

.footer-year {
    text-align: right;
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 900px) {

    .statement {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        min-height: 290px;
    }

    .feature-icon {
        margin-bottom: 70px;
    }

    .creator-card {
        padding: 65px 55px;
    }
}


/* =========================================================
   SMALL TABLETS
   ========================================================= */

@media (max-width: 700px) {

    .nav,
    .section,
    footer {
        width: calc(100% - 36px);
    }

    .nav {
        min-height: 70px;
    }

    .nav-link {
        display: none;
    }

    .hero {
        min-height: calc(100svh - 70px);

        padding:
            80px 18px
            105px;
    }

    .hero h1 {
        font-size:
            clamp(
                50px,
                11vw,
                78px
            );
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-actions {
        width: 100%;
        max-width: 390px;
    }

    .statement {
        padding: 105px 0;
    }

    .statement h2 {
        font-size:
            clamp(
                38px,
                8vw,
                58px
            );
    }

    .features {
        padding-bottom: 110px;
    }

    .creator {
        padding-bottom: 110px;
    }

    .creator-card {
        padding: 55px 35px;
        border-radius: 24px;
    }

    .final-cta {
        width: 100%;
        min-height: 560px;
    }

    footer {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    footer p:nth-child(2),
    .footer-year {
        text-align: left;
    }
}


/* =========================================================
   PHONES
   ========================================================= */

@media (max-width: 520px) {

    .nav,
    .section,
    footer {
        width: calc(100% - 28px);
    }

    .nav {
        min-height: 64px;
    }

    .brand {
        gap: 8px;
        font-size: 16px;
    }

    .brand-mark {
        font-size: 18px;
    }

    .nav-cta {
        min-height: 35px;
        padding: 0 11px;

        border-radius: 9px;

        font-size: 11px;
    }

    .hero {
        min-height: calc(100svh - 64px);

        padding:
            70px 14px
            90px;
    }

    .hero::before {
        width: 120vw;
        height: 400px;
    }

    .hero-mark {
        width: 58px;
        height: 58px;

        margin-bottom: 27px;

        border-radius: 19px;

        font-size: 24px;
    }

    .eyebrow {
        margin-bottom: 16px;
        font-size: 9px;
    }

    .hero h1 {
        font-size:
            clamp(
                46px,
                14vw,
                67px
            );

        line-height: 0.91;
    }

    .hero-description {
        width: min(350px, 100%);

        margin-top: 25px;

        font-size: 13.5px;
        line-height: 1.7;
    }

    .hero-actions {
        flex-direction: column;

        width: 100%;

        gap: 9px;

        margin-top: 28px;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
        min-height: 49px;
    }

    .launch-note {
        max-width: 270px;

        font-size: 10px;
        line-height: 1.5;
    }

    .statement {
        padding: 80px 0;
    }

    .statement h2 {
        font-size:
            clamp(
                34px,
                10.5vw,
                48px
            );
    }

    .statement p {
        margin-top: 23px;
        font-size: 14px;
    }

    .features {
        padding:
            45px 0
            95px;
    }

    .feature-grid {
        gap: 11px;
        margin-top: 22px;
    }

    .feature-card {
        min-height: 250px;
        padding: 22px;

        border-radius: 19px;
    }

    .feature-icon {
        width: 41px;
        height: 41px;

        margin-bottom: 52px;

        border-radius: 13px;
    }

    .feature-card h3 {
        font-size: 18px;
    }

    .feature-card p {
        font-size: 12.5px;
    }

    .creator {
        padding-bottom: 90px;
    }

    .creator-card {
        padding: 48px 24px;

        border-radius: 20px;
    }

    .creator-star {
        top: 23px;
        right: 20px;

        font-size: 58px;
    }

    .creator h2 {
        margin-top: 17px;

        font-size:
            clamp(
                37px,
                11.5vw,
                53px
            );
    }

    .creator-description {
        margin-top: 22px;

        font-size: 13.5px;
    }

    .final-cta {
        min-height: 500px;

        padding:
            70px 18px;
    }

    .final-glow {
        width: 120vw;
        height: 400px;
    }

    .final-cta h2 {
        font-size:
            clamp(
                41px,
                12.5vw,
                61px
            );
    }

    .final-cta > p:not(.eyebrow) {
        margin-top: 22px;
        font-size: 13.5px;
    }

    footer {
        padding:
            23px 0
            28px;

        font-size: 10px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .nav,
    .section,
    footer {
        width: calc(100% - 22px);
    }

    .nav-cta {
        padding: 0 9px;
        font-size: 10px;
    }

    .hero {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-description {
        font-size: 12.5px;
    }

    .statement h2 {
        font-size: 30px;
    }

    .feature-card {
        padding: 19px;
    }

    .creator-card {
        padding: 40px 19px;
    }

    .creator h2 {
        font-size: 34px;
    }

    .final-cta h2 {
        font-size: 37px;
    }
}


/* =========================================================
   LANDSCAPE PHONES
   ========================================================= */

@media (max-height: 600px) and (orientation: landscape) {

    .hero {
        min-height: auto;

        padding:
            70px 20px
            90px;
    }

    .hero-mark {
        margin-bottom: 20px;
    }

    .hero-description {
        margin-top: 20px;
    }

    .hero-actions {
        margin-top: 22px;
    }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .feature-card:hover {
        transform: none;

        border-color: var(--border);

        background:
            linear-gradient(
                145deg,
                rgba(255, 248, 238, 0.065),
                rgba(255, 248, 238, 0.025)
            );

        box-shadow: none;
    }

    .feature-card:hover::before {
        transform: none;
    }

    .primary-button:hover,
    .secondary-button:hover,
    .nav-cta:hover {
        transform: none;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}