/* =========================================================
   DANTE STUDIO ADS
   PREMIUM GLOBAL STYLESHEET
========================================================= */

:root {

    --black: #050505;
    --black-2: #090909;
    --black-3: #101010;

    --white: #ffffff;
    --white-soft: #e9e9e9;

    --gray: #a0a0a0;
    --gray-dark: #565656;

    --border: rgba(255,255,255,.11);
    --border-bright: rgba(255,255,255,.24);

    --glass: rgba(255,255,255,.045);

    --blue: #1ca7ff;
    --blue-deep: #087cc3;

    --yellow: #ffd52e;
    --yellow-dark: #d8a900;

    --pink: #ff65a9;
    --pink-deep: #d82f77;

    --shadow: 0 25px 80px rgba(0,0,0,.45);

    --radius-small: 12px;
    --radius: 20px;
    --radius-large: 32px;

    --header-height: 78px;

    --container: 1220px;

    --transition: .3s cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   RESET
========================================================= */

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

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

body {

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(255,255,255,.035),
            transparent 30%
        ),
        var(--black);

    color: var(--white);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    line-height: 1.65;

    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

button {
    cursor: pointer;
}

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

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

::selection {
    background: var(--white);
    color: var(--black);
}


/* =========================================================
   SCROLLBAR
========================================================= */

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

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}


/* =========================================================
   PAGE LOADER
========================================================= */

#page-loader {

    position: fixed;

    inset: 0;

    z-index: 100000;

    display: flex;

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

    background:
        radial-gradient(
            circle,
            #191919 0%,
            #050505 65%
        );

    transition:
        opacity .7s ease,
        visibility .7s ease;
}

#page-loader.loaded {

    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.loader-logo {

    width: min(110px, 25vw);

    height: auto;

    margin: 0 auto 20px;

    object-fit: contain;

    animation:
        loaderLogo 1.8s ease-in-out infinite;
}

.loader-line {

    width: 150px;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #fff,
        transparent
    );

    margin: 0 auto 18px;

    animation: loaderLine 1.5s infinite;
}

.loader-content p {

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;

    letter-spacing: 4px;

    font-weight: 800;
}

.loader-content span {

    display: block;

    color: var(--gray);

    font-size: 10px;

    margin-top: 5px;
}

@keyframes loaderLogo {

    0%,100% {
        transform: scale(.96);
        filter: brightness(.8);
    }

    50% {
        transform: scale(1.04);
        filter: brightness(1.4);
    }
}

@keyframes loaderLine {

    0% {
        transform: scaleX(.2);
        opacity: .3;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }

    100% {
        transform: scaleX(.2);
        opacity: .3;
    }
}


/* =========================================================
   PARTICLE CANVAS
========================================================= */

#particleCanvas {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 9990;

    pointer-events: none;

    opacity: .55;
}


/* =========================================================
   CUSTOM CURSOR
========================================================= */

#cursor-dot {

    position: fixed;

    width: 6px;
    height: 6px;

    background: white;

    border-radius: 50%;

    pointer-events: none;

    z-index: 100001;

    transform:
        translate(-50%, -50%);

    mix-blend-mode: difference;
}

#cursor-ring {

    position: fixed;

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    pointer-events: none;

    z-index: 100000;

    transform:
        translate(-50%, -50%);

    transition:
        width .2s,
        height .2s,
        border-color .2s;
}

.cursor-hover #cursor-ring {

    width: 50px;
    height: 50px;

    border-color: white;
}


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

.main-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 9000;

    height: var(--header-height);

    background:
        rgba(5,5,5,.72);

    backdrop-filter:
        blur(18px);

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

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

    transition:
        height var(--transition),
        background var(--transition);
}

.main-header.scrolled {

    height: 66px;

    background:
        rgba(5,5,5,.92);
}

.header-container {

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

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}

.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.brand-logo {

    width: 44px;
    height: 44px;

    object-fit: contain;

    transition:
        transform var(--transition);
}

.brand:hover .brand-logo {
    transform: rotate(-4deg) scale(1.05);
}

.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1;
}

.brand-text strong {

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;

    letter-spacing: 1.5px;
}

.brand-text span {

    font-size: 9px;

    color: var(--gray);

    letter-spacing: 4px;

    margin-top: 5px;
}


/* =========================================================
   NAV
========================================================= */

.desktop-navigation {

    display: flex;

    align-items: center;

    gap: 4px;

    flex: 1;

    justify-content: center;
}

.nav-link {

    position: relative;

    border: 0;

    background: transparent;

    color: #aaa;

    padding: 10px 11px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .3px;

    transition:
        color var(--transition);
}

.nav-link::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 1px;

    width: 0;

    height: 1px;

    background: white;

    transform: translateX(-50%);

    transition:
        width var(--transition);
}

.nav-link:hover,
.nav-link.active {

    color: white;
}

.nav-link.active::after,
.nav-link:hover::after {
    width: 50%;
}


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

.header-actions {

    display: flex;

    align-items: center;

    gap: 9px;
}

.language-button,
.mobile-menu-button {

    width: 39px;
    height: 39px;

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

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

    color: white;

    border-radius: 50%;

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

.language-button {

    display: flex;

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

    gap: 4px;

    font-size: 10px;
}

.language-button:hover,
.mobile-menu-button:hover {

    background: white;
    color: black;

    transform: translateY(-2px);
}

.header-whatsapp {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 9px 14px;

    border-radius: 999px;

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

    font-size: 11px;

    font-weight: 700;

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

.header-whatsapp:hover {

    background: white;
    color: black;

    transform: translateY(-2px);
}

.header-whatsapp i {
    font-size: 15px;
}

.mobile-menu-button {
    display: none;
}


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

.mobile-navigation {

    display: none;

    position: fixed;

    top: var(--header-height);

    left: 0;
    right: 0;

    padding: 15px;

    background:
        rgba(5,5,5,.98);

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

    transform:
        translateY(-20px);

    opacity: 0;

    pointer-events: none;

    transition:
        all var(--transition);
}

.mobile-navigation.open {

    transform:
        translateY(0);

    opacity: 1;

    pointer-events: auto;
}

.mobile-navigation button {

    width: 100%;

    border: 0;

    background: transparent;

    color: #aaa;

    padding: 14px;

    text-align: left;

    display: flex;

    align-items: center;

    gap: 12px;

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

.mobile-navigation button:hover {
    color: white;
}


/* =========================================================
   GLOBAL
========================================================= */

#app {
    min-height: 100vh;
}

.page-section {

    display: none;

    min-height: 100vh;

    padding-top: var(--header-height);

    animation:
        pageIn .55s ease both;
}

.page-section.active-page {
    display: block;
}

@keyframes pageIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-container {

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

    margin: 0 auto;
}

.section-heading {

    max-width: 850px;

    margin-bottom: 55px;
}

.section-heading.centered {

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

    text-align: center;
}

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #aaa;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 15px;
}

.eyebrow::before {

    content: "";

    width: 22px;

    height: 1px;

    background: #777;
}

h1,
h2,
h3 {

    font-family:
        "Montserrat",
        sans-serif;

    line-height: 1.08;
}

h2 {

    font-size:
        clamp(30px, 4vw, 56px);

    letter-spacing: -2px;
}

h2 span,
h1 span {

    color: #999;

    display: inline;
}

p {

    color: var(--gray);

    font-size: 15px;

    line-height: 1.8;
}


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

.primary-button,
.secondary-button {

    border: 0;

    min-height: 50px;

    padding: 0 22px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 12px;

    font-weight: 800;

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

.primary-button {

    background: white;

    color: black;

    box-shadow:
        0 10px 40px rgba(255,255,255,.09);
}

.primary-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 45px rgba(255,255,255,.18);
}

.secondary-button {

    background: transparent;

    color: white;

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

.secondary-button:hover {

    background: white;

    color: black;

    transform: translateY(-3px);
}

.text-button {

    border: 0;

    background: transparent;

    color: white;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

    font-weight: 800;

    padding: 0;

    transition:
        gap var(--transition);
}

.text-button:hover {
    gap: 17px;
}


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

.hero-section {

    min-height:
        calc(100vh - var(--header-height));

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 50px;

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

    margin: auto;

    padding:
        80px 0;
}

.hero-background-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    pointer-events: none;
}

.hero-glow {

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .12;

    pointer-events: none;
}

.hero-glow-one {

    background: white;

    top: 10%;
    left: 20%;
}

.hero-glow-two {

    background: #377dff;

    right: 5%;
    bottom: 5%;
}

.hero-content {

    position: relative;

    z-index: 2;
}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

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

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

    border-radius: 999px;

    padding:
        8px 13px;

    color: #bbb;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 25px;
}

.status-dot {

    width: 7px;
    height: 7px;

    background: white;

    border-radius: 50%;

    box-shadow:
        0 0 15px white;

    animation:
        pulseDot 1.5s infinite;
}

@keyframes pulseDot {

    0%,100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-title {

    font-size:
        clamp(48px, 7vw, 92px);

    letter-spacing:
        -5px;

    max-width: 800px;

    margin-bottom: 25px;

    animation:
        titleReveal .9s ease both;
}

.hero-title span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #fff,
            #666,
            #fff
        );

    background-size: 200%;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation:
        gradientText 5s linear infinite;
}

@keyframes gradientText {

    from {
        background-position: 0%;
    }

    to {
        background-position: 200%;
    }
}

@keyframes titleReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-description {

    max-width: 650px;

    margin-bottom: 30px;
}

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 45px;
}

.hero-stat-strip {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;
}

.hero-stat-strip div {

    display: flex;

    flex-direction: column;

    padding-left: 15px;

    border-left:
        1px solid var(--border-bright);
}

.hero-stat-strip strong {

    font-family:
        "Montserrat";

    font-size: 21px;
}

.hero-stat-strip span {

    color: #777;

    font-size: 10px;

    margin-top: 3px;
}


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

.hero-image-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;
}

.hero-image-frame {

    position: relative;

    width: min(
        100%,
        530px
    );

    padding: 12px;

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

    border-radius:
        30px;

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

    box-shadow:
        var(--shadow);

    transform:
        rotate(1deg);

    transition:
        transform .6s ease;
}

.hero-image-frame:hover {
    transform: rotate(0deg) translateY(-6px);
}

.hero-image {

    width: 100%;

    height: 540px;

    max-height: 60vh;

    object-fit: contain;

    border-radius: 22px;

    background: #0d0d0d;
}

.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    background:
        rgba(10,10,10,.85);

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

    backdrop-filter:
        blur(15px);

    border-radius:
        13px;

    padding:
        12px 14px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.5);

    animation:
        floating 4s ease-in-out infinite;
}

.floating-card i {

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: white;

    color: black;
}

.floating-card strong {

    display: block;

    font-size: 10px;
}

.floating-card span {

    display: block;

    font-size: 8px;

    color: #777;
}

.floating-card-one {

    left: -30px;
    bottom: 80px;
}

.floating-card-two {

    right: -30px;
    top: 70px;

    animation-delay:
        -2s;
}

@keyframes floating {

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

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


/* =========================================================
   MISSION
========================================================= */

.mission-grid {

    display: grid;

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

    gap: 16px;

    margin-bottom: 110px;
}

.glass-card {

    padding: 30px;

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

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.02)
        );

    min-height: 280px;

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

.glass-card:hover {

    transform:
        translateY(-7px);

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

.card-icon {

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    background: white;

    color: black;

    border-radius: 13px;

    margin-bottom: 25px;
}

.card-label {

    display: block;

    font-size: 9px;

    letter-spacing: 2px;

    color: #777;

    font-weight: 800;

    margin-bottom: 10px;
}

.glass-card h3 {

    font-size: 20px;

    margin-bottom: 13px;
}

.glass-card p {
    font-size: 13px;
}


/* =========================================================
   VISUAL STORY
========================================================= */

.visual-story {

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

    margin:
        0 auto 120px;
}

.story-row {

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 70px;

    margin-bottom: 90px;
}

.story-right {

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr);
}

.story-image {

    display: flex;

    justify-content: center;
}

.story-image img {

    width: min(
        100%,
        430px
    );

    max-height: 440px;

    object-fit: contain;

    border-radius:
        24px;

    filter:
        drop-shadow(
            0 25px 50px rgba(0,0,0,.4)
        );
}

.story-content h2 {

    margin-bottom: 20px;
}

.story-content p {

    max-width: 620px;

    margin-bottom: 25px;
}

.story-bottom {

    display: flex;

    justify-content: center;

    margin-top: 20px;
}

.story-bottom img {

    width: min(
        100%,
        600px
    );

    max-height: 330px;

    object-fit: contain;
}


/* =========================================================
   DARK SECTION
========================================================= */

.dark-section {

    padding:
        110px 0;

    background:
        #090909;

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

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

.system-grid {

    display: grid;

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

    gap: 1px;

    background:
        var(--border);

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

.system-item {

    background:
        #090909;

    padding:
        35px;

    min-height: 230px;

    transition:
        background var(--transition);
}

.system-item:hover {

    background:
        #111;
}

.system-item i {

    font-size: 22px;

    color: #aaa;

    margin-bottom: 25px;
}

.system-item h3 {

    font-size: 18px;

    margin-bottom: 10px;
}

.system-item p {
    font-size: 12px;
}


/* =========================================================
   COVERAGE
========================================================= */

.coverage-card {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 30px;

    align-items: start;

    margin:
        110px 0;

    padding: 40px;

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

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

    background:
        linear-gradient(
            130deg,
            rgba(255,255,255,.06),
            transparent
        );
}

.coverage-icon {

    width: 65px;
    height: 65px;

    display: grid;

    place-items: center;

    border-radius: 20px;

    background: white;

    color: black;

    font-size: 25px;
}

.coverage-content h2 {

    margin-bottom: 20px;

    max-width: 800px;
}

.coverage-content p {

    max-width: 850px;

    margin-bottom: 25px;
}

.coverage-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.coverage-tags span {

    padding:
        7px 11px;

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

    border-radius:
        999px;

    color: #aaa;

    font-size: 10px;
}


/* =========================================================
   PREVIEWS
========================================================= */

.page-preview-grid {

    display: grid;

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

    gap: 12px;

    margin-bottom: 120px;
}

.preview-card {

    min-height: 330px;

    padding: 25px;

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

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.015)
        );

    display: flex;

    flex-direction: column;

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

.preview-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255,255,255,.35);
}

.preview-card > span {

    color: #555;

    font-family:
        "Montserrat";

    font-size: 11px;

    font-weight: 800;
}

.preview-card > i {

    font-size: 23px;

    margin: 30px 0 20px;
}

.preview-card h3 {

    font-size: 18px;

    margin-bottom: 10px;
}

.preview-card p {

    font-size: 11px;

    flex: 1;
}

.preview-card button {

    border: 0;

    background: transparent;

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0;

    font-size: 10px;

    font-weight: 800;
}


/* =========================================================
   GAME
========================================================= */

.game-section {

    padding:
        100px 0;

    background:
        #070707;

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

.game-introduction {

    text-align: center;

    max-width: 700px;

    margin:
        0 auto 45px;
}

.game-introduction h2 {

    margin-bottom: 18px;
}

.dino-game {

    max-width: 900px;

    margin: auto;

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

    border-radius:
        var(--radius);

    padding: 15px;

    background:
        #0b0b0b;
}

.game-header {

    display: flex;

    justify-content: space-between;

    padding:
        5px 10px 14px;

    color: #777;

    font-size: 10px;

    letter-spacing: 1px;
}

.game-screen {

    height: 260px;

    position: relative;

    overflow: hidden;

    border-radius:
        14px;

    background:
        linear-gradient(
            #111,
            #080808
        );
}

.game-ground {

    position: absolute;

    bottom: 35px;

    left: 0;
    right: 0;

    height: 1px;

    background:
        repeating-linear-gradient(
            90deg,
            #444 0 30px,
            transparent 30px 50px
        );
}

.dino {

    position: absolute;

    left: 70px;

    bottom: 36px;

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border-radius:
        12px;

    background: white;

    color: black;

    z-index: 5;
}

.dino.jump {

    animation:
        dinoJump .65s ease;
}

@keyframes dinoJump {

    0% {
        bottom: 36px;
    }

    50% {
        bottom: 135px;
    }

    100% {
        bottom: 36px;
    }
}

.game-obstacle {

    position: absolute;

    right: -50px;

    bottom: 36px;

    width: 35px;
    height: 48px;

    display: grid;

    place-items: center;

    background:
        #222;

    border:
        1px solid #777;

    color: white;

    border-radius:
        8px;

    opacity: 0;

}

.game-obstacle.running {

    opacity: 1;

    animation:
        obstacleRun 1.8s linear infinite;
}

@keyframes obstacleRun {

    from {
        right: -50px;
    }

    to {
        right: calc(100% + 50px);
    }
}

.game-cloud {

    position: absolute;

    width: 80px;
    height: 20px;

    border-radius: 999px;

    background: #1b1b1b;

    opacity: .7;
}

.cloud-one {
    top: 50px;
    left: 25%;
}

.cloud-two {
    top: 90px;
    left: 65%;
}

.game-message {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    pointer-events: none;

    text-align: center;
}

.game-message strong {

    font-family:
        "Montserrat";

    font-size: 20px;
}

.game-message span {

    color: #777;

    font-size: 10px;
}

.game-button {

    display: flex;

    margin:
        15px auto 0;
}


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

.inner-page-hero {

    padding:
        120px 0 90px;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(255,255,255,.07),
            transparent 30%
        );

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

.page-title {

    max-width: 1000px;

    font-size:
        clamp(45px, 7vw, 90px);

    letter-spacing:
        -5px;

    margin-bottom: 25px;
}

.page-lead {

    max-width: 760px;

    font-size: 16px;
}


/* =========================================================
   BENCHMARKING
========================================================= */

.benchmark-introduction {

    display: grid;

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

    gap: 70px;

    align-items: center;

    padding:
        100px 0;
}

.benchmark-text h2 {

    margin-bottom: 25px;
}

.benchmark-text p {

    margin-bottom: 18px;
}

.benchmark-image {

    display: flex;

    justify-content: center;
}

.benchmark-image img {

    width: min(
        100%,
        460px
    );

    max-height: 480px;

    object-fit: contain;

    border-radius:
        var(--radius);

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

    background:
        rgba(255,255,255,.025);
}


/* =========================================================
   STRATEGY BLOCK
========================================================= */

.strategy-block {

    display: grid;

    grid-template-columns:
        80px 1fr;

    gap: 30px;

    padding:
        65px 0;

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

.strategy-number {

    width: 58px;
    height: 58px;

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

    border-radius:
        16px;

    display: grid;

    place-items: center;

    color: #777;

    font-family:
        "Montserrat";

    font-weight: 800;
}

.strategy-block h2 {

    margin-bottom: 20px;
}

.strategy-block p {

    max-width: 800px;

    margin-bottom: 18px;
}

.strategy-points {

    display: grid;

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

    gap: 8px;

    margin-top: 25px;
}

.strategy-points span {

    padding:
        12px;

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

    border-radius:
        10px;

    color: #aaa;

    font-size: 11px;
}

.strategy-points i {

    color: white;

    margin-right: 6px;
}


/* =========================================================
   SOCIAL SYSTEM
========================================================= */

.social-system-grid {

    display: grid;

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

    gap: 10px;

    margin-top: 25px;
}

.social-system-grid div {

    padding:
        20px;

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

    border-radius:
        14px;

    background:
        rgba(255,255,255,.025);
}

.social-system-grid i {

    display: block;

    margin-bottom: 14px;

    font-size: 18px;
}

.social-system-grid strong {

    display: block;

    font-size: 12px;
}

.social-system-grid span {

    display: block;

    color: #666;

    font-size: 9px;

    margin-top: 4px;
}


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

.seo-system {

    margin:
        90px 0;

    padding:
        60px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.01)
        );
}

.seo-heading {

    max-width: 750px;

    margin-bottom: 45px;
}

.seo-heading h2 {

    margin-bottom: 18px;
}

.seo-grid {

    display: grid;

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

    gap: 10px;
}

.seo-card {

    position: relative;

    padding:
        25px;

    min-height: 190px;

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

    border-radius:
        15px;

    background:
        rgba(0,0,0,.25);

    overflow: hidden;
}

.seo-card > span {

    position: absolute;

    top: 15px;
    right: 18px;

    font-size: 9px;

    color: #444;

    font-weight: 800;
}

.seo-card i {

    font-size: 20px;

    margin-bottom: 25px;
}

.seo-card h3 {

    font-size: 16px;

    margin-bottom: 8px;
}

.seo-card p {
    font-size: 11px;
}


/* =========================================================
   BENCHMARK VIDEO
========================================================= */

.benchmark-video-section {

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 50px;

    align-items: center;

    margin:
        90px 0;
}

.video-information h2 {
    margin-bottom: 20px;
}

.benchmark-video-wrapper {

    width: 100%;

    max-width: 550px;

    justify-self: end;

    padding: 8px;

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

    border-radius:
        20px;

    background:
        #0c0c0c;
}

.benchmark-video-wrapper video {

    width: 100%;

    height: 420px;

    object-fit: contain;

    background: #000;

    border-radius:
        14px;
}


/* =========================================================
   COMPARISON
========================================================= */

.comparison-panel {

    padding:
        60px;

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

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

    margin-bottom:
        60px;
}

.comparison-panel h2 {
    margin-bottom: 35px;
}

.comparison-table {

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

    border-radius:
        15px;

    overflow: hidden;
}

.comparison-row {

    display: grid;

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

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

.comparison-row:last-child {
    border-bottom: 0;
}

.comparison-row span {

    padding:
        15px;

    color: #aaa;

    font-size: 11px;

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

.comparison-row span:last-child {
    border-right: 0;
}

.comparison-header span {

    color: white;

    font-weight: 800;

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

.source-note {

    display: flex;

    gap: 12px;

    padding:
        20px;

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

    border-radius:
        14px;

    margin-bottom: 90px;
}

.source-note i {
    margin-top: 5px;
}

.source-note p {
    font-size: 11px;
}


/* =========================================================
   SERVICES
========================================================= */

.services-hero {
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(255,255,255,.08),
            transparent 35%
        );
}

.payment-explanation {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 30px;

    margin:
        90px 0 60px;

    padding:
        35px;

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

    border-radius:
        var(--radius);

    background:
        rgba(255,255,255,.03);
}

.explanation-icon {

    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    border-radius:
        18px;

    background:
        white;

    color:
        black;
}

.payment-explanation h2 {

    font-size:
        clamp(28px, 4vw, 48px);

    margin-bottom: 15px;
}

.payment-explanation p {

    max-width: 850px;

    margin-bottom: 14px;
}

.payment-notice {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        15px;

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

    border-radius:
        12px;

    margin-top: 20px;

    font-size: 11px;

    color: #ccc;
}


/* =========================================================
   MEMBERSHIP CARD
========================================================= */

.membership-card {

    position: relative;

    padding:
        40px;

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

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

    margin:
        20px 0;

    overflow: hidden;
}

.six-month {

    background:
        #101010;

    max-width: 1000px;

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

.membership-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;
}

.membership-number {

    color: #555;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.membership-header h2 {

    font-size:
        clamp(27px, 4vw, 48px);

    margin:
        8px 0;
}

.membership-header p {
    font-size: 12px;
}

.price-box {

    text-align: right;

    flex-shrink: 0;
}

.old-price {

    display: block;

    color: #555;

    text-decoration:
        line-through;

    font-size: 12px;
}

.price-box strong {

    display: block;

    font-family:
        "Montserrat";

    font-size:
        clamp(32px, 5vw, 55px);

    letter-spacing:
        -3px;
}

.price-box span:last-child {

    display: block;

    color: #555;

    font-size: 8px;

    letter-spacing: 2px;
}

.membership-body {

    margin-top: 35px;
}

.membership-description {

    margin-bottom: 30px;
}

.membership-description h3 {

    font-size: 19px;

    margin-bottom: 8px;
}

.membership-description p {
    font-size: 12px;
}

.feature-grid {

    display: grid;

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

    gap: 8px;
}

.feature-grid div {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 55px;

    padding:
        12px;

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

    border-radius:
        10px;

    color: #aaa;

    font-size: 10px;
}

.feature-grid i {
    color: white;
}

.service-select-button {

    width: 100%;

    margin-top: 25px;

    padding:
        14px;

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

    border-radius:
        999px;

    background:
        transparent;

    color: white;

    font-size: 11px;

    font-weight: 800;

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

.service-select-button:hover {

    background: white;

    color: black;
}


/* =========================================================
   PREMIUM MEMBERSHIP
========================================================= */

.premium-membership {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #d9d9d9 40%,
            #ffffff
        );

    color: #080808;

    border-color:
        rgba(255,255,255,.8);

    box-shadow:
        0 30px 100px rgba(255,255,255,.09);

    transform:
        scale(1.015);
}

.premium-membership p,
.premium-membership .membership-number {
    color: #5e5e5e;
}

.premium-membership .old-price {
    color: #777;
}

.premium-membership .feature-grid div {

    border-color:
        rgba(0,0,0,.12);

    color: #222;

    background:
        rgba(255,255,255,.4);
}

.premium-membership .feature-grid i {
    color: #111;
}

.premium-ribbon {

    position: absolute;

    top: 0;
    right: 0;

    background:
        #080808;

    color: white;

    padding:
        8px 17px;

    border-radius:
        0 0 0 12px;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.5px;
}

.premium-glow {

    position: absolute;

    width: 300px;
    height: 300px;

    top: -180px;
    left: 40%;

    border-radius: 50%;

    background: white;

    filter:
        blur(80px);

    opacity: .6;

    pointer-events: none;
}

.premium-highlight {

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        16px;

    margin-top: 30px;

    border-radius:
        13px;

    background:
        rgba(0,0,0,.06);

    font-size: 11px;

    font-weight: 700;
}

.premium-highlight i {
    font-size: 22px;
}

.premium-note {

    margin-top: 30px;

    padding:
        20px;

    border-left:
        3px solid #111;

    background:
        rgba(0,0,0,.045);
}

.premium-note strong {

    display: block;

    font-size: 12px;

    margin-bottom: 6px;
}

.premium-note p {
    font-size: 11px;
}

.premium-button {

    background:
        #080808;

    color: white;

    border-color:
        #080808;
}

.premium-button:hover {

    background:
        #222;

    color: white;
}


/* =========================================================
   SPECIAL SERVICE CARDS
========================================================= */

.service-special-card {

    position: relative;

    margin:
        20px 0;

    padding:
        40px;

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

    overflow: hidden;

    min-height: 500px;

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

.special-icon {

    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    border-radius:
        18px;

    margin-bottom: 25px;

    font-size: 23px;
}

.special-label {

    display: block;

    font-size: 9px;

    letter-spacing: 3px;

    font-weight: 900;

    margin-bottom: 12px;
}

.service-special-card h2 {

    max-width: 650px;

    font-size:
        clamp(30px, 5vw, 55px);

    margin-bottom: 20px;
}

.special-price {

    font-family:
        "Montserrat";

    font-size:
        50px;

    font-weight: 900;

    letter-spacing:
        -3px;

    margin-bottom: 15px;
}

.special-price span {

    display: inline-block;

    font-family:
        "Inter";

    font-size: 10px;

    letter-spacing: 1px;

    font-weight: 700;
}

.service-special-card p {
    max-width: 700px;
}

.service-special-card ul {

    list-style: none;

    display: grid;

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

    gap: 8px;

    max-width: 800px;

    margin:
        25px 0;
}

.service-special-card li {

    padding:
        11px;

    border-radius:
        10px;

    background:
        rgba(0,0,0,.14);

    font-size: 10px;

    font-weight: 700;
}

.service-special-card li i {
    margin-right: 7px;
}

.special-button {

    border: 0;

    padding:
        13px 20px;

    border-radius:
        999px;

    font-size: 11px;

    font-weight: 900;

    background:
        #080808;

    color: white;

    transition:
        transform var(--transition);
}

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


/* =========================================================
   COURSE
========================================================= */

.course-card {

    background:
        linear-gradient(
            145deg,
            #087cc3,
            #0e4768 55%,
            #08263a
        );

    border-color:
        rgba(75,180,255,.4);

    box-shadow:
        0 30px 80px rgba(0,120,200,.15);
}

.course-card .special-icon {

    background:
        rgba(255,255,255,.15);
}

.course-card .special-price {
    color: white;
}

.course-card .special-price span {
    color: #b7e5ff;
}

.course-card p {
    color: #c5e6f6;
}

.course-card li {
    background:
        rgba(0,0,0,.16);
}

.education-disclaimer {

    max-width: 700px;

    padding:
        12px;

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

    border-radius:
        10px;

    color: #bde5fa;

    font-size: 9px;

    margin-bottom: 18px;
}


/* =========================================================
   ADS
========================================================= */

.campaign-plan {

    background:
        linear-gradient(
            145deg,
            #ffe36b,
            #e4af16 55%,
            #8d6700
        );

    color: #171200;

    border-color:
        rgba(255,222,65,.65);
}

.campaign-plan p {
    color: #493c05;
}

.campaign-plan .special-label {
    color: #4a3d04;
}

.campaign-plan li {
    background:
        rgba(0,0,0,.1);
}

.campaign-plan .special-button {
    background: #111;
}

.campaign-fee-note {

    max-width: 650px;

    margin-bottom: 18px;

    font-size: 9px;

    font-weight: 700;

    color: #4e4106;
}


/* =========================================================
   CLEANING
========================================================= */

.cleaning-card {

    background:
        linear-gradient(
            145deg,
            #ffb6d4,
            #e867a3 50%,
            #9d2f67
        );

    color: #230713;

    border-color:
        rgba(255,150,195,.55);

    box-shadow:
        0 30px 100px rgba(255,80,150,.12);
}

.cleaning-card p {
    color: #4d1930;
}

.cleaning-card .special-label {
    color: #571c35;
}

.cleaning-card li {
    background:
        rgba(255,255,255,.13);
}

.cleaning-card .special-button {
    background:
        #230713;
}

.flower-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    opacity: .55;
}

.flower-particles::before,
.flower-particles::after {

    content: "✦  ✿  ✧  ❀  ✦  ✿";

    position: absolute;

    bottom: -100px;

    left: 10%;

    color: white;

    font-size: 20px;

    letter-spacing: 40px;

    animation:
        flowersUp 9s linear infinite;
}

.flower-particles::after {

    left: 60%;

    animation-delay:
        -4s;

    font-size: 14px;
}

@keyframes flowersUp {

    from {
        transform:
            translateY(0)
            rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    to {
        transform:
            translateY(-650px)
            rotate(120deg);
        opacity: 0;
    }
}


/* =========================================================
   MEMBERSHIP COMPARISON
========================================================= */

.membership-comparison {

    margin:
        90px 0;

    text-align: center;
}

.membership-comparison h2 {

    max-width: 800px;

    margin:
        0 auto 35px;
}

.membership-compare-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

    text-align: left;
}

.compare-column {

    padding:
        35px;

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

    border-radius:
        var(--radius);

    background:
        #0d0d0d;
}

.compare-column.highlighted {

    background:
        linear-gradient(
            145deg,
            #fff,
            #ccc
        );

    color: black;

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 70px rgba(255,255,255,.08);
}

.compare-column h3 {

    font-size: 18px;

    margin-bottom: 10px;
}

.compare-column p {

    font-size: 12px;

    margin-bottom: 20px;
}

.compare-column ul {

    list-style: none;
}

.compare-column li {

    padding:
        10px 0;

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

    font-size: 11px;

    color: #aaa;
}

.compare-column.highlighted li {
    color: #333;
}

.compare-crown {

    margin-bottom: 10px;

    font-size: 22px;
}


/* =========================================================
   ABOUT
========================================================= */

.about-introduction {

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 70px;

    padding:
        100px 0;
}

.about-introduction h2 {

    margin-bottom: 20px;
}

.about-introduction p {

    max-width: 700px;

    margin-bottom: 16px;
}

.experience-panel {

    display: grid;

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

    gap: 10px;

    align-content: center;
}

.experience-panel div {

    padding:
        30px;

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

    border-radius:
        20px;

    background:
        rgba(255,255,255,.03);
}

.experience-panel div:first-child {
    grid-column: span 2;
}

.experience-panel strong {

    display: block;

    font-family:
        "Montserrat";

    font-size:
        clamp(38px, 5vw, 65px);

    letter-spacing:
        -4px;
}

.experience-panel span {

    color: #777;

    font-size: 10px;
}


/* =========================================================
   RESULTS
========================================================= */

.results-panel {

    padding:
        60px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            transparent
        );

    margin-bottom:
        100px;
}

.results-heading {

    max-width: 700px;

    margin-bottom: 45px;
}

.results-heading h2 {
    margin-bottom: 18px;
}

.results-grid {

    display: grid;

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

    gap: 10px;
}

.results-grid div {

    padding:
        25px;

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

    border-radius:
        15px;
}

.results-grid i {

    display: block;

    font-size: 20px;

    margin-bottom: 20px;
}

.results-grid strong {

    display: block;

    font-size: 13px;
}

.results-grid span {

    display: block;

    color: #666;

    font-size: 9px;

    margin-top: 5px;
}


/* =========================================================
   REVIEWS
========================================================= */

.testimonial-introduction {

    text-align: center;

    max-width: 800px;

    margin:
        0 auto 45px;
}

.testimonial-introduction h2 {
    margin-bottom: 15px;
}

.testimonial-introduction p {
    font-size: 12px;
}

.reviews-grid {

    display: grid;

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

    gap: 10px;

    margin-bottom:
        100px;
}

.review-card {

    padding:
        23px;

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

    border-radius:
        15px;

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

    min-height: 190px;

    transition:
        transform var(--transition);
}

.review-card:hover {
    transform:
        translateY(-5px);
}

.stars {

    display: inline-flex;
    align-items: center;
    color: #ffde41;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    text-shadow: 0 1px 10px rgba(255, 222, 65, .28);

    margin-bottom: 14px;
}

.review-card p {

    font-size: 10px;

    line-height: 1.7;

    margin-bottom: 17px;
}

.review-card strong {

    display: block;

    font-size: 11px;
}

.review-card span {

    color: #555;

    font-size: 8px;

    letter-spacing: 1px;
}

.about-cta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding:
        40px;

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

    border-radius:
        var(--radius);

    margin-bottom:
        100px;
}

.about-cta h2 {
    font-size:
        clamp(28px, 4vw, 48px);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-layout {

    display: grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap: 30px;

    padding:
        100px 0;
}

.contact-sidebar {

    position: sticky;

    top: 100px;

    align-self: start;
}

.contact-sidebar h2 {
    margin-bottom: 15px;
}

.contact-sidebar > p {

    font-size: 12px;

    margin-bottom: 25px;
}

.contact-method {

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        16px;

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

    border-radius:
        13px;

    margin-bottom: 8px;

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

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

.contact-method:hover {

    transform:
        translateX(4px);

    background:
        rgba(255,255,255,.06);
}

.contact-method > i:first-child {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.08);
}

.contact-method div {
    flex: 1;
}

.contact-method span {

    display: block;

    color: #666;

    font-size: 8px;

    letter-spacing: 1px;
}

.contact-method strong {

    display: block;

    font-size: 10px;

    margin-top: 2px;

    word-break: break-word;
}

.whatsapp-method > i:first-child {
    color: #53d769;
}

.schedule-card {

    margin-top: 20px;

    padding:
        25px;

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

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            transparent
        );
}

.schedule-card h3 {

    font-size: 16px;

    margin-bottom: 5px;
}

.schedule-card > strong {

    display: block;

    font-family:
        "Montserrat";

    font-size: 20px;

    margin-bottom: 12px;
}

.schedule-card p {
    font-size: 10px;
}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form-wrapper {

    padding:
        40px;

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

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

    background:
        rgba(255,255,255,.025);
}

.form-header {

    margin-bottom:
        35px;
}

.form-header h2 {
    font-size:
        clamp(30px, 4vw, 48px);
}

.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.form-group {

    margin-bottom: 16px;
}

.form-group label {

    display: block;

    font-size: 10px;

    color: #888;

    font-weight: 700;

    margin-bottom: 7px;
}

.form-group input,
.form-group textarea,
.form-group select {

    width: 100%;

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

    background:
        #0b0b0b;

    color: white;

    border-radius:
        11px;

    padding:
        13px 14px;

    outline: none;

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

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

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

    box-shadow:
        0 0 0 3px rgba(255,255,255,.03);
}

.form-group select option {
    background: #111;
    color: white;
}


/* =========================================================
   UPLOAD
========================================================= */

.upload-zone {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    border:
        1px dashed #444;

    border-radius:
        15px;

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

    cursor: pointer;

    text-align: center;

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

.upload-zone:hover {

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

    border-color:
        #888;
}

.upload-zone i {

    font-size: 25px;

    margin-bottom: 10px;
}

.upload-zone strong {

    font-size: 12px;
}

.upload-zone span {

    color: #666;

    font-size: 9px;

    margin-top: 5px;
}

.upload-zone input {
    display: none;
}

.file-preview {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(90px, 1fr));

    gap: 7px;

    margin-top: 10px;
}

.file-preview-item {

    position: relative;

    min-height: 70px;

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

    border-radius:
        9px;

    overflow: hidden;

    background:
        #111;
}

.file-preview-item img,
.file-preview-item video {

    width: 100%;
    height: 100%;

    min-height: 70px;

    object-fit: cover;
}

.file-name {

    position: absolute;

    left: 3px;
    right: 3px;
    bottom: 3px;

    padding: 3px;

    background:
        rgba(0,0,0,.75);

    font-size: 7px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.form-consent {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin:
        15px 0 20px;
}

.form-consent input {
    margin-top: 3px;
}

.form-consent label {

    color: #777;

    font-size: 9px;

    line-height: 1.6;
}

.form-submit {

    width: 100%;

    border: 0;

    background:
        white;

    color: black;

    padding:
        15px;

    border-radius:
        999px;

    font-size: 11px;

    font-weight: 900;

    transition:
        transform var(--transition);
}

.form-submit:hover {
    transform:
        translateY(-3px);
}

.form-status {

    min-height: 20px;

    text-align: center;

    color: #aaa;

    font-size: 10px;

    margin-top: 10px;
}


/* =========================================================
   PAYMENT PLATFORMS
========================================================= */

.payment-platforms {

    padding:
        70px 0 110px;
}

.payment-logo-grid {

    display: grid;

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

    gap: 10px;
}

.payment-logo-grid div {

    min-height: 90px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

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

    border-radius:
        14px;

    color: #aaa;

    font-size: 9px;

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

.payment-logo-grid div:hover {

    transform:
        translateY(-5px);

    background:
        rgba(255,255,255,.05);
}

.payment-logo-grid i {

    font-size: 21px;

    color: white;
}

.payment-logo-grid .fa-whatsapp {
    color: #53d769;
}

.payment-logo-grid .fa-paypal {
    color: #55aee8;
}

.zelle-logo {

    font-family:
        "Montserrat";

    font-weight: 900;

    font-size: 17px;

    letter-spacing: -1px;
}

.remitly-logo {

    font-family:
        "Montserrat";

    font-weight: 800;

    font-size: 13px;
}


/* =========================================================
   POLICY
========================================================= */

.policy-warning {

    display: flex;

    gap: 18px;

    align-items: flex-start;

    padding:
        25px;

    border:
        1px solid rgba(255,210,70,.25);

    background:
        rgba(255,210,70,.035);

    border-radius:
        15px;

    margin:
        80px 0 30px;
}

.policy-warning > i {

    color:
        #ffd34e;

    font-size:
        22px;
}

.policy-warning strong {

    display: block;

    font-size: 13px;

    margin-bottom: 4px;
}

.policy-warning p {
    font-size: 10px;
}

.policy-grid {

    display: grid;

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

    gap: 12px;

    margin-bottom:
        80px;
}

.policy-card {

    position: relative;

    padding:
        30px;

    min-height:
        300px;

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

    border-radius:
        var(--radius);

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

    overflow: hidden;
}

.policy-card > span {

    position: absolute;

    top: 18px;
    right: 20px;

    color: #333;

    font-size: 10px;

    font-weight: 900;
}

.policy-card > i {

    font-size: 22px;

    margin-bottom: 25px;
}

.policy-card h2 {

    font-size: 23px;

    letter-spacing:
        -1px;

    margin-bottom: 14px;
}

.policy-card p {

    font-size: 11px;

    margin-bottom: 10px;
}

.policy-final {

    padding:
        60px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            transparent
        );

    margin-bottom:
        100px;
}

.policy-final h2 {
    margin-bottom: 20px;
}

.policy-final p {

    max-width: 850px;

    font-size: 12px;

    margin-bottom: 12px;
}


/* =========================================================
   GLOBAL CTA
========================================================= */

.global-cta {

    padding:
        80px 0;

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

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(255,255,255,.07),
            transparent 35%
        );
}

.cta-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;
}

.cta-content h2 {

    font-size:
        clamp(30px, 4vw, 52px);

    margin-bottom: 10px;
}


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

.main-footer {

    padding:
        70px 0 20px;

    background:
        #030303;

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

.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr .7fr .8fr 1.1fr;

    gap: 50px;

    padding-bottom:
        50px;
}

.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}

.footer-logo img {

    width: 45px;
    height: 45px;

    object-fit: contain;
}

.footer-logo strong {

    display: block;

    font-family:
        "Montserrat";

    font-size: 12px;

    letter-spacing: 1px;
}

.footer-logo span {

    display: block;

    color: #555;

    font-size: 8px;

    margin-top: 4px;
}

.footer-brand > p {

    max-width: 430px;

    font-size: 10px;

    color: #666;
}

.footer-socials {

    display: flex;

    gap: 7px;

    margin-top: 20px;
}

.footer-socials a {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

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

    border-radius:
        50%;

    color: #888;

    font-size: 12px;

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

.footer-socials a:hover {

    background: white;

    color: black;
}

.footer-column h3 {

    font-size: 11px;

    letter-spacing: 1px;

    margin-bottom: 17px;
}

.footer-column button,
.footer-column a {

    display: block;

    width: fit-content;

    border: 0;

    background: transparent;

    color: #666;

    font-size: 10px;

    padding: 4px 0;

    transition:
        color var(--transition);
}

.footer-column button:hover,
.footer-column a:hover {
    color: white;
}

.footer-contact a {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 5px;
}

.footer-contact a i {
    width: 15px;
}

.footer-hours {

    display: flex;

    flex-direction: column;

    margin-top: 18px;

    padding-top: 15px;

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

.footer-hours strong {

    font-size: 10px;

    color: white;
}

.footer-hours span {

    color: #666;

    font-size: 9px;
}

.footer-hours small {

    color: #444;

    font-size: 8px;

    margin-top: 8px;
}

.footer-payment-strip {

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        20px 0;

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

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

    color: #555;

    font-size: 9px;
}

.footer-payment-strip i {
    font-size: 15px;
}

.footer-payment-strip .fa-paypal {
    color: #3d91c7;
}

.footer-payment-strip .fa-whatsapp {
    color: #53d769;
}

.footer-payment-strip .fa-facebook {
    color: #4e83dc;
}

.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding-top: 20px;

    color: #444;

    font-size: 8px;

    letter-spacing: .5px;
}


/* =========================================================
   CHAT
========================================================= */

.smart-chat {

    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 9500;
}

.chat-toggle {

    position: relative;

    width: 57px;
    height: 57px;

    border: 0;

    border-radius: 50%;

    background:
        white;

    color: black;

    box-shadow:
        0 12px 40px rgba(0,0,0,.4);

    font-size: 20px;

    transition:
        transform var(--transition);
}

.chat-toggle:hover {
    transform:
        scale(1.07);
}

.chat-pulse {

    position: absolute;

    inset: -5px;

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

    border-radius: 50%;

    animation:
        chatPulse 2s infinite;
}

@keyframes chatPulse {

    0% {
        transform: scale(.85);
        opacity: 1;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.chat-window {

    position: absolute;

    right: 0;

    bottom: 70px;

    width:
        min(360px, calc(100vw - 30px));

    height: 500px;

    display: flex;

    flex-direction: column;

    background:
        #0b0b0b;

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

    border-radius:
        22px;

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

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(15px)
        scale(.97);

    pointer-events: none;

    transition:
        all var(--transition);
}

.chat-window.open {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}

.chat-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        17px;

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

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

.chat-header strong {

    display: block;

    font-size: 12px;
}

.chat-header span {

    display: block;

    color: #666;

    font-size: 8px;

    margin-top: 3px;
}

.chat-header button {

    width: 30px;
    height: 30px;

    border: 0;

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

    color: white;

    border-radius:
        50%;
}

.chat-body {

    flex: 1;

    overflow-y: auto;

    padding:
        15px;
}

.chat-message {

    max-width: 90%;

    padding:
        11px;

    border-radius:
        13px;

    margin-bottom:
        10px;

    background:
        #161616;
}

.chat-message.user {

    margin-left: auto;

    background:
        white;

    color: black;
}

.chat-message strong {

    display: block;

    font-size: 9px;

    margin-bottom: 3px;
}

.chat-message p {

    font-size: 10px;

    line-height: 1.5;

    color: #aaa;
}

.chat-message.user p {
    color: #222;
}

.chat-quick-actions {

    display: flex;

    gap: 5px;

    padding:
        8px 10px;

    overflow-x: auto;

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

.chat-quick-actions button {

    flex-shrink: 0;

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

    background:
        transparent;

    color: #aaa;

    padding:
        7px 9px;

    border-radius:
        999px;

    font-size: 8px;
}

.chat-input-area {

    display: flex;

    gap: 7px;

    padding:
        10px;

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

.chat-input-area input {

    flex: 1;

    min-width: 0;

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

    background:
        #111;

    color: white;

    border-radius:
        999px;

    padding:
        10px 13px;

    outline: none;

    font-size: 10px;
}

.chat-input-area button {

    width: 38px;

    height: 38px;

    border: 0;

    border-radius: 50%;

    background: white;

    color: black;
}


/* =========================================================
   WHATSAPP
========================================================= */

.floating-whatsapp {

    position: fixed;

    left: 20px;
    bottom: 20px;

    z-index: 9400;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        11px 15px;

    background:
        #25d366;

    color: white;

    border-radius:
        999px;

    box-shadow:
        0 12px 40px rgba(37,211,102,.2);

    font-size: 10px;

    font-weight: 800;

    transition:
        transform var(--transition);
}

.floating-whatsapp:hover {
    transform:
        translateY(-4px);
}

.floating-whatsapp i {
    font-size: 16px;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1100px) {

    .desktop-navigation {
        display: none;
    }

    .mobile-menu-button {
        display: grid;
        place-items: center;
    }

    .mobile-navigation {
        display: block;
    }

    .hero-section {

        grid-template-columns:
            1fr;

        text-align: center;
    }

    .hero-content {

        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .hero-description {
        max-width: 750px;
    }

    .hero-image-frame {
        width: min(100%, 550px);
    }

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

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

    .page-preview-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .reviews-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

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

    .payment-logo-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

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

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


@media (max-width: 800px) {

    :root {
        --header-height: 70px;
    }

    .section-container,
    .visual-story {

        width:
            min(
                calc(100% - 28px),
                var(--container)
            );
    }

    .hero-section {

        width:
            min(
                calc(100% - 28px),
                1400px
            );

        padding:
            60px 0;
    }

    .hero-title {

        font-size:
            clamp(42px, 12vw, 65px);

        letter-spacing:
            -3px;
    }

    .hero-stat-strip {
        justify-content: center;
    }

    .hero-image {
        height: 420px;
        max-height: 55vh;
    }

    .floating-card-one {
        left: -5px;
    }

    .floating-card-two {
        right: -5px;
    }

    .mission-grid,
    .system-grid,
    .page-preview-grid,
    .reviews-grid,
    .policy-grid,
    .seo-grid {

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

    .story-row,
    .story-right {

        grid-template-columns:
            1fr;

        gap: 30px;

        text-align: center;
    }

    .story-content {
        order: 1;
    }

    .story-image {
        order: 2;
    }

    .benchmark-introduction,
    .benchmark-video-section,
    .about-introduction,
    .contact-layout {

        grid-template-columns:
            1fr;

        gap: 40px;
    }

    .benchmark-image {
        order: -1;
    }

    .benchmark-video-wrapper {
        justify-self: stretch;
        max-width: none;
    }

    .benchmark-video-wrapper video {
        height: 350px;
    }

    .strategy-points {
        grid-template-columns:
            1fr 1fr;
    }

    .social-system-grid {
        grid-template-columns:
            1fr 1fr;
    }

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

    .membership-compare-grid {
        grid-template-columns:
            1fr;
    }

    .premium-membership {
        transform: none;
    }

    .contact-sidebar {
        position: static;
    }

    .cta-content {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .footer-payment-strip {
        flex-wrap: wrap;
    }

    .floating-whatsapp span {
        display: none;
    }

    .floating-whatsapp {
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        left: 15px;
        bottom: 15px;
    }

    .smart-chat {
        right: 15px;
        bottom: 15px;
    }
}


@media (max-width: 560px) {

    .header-container {
        width:
            calc(100% - 22px);
    }

    .brand-text {
        display: none;
    }

    .header-whatsapp span {
        display: none;
    }

    .header-whatsapp {

        width: 39px;
        height: 39px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;
    }

    .mission-grid,
    .system-grid,
    .page-preview-grid,
    .reviews-grid,
    .policy-grid,
    .seo-grid,
    .results-grid,
    .payment-logo-grid {

        grid-template-columns:
            1fr;
    }

    .coverage-card {

        grid-template-columns:
            1fr;

        padding:
            25px;
    }

    .coverage-icon {
        width: 52px;
        height: 52px;
    }

    .feature-grid,
    .strategy-points,
    .social-system-grid {

        grid-template-columns:
            1fr;
    }

    .membership-card,
    .service-special-card,
    .seo-system,
    .comparison-panel,
    .results-panel,
    .contact-form-wrapper,
    .policy-final {

        padding:
            25px;
    }

    .membership-header {

        flex-direction: column;
    }

    .price-box {
        text-align: left;
    }

    .service-special-card ul {
        grid-template-columns:
            1fr;
    }

    .special-price {
        font-size: 40px;
    }

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

    .comparison-row span {
        border-right: 0;
        border-bottom:
            1px solid var(--border);
    }

    .comparison-row span:last-child {
        border-bottom: 0;
    }

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

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

    .footer-bottom {
        flex-direction: column;
    }

    .game-screen {
        height: 220px;
    }

    .dino {
        left: 35px;
    }

    .chat-window {
        width:
            calc(100vw - 25px);

        right:
            -3px;

        height:
            480px;
    }

    #cursor-dot,
    #cursor-ring {
        display: none;
    }
}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .001ms !important;
    }

    .reveal {

        opacity: 1;

        transform: none;
    }
}

.portfolio-showcase { padding-top: 45px; padding-bottom: 35px; }
.live-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.live-project-card { min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:22px; background:linear-gradient(145deg,#151515,#080808); box-shadow:0 25px 60px rgba(0,0,0,.32); transition:transform .35s ease,border-color .35s ease; }
.live-project-card:hover { transform:translateY(-7px); border-color:rgba(255,255,255,.38); }
.project-browser-bar { height:42px; display:flex; align-items:center; gap:6px; padding:0 14px; background:#111; border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; }
.project-browser-bar span { width:8px; height:8px; border-radius:50%; background:#777; flex:0 0 auto; }
.project-browser-bar strong { margin-left:8px; font-size:8px; letter-spacing:1.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#d8d8d8; }
.project-frame-wrap { height:380px; background:#fff; position:relative; overflow:hidden; }
.project-frame-wrap iframe { width:100%; height:100%; border:0; display:block; background:#fff; }
.project-card-footer { padding:18px; display:flex; gap:14px; align-items:center; justify-content:space-between; }
.project-card-footer h3 { margin:0; font-size:14px; max-width:55%; line-height:1.25; }
.project-card-footer a { flex:0 0 auto; color:#fff; text-decoration:none; font-size:9px; font-weight:800; letter-spacing:.5px; padding:10px 12px; border:1px solid rgba(255,255,255,.2); border-radius:999px; transition:.25s ease; }
.project-card-footer a:hover { background:#fff; color:#111; }
@media (max-width:1100px){ .live-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:700px){ .live-project-grid{grid-template-columns:1fr;} .project-frame-wrap{height:430px;} .project-card-footer{flex-direction:column;align-items:flex-start;} .project-card-footer h3{max-width:100%;} }


/* DANTE STUDIO · Consolidated responsive presentation */
:root {
    --black: #0b0d10;
    --black-2: #101318;
    --black-3: #171b20;
    --gray: #adb2bb;
    --border: rgba(255,255,255,.12);
    --gold: #e6c47a;
    --container: 1180px;
    --radius-large: 24px;
}
body { background: #0b0d10; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-weight: 700; }
.special-price, .price-box, .special-label, .membership-number, .game-message strong { font-family: "Inter", Arial, sans-serif; }
.special-price span { font-family: "Inter", Arial, sans-serif; }
.hero-stat-strip strong, .price-box strong { font-family: "Inter", Arial, sans-serif; }
h2 { line-height: 1.14; letter-spacing: -1.5px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
[hidden] { display: none !important; }
#particleCanvas { display: none; }
.page-section { animation: none; }
/* Content remains readable before/without animation initialization. */
.reveal, .reveal.visible { opacity: 1; transform: none; animation: none; }
.main-header { background: rgba(11,13,16,.95); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px); }
.header-container { max-width: 1400px; }
.brand-text strong { letter-spacing: 1.2px; }
.brand-text span { color: var(--gold); letter-spacing: 5px; }
.nav-link { font-size: 11px; }
.nav-link.active { color: var(--gold); }
.nav-link::after { background: var(--gold); }
.hero-section { width: min(calc(100% - 80px),1320px); gap: 64px; padding: 76px 0 90px; }
.hero-background-grid { opacity: .34; background-size: 80px 80px; }
.hero-glow { opacity: .045; }
.hero-glow-one { background: var(--gold); }
.hero-glow-two { background: #9eafc3; }
.hero-badge { color: var(--gold); border-color: #e6c47a33; background: #e6c47a08; font-size: 10px; letter-spacing: 2px; }
.status-dot { background: var(--gold); box-shadow: none; animation: none; }
.hero-title { font-size: clamp(48px,5.8vw,82px); letter-spacing: -4px; line-height: 1.04; }
.hero-title span { color: var(--gold); }
.hero-description { max-width: 570px; font-size: 16px; margin-top: 24px; }
.hero-image-frame { border-radius: 24px; }
.floating-card { animation: none; background: #15191fed; border-color: #ffffff20; box-shadow: 0 16px 40px #0003; }
.floating-card i { color: var(--gold); }
.hero-stat-strip { border-top: 1px solid var(--border); padding-top: 25px; gap: 30px; }
.hero-stat-strip strong { font-size: 25px; font-weight: 600; }
.hero-stat-strip span { font-size: 11px; }
.primary-button, .secondary-button, .special-button, .outline-button, .premium-button, .cta-button { border-radius: 10px; min-height: 48px; font-size: 12px; }
.primary-button { background: var(--gold); color: #14171b; box-shadow: none; }
.primary-button:hover { background: #f2d59d; box-shadow: 0 8px 25px #0002; }
.eyebrow { color: var(--gold); font-size: 10px; letter-spacing: 2.5px; }
.eyebrow::before { background: var(--gold); }
.inner-page-hero { padding-top: 72px; padding-bottom: 54px; background: linear-gradient(135deg,#e6c47a08,transparent 65%); }
.page-title { font-size: clamp(44px,5.8vw,76px); line-height: 1.06; letter-spacing: -3px; }
.page-title span { color: var(--gold); }
.page-lead { max-width: 680px; font-size: 16px; }
.glass-card, .preview-card, .review-card, .live-project-card, .policy-card { background: #12161b; border-color: var(--border); box-shadow: none; border-radius: 20px; }
.review-card p { font-size: 14px; }
.review-card:hover, .preview-card:hover, .live-project-card:hover { transform: translateY(-3px); border-color: #e6c47a66; }
.project-card-footer a { font-size: 10px; }
.service-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 20px 0 28px; border-bottom: 1px solid var(--border); }
.service-shortcuts > span { color: #9da4af; font-size: 10px; letter-spacing: 1.5px; margin-right: auto; }
.service-shortcuts button { border: 1px solid #ffffff24; border-radius: 8px; padding: 11px 16px; color: #e7e9ee; background: #15191e; font-size: 12px; }
.service-shortcuts button:hover { border-color: var(--gold); color: var(--gold); }
.service-shortcuts button[data-service-jump="campaign-management"] { color: var(--gold); background: #e6c47a0c; border-color: #e6c47a55; }
.payment-explanation { padding: 32px; margin: 36px 0; border-radius: 20px; }
.payment-explanation h2 { font-size: clamp(26px,3vw,36px); }
.payment-explanation p { font-size: 14px; }
.payment-notice { font-size: 12px; }
.membership-card, .service-special-card { width: 100%; max-width: none; margin: 24px 0; padding: 40px; position: relative; scroll-margin-top: 104px; border: 1px solid var(--border); border-radius: 24px; box-shadow: none; transform: none; }
.membership-card:focus, .service-special-card:focus { outline-offset: 5px; }
.membership-card { background: #15191e; }
.membership-header { gap: 32px; }
.membership-header > div:first-child { min-width: 0; }
.membership-header h2 { font-size: clamp(28px,3.6vw,44px); line-height: 1.12; }
.membership-number { color: var(--gold); font-size: 11px; letter-spacing: 2px; }
.price-box { flex-shrink: 0; }
.price-box strong { font-size: clamp(40px,4vw,56px); font-weight: 700; letter-spacing: -2px; }
.feature-grid { gap: 10px; }
.feature-grid div { font-size: 13px; padding: 15px; }
.membership-description p, .premium-benefits p { font-size: 14px; }
.premium-membership { background: #eeede8; color: #171c23; border-color: #eeede8; }
.premium-membership p, .premium-membership .membership-number, .premium-membership .old-price { color: #515862; }
.premium-membership .membership-number { color: #685121; }
.premium-membership .feature-grid div { background: #deded766; color: #252b32; border-color: #00000012; }
.premium-membership .feature-grid i { color: #685121; }
.premium-glow { display: none; }
.premium-ribbon { position: static; display: inline-block; background: #20262e; color: #f1d9a8; border-radius: 6px; padding: 7px 12px; margin-bottom: 26px; font-size: 10px; letter-spacing: 1.5px; transform: none; }
.premium-highlight { font-size: 13px; }
.premium-benefits { color: #3b424a; }
.service-special-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 48px; min-height: 0; overflow: hidden; }
.service-copy, .service-details { min-width: 0; }
.special-icon { width: 50px; height: 50px; margin-bottom: 24px; border-radius: 13px; font-size: 20px; }
.special-label { font-size: 10px; letter-spacing: 1.7px; line-height: 1.65; }
.service-special-card h2 { font-size: clamp(28px,3.3vw,44px); letter-spacing: -1.6px; margin-bottom: 20px; }
.special-price { font-size: 46px; letter-spacing: -2px; line-height: 1.3; margin-bottom: 18px; }
.special-price span { display: block; font-size: 10px; line-height: 1.6; letter-spacing: 1.2px; margin-top: 4px; }
.service-special-card p { font-size: 14px; line-height: 1.8; }
.service-special-card ul { grid-template-columns: 1fr; gap: 0; margin: 0 0 22px; }
.service-special-card li { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; font-size: 13px; font-weight: 500; border-radius: 0; border-bottom: 1px solid #ffffff20; background: transparent; }
.service-special-card li i { flex: 0 0 16px; margin: 0; }
.service-details .special-button { width: 100%; padding: 14px 20px; }
.course-card { background: #152a3b; border-color: #2f4c64; }
.course-card .special-icon { background: #adcfe315; color: #b0d8f4; }
.course-card .special-label { color: #b0d8f4; }
.course-card li { background: transparent; }
.education-disclaimer { font-size: 11px; line-height: 1.7; }
/* ADS has a single layout rule, no timers, reveal classes or forced z-index. */
.campaign-plan { background: #e8ca86; color: #20231f; border-color: #f4ddad; }
.campaign-plan h2, .campaign-plan p, .campaign-plan .special-label, .campaign-plan .campaign-fee-note { color: #30352b; }
.campaign-plan .special-icon { background: #252a24; color: #efd9aa; }
.campaign-plan li { background: transparent; border-color: #272b242d; }
.campaign-fee-note { font-size: 11px; font-weight: 500; line-height: 1.7; }
.campaign-plan .special-button { background: #252a24; color: #fff; }
.cleaning-card { background: #38232f; border-color: #644252; color: #fff3f8; }
.cleaning-card h2 { color: #fff3f8; }
.cleaning-card p { color: #dec3d0; }
.cleaning-card .special-label { color: #f2b9d1; }
/* The broom occupies its own row in normal flow, above the title. */
.cleaning-broom { position: static; background: #f2b9d118; color: #f2b9d1; }
.cleaning-broom svg { width: 30px; height: 30px; }
.cleaning-card li { background: transparent; border-color: #f2b9d12b; }
.cleaning-card .special-button { background: #f0c4d7; color: #35202b; }
.membership-compare-grid p { font-size: 13px; }
.game-section { background: #101419; }
.dino-game { background: #171c23; border-color: #ffffff20; padding: 20px; }
.game-header { color: #b8c1ce; font-size: 11px; padding-bottom: 18px; }
.game-header strong { color: var(--gold); letter-spacing: 2px; }
.game-screen { height: 260px; background: linear-gradient(#202833,#10151c); touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: contain; }
.game-screen::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size: 40px 40px; pointer-events: none; }
.game-message { z-index: 6; padding: 20px; background: #10151c55; }
.game-message strong { color: #f0d49c; letter-spacing: 1px; }
.game-message span { color: #d2d8e1; font-size: 12px; margin-top: 8px; }
.dino { left: clamp(28px,6vw,70px); bottom: 36px; width: 45px; height: 45px; background: #f5e6c7; border-radius: 10px; animation: none; will-change: transform; }
.dino img { width: 80%; height: 80%; object-fit: contain; pointer-events: none; }
.dino.jump { animation: none; }
.game-obstacle { left: 0; right: auto; animation: none; background: #b56b53; border: 1px solid #e8a287; color: #fff; will-change: transform; }
.game-screen[data-state="running"] .game-obstacle, .game-screen[data-state="paused"] .game-obstacle, .game-screen[data-state="over"] .game-obstacle { opacity: 1; }
.game-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.game-controls .game-button { margin: 0; min-width: 140px; touch-action: manipulation; }
#jumpGameButton { touch-action: none; user-select: none; }
#jumpGameButton:disabled { opacity: .4; cursor: default; transform: none; }
.game-help { margin: 14px auto 0; max-width: 540px; text-align: center; font-size: 12px; color: #b3bdca; }

@media (max-width:1100px) {
    .hero-section { width: min(calc(100% - 48px),900px); gap: 40px; }
    .service-special-card { gap: 32px; padding: 32px; }
}
@media (max-width:768px) {
    .hero-glow { width: 70%; height: 280px; }
    .hero-section { grid-template-columns: 1fr; padding: 48px 0 64px; gap: 40px; }
    .hero-title { font-size: clamp(43px,9vw,66px); letter-spacing: -2.5px; }
    .hero-description { font-size: 15px; }
    .hero-image-wrapper { width: 100%; max-width: 560px; margin: auto; }
    .hero-stat-strip { gap: 18px; }
    .inner-page-hero { padding: 48px 0 32px; }
    .page-title { letter-spacing: -2px; }
    .service-shortcuts > span { flex-basis: 100%; margin-bottom: 5px; }
    .service-shortcuts button { flex: 1 1 auto; }
    .membership-card, .service-special-card { padding: 26px; border-radius: 20px; }
    .service-special-card { grid-template-columns: 1fr; gap: 28px; }
    .service-special-card h2 { font-size: 32px; }
    .membership-header { flex-wrap: wrap; gap: 24px; }
    .payment-explanation { padding: 24px; }
    .feature-grid { grid-template-columns: 1fr; }
    .special-price span { font-size: 10px; }
    .dino-game { padding: 12px; }
    .game-screen { height: 230px; }
    .game-controls .game-button { min-width: 0; flex: 1; padding: 12px; }
    .game-header { padding-left: 3px; padding-right: 3px; }
}
@media (max-width:380px) {
    .section-container, .hero-section { width: calc(100% - 28px); }
    .membership-card, .service-special-card { padding: 22px; }
    .service-special-card h2 { font-size: 28px; }
    .hero-stat-strip { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* V6 · Expressive studio motion, visible service content, grounded chat. */
body { background: radial-gradient(ellipse at 15% 0%,#b5934310,transparent 40%),#090c11; }
.inner-page-hero { background: radial-gradient(ellipse at 80% 20%,#94743914,transparent 55%); }
.service-shortcuts { padding-bottom: 24px; margin-bottom: 30px; }
.service-shortcuts button { transition: background .25s,border-color .25s,transform .25s; }
.service-shortcuts button:hover { transform: translateY(-3px); }
.hero-glow { opacity: .12; animation: studio-breathe 8s ease-in-out infinite alternate; }
.hero-glow-two { animation-delay: -4s; }
.floating-card { animation: floating 5s ease-in-out infinite; }
.floating-card-two { animation-delay: -2.5s; }
.hero-badge .status-dot { animation: pulseDot 2.8s ease-in-out infinite; box-shadow: 0 0 15px #e6c47a55; }
.hero-title span { background: linear-gradient(110deg,#d4ae64 15%,#ffedbb 40%,#d4ae64 65%); background-size: 240% 100%; color: #e6c47a; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation: title-light 9s ease-in-out infinite; }
.membership-pair { display:grid; grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr); gap:24px; margin:32px 0; align-items:start; }
.membership-pair > .membership-card { display:flex; flex-direction:column; margin:0; padding:32px; }
.membership-pair > .six-month { padding:26px; }
.membership-pair > .premium-membership { padding:38px; }
.membership-pair .membership-header { flex-direction:column; gap:20px; }
.membership-pair .membership-header h2 { font-size:clamp(28px,3vw,38px); }
.membership-pair .price-box { text-align:left; }
.membership-pair .feature-grid { grid-template-columns:1fr; }
.membership-pair .membership-body { flex:1; }
.membership-pair .premium-ribbon { align-self:flex-start; }
.membership-pair .membership-card > button { margin-top:24px; width:100%; }
.membership-card, .service-special-card { box-shadow:0 14px 50px #00000035; transition: transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .45s; }
.six-month { background: radial-gradient(circle at 100% 0%,#e6c47a16,transparent 50%),linear-gradient(140deg,#1b2029,#11151c); }
.premium-membership { background:linear-gradient(125deg,#fffefa,#e2e2dd 50%,#fffdf3); border-color:#fff5d5; box-shadow:0 12px 50px #fff2c412; }
.premium-membership::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 25%,#ffffff8a 45%,transparent 65%); transform:translateX(-120%); animation: card-glint 9s ease-in-out infinite; }
.premium-membership > * { position:relative; }
.service-special-card { margin:32px 0; border-radius:26px; }
.service-special-card .service-copy,.service-special-card .service-details { position:relative; z-index:1; }
.campaign-plan { background:linear-gradient(125deg,#f4dfa0 0%,#e5be5e 48%,#f6e6b5 100%); border-color:#fff0bc; box-shadow:0 18px 65px #ba903521,0 2px 0 #ffffff66 inset; }
.campaign-plan::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 30%,#fff9df70 48%,transparent 65%); transform:translateX(-120%); animation:card-glint 8s ease-in-out infinite; }
.plan-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.campaign-motif { width:144px; height:56px; max-width:44%; margin-top:6px; overflow:visible; }
.chart-grid { stroke:#40341620; stroke-width:1; }
.chart-path { stroke:#574522; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:0; animation:draw-campaign 5s ease-in-out infinite; }
.chart-point { fill:#574522; animation:chart-beacon 3s ease-in-out infinite; }
.campaign-plan .special-label { font-size:10px; letter-spacing:2px; }
.campaign-plan .special-button { background:#202721; }
.course-card { background:radial-gradient(ellipse at 5% 0%,#18769a55,transparent 60%),linear-gradient(120deg,#082c45,#124661 55%,#093042); border-color:#75c8ef55; }
.course-card .special-icon { background:#96eaff18; color:#c4f0ff; box-shadow:0 0 30px #6bdbfa13; }
.cleaning-card { background:radial-gradient(ellipse at 90% 10%,#de82b02b,transparent 55%),linear-gradient(125deg,#482439,#763c60 70%,#452c3f); border-color:#ecb4d34a; }
.special-icon { transition:transform .4s,box-shadow .4s; }
.cleaning-broom svg { transform-origin:50% 75%; animation:broom-sway 4.5s ease-in-out infinite; }
.payment-explanation { background:linear-gradient(130deg,#151921,#0e1218); border-color:#ffffff10; margin:42px 0 26px; }
.payment-explanation h2 { font-size:30px; }
.payment-notice { border-color:#e6c47a22; }
.primary-button,.special-button,.premium-button,.outline-button,.secondary-button { transition:transform .3s,background .3s,box-shadow .3s; }
.special-button i,.primary-button i,.premium-button i { transition:transform .3s; }
.special-button:hover i,.primary-button:hover i,.premium-button:hover i { transform:translateX(4px); }
.smart-chat { right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
.chat-toggle { position:relative; bottom:auto; display:grid; place-items:center; width:57px; height:57px; background:#faf8f2; color:#151b21; border:1px solid #ffffff55; box-shadow:0 8px 28px #0005; }
.assistant-symbol { width:24px; height:24px; }
.chat-pulse { inset:-4px; border-color:#e6c47a70; animation:chatPulse 3.5s ease-out infinite; pointer-events:none; }
.chat-window { bottom:74px; right:0; width:min(360px,calc(100vw - 32px)); height:min(500px,calc(100dvh - 116px)); border-color:#e6c47a44; background:#11151b; }
.chat-window.open { box-shadow:0 18px 60px #0008; }
#cursor-dot,#cursor-ring { display:none; position:fixed; left:0; top:0; z-index:100002; pointer-events:none; opacity:0; mix-blend-mode:normal; border-radius:50%; }
#cursor-dot { width:5px; height:5px; background:#f4d796; box-shadow:0 0 12px #f4d79699; }
#cursor-ring { width:34px; height:34px; border:1px solid #edcf86aa; background:#e6c47a04; transition:width .25s,height .25s,border-color .25s,background .25s,opacity .2s; }
.pointer-present #cursor-dot,.pointer-present #cursor-ring { opacity:1; }
.cursor-hover #cursor-ring { width:54px; height:54px; background:#e6c47a14; border-color:#f4d796; }
.pointer-pressed #cursor-ring { width:22px; height:22px; border-color:#fff4d8; background:#f4d79633; }
@keyframes studio-breathe { from{opacity:.07;transform:translateY(0)} to{opacity:.18;transform:translateY(20px)} }
@keyframes title-light { 0%,100%{background-position:100% 50%} 50%{background-position:0% 50%} }
@keyframes card-glint { 0%,40%{transform:translateX(-120%)} 75%,100%{transform:translateX(120%)} }
@keyframes draw-campaign { 0%{stroke-dashoffset:100;opacity:.3} 40%,85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:.3} }
@keyframes chart-beacon { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes broom-sway { 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(7deg)} }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    #cursor-dot,#cursor-ring { display:block; }
    .membership-card:hover,.service-special-card:hover { transform:translateY(-5px); box-shadow:0 25px 65px #0006; border-color:#edcf8666; }
    .service-special-card:hover .special-icon { transform:translateY(-3px) rotate(-4deg); }
}
@media (max-width:900px) {
    .membership-pair { grid-template-columns:1fr; }
    .membership-pair > .six-month { padding:24px; }
    .membership-pair > .premium-membership { padding:30px; }
    .membership-pair .membership-header { flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:768px) {
    .membership-pair > .membership-card { padding:26px; }
    .service-special-card { margin:26px 0; }
    .smart-chat { right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
    .chat-toggle { width:54px; height:54px; }
    .chat-window { right:0; bottom:70px; }
    .chat-pulse { animation-duration:4s; }
    .payment-explanation h2 { font-size:27px; }
}
@media (prefers-reduced-motion:reduce) {
    #cursor-dot,#cursor-ring { display:none; }
    .hero-title span { -webkit-text-fill-color:#e6c47a; background:none; }
    .premium-membership::before,.campaign-plan::before { display:none; }
}

/* Studio identity: monochrome environment; individual membership colors. */
:root { --gold:#e5e7eb; --gold-soft:#f5f5f5; }
body { background:#07090d; }
.brand-text span,.nav-link.active,.eyebrow { color:#dedfe3; }
.hero-badge { color:#eceef2; background:#ffffff07; border-color:#ffffff26; }
.hero-title span { background:linear-gradient(110deg,#a0a5ae 10%,#ffffff 40%,#a0a5ae 70%); background-size:240% 100%; background-clip:text; -webkit-background-clip:text; color:#e5e7eb; }
.hero-badge .status-dot { background:white; box-shadow:0 0 15px #ffffff55; }
.hero-glow-one { background:#b5becf; }
.hero-glow-two { background:#838b98; }
.primary-button { background:#f4f4f5; color:#11151a; }
.primary-button:hover { background:white; box-shadow:0 12px 28px #ffffff15; }
.page-title span { color:#b4bac4; }
.page-section { position:relative; isolation:isolate; }
.page-atmosphere { position:absolute; inset:0; z-index:-1; overflow:clip; pointer-events:none; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:80px 80px; }
.page-atmosphere svg { width:100%; height:800px; position:absolute; top:60px; left:0; opacity:.42; }
.digital-map { stroke:#b9c0ce; stroke-width:1.1; opacity:.34; transform-origin:75% 35%; animation:map-drift 14s ease-in-out infinite alternate; }
.data-stream { stroke:#e3e7f0; stroke-width:1.2; stroke-dasharray:3 18; opacity:.22; animation:data-travel 28s linear infinite; }
.digital-halo { position:absolute; top:30px; right:0; width:65%; height:650px; border-radius:50%; background:radial-gradient(ellipse,#a5b3c014,transparent 66%); animation:halo-breathe 12s ease-in-out infinite alternate; }
.signal-dot { position:absolute; width:5px; height:5px; border-radius:50%; background:#e1e7f0; box-shadow:0 0 20px #b5c4e0; animation:signal-pulse 4s ease-in-out infinite; }
.signal-one { top:240px; right:14%; }
.signal-two { top:500px; right:37%; animation-delay:-2s; }
.atmosphere-services .digital-map { animation-delay:-3s; }
.atmosphere-benchmarking .digital-map { animation-delay:-5s; }
.atmosphere-contact .digital-map { animation-delay:-7s; }
.inner-page-hero { background:transparent; }
.service-shortcuts button[data-service-jump="campaign-management"] { color:#f5f5f5; background:#ffffff09; border-color:#ffffff40; }
.service-shortcuts button:hover { color:white; border-color:#ffffff66; }
.six-month { background:radial-gradient(circle at 100% 0%,#a9b6ca17,transparent 50%),linear-gradient(140deg,#1c2028,#101319); }
.six-month .price-box span { color:#b6beca; }
.six-month .price-box .old-price { color:#929ba8; }
.payment-notice { border-color:#ffffff20; }
.premium-membership { color:#171b21; background:linear-gradient(125deg,#ffffff 0%,#eeeeef 32%,#d9dde3 50%,#ffffff 75%); border-color:#fff; box-shadow:0 18px 70px #ffffff24,0 1px 0 #fff inset; }
.premium-membership::before { background:linear-gradient(110deg,transparent 20%,#ffffffdc 45%,transparent 68%); animation-duration:6.8s; }
.premium-membership .membership-number { color:#555d68; }
.premium-membership .premium-ribbon { background:#161b22; color:#fff; }
.premium-membership .feature-grid i { color:#3f4b5c; }
.course-card { background:radial-gradient(ellipse at 90% 15%,#1578e64d,transparent 55%),linear-gradient(125deg,#06132e 5%,#0c326d 54%,#091a3b); border-color:#629fea66; box-shadow:0 16px 60px #0a55aa30,0 1px 0 #b0d5ff30 inset; }
.course-card::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 25%,#a8d9ff2e 45%,transparent 66%); transform:translateX(-120%); animation:card-glint 9s ease-in-out infinite; }
.course-card .special-icon { background:#b4d9ff15; color:#c6e2ff; box-shadow:0 0 30px #4196ff25; }
.course-card .special-button { background:#f0f6ff; color:#10284a; }
.course-card .special-label { color:#c6e2ff; }
.cleaning-card { background:radial-gradient(ellipse at 80% 5%,#ffc4e140,transparent 55%),linear-gradient(125deg,#88345f 0%,#b84e8c 55%,#e792bb 100%); border-color:#ffc8e6a8; color:white; box-shadow:0 16px 65px #e769ad26,0 1px 0 #ffdfed55 inset; }
.cleaning-card .service-copy,.cleaning-card .service-details { z-index:2; }
.cleaning-card h2 { color:#fff; text-shadow:0 2px 15px #49142f30; }
.cleaning-card p,.cleaning-card .special-label { color:#fff; }
.cleaning-card li { color:white; font-weight:600; border-color:#ffffff4d; text-shadow:0 1px 8px #49142f55; }
.cleaning-card .service-details { padding:20px; border:1px solid #ffe5f23d; border-radius:18px; background:#4e14394a; backdrop-filter:blur(8px); }
.cleaning-card .special-button { background:#fff4fa; color:#6e2450; }
.cleaning-broom { background:#ffffff20; border:1px solid #ffffff55; color:white; }
.flower-particles { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:1; }
.flower-particles::before,.flower-particles::after { content:none; }
.flower-particles span { position:absolute; bottom:-65px; color:#fff; font-size:var(--flower-size,30px); opacity:0; filter:drop-shadow(0 3px 8px #76205228); animation:flowers-rising var(--flower-time,12s) linear infinite; }
.flower-particles span:nth-child(1){left:5%;--flower-time:13s;animation-delay:-2s;--flower-size:30px}
.flower-particles span:nth-child(2){left:18%;--flower-time:16s;animation-delay:-9s;--flower-size:23px}
.flower-particles span:nth-child(3){left:31%;--flower-time:12s;animation-delay:-5s;--flower-size:38px}
.flower-particles span:nth-child(4){left:44%;--flower-time:18s;animation-delay:-14s;--flower-size:26px}
.flower-particles span:nth-child(5){left:57%;--flower-time:14s;animation-delay:-7s;--flower-size:32px}
.flower-particles span:nth-child(6){left:70%;--flower-time:17s;animation-delay:-4s;--flower-size:22px}
.flower-particles span:nth-child(7){left:81%;--flower-time:13s;animation-delay:-11s;--flower-size:36px}
.flower-particles span:nth-child(8){left:91%;--flower-time:15s;animation-delay:-1s;--flower-size:24px}
.chat-pulse { border-color:#ffffff66; }
.chat-window { border-color:#ffffff30; }
#cursor-dot { background:white; box-shadow:0 0 12px #ffffff77; }
#cursor-ring { border-color:#ffffffb3; background:#ffffff03; }
#cursor-dot,#cursor-ring { mix-blend-mode:difference; }
.cursor-hover #cursor-ring { background:#ffffff0c; border-color:#fff; }
.pointer-pressed #cursor-ring { border-color:#fff; background:#ffffff25; }
@keyframes flowers-rising { 0%{bottom:-65px;transform:translateX(0) rotate(0deg);opacity:0} 12%{opacity:.48} 80%{opacity:.38} 100%{bottom:105%;transform:translateX(24px) rotate(190deg);opacity:0} }
@keyframes map-drift { from{transform:translateY(0)} to{transform:translateY(22px)} }
@keyframes data-travel { to{stroke-dashoffset:-100} }
@keyframes halo-breathe { from{opacity:.4} to{opacity:1} }
@keyframes signal-pulse { 0%,100%{opacity:.2;transform:scale(.6)} 50%{opacity:.7;transform:scale(1)} }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .membership-card:hover,.service-special-card:hover { border-color:#ffffff80; }
 .premium-membership:hover { box-shadow:0 25px 80px #ffffff30; }
 .course-card:hover { box-shadow:0 25px 75px #337adc35; }
 .cleaning-card:hover { box-shadow:0 25px 75px #e87eb52e; }
}
@media (max-width:768px) {
 .page-atmosphere svg { width:180%; left:-65%; height:650px; opacity:.23; }
 .page-atmosphere { background-size:55px 55px; }
 .cleaning-card .service-details { padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
 .hero-title span { -webkit-text-fill-color:#dedfe3; }
 .flower-particles span { animation:none; opacity:.2; bottom:20%; }
 .course-card::before { display:none; }
}