.home-shell {
    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        0 auto;
}


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

.header-inner {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    height:
        76px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.brand {

    color:
        #fff !important;

    text-decoration:
        none;

    font-size:
        27px;

    font-weight:
        900;

    letter-spacing:
        -1px;
}


.brand span {

    color:
        #ff58a4;
}


.main-nav {

    display:
        flex;

    gap:
        32px;
}


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

.home-hero {

    min-height:
        620px;

    display:
        flex;

    align-items:
        center;

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


.hero-grid {

    display:
        grid;

    grid-template-columns:
        1.05fr .95fr;

    gap:
        75px;

    align-items:
        center;
}


.hero-copy {

    position:
        relative;

    z-index:
        2;
}


.hero-badge {

    display:
        inline-flex;

    margin-bottom:
        22px;

    padding:
        8px 14px;

    border-radius:
        999px;

    color:
        #ff6eb1 !important;

    font-size:
        13px;

    font-weight:
        800;
}


.hero-copy h1 {

    margin:
        0;

    max-width:
        650px;

    color:
        white !important;

    font-size:
        clamp(
            60px,
            6vw,
            88px
        );

    line-height:
        .98;

    letter-spacing:
        -4px;
}


.hero-copy h1 span {

    background:
        linear-gradient(
            90deg,
            #ff56a3,
            #b665ff,
            #66a8ff
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    color:
        transparent !important;

    filter:
        drop-shadow(
            0 0 30px
            rgba(174,82,255,.20)
        );
}


.hero-copy p {

    max-width:
        650px;

    margin:
        26px 0 0;

    color:
        #9ba0b1 !important;

    font-size:
        18px;

    line-height:
        1.65;
}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        31px;
}


.hero-primary,
.hero-secondary {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 22px;

    border-radius:
        15px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        850;
}


.hero-status {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        22px;

    color:
        #838999;

    font-size:
        13px;
}


.status-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #44e5a3;

    box-shadow:
        0 0 13px
        rgba(68,229,163,.85);
}


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

.hero-art-card {

    position:
        relative;

    aspect-ratio:
        1 / 1;

    max-width:
        470px;

    justify-self:
        center;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        42px;

    background:
        linear-gradient(
            145deg,
            rgba(27,31,46,.82),
            rgba(10,14,23,.78)
        );

    backdrop-filter:
        blur(26px);

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.35),

        0 0 70px
        rgba(150,81,255,.09),

        inset 0 1px 0
        rgba(255,255,255,.07);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.hero-art-card:hover {

    transform:
        translateY(-9px)
        rotateX(1deg)
        rotateY(-1deg);

    border-color:
        rgba(165,105,255,.45);

    box-shadow:
        0 50px 115px
        rgba(0,0,0,.45),

        0 0 55px
        rgba(255,74,162,.10),

        0 0 90px
        rgba(48,163,255,.10);
}


.hero-face {

    position:
        relative;

    z-index:
        3;

    width:
        54%;

    aspect-ratio:
        1;

    border:
        4px solid
        #dedcf0;

    border-radius:
        50%;

    box-shadow:
        0 0 30px
        rgba(170,126,255,.16);
}


.hero-eye {

    position:
        absolute;

    top:
        42%;

    width:
        15px;

    height:
        24px;

    border-radius:
        50%;

    background:
        #dedcf0;
}


.hero-eye.left {
    left:
        32%;
}


.hero-eye.right {
    right:
        32%;
}


.hero-smile {

    position:
        absolute;

    left:
        32%;

    right:
        32%;

    top:
        59%;

    height:
        25px;

    border-bottom:
        4px solid
        #dedcf0;

    border-radius:
        0 0 50% 50%;
}


.hero-orbit {

    position:
        absolute;

    border:
        2px solid
        rgba(179,137,255,.18);

    border-radius:
        50%;

    animation:
        orbitFloat
        7s ease-in-out
        infinite alternate;
}


.orbit-one {

    width:
        75%;

    height:
        75%;
}


.orbit-two {

    width:
        90%;

    height:
        90%;

    border-color:
        rgba(70,170,255,.10);

    animation-delay:
        -3s;
}


.hero-glow {

    position:
        absolute;

    width:
        65%;

    height:
        65%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(158,86,255,.20),
            rgba(40,145,255,.07),
            transparent 70%
        );

    filter:
        blur(30px);
}


@keyframes orbitFloat {

    from {
        transform:
            scale(.97)
            rotate(-4deg);
    }

    to {
        transform:
            scale(1.04)
            rotate(5deg);
    }
}


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

.home-section {

    padding:
        90px 0;

    background:
        transparent !important;
}


.home-section-soft {

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

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


.section-head {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        34px;
}


.section-kicker {

    margin-bottom:
        9px;

    color:
        #ff6aaf;

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        1.3px;
}


.section-head h2,
.story-copy h2,
.ai-copy h2,
.seo-panel h2 {

    margin:
        0;

    color:
        white !important;

    font-size:
        clamp(
            32px,
            3.2vw,
            46px
        );

    letter-spacing:
        -1.7px;
}


.section-head p,
.story-copy p,
.ai-copy p {

    max-width:
        700px;

    margin:
        10px 0 0;

    line-height:
        1.65;
}


.section-link {

    color:
        #b98bff;

    text-decoration:
        none;

    font-weight:
        750;

    white-space:
        nowrap;
}


.section-link:hover {

    color:
        #fff;

    text-shadow:
        0 0 20px
        rgba(174,99,255,.65);
}


/* ========================================================
   COLORING CARDS
======================================================== */

.home-coloring-grid {

    display:
        grid;

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

    gap:
        24px;
}


.home-coloring-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        24px;

    color:
        inherit;

    text-decoration:
        none;

    background:
        linear-gradient(
            145deg,
            rgba(23,28,42,.90),
            rgba(12,16,25,.86)
        );

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.28);

    transition:
        transform .30s
        cubic-bezier(.2,.8,.2,1),

        border-color .30s ease,

        box-shadow .30s ease;
}


.home-coloring-card::before {

    content:
        "";

    position:
        absolute;

    z-index:
        4;

    left:
        10%;

    right:
        10%;

    top:
        0;

    height:
        1px;

    opacity:
        .40;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff57a7,
            #a76cff,
            #42b2ff,
            transparent
        );

    transition:
        opacity .30s ease,
        left .30s ease,
        right .30s ease;
}


.home-coloring-card:hover {

    transform:
        translateY(-10px)
        scale(1.015);

    border-color:
        rgba(165,104,255,.46);

    box-shadow:
        0 30px 85px
        rgba(0,0,0,.45),

        0 0 40px
        rgba(150,83,255,.13),

        0 0 75px
        rgba(39,158,255,.07);
}


.home-coloring-card:hover::before {

    opacity:
        1;

    left:
        2%;

    right:
        2%;

    box-shadow:
        0 0 15px
        rgba(160,94,255,.75);
}


.home-coloring-image {

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background:
        white;
}


.home-coloring-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    transition:
        transform .35s ease;
}


.home-coloring-card:hover img {

    transform:
        scale(1.05);
}


.home-coloring-body {

    padding:
        20px;
}


.home-coloring-body h3 {

    margin:
        0 0 9px;

    color:
        white !important;

    font-size:
        20px;

    line-height:
        1.2;
}


.home-coloring-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.home-coloring-meta span {

    padding:
        6px 9px;

    border-radius:
        999px;

    color:
        #bd99ff;

    background:
        rgba(150,91,255,.12);

    font-size:
        11px;

    font-weight:
        750;
}


.loading-card {

    grid-column:
        1 / -1;

    padding:
        60px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        24px;

    text-align:
        center;

    color:
        #858b9b;

    background:
        rgba(16,20,30,.65);
}


/* ========================================================
   CATEGORIES
======================================================== */

.home-category-grid {

    display:
        grid;

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

    gap:
        18px;
}


.home-category-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        100px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        20px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        21px;

    color:
        inherit;

    text-decoration:
        none;

    background:
        linear-gradient(
            145deg,
            rgba(23,28,42,.76),
            rgba(13,17,27,.70)
        );

    box-shadow:
        0 16px 44px
        rgba(0,0,0,.22);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


.home-category-card::after {

    content:
        "";

    position:
        absolute;

    width:
        130px;

    height:
        130px;

    right:
        -65px;

    top:
        -65px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(111,98,255,.30),
            transparent 69%
        );

    opacity:
        .30;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.home-category-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(165,103,255,.45);

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.38),

        0 0 35px
        rgba(143,82,255,.12);
}


.home-category-card:hover::after {

    opacity:
        .8;

    transform:
        scale(1.4);
}


.category-icon {

    position:
        relative;

    z-index:
        2;

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        15px;

    background:
        rgba(255,255,255,.04);

    font-size:
        25px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.home-category-card:hover
.category-icon {

    transform:
        translateY(-3px)
        scale(1.08);

    box-shadow:
        0 0 25px
        rgba(150,97,255,.15);
}


.category-copy {

    position:
        relative;

    z-index:
        2;
}


.category-copy strong {

    display:
        block;

    color:
        white;

    font-size:
        16px;
}


.category-copy small {

    display:
        block;

    margin-top:
        5px;

    color:
        #858b9d;
}


/* ========================================================
   STORIES
======================================================== */

.story-banner {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        400px;

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

    align-items:
        center;

    gap:
        50px;

    padding:
        54px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        32px;

    background:
        linear-gradient(
            135deg,
            rgba(25,28,43,.90),
            rgba(11,15,24,.92)
        );

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.30),

        0 0 60px
        rgba(154,91,255,.07);
}


.story-banner::before {

    content:
        "";

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    right:
        -80px;

    bottom:
        -180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(42,164,255,.25),
            rgba(149,90,255,.12),
            transparent 70%
        );

    filter:
        blur(20px);
}


.story-copy {

    position:
        relative;

    z-index:
        3;
}


.story-copy p {

    max-width:
        560px;
}


.story-button {

    margin-top:
        25px;
}


.story-visual {

    position:
        relative;

    min-height:
        300px;
}


.story-page {

    position:
        absolute;

    width:
        200px;

    height:
        260px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        22px;

    color:
        rgba(255,255,255,.55);

    font-size:
        50px;

    font-weight:
        900;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.25);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.page-one {

    left:
        10px;

    top:
        30px;

    transform:
        rotate(-9deg);
}


.page-two {

    left:
        110px;

    top:
        5px;

    z-index:
        2;
}


.page-three {

    left:
        205px;

    top:
        36px;

    transform:
        rotate(9deg);
}


.story-banner:hover
.page-one {

    transform:
        translateX(-10px)
        rotate(-13deg);
}


.story-banner:hover
.page-three {

    transform:
        translateX(10px)
        rotate(13deg);
}


.story-banner:hover
.page-two {

    transform:
        translateY(-9px);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.38),

        0 0 35px
        rgba(155,91,255,.12);
}


/* ========================================================
   AI BANNER
======================================================== */

.ai-banner {

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    gap:
        25px;

    align-items:
        center;

    padding:
        34px;

    border:
        1px solid
        rgba(160,100,255,.30);

    border-radius:
        27px;

    background:
        linear-gradient(
            135deg,
            rgba(24,28,42,.88),
            rgba(13,17,27,.90)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.27),

        0 0 45px
        rgba(157,85,255,.07);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.ai-banner:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(168,108,255,.55);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.40),

        0 0 40px
        rgba(255,79,164,.09),

        0 0 70px
        rgba(82,111,255,.09);
}


.ai-icon {

    width:
        74px;

    height:
        74px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        22px;

    color:
        white;

    font-size:
        34px;

    background:
        linear-gradient(
            135deg,
            #ff4d9e,
            #9d64ff,
            #3a9eff
        );

    box-shadow:
        0 15px 35px
        rgba(168,79,255,.25);
}


.ai-copy h2 {

    font-size:
        29px;
}


.ai-button {

    padding:
        15px 20px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        15px;

    color:
        white;

    text-decoration:
        none;

    font-weight:
        850;

    white-space:
        nowrap;

    background:
        linear-gradient(
            135deg,
            #ff4da1,
            #9a62ff
        );

    box-shadow:
        0 12px 30px
        rgba(168,77,255,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.ai-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 42px
        rgba(177,76,255,.30),

        0 0 28px
        rgba(255,73,161,.15);
}


/* ========================================================
   SEO
======================================================== */

.seo-panel {

    padding:
        42px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        26px;

    background:
        rgba(14,18,28,.50);
}


.seo-panel h2 {

    font-size:
        30px;
}


.seo-panel p {

    max-width:
        920px;

    margin:
        14px 0 0;

    color:
        #8e94a5 !important;

    line-height:
        1.8;
}


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

.site-footer {

    padding:
        50px 0;

    background:
        rgba(5,7,12,.92) !important;
}


.footer-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.footer-inner strong {

    color:
        white;

    font-size:
        23px;
}


.footer-inner strong span {

    color:
        #ff5ba7;
}


.footer-inner p {

    margin:
        7px 0 0;

    color:
        #777d8e !important;
}


.footer-links {

    display:
        flex;

    gap:
        24px;
}


.footer-links a {

    color:
        #9298a9;

    text-decoration:
        none;
}


.footer-links a:hover {

    color:
        white;

    text-shadow:
        0 0 18px
        rgba(160,94,255,.45);
}


/* ========================================================
   RESPONSIVE
======================================================== */

@media (max-width: 950px) {

    .hero-grid {

        grid-template-columns:
            1fr;
    }

    .hero-art-card {

        width:
            min(470px, 100%);
    }

    .home-coloring-grid,
    .home-category-grid {

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

    .story-banner {

        grid-template-columns:
            1fr;
    }

    .story-visual {

        width:
            430px;

        max-width:
            100%;

        margin:
            auto;
    }

    .ai-banner {

        grid-template-columns:
            auto 1fr;
    }

    .ai-button {

        grid-column:
            1 / -1;

        justify-self:
            start;
    }
}


@media (max-width: 700px) {

    .main-nav {

        display:
            none;
    }

    .home-hero {

        min-height:
            auto;

        padding:
            85px 0;
    }

    .hero-copy h1 {

        font-size:
            55px;

        letter-spacing:
            -3px;
    }

    .home-section {

        padding:
            65px 0;
    }

    .section-head {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .home-coloring-grid,
    .home-category-grid {

        grid-template-columns:
            1fr;
    }

    .story-banner {

        padding:
            30px;
    }

    .story-visual {

        transform:
            scale(.78);

        transform-origin:
            left center;
    }

    .ai-banner {

        grid-template-columns:
            1fr;
    }

    .footer-inner {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .footer-links {

        flex-wrap:
            wrap;
    }
}