/**
 * ============================================
 * VYSYN LABS - Main Stylesheet
 * ============================================
 *
 * This stylesheet controls all visual aspects of the VYSYN Labs website.
 * It's organized into logical sections for easy maintenance.
 *
 * TABLE OF CONTENTS:
 * ------------------
 * 1. CSS Variables (Design Tokens)
 * 2. Reset & Base Styles
 * 3. Typography
 * 4. Curtain Intro Animation
 * 5. ASCII Wave Canvas (Hero Background)
 * 6. Navigation
 * 7. Hamburger Menu (Mobile)
 * 8. Mobile Menu Overlay & Items
 * 9. Fullpage.js Sections & Navigation Dots
 * 10. Section Labels & Content
 * 11. Buttons
 * 12. Grid Container (Portfolio Focus Section)
 * 13. Investment Grid (Investments Section)
 * 14. Lending Section
 * 15. Stablecoin List
 * 16. Wave Canvas (Footer Background)
 * 17. Contact Section
 * 18. Responsive - Tablet (max-width: 1024px)
 * 19. Responsive - Mobile (max-width: 600px)
 * 20. Responsive - Small Mobile (max-width: 400px)
 * 21. Utility Classes
 *
 * ============================================
 */


/* ============================================
   1. CSS VARIABLES (Design Tokens)
   ============================================

   All design tokens are defined here for consistency.
   Change these values to update the entire site's appearance.

   Naming Convention:
   - Colors: --color-[name]
   - Typography: --font-[property]
   - Spacing: --spacing-[size]
   - Layout: descriptive names
   - Transitions: --transition-[speed]
   - Z-index: --z-[layer-name]
*/

:root {
    /* ----------------------
       Color Palette
       ---------------------- */
    --color-bg: #050505;                           /* Main background (near black) */
    --color-bg-light: #0a0a0a;                     /* Slightly lighter background */
    --color-primary: #ff2d5f;                      /* Brand accent color (pink/red) */
    --color-primary-hover: #ff4d7a;                /* Primary color on hover */
    --color-text: #FFFFFF;                         /* Main text color (white) */
    --color-text-muted: #888888;                   /* Secondary/muted text */
    --color-text-dark: #666666;                    /* Darker muted text */
    --color-border: rgba(255, 255, 255, 0.1);      /* Subtle border color */
    --color-border-hover: rgba(255, 255, 255, 0.3); /* Border color on hover */
    --color-card-bg: rgba(255, 255, 255, 0.02);    /* Card background */
    --color-card-hover: rgba(255, 255, 255, 0.05); /* Card background on hover */

    /* ----------------------
       Typography Scale
       ----------------------
       Using rem units for accessibility (respects user's font size settings)
    */
    --font-primary: 'Figtree', sans-serif;         /* Main font family */
    --font-mono: 'JetBrains Mono', monospace;      /* Monospace for labels/code */
    --font-size-xs: 0.7rem;                        /* 11.2px - smallest text */
    --font-size-sm: 0.75rem;                       /* 12px - small labels */
    --font-size-base: 0.85rem;                     /* 13.6px - base size */
    --font-size-md: 0.9rem;                        /* 14.4px - medium */
    --font-size-lg: 1rem;                          /* 16px - large */
    --font-size-xl: 1.1rem;                        /* 17.6px - extra large */
    --font-size-2xl: 1.15rem;                      /* 18.4px */
    --font-size-3xl: 1.2rem;                       /* 19.2px */
    --font-size-4xl: 1.3rem;                       /* 20.8px - headings */

    /* ----------------------
       Spacing Scale
       ----------------------
       Consistent spacing throughout the design
    */
    --spacing-xs: 0.5rem;                          /* 8px */
    --spacing-sm: 1rem;                            /* 16px */
    --spacing-md: 1.5rem;                          /* 24px */
    --spacing-lg: 2rem;                            /* 32px */
    --spacing-xl: 3rem;                            /* 48px */
    --spacing-2xl: 4rem;                           /* 64px */

    /* ----------------------
       Layout Variables
       ---------------------- */
    --nav-padding-desktop: 30px 50px;              /* Navigation padding on desktop */
    --nav-padding-mobile: 20px;                    /* Navigation padding on mobile */
    --section-padding-desktop: 0 10vw;             /* Section horizontal padding - desktop */
    --section-padding-tablet: 0 5vw;               /* Section horizontal padding - tablet */
    --section-padding-mobile: 0 20px;              /* Section horizontal padding - mobile */
    --max-width-content: 1400px;                   /* Maximum content width */
    --max-width-text: 700px;                       /* Maximum text block width */

    /* ----------------------
       Transitions
       ----------------------
       Consistent animation timing across the site
    */
    --transition-fast: 0.3s ease;                  /* Quick interactions (hover) */
    --transition-medium: 0.4s ease;                /* Medium transitions (buttons) */
    --transition-slow: 0.8s cubic-bezier(0.76, 0, 0.24, 1); /* Slow, elegant (curtain) */

    /* ----------------------
       Z-Index Layers
       ----------------------
       Stacking order for overlapping elements
       Higher numbers appear on top
    */
    --z-canvas: 1;                                 /* Background canvases */
    --z-content: 10;                               /* Main content */
    --z-nav: 100;                                  /* Navigation bar */
    --z-menu-overlay: 9998;                        /* Mobile menu dark overlay */
    --z-menu: 9999;                                /* Mobile menu content */
    --z-curtain: 10000;                            /* Intro curtain animation */
    --z-intro-text: 10001;                         /* "VYSYN LABS" intro text */

    /* ----------------------
       Breakpoints Reference
       ----------------------
       These are used in media queries below
       (CSS doesn't support variables in media queries)
    */
    /* --bp-mobile: 600px */
    /* --bp-tablet: 1024px */
}


/* ============================================
   2. RESET & BASE STYLES
   ============================================

   Normalize browser defaults and set up base styles
*/

* {
    box-sizing: border-box;                        /* Include padding/border in element size */
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;                              /* Fullpage.js handles scrolling */
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;          /* Smoother font rendering on WebKit */
    -moz-osx-font-smoothing: grayscale;           /* Smoother font rendering on Firefox */
}


/* ============================================
   3. TYPOGRAPHY
   ============================================

   Global heading and paragraph styles
   Using clamp() for fluid responsive typography
*/

h1 {
    font-size: clamp(3rem, 8vw, 7rem);            /* Min: 48px, Max: 112px, scales with viewport */
    line-height: 1;                                /* Tight line height for large headings */
    letter-spacing: -0.03em;                       /* Slightly tighter letter spacing */
    margin-bottom: var(--spacing-md);
}

h2 {
    font-size: clamp(2rem, 5vw, 4rem);            /* Min: 32px, Max: 64px */
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
}

p {
    font-size: var(--font-size-2xl);
    color: var(--color-text-muted);
    max-width: var(--max-width-text);              /* Prevent overly long lines for readability */
    line-height: 1.6;                              /* Comfortable reading line height */
    margin-bottom: var(--spacing-lg);
}


/* ============================================
   4. CURTAIN INTRO ANIMATION
   ============================================

   The opening animation that reveals the site.
   Consists of vertical slices that slide up to reveal content.

   Animation sequence:
   1. "VYSYN LABS" text scrambles from numbers to letters
   2. Text fades up and out
   3. Curtain slices slide up with staggered timing
   4. Hero content fades in
*/

/* Container for all curtain slices - covers entire viewport */
.curtain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-curtain);
    display: flex;                                 /* Slices are laid out horizontally */
    pointer-events: none;                          /* Don't block interactions during animation */
}

/* Individual vertical slice of the curtain */
.curtain-slice {
    flex: 1;                                       /* Each slice takes equal width */
    background: var(--color-bg);
    transition: transform var(--transition-slow);  /* Smooth slide-up animation */
}

/* When revealed, slice moves up out of view */
.curtain-slice.reveal {
    transform: translateY(-100%);
}

/* The "VYSYN LABS" text that appears during intro */
.intro-text {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: var(--font-primary);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);              /* Perfect center alignment */
    z-index: var(--z-intro-text);
    transition: opacity 0.3s, transform 0.5s ease-out;
    pointer-events: none;
}

/* Intro text fades and moves up when hiding */
.intro-text.hide {
    opacity: 0;
    transform: translate(-50%, -70%);              /* Moves up 20% while fading */
}


/* ============================================
   5. ASCII WAVE CANVAS (Hero Background)
   ============================================

   Background canvas for the hero section.
   Displays expanding waves made of ASCII characters.
   Animation is handled by JavaScript.
*/

#asciiWaveCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-canvas);
    opacity: 0.35;                                 /* Subtle effect, doesn't overpower content */
    pointer-events: none;                          /* Don't interfere with interactions */
}


/* ============================================
   6. NAVIGATION
   ============================================

   Fixed navigation bar at top of page.
   Uses mix-blend-mode: difference for visibility on any background.
*/

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--nav-padding-desktop);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-nav);
    mix-blend-mode: difference;                    /* Inverts colors for contrast on any bg */
    opacity: 0;                                    /* Starts hidden, animated in by JS */
}

/* Logo in top left */
.logo {
    font-weight: 700;
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
    text-decoration: none;
    color: inherit;
}

/* Container for desktop navigation links */
.nav-links {
    display: flex;
    gap: 40px;
}

/* Individual navigation item */
.nav-item {
    font-size: var(--font-size-md);
    color: #aaa;
    position: relative;                            /* For underline pseudo-element */
    cursor: pointer;
    transition: color var(--transition-fast);
}

.nav-item:hover {
    color: var(--color-text);
}

/* Animated underline on hover */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;                                     /* Starts at 0, expands on hover */
    height: 1px;
    background: var(--color-text);
    transition: width var(--transition-fast);
}

.nav-item:hover::after {
    width: 100%;
}


/* ============================================
   7. HAMBURGER MENU (Mobile)
   ============================================

   Three-line hamburger icon that transforms into an X.
   Only visible on tablet and below (max-width: 1024px).
*/

.hamburger {
    display: none;                                 /* Hidden by default, shown in media query */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: calc(var(--z-menu) + 1);             /* Above menu overlay */
    position: relative;
}

/* Individual line of the hamburger */
.hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: all var(--transition-fast);
    position: absolute;                            /* Positioned for transform animation */
}

/* Position the three lines */
.hamburger-line:nth-child(1) {
    transform: translateY(-6px);                   /* Top line */
}

.hamburger-line:nth-child(2) {
    transform: translateY(0);                      /* Middle line */
}

.hamburger-line:nth-child(3) {
    transform: translateY(6px);                    /* Bottom line */
}

/* ----------------------
   Hamburger Active State (X shape)
   ----------------------
   When menu is open, hamburger transforms into X
*/
.hamburger.active {
    position: fixed;                               /* Break out of nav's blend mode */
    top: 20px;
    right: 20px;
    mix-blend-mode: normal;                        /* Ensure visibility on dark overlay */
    z-index: 10001;                                /* Above everything including overlay */
}

/* Top line rotates 45deg clockwise */
.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

/* Middle line fades out */
.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

/* Bottom line rotates 45deg counter-clockwise */
.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}


/* ============================================
   8. MOBILE MENU OVERLAY & ITEMS
   ============================================

   Full-screen overlay menu for mobile navigation.
   Items appear centered with blur/fade animation.
*/

/* Dark overlay behind menu items */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    z-index: var(--z-menu-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Container for menu items - centered on screen */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--z-menu);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

/* Individual menu item */
.mobile-menu-item {
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-weight: 400;                              /* Light weight for elegance */
    color: var(--color-text);
    cursor: pointer;
    padding: 1rem 2rem;
    /* Initial state for animation - items start blurred and below */
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

/* Animated state when menu opens */
.mobile-menu.active .mobile-menu-item {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ----------------------
   Staggered Animation Delays
   ----------------------
   Each item appears slightly after the previous one
*/
.mobile-menu.active .mobile-menu-item:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.active .mobile-menu-item:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.active .mobile-menu-item:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.active .mobile-menu-item:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.active .mobile-menu-item:nth-child(5) { transition-delay: 0.3s; }

/* Hover underline effect */
.mobile-menu-item::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transform: translateX(-50%);
    transition: width var(--transition-fast);
}

.mobile-menu-item:hover {
    color: var(--color-primary);
}

.mobile-menu-item:hover::after {
    width: 60%;
}


/* ============================================
   9. FULLPAGE.JS SECTIONS & NAVIGATION DOTS
   ============================================

   Styles for fullpage.js library integration.
   Each section fills the viewport.
*/

.section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-padding-desktop);
    overflow: hidden !important;                   /* Prevent content overflow */
}

/* Disable fullpage.js internal scroll indicators */
.fp-overflow {
    overflow: hidden !important;
}

.fp-overflow::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* Hide fullpage.js watermark/branding */
.fp-watermark {
    display: none !important;
}

/* ----------------------
   Navigation Dots Styling
   ----------------------
   Dots on the right side for section navigation
*/
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: var(--color-text);                 /* White dots by default */
}

/* Active and hover state - primary color */
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
    background: var(--color-primary);
}


/* ============================================
   10. SECTION LABELS & CONTENT
   ============================================

   Small labels like "01 / FOCUS" above section headings
*/

.section-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    opacity: 0.6;
    margin-bottom: var(--spacing-xs);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-top: var(--spacing-lg);
}

.scramble-text {
    display: inline-block;
}


/* ============================================
   11. BUTTONS
   ============================================

   Primary button style with hover fill animation.
   Uses pseudo-element for smooth background transition.
*/

.btn {
    padding: 18px 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text);
    text-transform: uppercase;
    font-size: var(--font-size-base);
    letter-spacing: 0.05em;
    background: transparent;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: hidden;                              /* Clip the ::before element */
    z-index: 1;
    transition: color var(--transition-medium), border-color var(--transition-medium);
    font-family: var(--font-primary);
}

/* Background fill animation - expands from left on hover */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;                                     /* Starts hidden */
    height: 100%;
    background: var(--color-primary);
    transition: width var(--transition-medium);
    z-index: -1;                                   /* Behind button text */
}

.btn:hover::before {
    width: 100%;                                   /* Fills entire button */
}

.btn:hover {
    color: var(--color-text);
    border-color: var(--color-primary);
}


/* ============================================
   12. GRID CONTAINER (Portfolio Focus Section)
   ============================================

   3-column grid for the Portfolio Focus cards.
   Each card shows an investment category.
*/

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);         /* 3 equal columns */
    gap: 15px;
    width: 100%;
    max-width: var(--max-width-content);
    overflow: visible;
}

/* Individual grid card */
.grid-item {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition-fast),
                background var(--transition-fast),
                border-color var(--transition-fast);
    cursor: default;
    min-height: 140px;
    max-height: 180px;
    overflow: hidden;
    opacity: 0;                                    /* Starts hidden, animated by GSAP */
}

/* Hover lift effect */
.grid-item:hover {
    background: var(--color-card-hover);
    border-color: var(--color-border-hover);
    transform: translateY(-5px);
}

.grid-icon {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.grid-title {
    font-size: var(--font-size-xl);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.grid-sub {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}


/* ============================================
   13. INVESTMENT GRID (Investments Section)
   ============================================

   4-column grid displaying investment logos.
   Features floating tooltip on hover.
*/

.investment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);         /* 4 equal columns */
    gap: 15px;
    width: 100%;
    max-width: 1200px;
}

.investment-item {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast),
                background var(--transition-fast),
                border-color var(--transition-fast);
    cursor: default;
    opacity: 0;                                    /* Animated in by GSAP */
    position: relative;                            /* For tooltip positioning */
}

.investment-item:hover {
    background: var(--color-card-hover);
    border-color: var(--color-border-hover);
    transform: translateY(-5px);
}

.investment-item .name {
    font-size: var(--font-size-3xl);
    font-weight: 500;
}

.investment-logo {
    width: 48px;
    height: 48px;
}

/* ----------------------
   Floating Tooltip
   ----------------------
   Shows investment name on hover, slides in from right
*/
.investment-item::after {
    content: attr(data-name);                      /* Pulls text from data-name attribute */
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: 1px solid var(--color-border-hover);
    color: var(--color-text);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);                   /* Starts slightly right */
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.investment-item:hover::after {
    opacity: 1;
    transform: translateX(0);
}


/* ============================================
   14. LENDING SECTION
   ============================================

   Two-column layout: text content on left, stablecoin list on right.
*/

.lending-layout {
    display: flex;
    gap: 60px;
    align-items: center;
    width: 100%;
    max-width: var(--max-width-content);
}

.lending-content {
    flex: 1;
    max-width: 600px;
    z-index: 2;                                    /* Above any background elements */
}

.lending-content p {
    font-size: var(--font-size-4xl);
    line-height: 1.8;
    color: var(--color-text-muted);
}

.lending-graphic {
    flex: 1;
    display: flex;
    justify-content: center;
}


/* ============================================
   15. STABLECOIN LIST
   ============================================

   Vertical list showing supported stablecoins.
   Each row has icon, name, and description.
*/

.stablecoin-list {
    display: flex;
    flex-direction: column;
    gap: 0;                                        /* Rows touch each other */
    width: 100%;
    max-width: 400px;
}

.stablecoin-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
    opacity: 0;                                    /* Animated in by GSAP */
}

/* First row also gets top border */
.stablecoin-row:first-child {
    border-top: 1px solid var(--color-border);
}

/* Icon container with dark background */
.stablecoin-icon {
    width: 48px;
    height: 48px;
    background: #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;                                /* Don't shrink on small screens */
}

.stablecoin-icon svg {
    width: 24px;
    height: 24px;
}

.stablecoin-info {
    flex: 1;
}

.stablecoin-name {
    font-size: var(--font-size-xl);
    font-weight: 500;
    margin-bottom: 4px;
}

.stablecoin-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}


/* ============================================
   16. WAVE CANVAS (Footer Background)
   ============================================

   Background animation for the contact section.
   Shows expanding number waves.
*/

#waveCanvas {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}


/* ============================================
   17. CONTACT SECTION
   ============================================

   Footer/contact section styling.
*/

.contact-content {
    z-index: var(--z-content);
    position: relative;
}

.contact-footer {
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
}

.contact-footer-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-dark);
}


/* ============================================
   18. RESPONSIVE - TABLET (max-width: 1024px)
   ============================================

   Adjustments for tablet-sized screens.
   - Show hamburger menu
   - Reduce grid columns
   - Stack lending layout
*/

@media (max-width: 1024px) {
    /* Navigation - tighter padding */
    nav {
        padding: 25px 30px;
    }

    /* Hide desktop nav links */
    .nav-links {
        display: none;
    }

    /* Show hamburger menu */
    .hamburger {
        display: flex;
    }

    /* Sections - less horizontal padding */
    .section {
        padding: var(--section-padding-tablet);
    }

    /* Typography - smaller headings */
    h1 {
        font-size: clamp(2.5rem, 7vw, 4rem);
    }

    h2 {
        font-size: clamp(1.8rem, 5vw, 3rem);
    }

    /* Grids - 2 columns instead of 3/4 */
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* Lending - stack vertically */
    .lending-layout {
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
    }

    .lending-content {
        max-width: 100%;
    }

    .lending-graphic {
        width: 100%;
        justify-content: flex-start;
    }

    .stablecoin-list {
        max-width: 100%;
    }

    /* Contact footer - stack items */
    .contact-footer {
        flex-direction: column;
        gap: 10px;
    }
}


/* ============================================
   19. RESPONSIVE - MOBILE (max-width: 600px)
   ============================================

   Adjustments for mobile phones.
   - Single column grids
   - Horizontal navigation dots at bottom
   - Contact section aligned to top
*/

@media (max-width: 600px) {
    /* Navigation - mobile padding */
    nav {
        padding: var(--nav-padding-mobile);
    }

    /* Sections - minimal horizontal padding */
    .section {
        padding: var(--section-padding-mobile);
    }

    /* Typography - mobile sizes */
    h1 {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
        margin-bottom: var(--spacing-sm);
    }

    h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: var(--spacing-md);
    }

    p {
        font-size: var(--font-size-lg);
        line-height: 1.5;
        margin-bottom: var(--spacing-md);
    }

    /* Hero - reduce space between text and button */
    .hero-sub {
        margin-bottom: var(--spacing-sm);
    }

    /* ----------------------
       Navigation Dots - Horizontal at Bottom
       ----------------------
       Move from right side to bottom center
    */
    #fp-nav {
        right: auto !important;
        left: 50% !important;
        bottom: 20px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
    }

    #fp-nav ul {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px;
    }

    #fp-nav ul li {
        display: inline-block !important;
        margin: 0 !important;
    }

    /* Portfolio Focus grid - single column */
    .grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: var(--spacing-sm);
    }

    .grid-item {
        min-height: 120px;
        max-height: 160px;
        padding: var(--spacing-sm);
    }

    /* Investment grid - keep 2 columns but smaller */
    .investment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .investment-item {
        padding: var(--spacing-md);
    }

    .investment-logo {
        width: 36px;
        height: 36px;
    }

    /* Hide tooltip on mobile (not touch-friendly) */
    .investment-item::after {
        display: none;
    }

    /* Buttons - full width on mobile */
    .btn {
        padding: 14px 28px;
        font-size: 0.8rem;
        width: 100%;
        text-align: center;
    }

    /* Lending - smaller text and icons */
    .lending-content p {
        font-size: var(--font-size-2xl);
    }

    .stablecoin-row {
        gap: 15px;
        padding: 15px 0;
    }

    .stablecoin-icon {
        width: 40px;
        height: 40px;
    }

    .stablecoin-icon svg {
        width: 20px;
        height: 20px;
    }

    .stablecoin-name {
        font-size: var(--font-size-lg);
    }

    .stablecoin-desc {
        font-size: var(--font-size-xs);
    }

    /* Contact section - content at top instead of bottom */
    .section-contact {
        justify-content: flex-start !important;
        padding-top: 100px !important;
        padding-bottom: 20px !important;
    }

    .contact-footer {
        margin-top: 40px;
    }

    /* Section labels - smaller */
    .section-label {
        font-size: 0.65rem;
    }

    /* Intro text - centered and smaller */
    .intro-text {
        font-size: clamp(1.6rem, 10vw, 2.5rem);
        text-align: center;
        width: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .intro-text.hide {
        transform: translate(-50%, -70%);
    }
}


/* ============================================
   20. RESPONSIVE - SMALL MOBILE (max-width: 400px)
   ============================================

   Fine-tuning for very small screens (iPhone SE, etc.)
*/

@media (max-width: 400px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .investment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .investment-item {
        padding: var(--spacing-sm);
    }

    .investment-logo {
        width: 32px;
        height: 32px;
    }

    .mobile-menu-item {
        font-size: 1.5rem;
        padding: 0.8rem 1.5rem;
    }
}


/* ============================================
   21. UTILITY CLASSES
   ============================================

   Helper classes for common patterns.
*/

/* Screen reader only content - hidden visually but accessible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
}