/* ============================================
   OCEAN EXPERIENCE - STYLES.CSS
   Scroll-snap architecture: groups (sticky bg) + sections (snap targets)
   Sections use flex-column layout; content sized via clamp() for fluid mobile.
   ============================================ */

/* ============================================
   1. CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    --color-primary: #0a1628;
    --color-text: white;
    --color-accent: #ffc107;
    --color-success: #4caf50;
    --color-success-light: #8bc34a;
    --color-success-pale: #a5d6a7;
    --color-danger: #e53935;
    --color-google-blue: #4285F4;
    --color-google-green: #34A853;
    --color-google-yellow: #FBBC05;
    --color-google-red: #EA4335;

    --bg-overlay: rgba(0,0,0,0.5);
    --bg-white-transparent: rgba(255,255,255,0.2);
    --bg-white-light: rgba(255,255,255,0.4);

    --border-color-light: rgba(255,255,255,0.2);
    --border-color-lighter: rgba(255,255,255,0.3);

    --border-radius-sm: 5px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;

    --font-primary: system-ui, -apple-system, sans-serif;

    --z-content: 10;
    --z-badge: 20;
    --z-nav: 100;

    --gap-indicator: var(--space-md);
    --gap-indicator-mobile: var(--space-md);

    --transition-fast: 0.2s;
    --transition-medium: 0.3s;

    --section-h: 100dvh;
    --section-pad-bottom: 0px;

    /* Typography scale. --text-display is the oversized treatment reserved
       for the contact CTA hero ("Talk to me"); everything else uses one of
       the four tiers below. */
    --text-display: clamp(2.9rem, 7vw, 5rem);
    --text-hero:    clamp(2.1rem, 5vw, 3rem);
    --text-title:   clamp(1.75rem, 4.5vw, 2.7rem);
    --text-body:    clamp(1.15rem, 2.6vw, 1.6rem);
    --text-caption: clamp(1rem, 2vw, 1.2rem);

    /* Spacing scale (4px base step). */
    --space-xs:  0.25rem;  /* 4  */
    --space-sm:  0.5rem;   /* 8  */
    --space-md:  0.75rem;  /* 12 */
    --space-lg:  1rem;     /* 16 */
    --space-xl:  1.5rem;   /* 24 */
    --space-2xl: 2rem;     /* 32 */
    --space-3xl: 3rem;     /* 48 */

    /* Semantic spacing — use these for consistency across sections. */
    --gap-section: clamp(1rem, 3vh, 2rem);
    --pad-section: 6% 3%;
    --pad-card:    0.875rem 1.375rem;  /* 14 22 — hero / subtext / services card */
    --pad-pill:    var(--space-sm) var(--space-md); /* 8 12 — eco / prohibition badge */

    /* Text-shadow recipes — two tiers:
       3d  = text inside an overlay pill (stacked offsets + soft blur)
       naked = text floating on a photo (single heavier blur). */
    --text-shadow-3d-lg:    0 1px 0 rgba(0,0,0,0.4), 0 2px 0 rgba(0,0,0,0.4), 0 3px 0 rgba(0,0,0,0.4), 2px 4px 8px rgba(0,0,0,0.5);
    --text-shadow-3d-sm:    0 1px 0 rgba(0,0,0,0.4), 0 2px 0 rgba(0,0,0,0.4), 1px 3px 6px rgba(0,0,0,0.5);
    --text-shadow-naked-lg: 2px 2px 15px rgba(0,0,0,0.6);
    --text-shadow-naked-sm: 2px 2px 10px rgba(0,0,0,0.6);
}

/* ============================================
   2. GLOBAL RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior-y: contain;
    font-family: var(--font-primary);
    background: var(--color-primary);
}

/* ============================================
   3. SCROLL-SNAP CONTAINER + GROUP/SECTION LAYOUT
   ============================================ */
.pages-container {
    height: var(--section-h);
    width: 100vw;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: relative;
}

.pages-container::-webkit-scrollbar { display: none; }
.pages-container { scrollbar-width: none; }

.group {
    position: relative;
}

.group-bg {
    position: sticky;
    top: 0;
    height: var(--section-h);
    width: 100%;
    z-index: 0;
    overflow: hidden;
    background: var(--color-primary);
}

.page {
    position: relative;
    z-index: 1;
    height: var(--section-h);
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: var(--section-pad-bottom);
}

.group > .page:first-of-type {
    margin-top: calc(-1 * var(--section-h));
}

@media (prefers-reduced-motion: reduce) {
    .pages-container { scroll-behavior: auto; }
}

/* ============================================
   4. BACKGROUND MEDIA
   ============================================ */
.slideshow,
.video-background,
.static-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slideshow img,
.static-background img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideshow img {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slideshow img.active {
    opacity: 1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   5. CONTENT WRAPPER (flex column inside section)
   ============================================ */
.content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--z-content);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--pad-section);
    gap: var(--gap-section);
}

.content > * {
    pointer-events: auto;
}

/* ============================================
   6. SHARED TEXT BLOCKS
   ============================================ */
.hero {
    font-size: var(--text-hero);
    font-weight: 800;
    color: var(--color-text);
    text-align: center;
    width: auto;
    max-width: min(700px, 98%);
    text-shadow: var(--text-shadow-3d-lg);
    background: var(--bg-overlay);
    border-radius: var(--border-radius-lg);
    padding: var(--pad-card);
    line-height: 1.15;
}

.hero.cta-hero {
    font-size: var(--text-display);
}

.subtext {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--color-text);
    text-align: center;
    width: auto;
    max-width: min(700px, 98%);
    line-height: 1.5;
    text-shadow: var(--text-shadow-3d-sm);
    background: var(--bg-overlay);
    border-radius: var(--border-radius-lg);
    padding: var(--pad-card);
}

/* ============================================
   7. GROUP: Boat (badge overlay)
   ============================================ */
.prohibition-badge {
    position: absolute;
    bottom: 22%;
    right: 8%;
    transform: rotate(5deg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    animation: float 3s ease-in-out infinite;
    z-index: var(--z-badge);
}

.prohibition-text {
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--color-danger);
    background: white;
    padding: var(--pad-pill);
    border-radius: var(--border-radius-sm);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

@media (max-width: 480px) {
    .prohibition-badge {
        bottom: 16%;
        right: 4%;
    }
}

/* Sardine-sky badge — for grey/cloudy backgrounds */
.sardine-sky-badge {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    animation: float 4s ease-in-out infinite;
    z-index: var(--z-badge);
}

.sardine-sky-text {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: 1.35;
    color: #e8eaed;
    background: rgba(30, 38, 52, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: var(--pad-pill);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    text-align: center;
    max-width: min(80vw, 360px);
    text-wrap: balance;
}

.sardine-sky-text .nobreak {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .sardine-sky-badge {
        top: 8%;
    }
}

/* ============================================
   8. GROUP: Values (badge overlay)
   ============================================ */
.eco-badge {
    position: absolute;
    bottom: 18%;
    right: 5%;
    transform: rotate(-8deg);
    animation: float 3s ease-in-out infinite, pulse-glow 2s ease-in-out infinite;
    z-index: var(--z-badge);
}

.eco-inner {
    background: linear-gradient(135deg, var(--color-success), #2196f3);
    padding: var(--pad-pill);
    font-weight: 700;
    font-size: var(--text-caption);
    color: white;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5), 0 0 40px rgba(33, 150, 243, 0.3);
    text-align: center;
    min-width: 180px;
}

@media (max-width: 480px) {
    .eco-badge {
        bottom: 14%;
        right: 5%;
    }
}

/* ============================================
   9. GROUP: Reviews (overrides flex layout — uses absolute slider)
   ============================================ */
.group[data-group="reviews"] .content {
    padding: 0;
    gap: 0;
    justify-content: flex-start;
}

.usda-badge {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    animation: float 4s ease-in-out infinite;
    z-index: var(--z-badge);
}

.usda-inner {
    background: #1b5e20;
    padding: var(--space-xl) var(--space-2xl);
    border: 4px solid var(--color-success);
    text-align: center;
    color: white;
}

.usda-text {
    font-size: var(--text-title);
    font-weight: 800;
    color: var(--color-success-light);
}

.usda-sub {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-success-pale);
}

.review-slider {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    z-index: var(--z-badge);
}

.review-track {
    position: relative;
    overflow: hidden;
    height: 180px;
}

.review-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: var(--border-radius-md);
    padding: var(--space-xl);
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    display: none;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.review-card.active {
    display: flex;
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.reviewer-name {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.stars {
    color: var(--color-accent);
    font-size: 1rem;
}

.google-icon {
    flex-shrink: 0;
}

.review-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-top: var(--space-md);
    overflow: hidden;
}

.review-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.review-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background var(--transition-medium);
}

.review-dots .dot.active {
    background: white;
}

@media (max-width: 480px) {
    .review-slider {
        width: 90%;
    }

    .review-track {
        height: 200px;
    }
}

/* ============================================
   10. GROUP: Services (each service is its own section)
   ============================================ */
.group[data-group="services"] .page {
    padding: var(--pad-section);
}

.services-inner {
    width: auto;
    max-width: min(640px, 98%);
    text-align: center;
    padding: var(--pad-card);
    background: var(--bg-overlay);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.service-title {
    font-size: var(--text-hero);
    font-weight: 800;
    color: var(--color-text);
    text-shadow: var(--text-shadow-3d-lg);
    line-height: 1.15;
}

.service-text {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-text);
    text-shadow: var(--text-shadow-3d-sm);
    line-height: 1.4;
}

.service-prices {
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--color-text);
    text-shadow: var(--text-shadow-3d-sm);
}

.service-prices p + p {
    margin-top: var(--space-xs);
}

/* ============================================
   11. GROUP: Extras
   ============================================ */
.extras-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.extra-item {
    font-size: var(--text-title);
    font-weight: 700;
    color: var(--color-text);
    text-shadow: var(--text-shadow-naked-lg);
    opacity: 0;
}

.extras-list.animated .extra-item {
    animation: fadeInStagger 0.5s ease forwards;
}

.extras-list.animated .extra-item:nth-child(1) { animation-delay: 0.2s; }
.extras-list.animated .extra-item:nth-child(2) { animation-delay: 0.4s; }
.extras-list.animated .extra-item:nth-child(3) { animation-delay: 0.6s; }
.extras-list.animated .extra-item:nth-child(4) { animation-delay: 0.8s; }
.extras-list.animated .extra-item:nth-child(5) { animation-delay: 1s; }

/* ============================================
   12. GROUP: Contact
   ============================================ */
.cta-subtitle {
    font-size: var(--text-caption);
    font-weight: 600;
    font-style: italic;
    color: var(--color-text);
    text-align: center;
    width: auto;
    max-width: 98%;
    text-shadow: var(--text-shadow-3d-sm);
    background: var(--bg-overlay);
    border-radius: var(--border-radius-lg);
    padding: var(--pad-pill);
}

.cta-icons {
    display: flex;
    justify-content: center;
    gap: var(--space-3xl);
    flex-wrap: wrap;
}

.cta-whatsapp,
.cta-email {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    color: white;
    text-decoration: none;
    transition: transform var(--transition-medium);
}

.cta-whatsapp:hover,
.cta-email:hover {
    transform: scale(1.1);
}

.cta-whatsapp svg,
.cta-email svg {
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.4));
}

.cta-whatsapp span,
.cta-email span {
    font-size: var(--text-body);
    font-weight: 700;
    text-shadow: var(--text-shadow-naked-sm);
}

.cta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding: var(--space-xs) 0;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    text-shadow: var(--text-shadow-naked-sm);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.cta-copy:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.cta-copy-value {
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: var(--text-shadow-naked-sm);
    user-select: text;
    -webkit-user-select: text;
}

.cta-copy-icon,
.cta-check-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.cta-check-icon {
    display: none;
}

.cta-copy.copied .cta-copy-icon {
    display: none;
}

.cta-copy.copied .cta-check-icon {
    display: block;
    opacity: 1;
}

.cta-copy.copied {
    color: var(--color-success-light);
}

@media (max-width: 768px) {
    .cta-icons {
        flex-direction: column;
        gap: var(--space-2xl);
    }
}

/* ============================================
   13. PAGE INDICATOR
   ============================================ */
.page-indicator {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--gap-indicator);
    z-index: var(--z-nav);
}

.indicator-item {
    font-size: 38px;
    opacity: 0.7;
    cursor: pointer;
    transition: all var(--transition-medium);
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-item:hover {
    opacity: 1;
    transform: scale(1.1);
}

.indicator-item.active {
    opacity: 1;
    transform: scale(1.2);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
}

.indicator-item::before {
    content: '';
    position: absolute;
    width: 58px;
    height: 58px;
    border: 2px solid rgba(255, 215, 0, 0.7);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--transition-medium);
}

.indicator-item.active::before {
    opacity: 1;
}

/* Always-on "Contact now" callout pinned to the contact (phone) dot.
   Base = desktop: the indicator is a left vertical column sitting just left of
   the content card, so the callout sits to the LEFT of the dot (out in the open
   margin, clear of the card) with a right-pointing tail. The mobile override
   below flips it above the dot (the indicator becomes a bottom-center row).
   Hidden via JS once the contact section is in view. */
.indicator-callout {
    position: absolute;
    right: calc(100% + 16px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 15px;
    background: linear-gradient(135deg, #ffd86b, #ffb627);
    color: #0a1f33;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    animation: callout-nudge-x 2s ease-in-out infinite;
    transition: opacity var(--transition-medium);
}

.indicator-callout::after {
    content: '';
    position: absolute;
    left: 100%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: #ffd86b;
}

/* The phone itself sheds its resting transparency at the peak — opacity eases
   from the indicator's default 0.7 up to a fully opaque 1 and back, in sync
   with the disc and the bob. */
.indicator-item[data-group="contact"] {
    animation: contact-phone-pulse 2s ease-in-out infinite;
}

/* A gold-gradient disc behind the phone — same gradient as the "Contact now"
   sign so they read as one set. Sized like the active selection ring (bigger
   than the emoji, so it envelops it with padding). It fades in at the top of
   the callout's bob and out at the bottom — same 1.6s tempo, in lockstep. */
.indicator-item[data-group="contact"]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #ffd86b, #ffb627);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    animation: contact-disc-pulse 2s ease-in-out infinite;
}

/* Once the visitor reaches the contact section the dot becomes active and
   shows its own selection ring — stop nagging: drop the callout and the disc. */
.indicator-item.arrived .indicator-callout,
.indicator-item.active .indicator-callout {
    opacity: 0;
    animation: none;
}

.indicator-item[data-group="contact"].arrived::after,
.indicator-item[data-group="contact"].active::after {
    animation: none;
    opacity: 0;
}

.indicator-item[data-group="contact"].arrived,
.indicator-item[data-group="contact"].active {
    animation: none;
}

.indicator-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--space-sm);
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    z-index: 101;
}

.indicator-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   14. UTILITY CLASSES
   ============================================ */
.disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* ============================================
   15. ANIMATIONS
   ============================================ */
@keyframes float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

@keyframes bounce {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(-15px); }
}

@keyframes fadeInStagger {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Callout bob — uses the `translate` property (not `transform`) so it composes
   with the `transform`-based centering on each breakpoint. It also fades fully
   out at rest and in at the peak, in lockstep with the phone disc. Desktop
   nudges right toward the dot (callout sits left of it); mobile nudges down
   toward the dot (callout sits above it). */
@keyframes callout-nudge-x {
    0%, 100% { translate: 0 0; opacity: 0; }
    50%      { translate: 5px 0; opacity: 1; }
}

@keyframes callout-nudge-y {
    0%, 100% { translate: 0 0; opacity: 0; }
    50%      { translate: 0 5px; opacity: 1; }
}

/* Gold disc fades in at the bob's peak (50%), invisible at rest. Capped at
   0.9 so it stays soft against the photo. */
@keyframes contact-disc-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0.9; }
}

/* Phone opacity: 0.7 at rest (indicator default) -> 1 fully opaque at the peak. */
@keyframes contact-phone-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .indicator-callout,
    .indicator-item[data-group="contact"],
    .indicator-item[data-group="contact"]::after {
        animation: none;
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.5), 0 0 40px rgba(33, 150, 243, 0.3);
    }
    50% {
        box-shadow: 0 0 35px rgba(76, 175, 80, 0.8), 0 0 60px rgba(33, 150, 243, 0.5);
    }
}

/* ============================================
   16. MOBILE: bottom indicator + section bottom padding
   ============================================ */
@media (max-width: 768px) {
    :root {
        --section-pad-bottom: 80px;
    }

    .page-indicator {
        position: fixed;
        bottom: 16px;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        flex-direction: row;
        gap: var(--gap-indicator-mobile);
    }

    .indicator-item {
        font-size: 30px;
        width: 38px;
        height: 38px;
    }

    .indicator-item::before {
        width: 46px;
        height: 46px;
    }

    .indicator-item.active::before {
        width: 46px;
        height: 46px;
    }

    /* Phone dot is the rightmost item — anchor the callout to grow leftward
       (toward screen center) so it never clips the right edge, tail pointing
       down at the dot. */
    .indicator-callout {
        left: auto;
        right: -2px;
        top: auto;
        bottom: calc(100% + 12px);
        transform: none;
        padding: 6px 12px;
        font-size: 13px;
        animation-name: callout-nudge-y;
    }

    .indicator-callout::after {
        left: auto;
        right: 13px;
        top: 100%;
        transform: none;
        border-left-color: transparent;
        border-top-color: #ffb627;
    }

    .indicator-item[data-group="contact"]::after {
        width: 46px;
        height: 46px;
    }
}

/* ============================================
   17. DESKTOP CARD LAYOUT
   ============================================ */
@media (min-width: 769px) {
    :root {
        --section-h: 90vh;
    }

    body {
        background: var(--desktop-bg) center/cover no-repeat, #060e1c;
    }

    .app-shell {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-xl);
        min-height: 100vh;
    }

    .pages-container {
        width: min(520px, 100%);
        height: var(--section-h);
        border-radius: 24px;
        overflow-y: scroll;
        overflow-x: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .page-indicator {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        flex-shrink: 0;
        flex-direction: column;
        gap: var(--gap-indicator);
    }

    .indicator-item {
        font-size: 38px;
        width: 50px;
        height: 50px;
    }

    .indicator-item::before {
        width: 58px;
        height: 58px;
    }
}