/* =========================================================
   REMODELING BARUC JV
   FINAL ICE GAMING WEBSITE
========================================================= */

:root {
    --navy: #063b58;
    --navy-2: #0b506d;

    --blue: #078bc1;
    --cyan: #15acd9;

    --text: #214f65;
    --muted: #4c7285;

    --white: #ffffff;

    --line: rgba(25, 115, 155, 0.18);

    --section-bg: rgba(239, 251, 255, 0.88);
    --section-bg-strong: rgba(245, 253, 255, 0.94);

    /*
       EXACT ICE BACKGROUND
       Image is embedded inside the CSS.
       No background image file is required.
    */

    --ice-background:
    url("data:image/webp;base64,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");
}


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

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


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--navy);

    overflow-x: hidden;

    background: #d9f3ff;
}


body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -5;

    background-image:
        var(--ice-background);

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


body::after {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        rgba(197, 233, 250, 0.12);
}


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


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


button {
    font-family: inherit;
}


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

    margin-inline: auto;
}


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

.header {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;
    height: 76px;

    background:
        rgba(239, 251, 255, 0.94);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid rgba(15, 112, 157, 0.16);

    box-shadow:
        0 4px 22px rgba(0, 65, 105, 0.08);
}


.navbar {
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.brand {
    display: flex;

    align-items: center;

    gap: 12px;
}


.brand img {
    width: 50px;
    height: 50px;

    object-fit: cover;

    border-radius: 13px;

    border:
        2px solid white;

    box-shadow:
        0 8px 20px rgba(0, 75, 120, 0.20);
}


.brand-copy {
    display: flex;

    flex-direction: column;
}


.brand-copy span {
    color: #54798c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;
}


.brand-copy strong {
    margin-top: 4px;

    color: #077ca9;

    font-size: 18px;
}


.nav-menu {
    display: flex;

    align-items: center;

    gap: 28px;
}


.nav-menu a {
    color: #28576e;

    font-size: 13px;

    font-weight: 800;

    transition: 0.3s;
}


.nav-menu a:hover {
    color: var(--blue);
}


.privacy-nav {
    padding:
        10px 18px;

    border:
        1px solid rgba(0, 115, 165, 0.25);

    border-radius: 30px;

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


.menu-button {
    display: none;

    background: transparent;

    border: 0;

    cursor: pointer;
}


.menu-button span {
    display: block;

    width: 27px;
    height: 2px;

    margin: 6px;

    background: #077ca9;
}


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

.hero {
    min-height: 100vh;

    padding:
        135px 0 100px;

    display: flex;

    align-items: center;

    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(241, 252, 255, 0.90) 0%,
            rgba(237, 250, 255, 0.80) 42%,
            rgba(231, 247, 255, 0.42) 72%,
            rgba(225, 244, 255, 0.16) 100%
        );

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


.hero-layout {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 70px;

    align-items: center;
}


.hero-copy {
    position: relative;

    z-index: 3;
}


.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #08759e;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.eyebrow > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 12px var(--cyan);
}


.hero h1 {
    max-width: 650px;

    margin-top: 25px;

    color: #053d5c;

    font-size:
        clamp(58px, 7vw, 94px);

    line-height: 0.88;

    letter-spacing: -5px;

    font-weight: 900;
}


.hero h1 strong {
    display: block;

    margin-top: 12px;

    color: #058dc2;
}


.hero-description {
    max-width: 600px;

    margin-top: 28px;

    color: #234f65;

    font-size: 16px;

    line-height: 1.8;

    font-weight: 600;
}


.hero-actions {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 34px;
}


.primary-button {
    min-height: 52px;

    padding:
        0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

    border-radius: 30px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #10a9d9,
            #0874b1
        );

    box-shadow:
        0 14px 34px rgba(0, 91, 145, 0.25);

    font-size: 12px;

    font-weight: 900;

    transition: 0.3s;
}


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


.text-link {
    padding-bottom: 4px;

    color: #075c7c;

    border-bottom:
        2px solid rgba(0, 105, 150, 0.35);

    font-size: 13px;

    font-weight: 900;
}


.hero-stats {
    display: flex;

    gap: 38px;

    margin-top: 45px;
}


.hero-stats div {
    display: flex;

    flex-direction: column;
}


.hero-stats strong {
    color: #067ca8;

    font-size: 20px;
}


.hero-stats span {
    margin-top: 4px;

    color: #436b7e;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


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

.hero-art {
    min-height: 520px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


.game-logo {
    position: relative;

    z-index: 4;

    width: 350px;
    height: 350px;

    overflow: hidden;

    border-radius: 72px;

    border:
        7px solid rgba(255,255,255,0.95);

    box-shadow:
        0 30px 70px rgba(0, 70, 115, 0.32),
        0 0 55px rgba(39, 188, 232, 0.30);

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


.game-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

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


.logo-shine {
    position: absolute;

    z-index: 5;

    top: -20%;
    left: -130px;

    width: 75px;
    height: 150%;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.70),
            transparent
        );

    animation:
        logoShine 5s infinite;
}


@keyframes logoShine {
    45%,
    100% {
        left: 130%;
    }
}


.orbit {
    position: absolute;

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

    border-radius: 50%;
}


.orbit-one {
    width: 430px;
    height: 430px;

    animation:
        orbitSpin 23s linear infinite;
}


.orbit-two {
    width: 500px;
    height: 500px;

    border-style: dashed;

    animation:
        orbitSpin 31s linear infinite reverse;
}


@keyframes orbitSpin {
    to {
        transform:
            rotate(360deg);
    }
}


.floating-pill {
    position: absolute;

    z-index: 6;

    padding:
        11px 16px;

    border:
        1px solid rgba(0, 100, 145, 0.15);

    border-radius: 30px;

    background:
        rgba(250, 254, 255, 0.95);

    color: #115873;

    box-shadow:
        0 12px 28px rgba(0, 75, 115, 0.16);

    font-size: 11px;

    font-weight: 900;

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


.pill-water {
    left: -5px;
    top: 30%;
}


.pill-level {
    right: -10px;
    top: 48%;

    animation-delay: -1s;
}


.pill-tool {
    left: 8%;
    bottom: 15%;

    animation-delay: -2s;
}


@keyframes pillFloat {
    50% {
        transform:
            translateY(-8px);
    }
}


/* =========================================================
   COMMON TYPOGRAPHY
========================================================= */

.section-label {
    color: #057aa5;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 4px;
}


.game-copy h2,
.steps-heading h2,
.section-heading h2,
.tools-copy h2,
.how-copy h2,
.privacy-heading h2,
.support-copy h2 {
    margin-top: 14px;

    color: #063d59;

    font-size:
        clamp(42px, 5vw, 66px);

    line-height: 0.95;

    letter-spacing: -2px;
}


.game-copy h2 strong,
.steps-heading h2 strong,
.section-heading h2 strong,
.tools-copy h2 strong,
.how-copy h2 strong,
.privacy-heading h2 strong,
.support-copy h2 strong {
    color: #058dc2;
}


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

.game-section {
    padding:
        120px 0;

    background:
        rgba(240, 251, 255, 0.90);

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

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


.game-layout {
    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 80px;

    align-items: center;
}


.game-copy p {
    max-width: 500px;

    margin-top: 20px;

    color: #315d72;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 600;
}


.game-highlights {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 30px;
}


.game-highlights span {
    color: #075c7b;

    font-size: 13px;

    font-weight: 800;
}


/* PIPE SCENE */

.pipe-scene {
    min-height: 500px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(220, 247, 255, 0.91),
            rgba(183, 229, 246, 0.88)
        );

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

    border-radius: 38px 8px 38px 8px;

    box-shadow:
        0 25px 65px rgba(0, 79, 120, 0.12);
}


.grid-lines {
    position: absolute;

    inset: 0;

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

    background-size:
        55px 55px;
}


.water-start,
.water-finish {
    position: absolute;

    z-index: 4;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    box-shadow:
        0 12px 28px rgba(0, 80, 124, 0.16);
}


.water-start {
    left: 4%;
    top: 24%;
}


.water-finish {
    right: 4%;
    bottom: 19%;

    color: #0786b7;

    font-weight: 900;
}


.demo-pipe {
    position: absolute;

    height: 38px;

    border:
        2px solid #0b91c0;

    border-radius: 8px;

    background:
        linear-gradient(
            #ecffff,
            #58dcf4,
            #0795c6,
            #c4faff
        );

    box-shadow:
        0 0 25px rgba(0, 123, 171, 0.30);
}


.pipe-one {
    width: 33%;

    left: 13%;
    top: 29%;
}


.pipe-two {
    width: 31%;

    right: 8%;
    top: 54%;
}


.pipe-three {
    width: 33%;

    left: 24%;
    bottom: 22%;
}


.demo-turn {
    position: absolute;

    width: 125px;
    height: 125px;

    border:
        35px solid #20b2da;

    box-shadow:
        0 0 24px rgba(0, 126, 177, 0.28);
}


.turn-one {
    left: 39%;
    top: 29%;

    border-left-color: transparent;
    border-bottom-color: transparent;

    border-radius:
        0 100% 0 0;
}


.turn-two {
    right: 32%;
    bottom: 22%;

    border-right-color: transparent;
    border-top-color: transparent;

    border-radius:
        0 0 0 100%;
}


.flow-status {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 15px;

    border-radius: 30px;

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

    color: #087ca7;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.flow-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #10b9e5;

    box-shadow:
        0 0 10px #10b9e5;
}


/* =========================================================
   THREE STEPS
   ONE CONTINUOUS SECTION - NO BOXY CARDS
========================================================= */

.steps-section {
    padding:
        115px 0;

    background:
        rgba(232, 248, 255, 0.91);
}


.steps-heading {
    max-width: 760px;

    margin-bottom: 65px;
}


.steps-heading p {
    max-width: 650px;

    margin-top: 20px;

    color: #3a6579;

    font-size: 15px;

    line-height: 1.75;

    font-weight: 600;
}


.steps-layout {
    display: grid;

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

    border-top:
        1px solid rgba(20, 107, 148, 0.20);

    border-bottom:
        1px solid rgba(20, 107, 148, 0.20);
}


.flow-step {
    position: relative;

    padding:
        42px 38px 45px;

    background: transparent;
}


.flow-step + .flow-step {
    border-left:
        1px solid rgba(20, 107, 148, 0.18);
}


.step-number {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    margin-bottom: 26px;

    border-radius: 50%;

    background:
        #ffffff;

    color: #087dac;

    box-shadow:
        0 9px 24px rgba(0, 83, 125, 0.10);

    font-size: 10px;

    font-weight: 900;
}


.flow-step small {
    color: #087ba7;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 3px;
}


.flow-step h3 {
    margin-top: 9px;

    color: #074762;

    font-size: 22px;
}


.flow-step p {
    margin-top: 11px;

    color: #365f72;

    font-size: 14px;

    line-height: 1.75;

    font-weight: 600;
}


.flow-step ul {
    margin-top: 20px;

    padding: 0;

    list-style: none;
}


.flow-step li {
    position: relative;

    margin-top: 10px;

    padding-left: 22px;

    color: #416b7e;

    font-size: 13px;

    font-weight: 700;
}


.flow-step li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #078ab9;

    font-weight: 900;
}


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

.features-section {
    padding:
        120px 0;

    background:
        rgba(244, 252, 255, 0.93);
}


.section-heading {
    max-width: 780px;

    margin-bottom: 60px;
}


.section-heading p {
    max-width: 650px;

    margin-top: 18px;

    color: #3d677a;

    line-height: 1.75;

    font-weight: 600;
}


.feature-list {
    display: grid;

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

    column-gap: 70px;
}


.feature-item {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 22px;

    padding:
        30px 0;

    border-bottom:
        1px solid rgba(14, 104, 145, 0.17);
}


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

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #e4f8ff;

    font-size: 28px;
}


.feature-item small {
    color: #0780ac;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 3px;
}


.feature-item h3 {
    margin-top: 7px;

    color: #084b67;

    font-size: 21px;
}


.feature-item p {
    margin-top: 8px;

    color: #3e687a;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 600;
}


/* =========================================================
   TOOLS
========================================================= */

.tools-section {
    padding:
        120px 0;

    background:
        rgba(227, 247, 255, 0.92);
}


.tools-layout {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 90px;

    align-items: start;
}


.tools-copy {
    position: sticky;

    top: 125px;
}


.tools-copy p {
    max-width: 490px;

    margin-top: 22px;

    color: #386277;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 600;
}


.tools-list {
    border-top:
        1px solid rgba(14, 104, 145, 0.20);
}


.tool-row {
    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 24px;

    padding:
        35px 0;

    border-bottom:
        1px solid rgba(14, 104, 145, 0.20);
}


.tool-icon {
    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #ffffff;

    box-shadow:
        0 10px 25px rgba(0, 75, 115, 0.10);

    font-size: 27px;
}


.tool-row small {
    color: #087eaa;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 3px;
}


.tool-row h3 {
    margin-top: 8px;

    color: #074a66;

    font-size: 21px;
}


.tool-row p {
    margin-top: 8px;

    color: #406a7d;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 600;
}


/* =========================================================
   HOW TO PLAY
========================================================= */

.how-section {
    padding:
        120px 0;

    background:
        rgba(243, 252, 255, 0.93);
}


.how-layout {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 95px;

    align-items: center;
}


.how-art {
    min-height: 450px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


.how-art img {
    position: relative;

    z-index: 3;

    width: 330px;
    height: 330px;

    object-fit: cover;

    border:
        6px solid white;

    border-radius: 65px;

    box-shadow:
        0 28px 65px rgba(0, 70, 115, 0.25);
}


.how-orbit {
    position: absolute;

    width: 410px;
    height: 410px;

    border:
        1px solid rgba(8, 120, 168, 0.20);

    border-radius: 50%;

    animation:
        orbitSpin 28s linear infinite;
}


.how-copy h2 strong {
    display: block;
}


.how-intro {
    max-width: 600px;

    margin-top: 20px;

    color: #345f73;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 600;
}


.instruction {
    display: flex;

    gap: 20px;

    margin-top: 25px;

    padding:
        0 0 23px;

    border-bottom:
        1px solid rgba(13, 103, 145, 0.18);
}


.instruction > span {
    color: #0788b7;

    font-size: 16px;

    font-weight: 900;
}


.instruction h3 {
    color: #063f5a;

    font-size: 18px;

    font-weight: 900;
}


.instruction p {
    margin-top: 7px;

    color: #315e72;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 600;
}


/* =========================================================
   PRIVACY
========================================================= */

.privacy-section {
    padding:
        120px 0;

    background:
        rgba(228, 248, 255, 0.93);
}


.privacy-heading {
    max-width: 800px;

    margin-bottom: 55px;
}


.privacy-points {
    display: grid;

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

    border-top:
        1px solid rgba(14, 104, 145, 0.19);

    border-bottom:
        1px solid rgba(14, 104, 145, 0.19);
}


.privacy-point {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 18px;

    padding:
        35px 28px;
}


.privacy-point + .privacy-point {
    border-left:
        1px solid rgba(14, 104, 145, 0.18);
}


.privacy-point > span {
    font-size: 28px;
}


.privacy-point h3 {
    color: #074b67;

    font-size: 18px;
}


.privacy-point p {
    margin-top: 8px;

    color: #3b6578;

    font-size: 13px;

    line-height: 1.7;

    font-weight: 600;
}


.privacy-action {
    margin-top: 50px;

    padding-top: 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-top:
        1px solid rgba(14, 104, 145, 0.18);
}


.privacy-action > div > span {
    color: #0780aa;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 3px;
}


.privacy-action h3 {
    margin-top: 8px;

    color: #074966;

    font-size: 24px;
}


/* =========================================================
   SUPPORT
========================================================= */

.support-section {
    padding:
        120px 0;

    background:
        rgba(243, 252, 255, 0.94);
}


.support-copy {
    max-width: 800px;

    margin: auto;

    text-align: center;
}


.support-copy h2 strong {
    display: block;
}


.support-copy p {
    margin-top: 20px;

    color: #355f74;

    font-size: 14px;

    line-height: 1.75;

    font-weight: 600;
}


.support-email {
    display: inline-block;

    margin-top: 28px;

    padding-bottom: 5px;

    color: #057dab;

    border-bottom:
        2px solid rgba(0, 105, 150, 0.34);

    font-size: 14px;

    font-weight: 900;
}


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

footer {
    padding:
        45px 0 25px;

    background:
        rgba(232, 249, 255, 0.96);

    border-top:
        1px solid rgba(15, 112, 157, 0.15);
}


.footer-main {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.footer-brand {
    display: flex;

    align-items: center;

    gap: 13px;
}


.footer-brand img {
    width: 55px;
    height: 55px;

    object-fit: cover;

    border-radius: 14px;
}


.footer-brand strong {
    display: block;

    color: #074b68;

    font-size: 13px;
}


.footer-brand span {
    display: block;

    margin-top: 5px;

    color: #577a8b;

    font-size: 10px;
}


.footer-links {
    display: flex;

    flex-wrap: wrap;

    gap: 23px;
}


.footer-links a {
    color: #3d667a;

    font-size: 11px;

    font-weight: 700;
}


.footer-bottom {
    margin-top: 30px;

    padding-top: 18px;

    color: #537789;

    border-top:
        1px solid rgba(14, 104, 145, 0.12);

    font-size: 10px;
}


/* =========================================================
   SNOW
========================================================= */

.snow-layer {
    position: fixed;

    inset: 0;

    z-index: 30;

    overflow: hidden;

    pointer-events: none;
}


.snow-dot {
    position: absolute;

    top: -20px;

    border-radius: 50%;

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

    box-shadow:
        0 0 8px white;

    animation:
        snowFall linear infinite;
}


@keyframes snowFall {
    from {
        transform:
            translateY(-20px);

        opacity: 0;
    }

    10% {
        opacity: 0.55;
    }

    to {
        transform:
            translateY(110vh)
            translateX(20px);

        opacity: 0;
    }
}


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

.reveal {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}


.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1000px) {

    .menu-button {
        display: block;
    }


    .nav-menu {
        position: absolute;

        top: 76px;
        left: 20px;
        right: 20px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

        padding: 22px;

        border-radius: 18px;

        background:
            rgba(241, 252, 255, 0.98);

        box-shadow:
            0 20px 45px rgba(0, 70, 110, 0.16);
    }


    .nav-menu.active {
        display: flex;
    }


    .nav-menu a {
        padding: 9px;
    }


    .privacy-nav {
        text-align: center;
    }


    .hero-layout,
    .game-layout,
    .tools-layout,
    .how-layout {
        grid-template-columns: 1fr;
    }


    .hero-layout {
        text-align: center;
    }


    .hero-copy {
        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .hero-stats {
        justify-content: center;
    }


    .hero-art {
        min-height: 470px;
    }


    .game-copy {
        text-align: center;
    }


    .game-copy p {
        margin-inline: auto;
    }


    .game-highlights {
        align-items: center;
    }


    .steps-layout {
        grid-template-columns: 1fr;
    }


    .flow-step + .flow-step {
        border-left: 0;

        border-top:
            1px solid rgba(14, 104, 145, 0.18);
    }


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


    .tools-copy {
        position: static;

        text-align: center;
    }


    .tools-copy p {
        margin-inline: auto;
    }


    .how-copy {
        text-align: center;
    }


    .instruction {
        max-width: 620px;

        margin:
            25px auto 0;

        text-align: left;
    }


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


    .privacy-point + .privacy-point {
        border-left: 0;

        border-top:
            1px solid rgba(14, 104, 145, 0.18);
    }

}


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

@media (max-width: 650px) {

    body::before {
        background-position:
            center top;
    }


    .container {
        width:
            min(100% - 28px, 1180px);
    }


    .header {
        height: 70px;
    }


    .brand img {
        width: 43px;
        height: 43px;
    }


    .brand-copy span {
        font-size: 7px;
    }


    .brand-copy strong {
        font-size: 14px;
    }


    .nav-menu {
        top: 70px;

        left: 14px;
        right: 14px;
    }


    .hero {
        min-height: auto;

        padding:
            110px 0 85px;
    }


    .hero h1 {
        font-size:
            clamp(49px, 16vw, 70px);

        letter-spacing: -3px;
    }


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


    .hero-actions {
        width: 100%;

        flex-direction: column;

        gap: 17px;
    }


    .primary-button {
        width: 100%;
    }


    .hero-stats {
        width: 100%;

        justify-content: space-between;

        gap: 10px;
    }


    .hero-stats strong {
        font-size: 17px;
    }


    .hero-art {
        min-height: 370px;
    }


    .game-logo {
        width: 240px;
        height: 240px;

        border-radius: 47px;
    }


    .orbit-one {
        width: 290px;
        height: 290px;
    }


    .orbit-two {
        width: 330px;
        height: 330px;
    }


    .floating-pill {
        padding:
            8px 10px;

        font-size: 8px;
    }


    .game-section,
    .steps-section,
    .features-section,
    .tools-section,
    .how-section,
    .privacy-section,
    .support-section {
        padding:
            82px 0;
    }


    .game-copy h2,
    .steps-heading h2,
    .section-heading h2,
    .tools-copy h2,
    .how-copy h2,
    .privacy-heading h2,
    .support-copy h2 {
        font-size: 39px;
    }


    .pipe-scene {
        min-height: 360px;

        border-radius:
            25px 6px 25px 6px;
    }


    .demo-pipe {
        height: 27px;
    }


    .demo-turn {
        width: 88px;
        height: 88px;

        border-width: 26px;
    }


    .flow-step {
        padding:
            32px 5px;
    }


    .feature-item {
        padding:
            25px 0;
    }


    .tool-row {
        grid-template-columns:
            55px 1fr;

        gap: 15px;
    }


    .tool-icon {
        width: 50px;
        height: 50px;

        font-size: 23px;
    }


    .how-art {
        min-height: 330px;
    }


    .how-art img {
        width: 245px;
        height: 245px;

        border-radius: 48px;
    }


    .how-orbit {
        width: 300px;
        height: 300px;
    }


    .privacy-action {
        flex-direction: column;

        align-items: flex-start;
    }


    .privacy-action .primary-button {
        width: 100%;
    }


    .footer-main {
        flex-direction: column;

        align-items: flex-start;
    }


    .footer-links {
        gap: 15px 20px;
    }

}
/* =========================================================
   FINAL UI ADJUSTMENT
   1. Remove How To Play side logo
   2. Slightly increase section transparency
========================================================= */


/* =========================================
   REMOVE "SIMPLE CONTROLS SMART PUZZLES"
   LEFT SIDE LOGO COMPLETELY
========================================= */

.how-art {
    display: none !important;
}


/* How To Play ko full width karo */

.how-layout {
    grid-template-columns: 1fr !important;
    max-width: 900px;
    margin-inline: auto;
}


.how-copy {
    width: 100%;
    max-width: 850px;
    margin-inline: auto;
    text-align: left;
}


/* Instructions ko clean wide layout */

.instruction {
    max-width: 100% !important;
}


/* =========================================
   SLIGHTLY MORE TRANSPARENT SECTIONS

   Existing CSS values change nahi ki gayi.
   Ye sirf final overrides hain.
========================================= */

.game-section {
    background:
        rgba(240, 251, 255, 0.84) !important;
}


.steps-section {
    background:
        rgba(232, 248, 255, 0.84) !important;
}


.features-section {
    background:
        rgba(244, 252, 255, 0.86) !important;
}


.tools-section {
    background:
        rgba(227, 247, 255, 0.84) !important;
}


.how-section {
    background:
        rgba(243, 252, 255, 0.86) !important;
}


.privacy-section {
    background:
        rgba(228, 248, 255, 0.85) !important;
}


.support-section {
    background:
        rgba(243, 252, 255, 0.87) !important;
}


/* Hero mein bhi glacier thora zyada visible */

.hero {
    background:
        linear-gradient(
            90deg,
            rgba(241, 252, 255, 0.84) 0%,
            rgba(237, 250, 255, 0.73) 42%,
            rgba(231, 247, 255, 0.34) 72%,
            rgba(225, 244, 255, 0.10) 100%
        ) !important;
}


/* Header slightly transparent */

.header {
    background:
        rgba(239, 251, 255, 0.89) !important;
}


/* Footer slightly transparent */

footer {
    background:
        rgba(232, 249, 255, 0.90) !important;
}


/* Keep text strong after transparency change */

.game-copy p,
.steps-heading p,
.flow-step p,
.section-heading p,
.feature-item p,
.tools-copy p,
.tool-row p,
.how-intro,
.instruction p,
.privacy-point p,
.support-copy p {
    color: #28576e !important;
}


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

@media (max-width: 650px) {

    .how-layout {
        display: block !important;
    }


    .how-copy {
        width: 100%;
        text-align: left;
    }


    .how-copy h2 {
        font-size: 39px;
    }

}
/* =========================================================
   HOME HERO FINAL DESKTOP FIX
   Full hero in one screen + logo centered
========================================================= */

@media (min-width: 1001px) {

    /* Full home section exactly one screen */
    .hero {
        height: 100vh !important;
        min-height: 650px !important;

        padding:
            92px 0 22px !important;

        display: flex !important;
        align-items: center !important;

        overflow: hidden !important;
    }


    /* Main hero content vertically centered */
    .hero-layout {
        height: 100% !important;

        display: grid !important;

        grid-template-columns:
            1.05fr 0.95fr !important;

        align-items: center !important;

        gap: 55px !important;
    }


    /* LEFT SIDE */
    .hero-copy {
        align-self: center !important;

        transform:
            translateY(-5px);
    }


    /* Heading slightly smaller so everything fits */
    .hero h1 {
        font-size:
            clamp(64px, 6.2vw, 84px) !important;

        line-height: 0.88 !important;

        margin-top: 20px !important;
    }


    .hero h1 strong {
        margin-top: 8px !important;
    }


    .hero-description {
        margin-top: 20px !important;

        line-height: 1.7 !important;
    }


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


    .hero-stats {
        margin-top: 25px !important;
    }


    /* =========================================
       RIGHT LOGO — PERFECT CENTER
    ========================================== */

    .hero-art {
        min-height: 0 !important;
        height: 100% !important;

        display: flex !important;

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

        align-self: center !important;

        transform:
            translateY(-5px);
    }


    /* Main game logo */
    .game-logo {
        width: 320px !important;
        height: 320px !important;

        border-radius: 64px !important;
    }


    /* Orbits centered with logo */
    .orbit-one {
        width: 400px !important;
        height: 400px !important;

        top: 50% !important;
        left: 50% !important;

        margin: 0 !important;

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


    .orbit-two {
        width: 470px !important;
        height: 470px !important;

        top: 50% !important;
        left: 50% !important;

        margin: 0 !important;

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


    /* Floating labels centered around logo */

    .pill-water {
        left: 1% !important;
        top: 41% !important;
    }


    .pill-level {
        right: -1% !important;
        top: 52% !important;
    }


    .pill-tool {
        left: 11% !important;
        bottom: 18% !important;
    }

}