/* =============================================================
   COMPONENT STYLES
   ─────────────────────────────────────────────────────────────
   Architecture:
     • Each component block is self-contained with its responsive
       overrides placed immediately BELOW it (not in a global
       breakpoint block at the bottom). This prevents specificity
       conflicts and duplication.

   Flex / Grid Cheat-Sheet (reference for future edits)
   ─────────────────────────────────────────────────────────────
   Flex key properties used across this file:
     • display: flex             → activates flex context
     • flex-direction: row|column → main-axis direction
     • flex-wrap: wrap           → items wrap if they overflow
     • align-items: center|flex-start|stretch
                                 → cross-axis alignment
     • justify-content: space-between|center|flex-start
                                 → main-axis distribution
     • gap: <value>              → consistent spacing (replaces margin hacks)
     • flex: 1                   → shorthand for flex-grow:1 flex-shrink:1
     • flex-shrink: 0            → prevent item from shrinking below min-content
     • min-width: 0              → CRITICAL on flex children to allow text
                                   truncation / wrapping inside flex rows

   Mobile-first responsive strategy:
     • Styles are written for MOBILE first (no breakpoint)
     • min-width breakpoints add complexity for larger screens
     • Exception: components that must collapse ON mobile use
       max-width media queries (e.g. navbar, two-col → single-col)

   Breakpoints in use:
     @media (max-width: 1024px)  → Tablet / small laptop
     @media (max-width: 768px)   → Phablet / landscape phone
     @media (max-width: 480px)   → Standard mobile (most common)
     @media (max-width: 375px)   → Small phone (iPhone SE etc.)
     @media (max-width: 320px)   → Ultra-small (legacy devices)
   ============================================================= */


/* ─────────────────────────────────────────────
   1. ACCESSIBILITY & TACTILE FEEDBACK
   ───────────────────────────────────────────── */

/*
  Focus ring — shown only on keyboard navigation (Tab).
  Matches the new brand palette and provides high visibility.
*/
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 4px;
    box-shadow: 0 0 0 10px rgba(var(--color-accent-rgb), 0.1);
    transition: outline-offset 0.15s var(--ease-out-expo), box-shadow 0.15s var(--ease-out-expo);
}

/* Hide focus ring on mouse click for cleaner UI */
.using-mouse :focus {
    outline: none !important;
}

/* Shortcut Feedback Toast */
#shortcut-feedback {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 24px;
    border-radius: 40px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    font-size: 0.9rem;
    color: var(--text-heading);
    opacity: 0;
    transition: transform 0.4s var(--ease-out-expo), opacity 0.4s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

#shortcut-feedback.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

#shortcut-feedback strong {
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
}

/* Active press state — tactile feedback */
.btn:active,
button:active {
    transform: scale(0.96) translateY(1px);
    transition: transform 0.1s var(--ease-out-expo);
}

/* Skip-to-content link — Essential for WCAG 2.1 Accessibility */
.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 14px 28px;
    z-index: 10001;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
    border-radius: 0 0 20px 20px;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    white-space: nowrap;
    /* Visually hidden but accessible to screen readers */
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    transform: translateX(-50%) translateY(15px);
    /* Align with floating navbar top */
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
}


/* ─────────────────────────────────────────────
   2. NAVBAR
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   2. NAVBAR
   ─────────────────────────────────────────────
   Layout: fixed bar at top of viewport.
     .navbar        → full-width fixed container with glass blur
     .nav-content   → flex row: logo | [spacer] | links + hamburger
     .nav-logo      → flex row: logo image + brand name text
     .nav-links     → flex row on desktop / off-screen drawer on mobile
     .mobile-menu-btn → hamburger icon, visible only on ≤ 768px
     .mobile-close-btn → close bar inside the drawer
     .mobile-overlay  → semi-transparent backdrop when drawer is open

   Mobile drawer:
     The UL (.nav-links) slides in from the right using
     CSS transition on the `right` property (right: -110% → right: 0).
     The .active class is toggled by UI.toggleMobileMenu() in ui.js.
   ───────────────────────────────────────────── */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 85px;
    /* Industry standard for premium hero headers */
    display: flex;
    align-items: center;
    z-index: 1000;
    background: var(--bg-nav);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    /* Elevation for "floating" feel */
    transition:
        background var(--transition-smooth),
        height var(--transition-snappy),
        box-shadow var(--transition-snappy);
}

/*
  .scrolled is added by main.js once the user scrolls > 50px.
  Effect: deepens glass-blur, compresses padding, adds bottom shadow.
  This gives the "sticky header locks in" visual cue.
*/
.navbar.scrolled {
    background: var(--bg-nav);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    height: 70px;
    /* Compress slightly on scroll */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .navbar.scrolled {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 12px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-heading);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-logo img {
    height: 32px;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-links a.nav-link {
    color: var(--text-heading);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 5px 0;
    position: relative;
    white-space: nowrap;
}

.nav-links .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
    border-radius: 2px;
}

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

.nav-links .nav-link.active {
    color: var(--color-primary);
}

[data-theme="dark"] .nav-links .nav-link.active {
    color: white;
}

.nav-btn {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
}

.nav-btn:hover {
    background-color: var(--color-primary);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .nav-btn {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

[data-theme="dark"] .nav-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-primary) !important;
}

/* Theme toggle */
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-primary);
    padding: 8px;
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure hit target is at least 44px */
    min-width: 44px;
    min-height: 44px;
}

[data-theme="dark"] #theme-toggle {
    color: var(--color-accent);
}

#theme-toggle:hover {
    transform: rotate(15deg) scale(1.1);
}

/* Mobile hamburger — visible only on ≤768px, hidden on desktop */
.mobile-menu-btn {
    /* Hidden on desktop; shown via the @media block below */
    display: none;
    background: none;
    border: none;
    font-size: 1.7rem;
    color: var(--text-heading);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 8px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    transition: var(--transition-snappy);
}

/* Close ✕ button — floats above the drawer, hidden on desktop */
.mobile-close-btn {
    display: none;
}

/* Overlay backdrop */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 998;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--ease-out-expo);
}

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

/* Tablet: shrink gaps */
@media (max-width: 1024px) {
    .nav-links {
        gap: 15px;
    }

    .nav-logo {
        font-size: 1.3rem;
    }

    .nav-btn {
        padding: 6px 12px;
    }
}

/* Mobile: slide-in drawer */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*
     * MOBILE SIDEBAR DRAWER
     * ─────────────────────────────────────────────────────────────
     * KEY FIX: Use transform:translateX(100%) instead of right:-110%.
     *
     * Why this matters:
     *   - `right: -110%` moves the element OUT of the viewport by
     *     setting it relative to its own width. BUT it still occupies
     *     layout space and can extend the HTML scroll-width, causing
     *     the horizontal scrollbar / "cut-off content" bug seen in the
     *     screenshot (especially on iOS/Android).
     *
     *   - `transform: translateX(100%)` shifts the element fully to
     *     the right using the GPU compositor. Transformed elements
     *     are painted on their own layers and do NOT affect the
     *     document's layout flow or scroll boundaries.
     *
     * The drawer is pinned to the RIGHT edge (right:0) so translateX(100%)
     * pushes it exactly one drawer-width beyond the viewport.
     * translateX(0) snaps it back in — no jitter, no layout impact.
     * ─────────────────────────────────────────────────────────────
     */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        /* anchor to right edge */
        transform: translateX(100%);
        /* start: hidden off-screen to the right */
        width: 82vw;
        max-width: 340px;
        height: 100dvh;
        /* Rich glassmorphism panel */
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 env(safe-area-inset-bottom, 24px) 0;
        box-shadow:
            -2px 0 0 rgba(var(--color-accent-rgb), 0.25),
            -8px 0 40px rgba(0, 0, 0, 0.25),
            -32px 0 80px rgba(0, 0, 0, 0.12);
        /* Transition ONLY transform for GPU perf — border-radius kept for polish */
        transition: transform 0.42s var(--ease-out-expo);
        z-index: 1001;
        gap: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        border-left: 2px solid rgba(var(--color-accent-rgb), 0.2);
        border-radius: 0 0 0 20px;
        will-change: transform;
    }

    [data-theme="dark"] .nav-links {
        background: rgba(5, 26, 45, 0.96);
        border-left-color: rgba(var(--color-accent-rgb), 0.35);
        box-shadow:
            -2px 0 0 rgba(var(--color-accent-rgb), 0.3),
            -8px 0 40px rgba(0, 0, 0, 0.5),
            -32px 0 80px rgba(0, 0, 0, 0.3);
    }

    /* Open state: slide in */
    .nav-links.active {
        transform: translateX(0);
    }

    /* Each nav item */
    .nav-links li {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
        padding: 0;
        list-style: none;
    }

    .nav-links li:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    /* Hide the close <li> border */
    .nav-links li.mobile-close-btn {
        border-bottom: 1px solid var(--border-color);
        padding: 0;
        flex-shrink: 0;
    }

    /* Nav link items */
    .nav-links a.nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 17px 28px;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-heading);
        border: none;
        border-left: 3px solid transparent;
        transition:
            background var(--transition-snappy),
            color var(--transition-snappy),
            border-color var(--transition-snappy);
    }

    .nav-links a.nav-link:hover {
        color: var(--color-accent);
        background: rgba(var(--color-accent-rgb), 0.06);
        border-left-color: rgba(var(--color-accent-rgb), 0.4);
    }

    .nav-links a.nav-link.active {
        color: var(--color-accent);
        background: rgba(var(--color-accent-rgb), 0.1);
        border-left-color: var(--color-accent);
        font-weight: 700;
    }

    .nav-links a.nav-btn {
        display: block;
        margin: 20px 24px 0;
        width: calc(100% - 48px);
        text-align: center;
        padding: 14px 20px;
        font-size: 1rem;
        border-radius: 10px;
        background: var(--color-primary);
        color: white !important;
        border: none;
    }

    [data-theme="dark"] .nav-links a.nav-btn {
        background: var(--color-accent);
        color: var(--color-primary) !important;
    }

    /* Theme toggle adjustment */
    .nav-right {
        gap: 10px;
    }

    /* Mobile drawer tweaks */
    #theme-toggle {
        margin-left: 0;
    }

    /* ── The close bar — pinned to top of drawer ── */
    .mobile-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 68px;
        padding: 0 20px 0 24px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        cursor: pointer;
        z-index: 2;
        user-select: none;
        flex-shrink: 0;
    }

    [data-theme="dark"] .mobile-close-btn {
        background: rgba(5, 26, 45, 0.98);
    }

    .mobile-close-btn .close-label {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1rem;
        color: var(--text-heading);
        letter-spacing: 0.3px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Accent dot before the label */
    .mobile-close-btn .close-label::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-accent);
        flex-shrink: 0;
    }

    .mobile-close-btn i {
        font-size: 1.1rem;
        color: var(--text-muted);
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--bg-light);
        border: 1px solid var(--border-color);
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        flex-shrink: 0;
    }

    .mobile-close-btn:hover i,
    .mobile-close-btn:active i {
        background: var(--color-accent);
        color: white;
        border-color: var(--color-accent);
    }

    /* Overlay z-index must be BELOW the drawer (1001) but ABOVE page content */
    .mobile-overlay {
        z-index: 1000;
    }
}


/* ─────────────────────────────────────────────
   3. HERO SECTION
   ─────────────────────────────────────────────
   Background: static background.jpg centred and covered.
   The dark gradient overlay ensures text stays readable
   regardless of which part of the image shows at each
   viewport size.

   Background-position per breakpoint:
     Desktop  → center center (default, shows full scene)
     Tablet   → center center (same, image is wide enough)
     Mobile   → top center   (crops from top so the main
                               subject doesn't get lost at
                               the bottom of a portrait crop)

   background-attachment: fixed creates a subtle parallax
   effect on desktop. Disabled on mobile because iOS Safari
   has a known bug where fixed backgrounds render incorrectly
   inside flex/scroll containers (appears zoomed / misaligned).
   ───────────────────────────────────────────── */

.hero-section {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;

    /*
      Layer order (bottom → top):
        1. background.jpg — fills the entire section
        2. gradient overlay — darkens image so white text is readable
      background-size: cover  → always fills width AND height, crops excess
      background-position: center center → keeps the focal point centred
      background-repeat: no-repeat → prevents tiling on huge screens
      background-attachment: fixed → subtle parallax scroll on desktop
    */
    background:
        linear-gradient(160deg,
            rgba(12, 45, 72, 0.78) 0%,
            rgba(8, 32, 50, 0.90) 100%),
        url('../assets/images/background.jpg') center center / cover no-repeat fixed;

    padding-top: 88px;
    /* navbar height + breathing room */
    padding-bottom: 56px;
    text-align: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.hero-title {
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    color: white;
    line-height: 1.15;
    margin-bottom: 20px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.hero-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.95rem, 2.5vw, 1.18rem);
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
}

.hero-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.hero-row.tertiary-row {
    margin-top: 8px;
}

.btn-hero {
    background-color: var(--color-accent);
    color: var(--color-primary);
    border: 2px solid var(--color-accent);
    min-width: 200px;
    padding: 16px 36px;
    font-weight: 700;
}

.btn-hero:hover {
    background-color: white;
    border-color: white;
    color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    .hero-section {
        /* Slightly lighter overlay — image crops less at tablet width */
        background:
            linear-gradient(160deg,
                rgba(12, 45, 72, 0.75) 0%,
                rgba(8, 32, 50, 0.88) 100%),
            url('../assets/images/background.jpg') center center / cover no-repeat fixed;
        min-height: 88vh;
        padding-top: 84px;
        padding-bottom: 48px;
    }
}

/* ── Phablet / Landscape mobile (≤ 768px) ── */
@media (max-width: 768px) {
    .hero-section {
        /*
          Switch background-attachment from fixed → scroll.
          iOS Safari renders position:fixed backgrounds incorrectly
          inside flex containers (blurry zoom effect).
          Switching to scroll fixes this on all mobile browsers.

          background-position: top center — on portrait phones the
          image is narrower so we anchor to the top to preserve the
          most important part of the scene.
        */
        background:
            linear-gradient(160deg,
                rgba(12, 45, 72, 0.82) 0%,
                rgba(8, 32, 50, 0.93) 100%),
            url('../assets/images/background.jpg') top center / cover no-repeat scroll;
        min-height: 85vh;
        padding-top: 80px;
        padding-bottom: 44px;
    }

    .hero-buttons {
        gap: 20px;
    }

    .hero-row {
        gap: 15px;
    }

    .btn-hero {
        min-width: 160px;
        padding: 14px 28px;
        flex: 1;
        max-width: 240px;
    }
}

.btn-resources {
    background-color: white;
    color: var(--color-primary);
    border: 2px solid white;
    min-width: 200px;
    padding: 16px 36px;
    font-weight: 700;
}

.btn-resources:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ── Standard mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .hero-section {
        /*
          Slightly darker overlay on small phones — the image
          is heavily cropped in portrait so more darkness helps
          text contrast. Position shifts to 30% from top so a
          typical landscape photo shows its mid/upper portion.
        */
        background:
            linear-gradient(180deg,
                rgba(8, 30, 50, 0.85) 0%,
                rgba(8, 32, 50, 0.95) 100%),
            url('../assets/images/background.jpg') 30% top / cover no-repeat scroll;
        min-height: 82vh;
        padding-top: 72px;
        padding-bottom: 40px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-content {
        padding: 0 16px;
    }
}

/* ── Tiny phones (≤ 375px) ── */
@media (max-width: 375px) {
    .hero-section {
        min-height: 78vh;
        padding-top: 68px;
        padding-bottom: 36px;
    }

    .hero-title {
        font-size: clamp(1.7rem, 8vw, 2.2rem);
    }
}


/* ─────────────────────────────────────────────
   4. BUTTONS
   ───────────────────────────────────────────── */

/*
  Shimmer Effect
  ─────────────────────────────────────────────
  A bright diagonal highlight sweeps across the button on hover.
  Implementation: pseudo-element with a 30deg white gradient,
  animated via translateX from -100% to +150%.
  overflow:hidden on .btn clips the pseudo-element to the button shape.
*/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
    border: 2px solid transparent;
    /* min-height satisfies 44px touch-target standard on mobile */
    min-height: 48px;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* Boost specificity so transition beats the global * rule */
    isolation: isolate;
}

/* Shimmer pseudo-element — animated on .btn:hover */
.btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.28) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    /* Start off-screen left; transition moves it to off-screen right */
    transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.btn:hover::after {
    left: 150%;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background-color: white;
    border-color: white;
    color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.8);
}

.btn-secondary:hover {
    background-color: white;
    color: var(--color-primary);
    border-color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/*
  LIGHT BACKGROUND CONTEXT OVERRIDE
  ─────────────────────────────────────────────
  .btn-secondary is designed for DARK backgrounds (hero, CTA dark sections).
  When it appears inside .bg-light (e.g. the Why Choose Us / Core Values
  section), white text and white border become invisible against the
  light-grey surface. This override re-colours it for that context.

  The same applies to dark-mode .bg-light (which uses a dark card bg),
  where the accent-coloured variant looks better.
*/
.bg-light .btn-secondary,
.section-light .btn-secondary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

.bg-light .btn-secondary:hover,
.section-light .btn-secondary:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(12, 45, 72, 0.2);
}

[data-theme="dark"] .bg-light .btn-secondary,
[data-theme="dark"] .section-light .btn-secondary {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

[data-theme="dark"] .bg-light .btn-secondary:hover,
[data-theme="dark"] .section-light .btn-secondary:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

/*
  .btn-outline — explicit variant for use on ANY light background.
  Same as the context-aware override above, but can be applied directly
  to a button anywhere in a light section without relying on ancestor class.
  Usage: <a class="btn btn-outline"> instead of btn-secondary on light bg.
*/
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(12, 45, 72, 0.2);
}

[data-theme="dark"] .btn-outline {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

[data-theme="dark"] .btn-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.white-btn {
    background-color: white;
    color: var(--color-primary);
    border-color: white;
}

.white-btn:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: translateY(-3px);
}

/* Services page — outlined on light bg */
.see-more-btn {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background: transparent;
}

.see-more-btn:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(12, 45, 72, 0.2);
}

[data-theme="dark"] .see-more-btn {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

[data-theme="dark"] .see-more-btn:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
}


/* ─────────────────────────────────────────────
   5. SECTION HEADERS & LAYOUT HELPERS
   ─────────────────────────────────────────────
   .section-header  → centred label/title block above content areas
   .subheading      → small uppercase accent label above main heading
   .title-main      → fluid h2 sizing via clamp()
   .two-col-layout  → responsive 2→1 column grid for side-by-side content
   .bg-light        → utility class to apply the light-section background
   ───────────────────────────────────────────── */

.section-header {
    text-align: center;
    margin-bottom: 56px;
}

@media (max-width: 480px) {
    .section-header {
        margin-bottom: 36px;
    }
}

.subheading {
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 10px;
}

.title-main {
    /*
      clamp(min, preferred, max):
        1.6rem  → minimum size on very small screens
        4vw     → scales with viewport width
        2.5rem  → capped at 2.5rem on large screens
    */
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    word-break: break-word;
    overflow-wrap: break-word;
}

.bg-light {
    background-color: var(--bg-light);
}

/*
  Two-column grid used across multiple sections (Why Choose Us, About).
  Grid layout:
    • 1fr 1fr  → two equal columns on desktop
    • Collapses to 1fr (single column) at ≤ 768px
  Gap: manages spacing between columns and rows.
*/
.two-col-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    /* Prevent grid from exceeding its container */
    width: 100%;
}

@media (max-width: 768px) {
    .two-col-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .two-col-layout {
        gap: 28px;
    }
}


/* ─────────────────────────────────────────────
   6. SERVICE CARDS (Homepage teaser grid)
   ─────────────────────────────────────────────
   Grid layout:
     • auto-fill + minmax(280px, 1fr) → responsive columns that
       automatically fit as many 280px+ columns as the available
       width allows. The grid collapses to 1 column below ~580px.
     • gap: 28px → uniform gutter between all grid cells

   Mobile: explicit single-column grid to guarantee predictable
   layout and correctly-sized cards on narrow viewports.
   ───────────────────────────────────────────── */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
    /* Prevent grid from overflowing its container */
    width: 100%;
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
        /* Single column stacks cards for better readability */
        gap: 16px;
    }
}

/*
  Container Query — .service-card responds to its own container width,
  not the viewport. This makes the card look right in any layout context.
  (sidebar, modal, full-width grid, etc.)
*/
.service-card {
    container-type: inline-size;
    container-name: service-card;
    background-color: var(--bg-card);
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px var(--shadow-color), 0 4px 6px rgba(0, 0, 0, 0.05);
    /*
      Micro-interaction: lift + deeper shadow on hover.
      cubic-bezier gives a slight bounce feel.
    */
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    /* Clip the shimmer effect of child icons */
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--color-accent);
}

.service-card:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(58, 190, 249, 0.18);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition:
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        background 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
    border: 1px solid var(--border-color);
    /* Prevent shrinking by parent flexbox */
    flex-shrink: 0;
}

.service-card:hover .service-icon {
    transform: translateY(-6px) scale(1.12) rotate(-3deg);
    background: white;
    color: var(--color-primary);
    box-shadow: 0 15px 30px rgba(58, 190, 249, 0.3);
    border-color: var(--color-accent);
}

.card-title {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: var(--text-heading);
}

.card-desc {
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.card-link {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    /* Ensure at least 44px tap target height */
    min-height: 44px;
    padding: 4px 0;
}

.card-link i {
    transition: transform 0.3s ease;
}

.card-link:hover i {
    transform: translateX(6px);
    color: var(--color-accent);
}

[data-theme="dark"] .card-link {
    color: var(--color-accent);
}


/* ─────────────────────────────────────────────
   7. WHY CHOOSE US
   ───────────────────────────────────────────── */

.benefit-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
    /* Subtle hover lift on the whole benefit row */
    transition: transform 0.3s ease;
    padding: 12px;
    border-radius: var(--border-radius);
}

.benefit-item:hover {
    transform: translateX(6px);
}

.icon-circle {
    width: 50px;
    height: 50px;
    /* Minimum touch target even though it's decorative */
    min-width: 50px;
    min-height: 50px;
    background-color: rgba(58, 190, 249, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 1.2rem;
    flex-shrink: 0;
    transition:
        background-color 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.benefit-item:hover .icon-circle {
    background-color: var(--color-accent);
    color: white;
    transform: scale(1.15) rotate(8deg);
}

@media (max-width: 480px) {
    .benefit-item {
        gap: 14px;
        margin-bottom: 22px;
        padding: 8px;
    }
}


/* ─────────────────────────────────────────────
   8. CTA SECTION :: "Ready to Level Up?"
   ─────────────────────────────────────────────
   Full-width dark-primary banner centred text + single CTA button.
   Responsive strategy:
     Desktop  (> 768px) : 80px top/bottom padding, large fluid text
     Tablet   (≤ 768px) : 64px, slightly smaller font
     Mobile   (≤ 480px) : 48px, stack layout, tighter text
     Tiny     (≤ 375px) : 40px, minimum font floor
   Typography uses clamp() throughout so text never snaps awkwardly
   at a single breakpoint.
   ───────────────────────────────────────────── */

.cta-section {
    background-color: var(--color-primary);
    color: white;
    text-align: center;
    padding: 80px 0;
    /* Safety: prevent any child from overflowing horizontally */
    overflow: hidden;
}

/*
  .cta-content sits inside .container which adds horizontal padding
  (24px min). These rules add the vertical spacing and cap the
  readable line length.
*/
.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/*
  Accent pill label above the main CTA heading.
  Mirrors .subheading from other sections but inverted for the dark bg.
*/
/* .cta-label removed as it's now merged into the main heading */

/* Ensure icon inside btn has a small gap from text */
.cta-section .btn i {
    margin-left: 8px;
    font-size: 0.85em;
    transition: transform 0.3s ease;
}

.cta-section .btn:hover i {
    transform: translateX(4px);
}

.cta-content h2,
.cta-merged-title {
    color: white;
    /*
      Enhanced Fluid heading:
        1.8rem  → floor on tiny phones
        7vw     → aggressive scaling
        3.8rem  → bold, modern maximum
    */
    font-size: clamp(1.8rem, 7vw, 3.8rem);
    font-weight: 800;
    /* Extra bold for impact */
    margin-bottom: 24px;
    line-height: 1.1;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -1px;
}

.cta-merged-title span {
    color: var(--color-accent);
    display: block;
    font-size: 0.8em;
    margin-top: 10px;
    letter-spacing: 0px;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 32px;
    /*
      Fluid body text:
        0.95rem → floor
        2.5vw   → scales
        1.12rem → cap
    */
    font-size: clamp(0.95rem, 2.5vw, 1.12rem);
    max-width: 560px;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Tablet — tighten vertical padding slightly */
@media (max-width: 768px) {
    .cta-section {
        padding: 64px 0;
    }

    .cta-content h2 {
        margin-bottom: 14px;
    }

    .cta-content p {
        margin-bottom: 28px;
    }
}

/* Standard Mobile — tighter padding + narrower text cap */
@media (max-width: 480px) {
    .cta-section {
        padding: 48px 0;
    }

    .cta-content h2 {
        font-size: clamp(1.5rem, 7vw, 1.9rem);
        margin-bottom: 12px;
    }

    .cta-content p {
        font-size: 0.97rem;
        margin-bottom: 24px;
        /* Slightly narrower cap so text doesn’t run edge-to-edge */
        max-width: 92%;
    }

    /* Button stretches to comfortable tap width on mobile */
    .cta-section .btn {
        width: min(100%, 300px);
    }
}

/* Tiny phones — floor padding */
@media (max-width: 375px) {
    .cta-section {
        padding: 40px 0;
    }

    .cta-content h2 {
        font-size: 1.45rem;
    }

    .cta-section .btn {
        width: 100%;
    }
}

/* ── CTA Marquee — Scrolling bottom row ── */
.cta-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 24px 0 10px;
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee-content {
    display: inline-block;
    animation: marquee 80s linear infinite;
    opacity: 0.15;
    /* Minimal and reduced opacity as requested */
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
    letter-spacing: 3px;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

.marquee-content span {
    padding-right: 20px;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Catalogue CTA — Distributed on Services Page ── */
.catalogue-cta {
    margin: 25px 0;
    text-align: center;
}

.btn-catalogue {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.4s var(--ease-out-expo);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* On page-header (Dark 배경) */
.page-header .btn-catalogue {
    background: rgba(255, 255, 255, 0.1);
}

/* On services-footer-cta (Light/Variable 배경) */
.services-footer-cta .btn-catalogue {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

[data-theme="dark"] .services-footer-cta .btn-catalogue {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.btn-catalogue:hover {
    background: white !important;
    color: var(--color-primary) !important;
    border-color: white !important;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.btn-catalogue i:first-child {
    color: #25D366;
    /* WhatsApp Green */
    font-size: 1.15rem;
}

.btn-catalogue:hover i:first-child {
    color: var(--color-primary);
}

.btn-catalogue i:last-child {
    font-size: 0.75rem;
    opacity: 0.6;
}

.services-footer-cta {
    margin-top: 80px;
    padding: 50px 30px;
    text-align: center;
    background: var(--bg-light);
    border-radius: 20px;
    border: 1px dashed var(--border-color);
}

.services-footer-cta p {
    margin-bottom: 25px;
    color: var(--text-main);
    font-size: 1.2rem;
    font-weight: 600;
}


/* ─────────────────────────────────────────────
   9. FOOTER
   ───────────────────────────────────────────── */

#footer-container {
    background-color: #082032;
    color: white;
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h3 {
    color: white;
    margin-bottom: 20px;
}

.footer-col h4 {
    color: var(--color-accent);
    margin-bottom: 16px;
    font-size: 1rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    padding-top: 20px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    #footer-container {
        padding: 44px 0 20px;
    }
}

@media (max-width: 480px) {
    .footer-socials a {
        font-size: 1.4rem !important;
    }
}


/* ─────────────────────────────────────────────
   10. PAGE HEADER (Inner pages banner)
   Layout: full-width coloured banner, text centred.
   The inner .container restricts text width and provides
   horizontal padding so text never touches viewport edges.
   ───────────────────────────────────────────── */
.page-header {
    background-color: var(--color-primary);
    color: white;
    padding: 120px 0 60px;
    text-align: center;
    /* Clip any accidental overflow from child text nodes */
    overflow: hidden;
}

/* Note: .page-header .container inherits padding: 0 24px and max-width
   from the global .container rule in global.css — no overrides needed here. */

.page-header h1 {
    color: white;
    margin-bottom: 10px;
    font-size: clamp(1.6rem, 5vw, 2.5rem);
    /* Wrap long words on very narrow screens */
    word-break: break-word;
    overflow-wrap: break-word;
}

.page-header p {
    opacity: 0.8;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    /* Prevent ultra-wide paragraphs on large screens */
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    /* Ensure long words wrap instead of overflowing */
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .page-header {
        padding: 100px 0 44px;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 90px 0 36px;
    }
}


/* ─────────────────────────────────────────────
   11. FULL SERVICES LIST (services.html rows)
   ─────────────────────────────────────────────
   Flex layout: alternating left/right rows
     .service-row       → flex row (desktop), column (mobile)
     .service-visual    → fixed-width icon panel (flex: 0 0 360px)
     .service-info      → flexible text column (flex: 1; min-width:0)

   CRITICAL: min-width: 0 on .service-info prevents the text
   column from overflowing its flex parent when content is wide.
   Without it, the browser won't shrink a flex child below its
   intrinsic width, causing right-side bleed on narrow screens.

   CRITICAL: .service-features li uses display:flex + gap for the
   checkmark icon + text layout. The text must have min-width:0
   so that long feature strings wrap correctly on mobile instead
   of pushing the icon completely off-screen.
   ───────────────────────────────────────────── */

.services-wrapper {
    display: flex;
    flex-direction: column;
    gap: 80px;
    /* Ensure inner content never bleeds past the container */
    overflow: hidden;
}

.service-row {
    /* Flex row: icon panel + text column side by side */
    display: flex;
    align-items: center;
    gap: 60px;
    /* Prevent the row itself from exceeding its container */
    min-width: 0;
    width: 100%;
}

.service-visual {
    /*
      flex: 0 0 360px  →  do not grow, do not shrink, start at 360px
      This keeps the icon panel at a fixed width on desktop.
    */
    flex: 0 0 360px;
    align-self: stretch;
    min-height: 350px;
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-size: 5rem;
    color: var(--color-accent);
    box-shadow: 0 10px 30px var(--shadow-color);
    overflow: hidden;
    position: relative;
}

.service-visual img.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.service-info {
    /*
      flex: 1         → grow to fill remaining space
      min-width: 0    → allow shrinking below intrinsic width (ESSENTIAL)
                        Without this, a flex child never shrinks below its
                        largest word, causing overflow on mobile.
    */
    flex: 1;
    min-width: 0;
    /* Safety: clip any text that still overflows (should not normally
       happen, but provides a last-resort guard on tiny viewports) */
    overflow: hidden;
}

.service-info h3 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: 16px;
    color: var(--text-heading);
    /* Allow long heading words to wrap gracefully */
    word-break: break-word;
    overflow-wrap: break-word;
}

.service-info p {
    /* Prevent the description from overflowing on narrow screens */
    word-break: break-word;
    overflow-wrap: break-word;
}

.service-features {
    list-style: none;
    margin-top: 20px;
    padding: 0;
    /* Ensure the entire list stays within its parent */
    width: 100%;
}

.service-features li {
    /*
      Flex row: icon  ←gap→ feature text
      align-items: flex-start keeps the icon pinned to the first
      line of text (important for multi-line items).
    */
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-muted);
    /* Essential: prevent the li row from exceeding the parent width */
    min-width: 0;
    width: 100%;
}

.service-features li i {
    color: var(--color-accent);
    /*
      flex-shrink: 0  → icon never shrinks; it stays fixed-size
      margin-top: 3px → nudge icon down slightly to visually align
                        with the first line of text
    */
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 0.8rem;
    /* Minimum clickable width for accessibility */
    min-width: 14px;
}

/* The text node after the icon must also be able to shrink */
.service-features li span,
.service-features li>*:not(i) {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    .service-visual {
        flex: 0 0 280px;
        min-height: 260px;
    }

    .service-row {
        gap: 40px;
    }
}

/* ── Phablet / Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    .services-wrapper {
        gap: 56px;
    }

    .service-row {
        /*
          Override the JS-injected flex-direction: row / row-reverse
          so all rows stack vertically on mobile.
          !important is needed here because JS sets style="flex-direction:"
          as an inline attribute, which has higher specificity.
        */
        flex-direction: column !important;
        gap: 24px;
        text-align: center;
    }

    .service-features {
        /* On mobile with text-align:center, keep features left-aligned
           for readability and correct icon-text pairing */
        text-align: left;
        /* Constrain to 90% of container width and centre it */
        max-width: 92%;
        margin-left: auto;
        margin-right: auto;
    }

    .service-features li {
        /* Keep icon + text in a row even on mobile */
        justify-content: flex-start;
        text-align: left;
    }

    .service-visual {
        flex: none;
        width: 100%;
        height: 250px;
        align-self: auto;
        font-size: 4rem;
    }
}

/* ── Standard Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .services-wrapper {
        gap: 40px;
    }

    .service-row {
        gap: 16px;
    }

    .service-visual {
        height: 220px;
        font-size: 3rem;
    }

    .service-info h3 {
        font-size: 1.3rem;
    }

    .service-features {
        /* Full width on small phones */
        max-width: 100%;
    }

    .service-features li {
        font-size: 0.92rem;
        gap: 8px;
    }
}


/* ─────────────────────────────────────────────
   12. SERVICE CARDS SLIDER
   ───────────────────────────────────────────── */

.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 100%;
}

/* Fade-out mask on right edge */
.slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 60px;
    width: 60px;
    height: 100%;
    background: linear-gradient(to left, var(--bg-body), transparent);
    pointer-events: none;
    z-index: 1;
}

.slider-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    width: 0;
    /* flexbox overflow trick */
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-card {
    min-width: 300px;
    max-width: 300px;
    scroll-snap-align: start;
    flex-shrink: 0;
}

.slider-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-primary);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    z-index: 2;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.slider-btn:hover {
    background-color: var(--color-accent);
    transform: scale(1.1);
}

[data-theme="dark"] .slider-btn {
    background-color: var(--bg-light);
    color: var(--color-accent);
}

.slider-hint {
    display: none;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 10px;
    animation: bounceRight 2s infinite;
}

@keyframes bounceRight {

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

    50% {
        transform: translateX(5px);
    }
}

@media (max-width: 768px) {
    .slider-btn {
        display: none;
    }

    .slider-hint {
        display: block;
    }

    .slider-container::after {
        right: 0;
    }

    .slider-track {
        gap: 20px;
        padding-right: 20px;
    }

    .slider-card {
        min-width: 260px;
        max-width: 260px;
    }
}

@media (max-width: 480px) {
    .slider-card {
        min-width: min(240px, 80vw);
        max-width: min(240px, 80vw);
    }
}


/* ─────────────────────────────────────────────
   13. PORTFOLIO / PROJECT CARDS
   ───────────────────────────────────────────── */

.portfolio-analytics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

@media (max-width: 480px) {
    .portfolio-analytics {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 28px;
    }

    .stat-number {
        font-size: 1.8rem !important;
    }
}

/* ─── Stat analytics box micro-interaction ─── */
.stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 25px;
    text-align: center;
    border-radius: var(--border-radius);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    box-shadow: 0 4px 10px var(--shadow-color);
}

.stat-box:hover {
    transform: translateY(-6px);
    border-color: var(--color-accent);
    box-shadow: 0 12px 28px rgba(58, 190, 249, 0.15);
}

.stat-number {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 5px;
}

[data-theme="dark"] .stat-number {
    color: var(--color-accent);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 44px;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 10px 22px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
    /* 44px minimum touch target */
    min-height: 44px;
}

.filter-btn:hover {
    transform: translateY(-2px);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .filter-btn.active {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    font-weight: 700;
}

/* Grid — project cards */
.project-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    /*
      Micro-interaction: spring lift on hover.
      cubic-bezier(0.34, 1.56, 0.64, 1) = slight overshoot (spring feel)
    */
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease,
        border-color 0.3s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
    border-color: var(--color-accent);
}

.card-content-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-image {
    /*
      aspect-ratio prevents CLS (Cumulative Layout Shift) while the image loads.
      The browser reserves the correct height before paint, so the page doesn't
      jump. The explicit height is dropped so aspect-ratio controls it.
    */
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-light);
    flex-shrink: 0;
}

.project-image img {
    width: 100%;
    height: 100%;
    /*
      object-fit: cover scales the image to fill the container
      without distorting aspect ratio — crops edges instead.
      object-position: center centres the crop.
    */
    object-fit: cover;
    object-position: center;
    /* max-width guard (belt-and-suspenders) */
    max-width: 100%;
    transition: transform 0.6s ease;
    /* aspect-ratio on parent means no explicit height needed here */
    display: block;
}

.project-card:hover .project-image img {
    transform: scale(1.08);
}

.project-info {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.project-info h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.project-info p {
    color: var(--text-muted);
    font-size: 0.93rem;
    margin-bottom: 16px;
    flex-grow: 1;
}

.project-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

.badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .badge {
    background: rgba(0, 0, 0, 0.75);
    color: var(--color-accent);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.project-rating {
    color: #ffc107;
    font-size: 0.8rem;
}

.project-stats-row {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    padding: 10px;
    background: var(--bg-light);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.card-mini-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 80px;
}

.card-mini-stat i {
    color: var(--color-accent);
    font-size: 1.1rem;
}

.card-mini-stat div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.card-mini-stat strong {
    font-size: 0.88rem;
    color: var(--text-heading);
}

.card-mini-stat span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Glassmorphic hover overlay */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 45, 72, 0.88);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 5;
    padding: 20px;
    text-align: center;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-overlay h3 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 5px;
    transform: translateY(16px);
    transition: transform 0.35s ease 0.05s;
}

.project-overlay .project-category {
    color: var(--color-accent);
    text-transform: uppercase;
    font-size: 0.82rem;
    margin-bottom: 16px;
    letter-spacing: 1px;
    font-weight: 600;
    transform: translateY(16px);
    transition: transform 0.35s ease 0.12s;
}

.project-card:hover .project-overlay h3,
.project-card:hover .project-overlay .project-category {
    transform: translateY(0);
}

.btn-overlay {
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    transform: translateY(16px);
    transition: all 0.3s ease 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-overlay:hover {
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.project-card:hover .btn-overlay {
    transform: translateY(0);
}

@media (max-width: 480px) {
    .project-image {
        height: 200px;
    }

    .project-info {
        padding: 16px 18px;
    }
}


/* ─────────────────────────────────────────────
   14. ABOUT PAGE
   ───────────────────────────────────────────── */

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 80px;
}

.about-image-placeholder {
    background-color: var(--bg-light);
    height: 360px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.about-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5; /* Reduced opacity as requested */
    transition: opacity 0.3s ease;
}

.about-image-placeholder .fallback-icon {
    display: none; /* Hidden by default */
    font-size: 5rem;
    color: var(--color-accent);
    opacity: 0.2;
}

.about-image-placeholder.img-error .fallback-icon {
    display: block;
}

.about-image-placeholder.img-error img {
    display: none;
}

.about-text-col .title-main {
    margin-bottom: 24px;
}

.about-text-col .section-desc p {
    margin-bottom: 18px;
    font-size: 1.02rem;
    color: var(--text-muted);
}

.about-divider {
    margin-top: 0;
    padding-top: 80px;
    border-top: 1px solid var(--border-color);
}

.about-divider h3 {
    text-align: center;
    margin-bottom: 48px;
    color: var(--color-primary);
    font-size: clamp(1.4rem, 3vw, 2rem);
}

/* Process grid */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
}

/* process-card styles → moved to section 19 at bottom of this file */



/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.testimonial-box {
    text-align: left;
    padding: 32px;
    background: var(--bg-light);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.testimonial-box p {
    font-style: italic;
    color: var(--text-heading);
    margin-bottom: 18px;
    line-height: 1.6;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
}

.testimonial-author strong {
    color: var(--color-primary);
    font-size: 1rem;
}

.testimonial-author span {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 1024px) {
    .about-layout {
        gap: 48px;
    }

    .about-image-placeholder {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .about-layout {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 56px;
    }

    .about-image-placeholder {
        height: 240px;
        order: -1;
    }

    .about-divider {
        padding-top: 56px;
    }
}

@media (max-width: 480px) {
    .about-layout {
        gap: 24px;
    }

    .about-image-placeholder {
        height: 200px;
    }

    .about-divider {
        padding-top: 36px;
    }

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

    .testimonial-box {
        padding: 22px 18px;
    }
}


/* ─────────────────────────────────────────────
   15. CONTACT PAGE
   ───────────────────────────────────────────── */

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    background: var(--bg-card);
    box-shadow: 0 10px 40px var(--shadow-color);
    border-radius: var(--border-radius);
    padding: 50px;
    border: 1px solid var(--border-color);
}

.contact-info h3 {
    margin-bottom: 14px;
    color: var(--text-heading);
}

.info-desc {
    color: var(--text-muted);
    margin-bottom: 36px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.info-item>div span {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.info-item>div p {
    margin-bottom: 0;
    font-weight: 500;
    color: var(--text-main);
}

.info-item>div a {
    color: var(--color-accent);
}

.info-item i {
    width: 46px;
    height: 46px;
    background-color: var(--bg-light);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.info-item:hover i {
    transform: scale(1.1);
    background-color: var(--color-primary);
    color: white;
}

/* Form */
.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--bg-light);
    color: var(--text-main);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(58, 190, 249, 0.12);
}

/* Valid / invalid feedback */
.form-group input:not(:placeholder-shown):valid,
.form-group textarea:not(:placeholder-shown):valid {
    border-color: #28a745;
}

.form-group input:not(:placeholder-shown):invalid {
    border-color: #dc3545;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {

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

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

@media (max-width: 1024px) {
    .contact-wrapper {
        grid-template-columns: 1fr 1.3fr;
        padding: 40px;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 28px;
    }
}

@media (max-width: 480px) {
    .contact-wrapper {
        padding: 20px;
        gap: 22px;
        border-radius: 6px;
    }
}


/* ─────────────────────────────────────────────
   16. MODAL
   ───────────────────────────────────────────── */

#modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
}

.btn-heart, .btn-share {
    position: absolute;
    top: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
}

.btn-heart { right: 20px; }
.btn-share { right: 60px; } /* Offset if heart exists */

.btn-heart:hover, .btn-share:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    transform: scale(1.1);
}

.btn-heart.active {
    color: #ff3e3e;
    border-color: #ff3e3e;
    background: rgba(255, 62, 62, 0.1);
}

#modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

#service-modal {
    background-color: var(--bg-card);
    width: 94%;
    max-width: 820px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    margin: auto;
    transform: translateY(30px) scale(0.96);
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
}

#modal-overlay.active #service-modal {
    transform: translateY(0) scale(1);
}

.modal-slideshow-container,
.modal-fallback-icon {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%);
    display: flex;
    align-items: center;
    /* justify-content must be flex-start so that translateX(0) starts from the left edge */
    justify-content: flex-start;
}

.modal-fallback-icon {
    flex-direction: column;
    gap: 20px;
}

.modal-fallback-icon i {
    font-size: 8rem;
    color: var(--color-accent);
    filter: drop-shadow(0 0 30px rgba(58, 190, 249, 0.4));
    animation: iconPulse 3s ease-in-out infinite;
}

.modal-fallback-icon::after {
    content: 'Skitech Visual Experience';
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 300;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
        filter: drop-shadow(0 0 20px rgba(58, 190, 249, 0.3));
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
        filter: drop-shadow(0 0 50px rgba(58, 190, 249, 0.6));
    }
}

/* For single items, we bypass some track logic */
.modal-strip-track.single-item {
    justify-content: center !important;
    transform: none !important;
}

.modal-strip-track.single-item .modal-strip-item {
    margin: 0 auto;
}

/* The track that moves */
.modal-strip-track {
    display: flex;
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    /* justify-content: flex-start ensures translateX(0) is at the left edge */
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

/* Individual items in the strip */
.modal-strip-item {
    min-width: 80%;
    /* Takes most of the space but shows edges of others */
    height: 90%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
    opacity: 0.3;
    filter: blur(2px) grayscale(50%);
    transform: scale(0.85);
    z-index: 1;
}

.modal-strip-item.active {
    opacity: 1;
    filter: blur(0) grayscale(0);
    transform: scale(1) rotate(0deg);
    z-index: 5;
}

/* Windmill Animation for fresh active items */
.modal-strip-item.active img {
    animation: slideWindmill 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes slideWindmill {
    from {
        transform: scale(0.9) rotate(-3deg);
        opacity: 0.6;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.modal-strip-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 45px rgba(0, 0, 0, 0.6);
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.modal-strip-item.active img:hover {
    transform: scale(1.02);
}

/* Background "Windmill" crossfade effect */
.modal-banner-blur {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(40px) brightness(0.25);
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.modal-banner-blur.active {
    opacity: 0.6;
}

/* The close X — header of drawer */
.modal-banner-img {
    display: none;
    /* Replaced by filmstrip */
}

/* Redesigned Expand Button */
.btn-expand {
    position: absolute;
    bottom: 25px;
    right: 25px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-expand:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    transform: scale(1.2) rotate(90deg);
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgba(58, 190, 249, 0.4);
}

/* Centered Slide Nav Buttons */
.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 25;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-nav:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
    transform: translateY(-50%) scale(1.15);
}

.slide-nav.prev {
    left: 15px;
}

.slide-nav.next {
    right: 15px;
}

@media (max-width: 768px) {
    .modal-slideshow-container {
        height: 320px;
    }

    .modal-strip-item {
        min-width: 85%;
    }

    .slide-nav {
        width: 40px;
        height: 40px;
    }

    .btn-expand {
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .modal-slideshow-container {
        height: 260px;
    }

    .modal-strip-item {
        min-width: 90%;
    }

    .btn-expand {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .slide-nav {
        display: none;
    }

    /* Hide on tiny screens, use swipe */
}

.slide-nav:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateY(-50%) scale(1.1);
}

.slide-nav.prev {
    left: 10px;
}

.slide-nav.next {
    right: 10px;
}

/* Floating close button */
#modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
}

#modal-close:hover {
    background: white;
    color: var(--color-primary);
    transform: rotate(90deg);
}

/* Modal Content Styles */
.modal-features-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 20px 0 30px;
    padding: 0;
}

.modal-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.modal-features-list li i {
    color: var(--color-accent);
    font-size: 0.8rem;
}

.modal-price-tag {
    background: var(--bg-light);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed var(--border-color);
    margin-top: 30px;
}

.modal-info-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    margin-top: 25px;
    align-items: flex-start;
}

.modal-price-card {
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .modal-price-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(10px);
}

.modal-price-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(100, 108, 255, 0.05), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.modal-price-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px var(--shadow-color);
    border-color: var(--color-accent);
}

.modal-price-card:hover::after {
    transform: translateX(100%);
}

.price-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 12px;
}

.price-val {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.price-footer {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}



.modal-service-addon {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-whatsapp-catalogue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #25D366;
    color: white;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}

.btn-whatsapp-catalogue:hover {
    background: #128C7E;
    transform: scale(1.02);
    color: white;
}

.addon-title {
    font-size: 0.95rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.live-links-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.live-link-item {
    font-size: 0.9rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: var(--bg-light);
    border-radius: 6px;
    transition: all 0.2s ease;
}

[data-theme="dark"] .live-link-item {
    background: rgba(255, 255, 255, 0.05);
}

.live-link-item:hover {
    background: var(--color-accent);
    color: white;
    padding-left: 15px;
}

.addon-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.github-link-icon {
    font-size: 1.8rem;
    color: var(--text-main);
    transition: transform 0.3s ease, color 0.3s ease;
}

.github-link-icon:hover {
    color: var(--color-accent);
    transform: rotate(360deg) scale(1.2);
}

.modal-action-footer {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 600px) {
    .modal-info-grid {
        grid-template-columns: 1fr;
    }
}

.modal-price-tag p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.7;
}

.modal-price-tag strong {
    font-size: 1.2rem;
    color: var(--color-accent);
}

@media (max-width: 480px) {
    .modal-price-tag {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Content area */
.modal-text-content {
    padding: 36px 40px;
}

.modal-title {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    margin-bottom: 15px;
    line-height: 1.1;
    font-weight: 800;
    background: linear-gradient(to right, var(--text-main), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-full-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 35px;
    max-width: 800px;
}

/* Analysis section */
.modal-analysis-section {
    padding: 20px 0;
    margin-bottom: 20px;
    border-top: 1px solid var(--border-color);
}

.metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 14px;
}

@media (min-width: 600px) {
    .metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.metric-item {
    padding: 14px 18px;
    background: var(--bg-light);
    border: none;
    border-left: 4px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
}

.metric-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.metric-info i {
    color: var(--color-primary);
    margin-right: 5px;
}

.metric-info strong {
    font-size: 1.1rem;
    color: var(--color-accent);
}

.progress-bar-container {
    height: 6px;
    background-color: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--color-primary);
    animation: fillProgress 1.5s ease-out forwards;
}

@keyframes fillProgress {
    from {
        width: 0%;
    }

    to {
        width: var(--metric-value);
    }
}

.client-testimonial {
    background: var(--bg-light);
    border-left: 5px solid var(--color-accent);
    padding: 18px 20px;
    margin-top: 20px;
    font-style: italic;
    color: var(--text-heading);
}

.client-testimonial i {
    color: var(--color-accent);
    font-size: 1.1rem;
    margin-right: 8px;
}

.client-testimonial cite {
    display: block;
    margin-top: 10px;
    font-weight: 600;
    font-style: normal;
}

.tech-stack-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.tech-tag {
    background-color: var(--bg-light);
    color: var(--color-primary);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.83rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .tech-tag {
    color: var(--color-accent);
}

/* Modal responsive overhaul */
@media (max-width: 768px) {
    #modal-overlay {
        padding: 15px;
        align-items: center;
        /* Keep centered on tablets */
    }

    #service-modal {
        width: 100%;
        max-height: 94vh;
        border-radius: 14px;
    }

    .modal-text-content {
        padding: 28px 24px;
    }

    .modal-slideshow-container,
    .modal-fallback-icon {
        height: 280px;
    }

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

@media (max-width: 480px) {
    #modal-overlay {
        padding: 0;
        align-items: flex-end;
        /* Bottom sheet style */
    }

    #service-modal {
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
        width: 100%;
        border-bottom: none;
    }

    .modal-text-content {
        padding: 24px 18px 40px;
    }

    .modal-slideshow-container,
    .modal-fallback-icon {
        height: 230px;
    }

    .modal-title {
        font-size: 1.6rem;
    }

    .modal-strip-item {
        min-width: 94%;
        /* Much closer items */
    }

    .slide-nav {
        display: none !important;
        /* Forces swipe usage on mobile */
    }

    .modal-actions .btn {
        width: 100% !important;
    }
}

/* Orientation handling for mobile */
@media (max-height: 450px) and (orientation: landscape) {

    .modal-slideshow-container,
    .modal-fallback-icon {
        height: 160px;
        /* Shorter banners in landscape */
    }

    #service-modal {
        max-height: 100vh;
        border-radius: 0;
    }

    #modal-overlay {
        align-items: flex-start;
    }
}


/* ─────────────────────────────────────────────
   17. LIGHTBOX
   ───────────────────────────────────────────── */

#lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#lightbox-overlay.active {
    opacity: 1;
}

#lightbox-img {
    max-height: 85vh;
    max-width: 90vw;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

#lightbox-overlay.active #lightbox-img {
    transform: scale(1);
}

.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 3rem;
    cursor: pointer;
    padding: 20px;
    transition: color 0.3s ease;
    z-index: 3001;
}

.lightbox-btn:hover {
    color: var(--color-accent);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 3002;
}

.lightbox-close:hover {
    color: #ff4444;
}


/* ─────────────────────────────────────────────
   18. FORM TOAST NOTIFICATION
   ───────────────────────────────────────────── */

#toast-notification {
    visibility: hidden;
    min-width: 280px;
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
    border-radius: 12px;
    padding: 16px 24px;
    position: fixed;
    z-index: 3000;
    left: 50%;
    bottom: -100px; /* Hidden below */
    transform: translateX(-50%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.4s, bottom 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#toast-notification.show {
    visibility: visible;
    opacity: 1;
    bottom: 40px; /* Pops up into view */
}


/* ─────────────────────────────────────────────
   19. OUR JOURNEY INTERACTIVE TIMELINE
   ───────────────────────────────────────────── */

.journey-timeline-wrapper {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

.journey-milestone {
    display: flex;
    gap: 30px;
    margin-bottom: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.milestone-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 40px;
}

.milestone-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-light);
    border: 3px solid var(--color-accent);
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 0 0 rgba(100, 108, 255, 0.4);
}

.journey-milestone.active .milestone-dot {
    background: var(--color-accent);
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(100, 108, 255, 0.2);
}

.journey-milestone.visited .milestone-dot {
    border-color: #25D366;
    /* Success color for completed steps */
}

.milestone-line {
    width: 3px;
    flex-grow: 1;
    background: var(--border-color);
    margin: 5px 0;
    transition: background 0.4s ease;
}

.journey-milestone:last-child .milestone-line {
    display: none;
}

.journey-milestone.visited .milestone-line {
    background: #25D366;
}

.milestone-content {
    flex-grow: 1;
    padding-bottom: 40px;
}

.milestone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

[data-theme="dark"] .milestone-header {
    background: rgba(255, 255, 255, 0.03);
}

.journey-milestone.active .milestone-header {
    border-color: var(--color-accent);
    background: var(--bg-alt);
    transform: translateX(10px);
}

.milestone-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-accent);
    margin-right: 15px;
    opacity: 0.5;
}

.journey-milestone.active .milestone-number {
    opacity: 1;
}

.milestone-header h3 {
    margin: 0;
    font-size: 1.25rem;
    flex-grow: 1;
}

.toggle-icon {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: transform 0.4s ease;
}

.journey-milestone.active .toggle-icon {
    transform: rotate(180deg);
    color: var(--color-accent);
}

.milestone-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.milestone-inner-content {
    padding: 25px 20px;
    line-height: 1.7;
}

.milestone-summary {
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.milestone-details {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ROADMAP PANEL */
.future-roadmap-panel {
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient(135deg, rgba(100, 108, 255, 0.05), rgba(100, 108, 255, 0.1));
    border-left: 4px solid var(--color-accent);
    border-radius: 4px 12px 12px 4px;
    position: relative;
    overflow: hidden;
}

.future-roadmap-panel::before {
    content: "FUTURE";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 3rem;
    font-weight: 900;
    opacity: 0.05;
    color: var(--color-accent);
    transform: rotate(-15deg);
}

.future-roadmap-panel h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-accent);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.roadmap-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.roadmap-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-main);
}

.roadmap-list li i {
    color: #25D366;
    margin-top: 3px;
}

/* Quote Icon for Testimonials */
.quote-icon {
    position: absolute;
    top: -15px;
    right: 20px;
    font-size: 2rem;
    opacity: 0.1;
    color: var(--color-accent);
}

.testimonial-box {
    position: relative;
    padding-top: 30px;
}

@media (max-width: 600px) {
    .milestone-header h3 {
        font-size: 1.1rem;
    }

    .journey-milestone {
        gap: 15px;
    }
}


/* ─────────────────────────────────────────────
   20. SOCIAL ICONS — Touch target enforcement
   ───────────────────────────────────────────── */

/*
  Social icon links in the footer must meet the 44×44px
  minimum touch target size (WCAG 2.5.5).
  We set inline sizes to ensure the hit area is large enough
  on touch devices even if the icon glyph is smaller.
*/
.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-socials a:hover {
    color: var(--color-accent);
    background-color: rgba(58, 190, 249, 0.12);
    transform: translateY(-3px) scale(1.15);
}

@media (max-width: 480px) {
    .footer-socials a {
        /* Slightly larger on small screens */
        min-width: 48px;
        min-height: 48px;
        font-size: 1.4rem;
    }
}

/* ─────────────────────────────────────────────
   20.1 PWA INSTALL BUTTON
   ───────────────────────────────────────────── */
.btn-install {
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 40px;
    color: var(--text-heading);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-snappy);
    width: fit-content;
    box-shadow: var(--shadow-sm);
}

.btn-install i {
    font-size: 0.9rem;
    color: var(--color-accent);
}

.btn-install:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .btn-install {
        margin-top: 20px;
    }
}


/* ─────────────────────────────────────────────
   21. BACK TO TOP BUTTON
   ───────────────────────────────────────────── */
#back-to-top {
    position: fixed;
    bottom: calc(24px + var(--safe-bottom));
    right: calc(24px + var(--safe-right));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-primary);
    border: none;
    cursor: pointer;
    z-index: 990;
    box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.3);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px) scale(0.5);
    pointer-events: none;
    transition:
        opacity 0.4s var(--ease-out-expo),
        transform 0.4s var(--ease-out-expo),
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

#back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#back-to-top:hover {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px) scale(1.1);
}

/* ─────────────────────────────────────────────
   28. PWA STANDALONE POLISH
   ───────────────────────────────────────────── */

/* Adjusting padding for notched displays in standalone mode */
@media (display-mode: standalone) {
    .nav-container {
        padding-top: var(--safe-top);
    }

    footer {
        padding-bottom: calc(var(--section-padding) + var(--safe-bottom));
    }
}

/* Smooth Scroll Optimisation */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Prevent text selection on UI components */
nav,
footer,
button,
.card-header,
.filter-btn {
    user-select: none;
    -webkit-user-select: none;
}


/* ─────────────────────────────────────────────
   22. REDUCED-MOTION OVERRIDES
   Respect prefers-reduced-motion at component level.
   The animations.css already handles .reveal-item;
   these rules disable the shimmer and spring effects
   that live purely in components.css.
   ───────────────────────────────────────────── */

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

    /* Disable button shimmer sweep */
    .btn::after {
        display: none;
    }

    /* Disable spring cubic-bezier bounces */
    .btn,
    .service-card,
    .project-card,
    .stat-box,
    .process-card,
    .filter-btn,
    .icon-circle,
    #back-to-top {
        transition:
            background-color 0.15s ease,
            color 0.15s ease,
            border-color 0.15s ease,
            opacity 0.15s ease !important;
        transform: none !important;
    }

    /* Instant active state */
    :active {
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────
   23. GAMIFIED SERVICE STATISTICS
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   23. GAMIFIED SERVICE STATISTICS (REVAMPED)
   ───────────────────────────────────────────── */

.modal-stats-reveal {
    margin-top: 50px;
    padding: 40px 30px;
    background: var(--bg-alt);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .modal-stats-reveal {
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.service-stat-item {
    background: var(--bg-card);
    padding: 25px 15px;
    border-radius: 18px;
    border: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.service-stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-accent);
    opacity: 0.3;
}

.service-stat-item:hover {
    transform: translateY(-10px);
    border-color: var(--color-accent);
    box-shadow: 0 12px 25px rgba(100, 108, 255, 0.15);
}

.service-stat-item:hover::before {
    opacity: 1;
}

.stat-value-container {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1.5px;
    color: var(--color-accent);
    text-shadow: 0 4px 10px rgba(100, 108, 255, 0.15);
}

.stat-suffix {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-accent);
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-number {
        font-size: 2.2rem;
    }
}

.price-badge {
    position: absolute;
    top: 5px;
    right: -30px;
    background: #25D366;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 18px 30px 4px;
    transform: rotate(45deg);
    width: 140px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-icon-bg {
    position: absolute;
    bottom: -15px;
    right: -15px;
    font-size: 5rem;
    opacity: 0.04;
    color: var(--color-accent);
    transform: rotate(-15deg);
    pointer-events: none;
}

[data-theme="dark"] .stat-icon-bg {
    opacity: 0.1;
}

/* 24. RESOURCES PAGE STYLES */
.resources-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.resources-sub-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 50px;
}

.resources-sub-header .header-text {
    border-left: 4px solid var(--color-accent);
    padding-left: 20px;
}

.resources-sub-header h2 {
    margin-bottom: 5px;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    color: var(--text-heading);
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    transform: translateX(-5px);
}

.resources-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.resources-grid .service-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--border-color);
    padding: 40px 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.resources-grid .service-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px var(--shadow-color);
}

/* Default (Light Mode) Button styles for Tools - Overridden by [data-theme="dark"] if needed */
.resources-grid .btn-primary,
.tool-modal-container .btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, #15456b 100%);
    color: white !important;
    border: none;
    box-shadow: 0 10px 25px rgba(12, 45, 72, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.resources-grid .btn-primary:hover,
.tool-modal-container .btn-primary:hover {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ddb815 100%);
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 30px rgba(251, 210, 24, 0.4);
    color: var(--color-primary) !important;
}

.resources-grid .btn-secondary {
    background: white;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.resources-grid .btn-secondary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(12, 45, 72, 0.2);
}

/* Dark mode overrides for these specific tool buttons */
[data-theme="dark"] .resources-grid .btn-primary,
[data-theme="dark"] .tool-modal-container .btn-primary {
    background: var(--color-accent);
    color: var(--color-primary) !important;
}

[data-theme="dark"] .resources-grid .btn-secondary {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.resources-grid .icon-circle {
    width: 70px;
    height: 70px;
    background: var(--bg-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: var(--color-accent);
    transition: all 0.3s ease;
}

.resources-grid .service-card:hover .icon-circle {
    background: var(--color-accent);
    color: white;
    transform: rotateY(360deg);
}


/* ─────────────────────────────────────────────
   25. TOOL MODAL & PASSWORD GENERATOR
   ───────────────────────────────────────────── */

.tool-modal-container {
    padding: clamp(20px, 5vw, 40px);
    max-width: 800px;
    margin: 0 auto;
}

.tool-header {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tool-header p {
    max-width: 600px;
    line-height: 1.6;
    color: var(--text-muted);
}

.tool-header i {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 15px;
}

.tool-header h2 {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin-bottom: 12px;
    color: var(--text-heading);
    font-weight: 700;
}

.pass-gen-interface {
    background: var(--bg-card);
    padding: clamp(20px, 6vw, 45px);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    width: 100%;
}

[data-theme="dark"] .pass-gen-interface {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
}

.pass-display-box {
    position: relative;
    margin-bottom: 25px;
    width: 100%;
}

#pass-output {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 15px 50px 15px 20px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 1px;
}

.btn-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    color: var(--color-accent);
}

.pass-strength-meter {
    margin-top: 10px;
}

.strength-bar {
    height: 8px;
    background: var(--bg-alt);
    border-radius: 10px;
    width: 0%;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 12px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Range Input Styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: 10px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--bg-card);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

#strength-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.control-group {
    margin-bottom: 20px;
}

.control-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.options-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

.tool-tips-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.tool-tips-section h4 {
    margin-bottom: 20px;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 10px;
}

.tips-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.tips-list li {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tips-list li i {
    color: var(--color-accent);
    margin-top: 3px;
}

@media (max-width: 600px) {

    .options-grid,
    .tips-list {
        grid-template-columns: 1fr;
    }
}

/* 26. RESOURCE TEASER SLIDER (LIGHTWEIGHT & COMPACT) */
#resource-teaser-container {
    padding: 40px 0 20px;
    /* Much shorter row */
}

.resource-slider-container {
    margin-bottom: 10px;
}

.resource-slider-card {
    flex: 0 0 280px;
    /* Smaller, lightweight card */
    text-align: center;
    border-radius: 16px !important;
    padding: 25px 20px !important;
    /* Reduced padding */
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px var(--shadow-color);
}

.resource-slider-card .icon-circle {
    width: 50px;
    /* Smaller icon */
    height: 50px;
    background: var(--bg-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.4rem;
    color: var(--color-accent);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.resource-slider-card:hover .icon-circle {
    background: var(--color-accent);
    color: white;
    transform: rotateY(360deg);
}

.resource-slider-card .card-title {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
}

.resource-slider-card .card-desc {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

.high-contrast-link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

[data-theme="dark"] .high-contrast-link {
    color: var(--color-accent);
}

.high-contrast-link:hover {
    transform: translateX(5px);
    color: var(--color-accent);
}

.small-header {
    margin-bottom: 20px !important;
}

/* 27. DEEP-LINK HIGHLIGHT EFFECT */
.highlight-tool {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 30px var(--color-accent-60), 0 10px 40px var(--shadow-color) !important;
    transform: translateY(-10px) scale(1.02);
    z-index: 10;
    position: relative;
    animation: pulse-highlight 2s infinite;
}

@keyframes pulse-highlight {
    0% {
        box-shadow: 0 0 10px var(--color-accent-40);
    }

    50% {
        box-shadow: 0 0 30px var(--color-accent-60);
    }

    100% {
        box-shadow: 0 0 10px var(--color-accent-40);
    }
}

@media (max-width: 768px) {
    .resource-slider-card {
        flex: 0 0 calc(90% - 20px);
    }
}

/* Technical Guides Disclaimer Styling */
.tech-guides-disclaimer {
    margin-top: 100px;
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.tech-guides-disclaimer p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.8;
    margin: 0;
    letter-spacing: 0.3px;
}

.tech-guides-disclaimer:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.tech-guides-disclaimer strong {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}


/* ─────────────────────────────────────────────
   iOS PWA INSTALL BANNER
   ─────────────────────────────────────────────
   Shown only on iOS Safari when the app is NOT
   already running as a standalone PWA.
   Slides in from the bottom, above the Safari toolbar.
   ───────────────────────────────────────────── */

#ios-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px;
    background: rgba(12, 45, 72, 0.97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(58, 190, 249, 0.35);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(110%);
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
    border-radius: 20px 20px 0 0;
}

#ios-install-banner.visible {
    transform: translateY(0);
}

.ios-banner-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
}

.ios-banner-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ios-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ios-banner-text strong {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-heading);
    display: block;
}

.ios-banner-text span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    line-height: 1.45;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.ios-banner-text span svg {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.ios-banner-text span b {
    color: var(--color-accent);
    font-weight: 600;
}

.ios-banner-close {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    transition: background 0.2s, color 0.2s;
}

.ios-banner-close:hover,
.ios-banner-close:active {
    background: rgba(58, 190, 249, 0.3);
    color: white;
    border-color: var(--color-accent);
}

/* Downward arrow pointing toward Safari's Share button */
.ios-banner-arrow {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.ios-banner-arrow::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(58, 190, 249, 0.6);
}

/* ─────────────────────────────────────────────
   QR STUDIO STYLES
   ───────────────────────────────────────────── */
.qr-studio-interface {
    display: flex;
    gap: 30px;
    margin-top: 25px;
    align-items: flex-start;
}

.qr-preview-container {
    flex: 0 0 240px;
    background: white;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .qr-preview-container {
    background: rgba(255, 255, 255, 0.03);
}

/* Download button: always clearly visible, muted when no QR generated */
.qr-download-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-glass, rgba(255,255,255,0.6));
    color: var(--text-muted);
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Always-visible shadow so it reads clearly in light mode */
    box-shadow: 0 3px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    transition: background 0.35s ease, color 0.35s ease,
                border-color 0.35s ease, box-shadow 0.35s ease,
                transform 0.2s var(--ease-out-expo);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .qr-download-btn {
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 3px 12px rgba(0,0,0,0.30);
}

/* Active state — QR code is ready */
.qr-download-btn.qr-btn-active {
    background: var(--color-primary, #0c2d48);
    color: #ffffff;
    border-color: transparent;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(12,45,72,0.30), 0 2px 6px rgba(12,45,72,0.15);
}

[data-theme="dark"] .qr-download-btn.qr-btn-active {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(var(--color-accent-rgb),0.35);
}

.qr-download-btn.qr-btn-active:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(12,45,72,0.35), 0 4px 8px rgba(12,45,72,0.20);
}

[data-theme="dark"] .qr-download-btn.qr-btn-active:hover {
    box-shadow: 0 10px 28px rgba(var(--color-accent-rgb),0.45);
}

.qr-download-section {
    width: 100%;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qr-size-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qr-size-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.qr-size-select {
    flex: 1;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 600;
}

#qr-result {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 2px dashed var(--border-color);
    transition: border-color 0.3s ease;
}

#qr-result:has(img) {
    border-style: solid;
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

.qr-error-msg {
    color: #e74c3c;
    font-size: 0.8rem;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.qr-error-msg i {
    font-size: 1.5rem;
    opacity: 0.7;
}

[data-theme="dark"] #qr-result {
    background: rgba(255, 255, 255, 0.02);
}

.qr-placeholder {
    font-size: 5rem;
    color: #e2e8f0;
    opacity: 0.5;
}

.qr-controls {
    flex: 1;
    min-width: 0;
}

.qr-options-row {
    display: flex;
    gap: 15px;
}

.qr-option-item {
    flex: 1;
}

.qr-option-item > label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.qr-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.qr-slider-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.qr-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    outline: none;
    cursor: pointer;
    accent-color: var(--color-accent);
}

.qr-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.qr-tabs::-webkit-scrollbar {
    display: none;
}

.qr-tab {
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
    white-space: nowrap;
}

.qr-tab i {
    margin-right: 6px;
}

.qr-tab.active {
    color: var(--color-accent);
}

.qr-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
}

.qr-input-area .input-group label {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 8px;
    color: var(--text-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.input-split-prefix {
    display: flex;
    gap: 0;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.styled-input-prefix {
    background: var(--bg-card);
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--color-accent);
    padding: 0 10px 0 15px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 95px;
    transition: background 0.2s;
}

.styled-input-prefix:hover {
    background: rgba(var(--color-accent-rgb), 0.05);
}

.input-split-prefix .styled-input {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.styled-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.9rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.styled-input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.1);
}

@media (max-width: 768px) {
    .qr-studio-interface {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .qr-preview-container {
        flex: 0 0 auto;
        width: 100%;
        max-width: 280px;
    }
    .qr-controls {
        width: 100%;
    }
}

/* =============================================================
   BLOG SYSTEM STYLES (RESOURCES PAGE)
   ============================================================= */

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.resources-grid .service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 40px 30px;
}

.resources-grid .service-card h3 {
    margin-bottom: 15px;
}

.resources-grid .service-card p {
    margin-bottom: 30px;
    flex-grow: 1; /* Pushes button to bottom */
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.blog-card-image {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    background: #1a202c; /* fallback */
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.08);
}

.blog-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff3e3e;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(255, 62, 62, 0.3);
}

.blog-badge.pulse {
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 62, 62, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 62, 62, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 62, 62, 0); }
}

.blog-card-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.blog-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

.blog-card-excerpt {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(var(--color-accent-rgb), 0.02);
}

.blog-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.blog-heart-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #cbd5e0;
    transition: all 0.3s ease;
}

.blog-heart-btn.active {
    color: #ff3e3e;
    transform: scale(1.2);
}

/* BLOG FILTERS & SEARCH */
.blog-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.blog-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.blog-search-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.blog-search-input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.blog-search-input:focus {
    border-color: var(--color-accent);
}

.blog-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.blog-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 0 10px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    flex: 1;
}

.blog-filters::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

@media (max-width: 992px) {
    .blog-header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .blog-filters {
        width: 100%;
        margin-top: 5px;
    }
}

.blog-filter-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.blog-filter-btn.active {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

.blog-filter-btn:hover:not(.active) {
    background: rgba(var(--color-accent-rgb), 0.1);
}

/* SINGLE POST LAYOUT */
.blog-post-view {
    max-width: 900px;
    margin: 0 auto;
    animation: slideUp 0.5s var(--ease-out-expo);
}

.blog-post-header {
    text-align: center;
    margin-bottom: 40px;
}

.blog-post-cover {
    width: 100%;
    height: 450px;
    border-radius: 20px;
    object-fit: cover;
    margin-bottom: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.blog-post-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 15px 0;
    line-height: 1.1;
    color: var(--text-heading);
}

.blog-post-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.blog-post-content {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--text-main);
}

.blog-post-content p { margin-bottom: 25px; }
.blog-post-content h3 { margin: 45px 0 20px; font-size: 1.8rem; color: var(--color-accent); font-weight: 700; }

.blog-lead {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
    border-left: 5px solid var(--color-accent);
    padding-left: 25px;
    margin-bottom: 40px;
    font-style: italic;
}

.blog-quote {
    background: rgba(var(--color-accent-rgb), 0.05);
    padding: 35px;
    border-radius: 20px;
    font-style: italic;
    font-size: 1.3rem;
    margin: 50px 0;
    text-align: center;
    position: relative;
    border: 1px dashed rgba(var(--color-accent-rgb), 0.3);
}

.blog-resource-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 18px;
    margin: 40px 0;
}

.blog-resource-card i { font-size: 2.5rem; color: var(--color-accent); }

/* INTERACTIVE DEMOS */
.interactive-demo-card {
    background: var(--bg-card);
    border: 2px solid var(--color-accent);
    padding: 30px;
    border-radius: 20px;
    margin: 50px 0;
}

.halation-demo-box {
    height: 140px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    margin-top: 25px;
    font-weight: 700;
    font-size: 1.3rem;
    transition: all 0.5s var(--ease-out-expo);
    border: 1px solid rgba(255,255,255,0.1);
}

.halation-demo-box.light {
    background: #0f172a; /* Deep Navy */
    color: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.2);
}

/* MINIMAL BUTTONS */
.btn-minimal {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-minimal:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3);
}

/* SMART SCROLL PROGRESS */
.scroll-progress-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 8px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    z-index: 1000;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-progress-container.show {
    opacity: 1;
}

.scroll-progress-bar {
    height: 100%;
    background: var(--color-accent);
    width: 0%;
    transition: width 0.1s linear;
}

[data-theme="dark"] .scroll-progress-container {
    background: rgba(255,255,255,0.1);
}



/* REUSABLE POST COMPONENTS */
.blog-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.stat-item {
    background: var(--bg-card);
    padding: 25px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 1px;
}

.blog-infographic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 40px;
    background: rgba(var(--color-accent-rgb), 0.05);
    border-radius: 20px;
    margin: 40px 0;
    text-align: center;
}

.blog-infographic i { font-size: 4rem; color: var(--color-accent); }
.blog-infographic p { font-size: 1.25rem; font-weight: 700; color: var(--text-heading); margin: 0; }

.blog-step-card {
    background: var(--bg-card);
    border-left: 4px solid var(--color-accent);
    padding: 25px;
    border-radius: 0 16px 16px 0;
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.typing-display-area {
    padding: 25px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: 'JetBrains Mono', 'Monaco', monospace;
    font-size: 1.25rem;
    line-height: 1.7;
    height: 160px;
    overflow-y: auto;
    color: var(--text-muted);
    position: relative;
    user-select: none;
    pointer-events: none;
    -webkit-user-select: none;
    scrollbar-width: none;
}

.typing-display-area::-webkit-scrollbar {
    display: none;
}

.typing-display-area span {
    display: inline-block;
    padding: 0 1px;
    transition: all 0.1s ease;
    border-bottom: 2px solid transparent;
}

.typing-display-area span.correct {
    color: #25D366;
    text-shadow: 0 0 1px rgba(37, 211, 102, 0.2);
}

.typing-display-area span.wrong {
    color: #ff3e3e;
    background: rgba(255, 62, 62, 0.1);
    border-radius: 2px;
}

.typing-display-area span.word-error {
    color: #ff3e3e;
    text-decoration: underline wavy #ff3e3e;
    text-underline-offset: 4px;
}

.typing-display-area span.current {
    color: var(--text-heading);
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 2px solid var(--color-accent);
    animation: charBlink 0.8s infinite;
}

@keyframes charBlink {
    0%, 100% { border-bottom-color: var(--color-accent); }
    50% { border-bottom-color: transparent; }
}

.highlight-tool {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.blog-step-card h4 { margin-bottom: 10px; color: var(--color-accent); }

@media (max-width: 600px) {
    .blog-post-title { font-size: 2rem; }
    .blog-post-cover { height: 250px; }
    .blog-header-actions { flex-direction: column; align-items: stretch; }
}

/* MODAL BLOG VIEW STYLES - REFINED */
.modal-blog-view {
    padding: 15px; /* Mobile first padding */
    max-width: 850px;
    margin: 0 auto;
}

.modal-blog-view .blog-post-header {
    text-align: center;
    margin-bottom: 30px;
}

.modal-blog-view .blog-post-badge {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.7rem; /* Smaller badge */
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.modal-blog-view .blog-post-cover {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-blog-view .blog-post-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem; /* Minimized title */
    line-height: 1.3;
    color: var(--text-main);
}

.modal-blog-view .blog-post-meta {
    font-size: 0.8rem;
    opacity: 0.6;
}

.modal-blog-view .blog-post-content {
    font-size: 0.95rem; /* Minimized content font size */
    line-height: 1.7;
    color: var(--text-muted);
}

.modal-blog-view .blog-post-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: var(--text-main);
}

.modal-blog-view .blog-quote {
    background: rgba(var(--color-accent-rgb, 59, 130, 246), 0.08);
    border-left: 3px solid var(--color-accent);
    padding: 18px 25px;
    margin: 25px 0;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-main);
    border-radius: 0 8px 8px 0;
}

.modal-blog-view .blog-step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 22px;
    border-radius: 12px;
    margin: 25px 0;
}

.modal-blog-view .scroll-progress-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 2000;
    pointer-events: none;
}

.modal-blog-view .scroll-progress-bar {
    height: 100%;
    background: var(--color-accent);
    width: 0%;
    box-shadow: 0 0 10px var(--color-accent);
}

@media (min-width: 769px) {
    .modal-blog-view {
        padding: 30px;
    }
    .modal-blog-view .blog-post-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .modal-blog-view .blog-post-title {
        font-size: 1.5rem;
    }
    .modal-blog-view .blog-post-content {
        font-size: 0.92rem;
    }
}

/* ─────────────────────────────────────────────
   TOAST NOTIFICATION
   ───────────────────────────────────────────── */
.toast-notification {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 28px;
    border-radius: 50px;
    border: 1.5px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 10001;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-heading);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.6s var(--ease-out-expo), opacity 0.4s ease, visibility 0.4s;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    white-space: nowrap;
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast-notification.success {
    border-color: #28a745;
}

.toast-notification.success i {
    color: #28a745;
}

.toast-notification.error {
    border-color: #dc3545;
}

.toast-notification.error i {
    color: #dc3545;
}

.toast-notification.info {
    border-color: var(--color-accent);
}

.toast-notification.info i {
    color: var(--color-accent);
}

[data-theme="dark"] .toast-notification {
    background: rgba(12, 45, 72, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────────
   IP ADDRESS LOOKUP TOOL
   ───────────────────────────────────────────── */
.ip-lookup-interface {
    max-width: 500px;
    margin: 30px auto;
}

.ip-display-card {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

.ip-status {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ip-main-address {
    font-size: 3rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--color-accent);
    margin-bottom: 25px;
    word-break: break-all;
    line-height: 1;
    text-shadow: 0 4px 15px rgba(var(--color-accent-rgb), 0.2);
    transition: all 0.3s ease;
}

.ip-main-address.placeholder {
    font-size: 1.8rem;
    color: var(--text-muted);
    opacity: 0.5;
    text-transform: capitalize;
    text-shadow: none;
}


.ip-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: left;
    margin-top: 30px;
}

.ip-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ip-detail-item label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ip-detail-item span {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .ip-main-address {
        font-size: 2.2rem;
    }
    .ip-details-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ─────────────────────────────────────────────
   33. TYPING SPEED TEST
   ───────────────────────────────────────────── */
.typing-test-container {
    max-width: 900px !important;
    padding-bottom: 30px !important;
}

.typing-metrics-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.metric-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.highlight-tool {
    animation: highlightPulse 2s ease-in-out infinite;
    border-color: var(--color-accent) !important;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(37, 211, 102, 0.2);
    z-index: 10;
}

.word-error {
    color: #ff4d4d !important;
    text-decoration: underline wavy #ff4d4d;
}

.btn-forfeit {
    border-color: #ff4d4d !important;
    color: #ff4d4d !important;
}

.btn-forfeit:hover {
    background: rgba(255, 77, 77, 0.1) !important;
}

@keyframes highlightPulse {
    0%, 100% { border-color: var(--color-accent); box-shadow: 0 0 15px rgba(37, 211, 102, 0.3); }
    50% { border-color: #fff; box-shadow: 0 0 25px rgba(37, 211, 102, 0.5); }
}

.metric-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
}

.metric-item .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 700;
}

.metric-item .value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-accent);
    font-family: var(--font-heading);
    line-height: 1;
}

.metric-value-flash {
    animation: metric-flash 0.4s ease-out;
}

@keyframes metric-flash {
    0% { transform: scale(1.1); color: #fff; }
    100% { transform: scale(1); }
}

.typing-config-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    margin-bottom: 25px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.config-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: auto;
}

.config-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Redesigned Dropdowns */
.config-group select {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px 18px;
    color: var(--text-heading);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.config-group select:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.config-group select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    background-color: rgba(var(--color-accent-rgb), 0.05);
}

/* Fix dropdown options visibility */
.config-group select option {
    background-color: #0c1c2c;
    color: #ffffff;
    padding: 10px;
}

.styled-input-num {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px;
    color: var(--text-heading);
    transition: border 0.3s;
}

.styled-input-num:focus {
    border-color: var(--color-accent);
    outline: none;
}

.toggle-group {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    min-width: auto;
}

.switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    user-select: none;
}

.switch-label input {
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
}

.typing-display-area {
    background: rgba(255, 255, 255, 0.02);
    padding: 25px;
    border-radius: 15px;
    font-size: 1.4rem;
    line-height: 1.6;
    height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--text-muted);
    position: relative;
    user-select: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    text-align: left;
}

.typing-display-area span {
    position: relative;
    border-bottom: 2px solid transparent;
}

.typing-display-area span.correct {
    color: var(--color-accent);
}

.typing-display-area span.incorrect {
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
    border-radius: 2px;
}

.typing-display-area span.current {
    color: var(--text-heading);
    border-bottom-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.1);
    animation: blink 1s infinite;
}

.typing-display-area.hide-hints span:not(.correct):not(.incorrect):not(.current) {
    opacity: 0.1;
    filter: blur(2px);
}

@keyframes blink {
    50% { border-bottom-color: transparent; }
}

.typing-input-wrapper {
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 12px;
    overflow: hidden;
}

#typing-main-input {
    width: 100%;
    padding: 22px 30px;
    font-size: 1.2rem;
    background: var(--bg-glass);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: var(--text-heading);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
}

#typing-main-input::placeholder {
    color: rgba(255,255,255,0.3);
}

#typing-main-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 25px rgba(var(--color-accent-rgb), 0.2);
    background: rgba(255,255,255,0.02);
}

.typing-progress-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.typing-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #4caf50);
    width: 0%;
    transition: width 0.1s linear;
}

.typing-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.btn-go {
    padding: 15px 60px !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px rgba(var(--color-accent-rgb), 0.3) !important;
    transition: all 0.4s var(--ease-out-expo) !important;
}

.btn-go:hover:not(:disabled) {
    transform: scale(1.05) translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(var(--color-accent-rgb), 0.4) !important;
}

.btn-go:active:not(:disabled) {
    transform: scale(0.98) !important;
}

.btn-redo-small {
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0.8;
}

.typing-tips-reveal-container {
    margin-top: 40px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.reveal-trigger {
    width: 100%;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--text-heading);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.reveal-trigger:hover {
    background: rgba(255, 255, 255, 0.04);
}

.reveal-trigger i:first-child {
    color: var(--color-accent);
    margin-right: 10px;
}

.reveal-trigger .fa-chevron-down {
    transition: transform 0.4s var(--ease-out-expo);
}

.typing-tips-reveal-container.active .fa-chevron-down {
    transform: rotate(180deg);
}

.reveal-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s var(--ease-out-expo);
    padding: 0 25px;
}

.typing-tips-reveal-container.active .reveal-content {
    max-height: 500px;
    padding: 20px 25px 30px;
}

.microcopy {
    margin-top: 15px;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
}

/* Result Screen Enhancement */
.typing-result-screen {
    text-align: center;
    padding: 20px 0;
}

.result-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
}

.result-motivation {
    font-size: 1.1rem;
    color: var(--text-heading);
    font-weight: 600;
    margin-top: 10px;
    text-shadow: 0 2px 10px rgba(var(--color-accent-rgb), 0.2);
}

.grade-badge {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 900;
    border-radius: 30px; /* Squircle shape */
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 3px solid var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 15px 35px rgba(var(--color-accent-rgb), 0.25);
    position: relative;
    overflow: hidden;
}

.grade-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.grade-s { color: #ffd700 !important; border-color: #ffd700 !important; box-shadow: 0 0 50px rgba(255, 215, 0, 0.4); }
.grade-a { color: #00ffaa !important; border-color: #00ffaa !important; }
.grade-b { color: #00ccff !important; border-color: #00ccff !important; }
.grade-c { color: #ffcc00 !important; border-color: #ffcc00 !important; }
.grade-d { color: #ff9933 !important; border-color: #ff9933 !important; }
.grade-e, .grade-f { color: #ff4d4d !important; border-color: #ff4d4d !important; }

.tier-label {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.result-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.res-stat {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px 15px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.res-stat:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.res-stat.highlight {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: var(--color-accent);
    box-shadow: 0 8px 25px rgba(var(--color-accent-rgb), 0.15);
}

.res-stat .val {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-heading);
    font-family: var(--font-heading);
}

.res-stat .lab {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Certificate Generator UI */
.cert-form-area {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.cert-input-wrapper {
    width: 100%;
    max-width: 400px;
}

.cert-input-wrapper label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-align: left;
}

.cert-name-input {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-heading);
    font-size: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.cert-name-input:focus {
    border-color: var(--color-accent);
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 600px) {
    .typing-metrics-bar, .result-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .metric-item .value { font-size: 1.4rem; }
    .typing-display-area { font-size: 1.1rem; }
}

@media (max-width: 400px) {
    .config-group { flex: 1 1 100%; }
    .toggle-group { flex-wrap: wrap; }
}