* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
}

:root {
    --font: "Jersey 10", sans-serif;
    --body: "Inter", sans-serif;
    --cyan: #59edff;
    --gold: #ffd45a;
    --purple: #b665ff;
    --ink: #070b10;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: #effbff;
    background: #071019;
    font-family: var(--body);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background:
        linear-gradient(90deg, #ffffff11 1px, transparent 1px),
        linear-gradient(#ffffff11 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.08;
}

#particles {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.nav {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    height: 76px;
    padding: 0 max(24px, 5vw);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(#27343f, #121a22);
    border-bottom: 5px solid #05080b;
    box-shadow: inset 0 -3px #445563, 0 6px #0008;
}

.brand {
    font: 42px/1 var(--font);
    letter-spacing: 1px;
    color: white;
    text-decoration: none;
    text-shadow: 3px 3px #05080c;
}

.brand span {
    color: var(--cyan);
}

.brand .brand-shell {
    display: inline-block;
    color: #8af4ff;
    animation: shell-pulse 2.4s steps(5) infinite;
}

.nav nav {
    display: flex;
    gap: 30px;
}

.nav nav a,
footer a {
    color: #c2d0d9;
    font: 24px var(--font);
    text-decoration: none;
    text-shadow: 2px 2px #000;
    transition: 0.2s;
}

.nav nav a:hover,
footer a:hover {
    color: var(--cyan);
    transform: translateY(-2px);
}

.menu-button {
    display: none;
    color: white;
    background: none;
    border: 0;
    font-size: 26px;
}

main,
footer {
    position: relative;
    z-index: 2;
}

section {
    position: relative;
    padding: 110px max(22px, 5vw);
    border-top: 7px solid #05090d;
    background-color: #0c151e;
    background-image:
        linear-gradient(135deg, #ffffff06 25%, transparent 25%),
        linear-gradient(225deg, #ffffff04 25%, transparent 25%),
        linear-gradient(45deg, #0003 25%, transparent 25%),
        linear-gradient(315deg, #0003 25%, #0c151e 25%);
    background-size: 32px 32px;
}

.hero {
    height: 100vh;
    min-height: 720px;
    display: grid;
    place-items: center;
    overflow: hidden;
    text-align: center;
    border: 0;
    background-color: #071b31;
    background-image:
        linear-gradient(#06182aaa, #03101eef),
        linear-gradient(135deg, #143a5e 25%, transparent 25%),
        linear-gradient(225deg, #102f4f 25%, transparent 25%);
    background-size: auto, 64px 64px, 64px 64px;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 175px;
    background: linear-gradient(
        #11617e 0 25%,
        #0b4969 25% 50%,
        #07354f 50% 75%,
        #05253a 75%
    );
    clip-path: polygon(
        0 20%, 6% 10%, 12% 23%, 18% 11%, 25% 25%, 33% 12%,
        41% 28%, 49% 10%, 57% 23%, 65% 13%, 73% 27%, 81% 10%,
        90% 22%, 100% 13%, 100% 100%, 0 100%
    );
    animation: water 6s steps(6) infinite;
}

.hero-content {
    position: relative;
    z-index: 4;
    max-width: 1050px;
}

.season {
    display: inline-block;
    padding: 9px 16px;
    color: #bff8ff;
    background: #142532;
    border: 4px solid #070b10;
    box-shadow: inset 3px 3px #526675, inset -3px -3px #080d12, 5px 5px #0008;
    font: 24px var(--font);
}

.hero h1 {
    margin: 35px 0 20px;
    color: #f7feff;
    font: clamp(82px, 13vw, 170px) / 0.67 var(--font);
    letter-spacing: 2px;
    text-shadow: 6px 6px #09141d, 9px 9px #0008, 0 0 28px #52ddff;
}

.hero h1 span {
    display: block;
    margin-top: 30px;
    color: transparent;
    background: linear-gradient(180deg, #fff9c6 0 22%, #ffd157 23% 50%, #b57420 51% 75%, #71410f 76%);
    background-clip: text;
    filter: drop-shadow(0 0 15px #ffd45a66);
}

.hero p {
    max-width: 900px;
    margin: 0 auto 32px;
    color: #d7e5eb;
    font: 30px/1.25 var(--font);
    text-shadow: 3px 3px #000;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.pixel-button,
button {
    display: inline-block;
    padding: 14px 24px;
    color: white;
    background: linear-gradient(#258cd1, #11639e);
    border: 4px solid #070a0d;
    border-radius: 0;
    box-shadow: inset 3px 3px #ffffff55, inset -3px -3px #0008, 5px 5px #0009;
    font: 24px var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: 0.15s;
}

.pixel-button:hover,
button:hover {
    transform: translate(2px, 2px);
    filter: brightness(1.15);
    box-shadow: inset 3px 3px #ffffff55, inset -3px -3px #0008, 2px 2px #0009;
}

.gold {
    color: #191102;
    background: linear-gradient(#ffe582, #d89b20);
}

.stone {
    background: linear-gradient(#596b78, #303e49);
}

.pixel-moon {
    position: absolute;
    top: 12%;
    left: 50%;
    width: 256px;
    height: 256px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(0deg, #9ceeff 0 16px, #71cde4 16px 32px);
    clip-path: polygon(16% 0, 84% 0, 84% 8%, 92% 8%, 92% 16%, 100% 16%, 100% 84%, 92% 84%, 92% 92%, 84% 92%, 84% 100%, 16% 100%, 16% 92%, 8% 92%, 8% 84%, 0 84%, 0 16%, 8% 16%, 8% 8%, 16% 8%);
    opacity: 0.12;
}

.cloud {
    position: absolute;
    width: 96px;
    height: 24px;
    background: #d9f6ff1c;
    box-shadow: 24px 0 #d9f6ff1c, 48px 0 #d9f6ff1c, 24px -24px #d9f6ff1c;
}

.c1 {
    top: 23%;
    left: 8%;
    animation: cloud 18s linear infinite;
}

.c2 {
    top: 33%;
    right: 12%;
    transform: scale(1.5);
    animation: cloud 26s linear infinite reverse;
}

.island {
    position: absolute;
    bottom: 18%;
    width: 170px;
    height: 72px;
    background: repeating-linear-gradient(90deg, #3d6841 0 32px, #2f5535 32px 64px);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 82% 45%, 82% 68%, 64% 68%, 64% 100%, 32% 100%, 32% 75%, 16% 75%, 16% 48%, 0 48%);
    opacity: 0.37;
}

.island-left { left: 3%; }
.island-right { right: 2%; transform: scale(0.75); }

.island i {
    position: absolute;
    left: 38px;
    bottom: 62px;
    width: 22px;
    height: 85px;
    background: #523926;
    box-shadow: 52px 0 #523926;
}

.island i::after {
    content: "";
    position: absolute;
    top: -24px;
    left: -25px;
    width: 75px;
    height: 30px;
    background: #173b27;
    box-shadow: 25px -23px #215036;
}

.pixel-ship {
    position: absolute;
    z-index: 3;
    bottom: 21%;
    left: 8%;
    width: 190px;
    height: 150px;
    opacity: 0.55;
    animation: boat 4s steps(4) infinite;
}

.pixel-ship i {
    position: absolute;
    display: block;
}

.pixel-ship .mast {
    left: 95px;
    bottom: 22px;
    width: 8px;
    height: 124px;
    background: #6f4a2d;
}

.pixel-ship .sail {
    top: 15px;
    left: 103px;
    width: 78px;
    height: 92px;
    background: #d2eaf0aa;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 78%, 80% 78%, 80% 50%, 62% 50%, 62% 25%, 35% 25%, 35% 0);
}

.pixel-ship .hull {
    bottom: 0;
    left: 5px;
    width: 180px;
    height: 32px;
    background: #42291d;
    clip-path: polygon(0 0, 100% 0, 88% 75%, 72% 75%, 72% 100%, 28% 100%, 28% 75%, 12% 75%);
}

.section-header {
    max-width: 900px;
    margin: 0 auto 58px;
    text-align: center;
}

.section-header span {
    color: var(--cyan);
    font: 22px var(--font);
    letter-spacing: 2px;
    text-shadow: 2px 2px #000;
}

.section-header h2 {
    display: inline-block;
    position: relative;
    margin: 8px 0 10px;
    color: transparent;
    background: linear-gradient(90deg, #69efff, #fff, #ffd65d, #b56cff, #69efff);
    background-size: 300% 100%;
    background-clip: text;
    font: clamp(58px, 8vw, 92px) / 1 var(--font);
    letter-spacing: 1px;
    filter: drop-shadow(4px 4px #02070b);
    animation: header-color 6s linear infinite;
}

.section-header h2::after {
    content: "";
    display: block;
    height: 6px;
    margin: 8px 12% 0;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--gold), var(--purple), transparent);
    background-size: 200%;
    animation: header-color 4s linear infinite;
}

.section-header p {
    margin: 0;
    color: #b3c4ce;
    font: 27px/1.25 var(--font);
}

.deepslate {
    background-color: #10151b;
    background-image:
        linear-gradient(135deg, #222a32 25%, transparent 25%),
        linear-gradient(225deg, #1d252d 25%, transparent 25%),
        linear-gradient(45deg, #06090d 25%, transparent 25%),
        linear-gradient(315deg, #090d12 25%, #151c23 25%);
    background-size: 48px 48px;
}

.currency-panel,
.store-card,
.rank,
.booster-card,
.feature,
.empty-leaderboard {
    border: 6px solid #070b10;
    background-color: #1d2832;
    background-image:
        linear-gradient(135deg, #ffffff08 25%, transparent 25%),
        linear-gradient(315deg, #0003 25%, #1d2832 25%);
    background-size: 28px 28px;
    box-shadow: inset 4px 4px #596c7b, inset -4px -4px #090e13, 9px 9px #0008;
}

.currency-panel {
    max-width: 920px;
    margin: 0 auto 48px;
    padding: 32px;
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 35px;
}

.currency-copy h3 {
    margin: 0 0 8px;
    color: #e9fcff;
    font: 42px var(--font);
}

.currency-copy code {
    display: inline-block;
    padding: 7px 10px;
    color: #74efff;
    background: #070c11;
    border: 3px solid #394956;
    font: 17px monospace;
}

.currency-copy p {
    color: #afc0ca;
    font-size: 16px;
    line-height: 1.65;
}

.inventory-slot {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #141a20;
    border: 5px solid #090d11;
    box-shadow: inset 4px 4px #05080b, inset -4px -4px #51606b;
}

.inventory-slot-large {
    width: 128px;
    height: 128px;
}

.inventory-slot b {
    position: absolute;
    right: 6px;
    bottom: 3px;
    z-index: 2;
    color: white;
    font: 25px var(--font);
    text-shadow: 3px 3px #000;
}

.item-image,
.booster-image-frame img,
.rank-price img {
    display: block;
    object-fit: contain;
    object-position: center;
    image-rendering: pixelated;
}

.item-image {
    width: 76%;
    height: 76%;
    filter: drop-shadow(0 0 9px #62efff) drop-shadow(4px 4px #0008);
}

.inventory-slot-large .item-image {
    width: 82%;
    height: 82%;
}

.store-grid {
    max-width: 1450px;
    margin: auto;
    display: grid;
    gap: 24px;
}

.shell-grid {
    grid-template-columns: repeat(5, 1fr);
}

.store-card {
    position: relative;
    padding: 28px 18px;
    text-align: center;
    transition: 0.18s;
}

.store-card:hover,
.rank:hover,
.booster-card:hover,
.feature:hover {
    transform: translate(-3px, -7px);
    box-shadow: inset 4px 4px #718795, inset -4px -4px #090e13, 13px 16px #0009;
}

.store-card h3 {
    min-height: 62px;
    margin: 20px 0 4px;
    font: 31px/1 var(--font);
}

.store-card .price {
    margin: 10px 0 17px;
    color: #fff3b0;
    font: 48px var(--font);
    text-shadow: 3px 3px #4e3410;
}

.store-card button,
.rank button,
.booster-card button {
    width: 100%;
}

.tag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    padding: 6px 8px;
    color: white;
    background: #8d5bd2;
    border: 3px solid #080b0e;
    box-shadow: inset 2px 2px #fff7, inset -2px -2px #0007;
    font: 18px var(--font);
}

.popular {
    outline: 5px solid #8656c9;
    outline-offset: 4px;
}

.rank-grid {
    max-width: 1240px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 26px;
}

.rank {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 570px;
    padding: 34px 25px 27px;
    overflow: hidden;
    text-align: center;
    transition: 0.18s;
}

.rank > * {
    position: relative;
    z-index: 3;
}

.pixel-rank-icon {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 10px currentColor) drop-shadow(4px 4px #0008);
}

.pixel-anchor {
    color: #7beaff;
    background:
        linear-gradient(#7beaff, #2b93c1) center 0 / 12px 52px no-repeat,
        linear-gradient(#7beaff, #2b93c1) center 14px / 36px 10px no-repeat,
        linear-gradient(#7beaff, #2b93c1) center 42px / 62px 12px no-repeat;
    clip-path: polygon(42% 0, 58% 0, 58% 18%, 72% 18%, 72% 31%, 58% 31%, 58% 58%, 83% 58%, 83% 45%, 100% 60%, 100% 78%, 82% 78%, 82% 88%, 62% 100%, 38% 100%, 18% 88%, 18% 78%, 0 78%, 0 60%, 17% 45%, 17% 58%, 42% 58%);
}

.pixel-skull {
    color: #ffb04d;
    background: linear-gradient(#ffe7b0, #c98e46);
    clip-path: polygon(20% 0, 80% 0, 80% 10%, 92% 10%, 92% 24%, 100% 24%, 100% 64%, 88% 64%, 88% 78%, 66% 78%, 66% 100%, 52% 100%, 52% 82%, 44% 82%, 44% 100%, 30% 100%, 30% 78%, 12% 78%, 12% 64%, 0 64%, 0 24%, 8% 24%, 8% 10%, 20% 10%);
}

.pixel-skull::before,
.pixel-skull::after {
    content: "";
    position: absolute;
    top: 29px;
    width: 15px;
    height: 17px;
    background: #371512;
}

.pixel-skull::before { left: 15px; }
.pixel-skull::after { right: 15px; }

.rank-image {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 10px #b879ff) drop-shadow(4px 4px #0008);
}

.tier {
    margin-top: 12px;
    color: #b6c6cf;
    font: 20px var(--font);
    letter-spacing: 2px;
}

.rank h3 {
    margin: 8px 0 12px;
    font: clamp(46px, 5vw, 70px) / 0.9 var(--font);
    overflow-wrap: anywhere;
}

.rank-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #c8f7ff;
    font: 26px var(--font);
}

.rank-price img {
    width: 28px;
    height: 28px;
}

.rank ul {
    flex: 1;
    margin: 22px 0;
    padding: 15px 13px;
    list-style: none;
    text-align: left;
    background: #05090d99;
    border: 4px solid #070b10;
}

.rank li {
    padding: 8px 2px;
    color: #d1dde3;
    font-size: 14px;
}

.rank li::before {
    content: "+";
    margin-right: 9px;
    color: var(--cyan);
    font-weight: 900;
}

.captain {
    background-color: #113b56;
    background-image:
        linear-gradient(135deg, #2e8eb944 25%, transparent 25%),
        linear-gradient(315deg, #071923 25%, #113b56 25%);
}

.captain h3 {
    color: #79e9ff;
    text-shadow: 4px 4px #082838;
}

.pirate {
    background-color: #51191b;
    background-image:
        linear-gradient(135deg, #ff803444 25%, transparent 25%),
        linear-gradient(315deg, #180708 25%, #51191b 25%);
}

.pirate h3 {
    color: #ffba4e;
    text-shadow: 4px 4px #561313;
}

.pirate button {
    background: linear-gradient(#ff9c39, #c93628);
}

.leviathan {
    z-index: 2;
    transform: scale(1.035);
    border-color: #110622;
    outline: 6px solid #6f35c6;
    outline-offset: 3px;
    background-color: #20104d;
    background-image:
        linear-gradient(135deg, #673ad055 25%, transparent 25%),
        linear-gradient(315deg, #03193c 25%, #20104d 25%);
    box-shadow:
        inset 4px 4px #956bdf,
        inset -4px -4px #08021a,
        0 0 20px #8b47ff,
        0 0 55px #236cff66,
        12px 14px #0009;
}

.leviathan h3 {
    color: transparent;
    background: linear-gradient(90deg, #7df4ff, #b86cff, #fff, #4d8cff, #7df4ff);
    background-size: 250%;
    background-clip: text;
    font-size: clamp(43px, 4.5vw, 64px);
    filter: drop-shadow(4px 4px #12052d);
    animation: header-color 3s linear infinite;
}

.booster-grid {
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    gap: 26px;
}

.booster-card {
    position: relative;
    min-width: 0;
    padding: 30px 22px;
    text-align: center;
    transition: 0.18s;
}

.booster-image-frame {
    width: 118px;
    height: 118px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #111820;
    border: 5px solid #070b10;
    box-shadow: inset 4px 4px #05080b, inset -4px -4px #53636e;
}

.booster-image-frame img {
    width: 88%;
    height: 88%;
}

.booster-card h3 {
    min-height: 76px;
    margin: 0;
    font: 32px/1.05 var(--font);
}

.booster-card p {
    margin: 12px 0 22px;
    color: #aebec8;
}

.xp-booster {
    background-color: #123d36;
    background-image:
        linear-gradient(135deg, #49d17933 25%, transparent 25%),
        linear-gradient(315deg, #061d19 25%, #123d36 25%);
    box-shadow: inset 4px 4px #4a8b72, inset -4px -4px #06110e, 9px 9px #0008;
}

.xp-booster button {
    background: linear-gradient(#57ce75, #247b45);
}

.soul-booster {
    background-color: #32174e;
    background-image:
        linear-gradient(135deg, #a14fe044 25%, transparent 25%),
        linear-gradient(315deg, #13071f 25%, #32174e 25%);
    border-color: #160a22;
    box-shadow: inset 4px 4px #8054a2, inset -4px -4px #11051a, 0 0 28px #9c4fe044, 9px 9px #0008;
}

.soul-booster button {
    background: linear-gradient(#a45ae1, #58258e);
}

.feature-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature {
    padding: 28px;
    transition: 0.18s;
}

.feature > div {
    color: var(--cyan);
    font: 58px var(--font);
    text-shadow: 4px 4px #000, 0 0 15px #49dfff;
}

.feature h3,
.empty-leaderboard h3,
footer h3 {
    margin: 12px 0 8px;
    font: 34px var(--font);
}

.feature p,
.empty-leaderboard p {
    color: #a9bbc5;
    line-height: 1.55;
}

.empty-leaderboard {
    max-width: 800px;
    margin: auto;
    padding: 45px;
    text-align: center;
}

.locked-chest {
    position: relative;
    width: 130px;
    height: 84px;
    margin: 0 auto 25px;
    background: #765021;
    border: 6px solid #20140a;
    box-shadow: inset 5px 5px #a87835, inset -5px -5px #3a220e;
}

.locked-chest::before {
    content: "";
    position: absolute;
    top: 34px;
    right: -6px;
    left: -6px;
    height: 10px;
    background: #e0ae3d;
    border-block: 4px solid #4b330d;
}

.locked-chest i {
    position: absolute;
    z-index: 2;
    top: 29px;
    left: 50%;
    width: 24px;
    height: 32px;
    transform: translateX(-50%);
    background: #e6bd4b;
    border: 4px solid #49320c;
}

footer {
    padding: 65px max(24px, 5vw) 30px;
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 44px;
    background-color: #111a22;
    background-image:
        linear-gradient(135deg, #ffffff06 25%, transparent 25%),
        linear-gradient(315deg, #0004 25%, #111a22 25%);
    background-size: 32px 32px;
    border-top: 7px solid #05080b;
}

footer > div:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

footer p { color: #91a4af; }
footer h3 { font-size: 29px; }

footer small {
    grid-column: 1 / -1;
    padding-top: 24px;
    color: #71828c;
    border-top: 3px solid #080c10;
}

#toast {
    position: fixed;
    z-index: 100;
    bottom: 24px;
    left: 50%;
    padding: 12px 17px;
    transform: translate(-50%, 120px);
    background: #202c35;
    border: 5px solid #070b10;
    box-shadow: inset 3px 3px #5c6f7d, inset -3px -3px #090d11, 6px 6px #0009;
    font: 22px var(--font);
    transition: 0.25s;
}

#toast.show {
    transform: translate(-50%, 0);
}

.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.65s, transform 0.65s;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

@keyframes header-color {
    to { background-position: 300% 0; }
}

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

@keyframes cloud {
    to { translate: 120px; }
}

@keyframes boat {
    50% { translate: 0 -8px; rotate: -1deg; }
}

@keyframes shell-pulse {
    50% { filter: drop-shadow(0 0 12px #59edff); transform: scale(1.15); }
}

@media (max-width: 1100px) {
    .shell-grid { grid-template-columns: repeat(3, 1fr); }
    .rank-grid { gap: 18px; }
    .rank { padding-inline: 18px; }
    .rank h3 { font-size: 48px; }
    .leviathan h3 { font-size: 43px; }
}

@media (max-width: 780px) {
    .nav nav {
        display: none;
        position: absolute;
        top: 76px;
        right: 0;
        left: 0;
        padding: 22px;
        flex-direction: column;
        background: #18242d;
        border: 5px solid #070b10;
    }

    .nav nav.open { display: flex; }
    .menu-button { display: block; }
    .hero h1 { font-size: 85px; }
    .hero p { font-size: 25px; }
    .island, .pixel-ship { opacity: 0.18; }
    .currency-panel { grid-template-columns: 1fr; text-align: center; }
    .shell-grid, .rank-grid, .booster-grid, .feature-grid { grid-template-columns: 1fr; }
    .rank { min-height: auto; }
    .rank ul { min-height: auto; }
    .leviathan { order: -1; transform: none; }
    .section-header h2 { font-size: 64px; }
    footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
    section { padding: 85px 17px; }
    .brand { font-size: 33px; }
    .hero h1 { font-size: 65px; }
    .hero-actions { flex-direction: column; }
    .section-header h2 { font-size: 52px; }
    .store-card h3 { min-height: auto; }
    footer { grid-template-columns: 1fr; }
}