/*
  KEYSTONE MASTER STYLESHEET
  Theme: Dark Premium (Black/Gold/Silver)
  Tech: Vanilla CSS Variables, No Frameworks
  Upgrade: Level 2 (Pro Max)
*/

/* ------------------------------------------------------------------
   0. SELF-HOSTED FONTS (No External Dependencies)
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/outfit-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/outfit-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/outfit-700.ttf') format('truetype');
}

/* ------------------------------------------------------------------
   1. DESIGN TOKENS (HSL)
   ------------------------------------------------------------------ */
:root {
    /* Brand Core */
    --bg: 222 47% 4%;
    /* Darker, richer black */
    --bg-glass: 222 47% 4% / 0.8;

    /* Surfaces */
    --surface: 222 35% 8%;
    /* Deep Obsidian */
    --surface-hover: 222 35% 12%;
    --surface-glass: 222 35% 10% / 0.6;

    /* Text */
    --text: 210 20% 95%;
    /* Bright White */
    --muted: 215 10% 65%;
    /* Muted Grey */

    /* Metals */
    --silver: 210 15% 85%;
    /* Platinum */
    --gold: 43 70% 55%;
    /* Refined Gold */
    --gold-dim: 43 60% 45%;
    --gold-glow: 43 80% 60% / 0.2;

    /* Division Accents */
    --accent-electrical: 205 90% 55%;
    --accent-creative: 350 85% 55%;
    --accent-marketing: 270 85% 60%;
    --accent-systems: 150 70% 45%;
    --accent-networking: 175 75% 45%;
    --accent-labs: 330 100% 60%;

    /* Typography (Fluid) */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --h1-size: clamp(3rem, 6vw, 5rem);
    /* Increased for asymmetrical impact */
    --h2-size: clamp(2rem, 3vw, 3rem);
    --h3-size: clamp(1.5rem, 2vw, 2rem);

    /* Layout */
    --max-width: 1200px;
    --header-height: 80px;
    --radius: 8px;
    /* Slightly softer */

    /* Animation Physics */
    --ease-out-expo: var(--ease-heavy-slab);
    /* Global override for weightier feel */
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* UX */
    scroll-behavior: smooth;

    /* MASTER BUILDER IDENTITY TOKENS */
    --mask-keystone: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 15% 100%, 0 85%);
    --mask-keystone-inverted: polygon(0 0, 100% 0, 100% 100%, 80% 90%, 20% 90%, 0 100%);

    /* Technical Precision */
    --blueprint-line: 1px solid hsla(var(--silver)/0.3);
    --blueprint-tick: 10px;

    /* Physics */
    --ease-heavy-slab: cubic-bezier(0.25, 1, 0.5, 1);
    /* Feels like heavy stone settling */

    /* Typography */
    --tracking-stone: 0.15em;
    /* Inscription spacing */
}

/* ------------------------------------------------------------------
   1.5 MASTER BUILDER UTILITIES
   ------------------------------------------------------------------ */

/* 1. Keystone Hero Mask (Visual Locking) */
.mask-keystone-bottom {
    mask-image: linear-gradient(black, black);
    /* For now simple, will apply complex clip-path on the image container */
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    /* Subtle downward point/keystone implication */
}

/* 2. Blueprint Corners (Technical Precision) */
.blueprint-card {
    position: relative;
    /* Uses ::before and ::after for ticks */
}

.blueprint-card::before,
.blueprint-card::after {
    content: '';
    position: absolute;
    width: var(--blueprint-tick);
    height: var(--blueprint-tick);
    border: var(--blueprint-line);
    transition: all 0.3s var(--ease-heavy-slab);
    pointer-events: none;
    opacity: 0.5;
}

.blueprint-card::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.blueprint-card::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

.blueprint-card:hover::before,
.blueprint-card:hover::after {
    width: 20px;
    height: 20px;
    opacity: 1;
    border-color: hsl(var(--gold));
}

/* 3. Stone Inscription Typography */
.text-stone {
    font-family: var(--font-heading);
    font-weight: 800;
    /* Extra bold */
    letter-spacing: var(--tracking-stone);
    text-transform: uppercase;
    /* Optional: text-shadow for depth */
    text-shadow: 2px 2px 0px hsla(0, 0, 0, 0.5);
}

/* 4. Masonry Grid Interlock (Visual Divider) */
.divider-masonry {
    height: 2px;
    background:
        repeating-linear-gradient(90deg,
            hsl(var(--silver)) 0,
            hsl(var(--silver)) 10px,
            transparent 10px,
            transparent 20px);
    opacity: 0.2;
    margin: 2rem 0;
}

/* ------------------------------------------------------------------
   2. GLOBAL TEXTURE & RESET
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: hsl(var(--bg));
    color: hsl(var(--text));
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
    /* BACKGROUND: High-End Gradient Grid */
    background-color: hsl(var(--bg));
    /* Brighter resting grid (opacity 0.1) as requested */
    background-image:
        linear-gradient(hsla(var(--silver)/0.1) 1px, transparent 1px),
        linear-gradient(90deg, hsla(var(--silver)/0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center top;
}

/* Pulsating Grid Animation (Breath) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Subtle gold ambient pulse */
    background: radial-gradient(circle at center, hsla(var(--gold)/0.03), transparent 70%);
    animation: pulseGlow 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Interactive Grid Illuminator ('Electricity Flow' Mask) */
.spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Changed to 100% to prevent scrollbar misalignment */
    height: 100vh;
    pointer-events: none;
    z-index: 1;

    /* 1. The "Electricity": Same grid pattern, but GOLD and brighter */
    background-image:
        linear-gradient(hsla(var(--gold)/0.6) 1px, transparent 1px),
        linear-gradient(90deg, hsla(var(--gold)/0.6) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center top;

    /* 2. The "Flow": Hide everything, reveal only near mouse via Mask */
    /* Wider area (800px) as requested */
    -webkit-mask-image: radial-gradient(800px circle at var(--x, 50%) var(--y, 50%),
            black 0%,
            transparent 60%);
    mask-image: radial-gradient(800px circle at var(--x, 50%) var(--y, 50%),
            black 0%,
            transparent 60%);

    /* No blend mode needed (Normal), as we want the Gold to sit on top of the Silver */
    mix-blend-mode: normal;
    opacity: 1;
}

/* Selection */
::selection {
    background: hsl(var(--gold));
    color: black;
}

/* ------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: hsl(var(--silver));
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

h1 {
    font-size: var(--h1-size);
    color: hsl(var(--gold));
    letter-spacing: -0.02em;
    text-shadow: 0 0 30px hsl(var(--gold-glow));
}

h2 {
    font-size: var(--h2-size);
}

h3 {
    font-size: var(--h3-size);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s var(--ease-out-expo);
}

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

/* ------------------------------------------------------------------
   4. LAYOUT UTILITIES
   ------------------------------------------------------------------ */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.grid {
    display: grid;
    gap: 2rem;
}

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

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

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

.section-py {
    padding-top: 8rem;
    padding-bottom: 8rem;
    position: relative;
}

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

.text-gold {
    color: hsl(var(--gold));
}

.text-silver {
    color: hsl(var(--silver));
}

.text-muted {
    color: hsl(var(--muted));
}

/* ------------------------------------------------------------------
   5. COMPONENTS (PRO MAX)
   ------------------------------------------------------------------ */

/* Buttons with Physics */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    border-radius: var(--radius);
    transition: all 0.4s var(--ease-out-expo);
    cursor: pointer;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
    z-index: 10;
    /* Ensure clickable */
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary {
    background-color: hsl(var(--gold));
    color: hsl(var(--bg));
    border: 1px solid hsl(var(--gold));
    box-shadow: 0 0 20px hsl(var(--gold-glow));
}

.btn-primary:hover {
    background-color: hsl(var(--gold-dim));
    border-color: hsl(var(--gold-dim));
    box-shadow: 0 0 40px hsl(var(--gold-glow));
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: hsl(var(--silver));
    border: 1px solid hsla(var(--silver) / 0.3);
    backdrop-filter: blur(4px);
}

.btn-secondary:hover {
    background-color: hsl(var(--silver));
    /* Solid metallic silver */
    color: hsl(var(--bg));
    /* High contrast dark text */
    border-color: hsl(var(--silver));
    transform: translateY(-2px);
    backdrop-filter: none;
    box-shadow: 0 0 20px hsla(var(--silver) / 0.3);
}

/* Glass Header */
.header {
    height: var(--header-height);
    background-color: hsla(var(--bg) / 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid hsla(var(--silver) / 0.05);
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: hsl(var(--silver));
}

.logo span {
    color: hsl(var(--gold));
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted));
    position: relative;
    z-index: 10;
}

.nav-links a:hover,
.nav-links a.active {
    color: hsl(var(--gold));
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 1px;
    background: hsl(var(--gold));
    transition: width 0.3s var(--ease-out-expo);
}

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

/* Glass Cards with Gradient Borders (High Contrast) */
.card,
.project-card,
.review-card,
.feature-card {
    background-color: hsl(var(--surface));
    /* Solid background like footer */
    border: 1px solid hsla(var(--silver) / 0.1);
    padding: 2.5rem;
    border-radius: var(--radius);
    transition: all 0.4s var(--ease-out-expo);
    height: 100%;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    background-clip: padding-box;
    /* Ambient shadow to float it off the bg */
    box-shadow: 0 4px 20px -1px rgba(0, 0, 0, 0.4);

    /* Flex Layout for Button Alignment */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 5;
    /* Ensure above spotlight overlay */
}

/* Push button to bottom */
.card .btn,
.project-card .btn,
.feature-card .btn {
    margin-top: auto;
    width: 100%;
    /* Consistent full width buttons on mobile, or user pref */
}

@media (min-width: 600px) {

    .card .btn,
    .project-card .btn,
    .feature-card .btn {
        width: auto;
        /* Revert to auto on desktop if preferred, or keep full */
    }
}

/* Gradient Border Pseudo-element - BOOSTED VISIBILITY */
.card::after,
.project-card::after,
.review-card::after,
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    padding: 1px;
    /* Much stronger resting gradient: 30% to 15% opacity */
    background: linear-gradient(135deg,
            hsla(var(--silver)/0.35) 0%,
            hsla(var(--silver)/0.15) 50%,
            hsla(var(--silver)/0.35) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.card:hover,
.project-card:hover,
.review-card:hover,
.feature-card:hover {
    transform: translateY(-5px) scale(1.005);
    background-color: hsl(var(--surface-hover));
    /* 100% Solid hover */
    box-shadow: 0 30px 60px -15px hsla(0, 0%, 0%, 0.7);
    cursor: pointer;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Hover Border State */
.card:hover::after,
.project-card:hover::after,
.review-card:hover::after,
.feature-card:hover::after {
    background: linear-gradient(135deg,
            hsla(var(--gold)/0.8) 0%,
            /* Stronger gold */
            hsla(var(--gold)/0.4) 50%,
            hsla(var(--gold)/0.8) 100%);
}

/* Inner Glow (Spotlight feel) */
.card::before,
.project-card::before,
.review-card::before,
.feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            hsla(var(--gold)/0.08) 0%,
            transparent 50%);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.card:hover::before,
.project-card:hover::before,
.review-card:hover::before,
.feature-card:hover::before {
    opacity: 1;
    transform: scale(1);
    /* This creates a central ambient glow */
}

/* ------------------------------------------------------------------
   6. HERO SECTION
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   6. HERO SECTION (Asymmetrical)
   ------------------------------------------------------------------ */
.hero-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Gradient overlay from Left (Dark) to Right (Transparent) to let texture sparkle */
    background-image:
        linear-gradient(90deg, hsl(var(--bg)) 0%, hsla(var(--bg), 0.95) 40%, hsla(var(--bg), 0.4) 100%),
        url('../images/hero-bg.png');
    background-size: cover;
    background-position: center right;
    /* Shift texture to right */
    background-attachment: fixed;
}

/* Ensure visual balance on mobile */
@media (max-width: 900px) {
    .hero-section {
        background-position: center;
        text-align: center;
        background-image:
            linear-gradient(to bottom, hsla(var(--bg), 0.8), hsl(var(--bg))),
            url('../images/hero-bg.png');
    }
}

/* ------------------------------------------------------------------
   7. KEYSTONE STANDARD GRID
   ------------------------------------------------------------------ */
.standard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: linear-gradient(90deg, transparent, hsla(var(--silver)/0.2), transparent);
    border-top: 1px solid hsla(var(--silver)/0.1);
    border-bottom: 1px solid hsla(var(--silver)/0.1);
}

.standard-item {
    background-color: hsl(var(--bg));
    padding: 4rem 2rem;
    /* More breathing room */
    text-align: center;
    transition: background-color 0.3s;
}

.standard-item:hover {
    background-color: hsl(var(--surface));
}

.standard-item h3 {
    color: hsl(var(--gold));
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   8. FOOTER (Mega Structure)
   ------------------------------------------------------------------ */
.footer {
    background-color: hsl(var(--surface));
    border-top: 1px solid hsla(var(--silver) / 0.1);
    padding: 6rem 0 2rem;
    margin-top: auto;
}

.footer-top {
    margin-bottom: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid hsla(var(--silver) / 0.05);
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.footer-links-col h4 {
    color: hsl(var(--gold));
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.footer-links-col ul {
    list-style: none;
    padding: 0;
}

.footer-links-col ul li {
    margin-bottom: 0.75rem;
}

.footer-links-col ul li a {
    color: hsl(var(--muted));
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links-col ul li a:hover {
    color: hsl(var(--silver));
}

.footer-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid hsla(var(--silver) / 0.05);
    font-size: 0.8rem;
    color: hsl(var(--muted));
}

@media (max-width: 900px) {
    .footer-links-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 600px) {
    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-legal {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ------------------------------------------------------------------
   9. SCROLL ANIMATIONS (View Timeline)
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   9. SCROLL ANIMATIONS (View Timeline with Fallback)
   ------------------------------------------------------------------ */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.9);
        /* Much deeper start */
        filter: blur(10px);
        /* Cinematic focus pull */
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Base animation for all browsers (load animation) */
.card,
.standard-item {
    opacity: 0;
    /* Hidden by default */
    animation: fade-in-up 0.8s var(--ease-out-expo) forwards;
}

/* Stagger delays for grid items */
.card:nth-child(1) {
    animation-delay: 0.1s;
}

.card:nth-child(2) {
    animation-delay: 0.2s;
}

.card:nth-child(3) {
    animation-delay: 0.3s;
}

.card:nth-child(4) {
    animation-delay: 0.4s;
}

.card:nth-child(5) {
    animation-delay: 0.5s;
}

/* ------------------------------------------------------------------
   10. FEATURE LIST COMPONENT (Phase 11)
   ------------------------------------------------------------------ */
.feature-list {
    list-style: none;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsla(var(--silver)/0.1);
}

.feature-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: hsl(var(--muted));
    line-height: 1.5;
}

.feature-list li::before {
    content: '>>';
    position: absolute;
    left: 0;
    color: hsl(var(--gold));
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    top: 2px;
    opacity: 0.7;
}

.feature-list li strong {
    color: hsl(var(--silver));
    font-weight: 600;
}

.standard-item:nth-child(2) {
    animation-delay: 0.3s;
}

.standard-item:nth-child(3) {
    animation-delay: 0.4s;
}

.standard-item:nth-child(4) {
    animation-delay: 0.5s;
}

/* Enhanced Scroll Animation (Modern Browsers Only) */
@supports (animation-timeline: view()) {

    .card,
    .standard-item {
        opacity: 0;
        animation-timeline: view();
        animation-range: entry 10% cover 20%;
        animation-fill-mode: both;
        animation-delay: 0s;
        /* Override stagger for scroll trigger */
    }
}

/* ------------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 900px) {

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

    /* Mobile Navigation: Horizontal Swipe (Stripe-style) */
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 0;
    }

    .header {
        height: auto;
        padding-bottom: 0;
    }

    .logo {
        margin-bottom: 0.5rem;
    }

    .nav-links {
        width: 100vw;
        margin-left: -2rem;
        /* Counter container padding */
        padding: 0.5rem 2rem 1rem;
        /* Breathing room */
        gap: 1.5rem;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        /* Scrollbar aesthetics */
        scrollbar-width: none;
        -ms-overflow-style: none;
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        font-size: 0.85rem;
        opacity: 0.8;
    }

    .nav-links a.active,
    .nav-links a:hover {
        opacity: 1;
        border-bottom: 2px solid hsl(var(--gold));
    }

    /* Hide hover underline animation on mobile for performance/clutter */
    .nav-links a::after {
        display: none;
    }

    .nav-cta {
        position: absolute;
        top: 1rem;
        right: 0;
    }

    .nav-cta .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {

    .grid-2,
    .grid-3,
    .grid-4,
    .standard-grid {
        grid-template-columns: 1fr;
    }

    .hero-section {
        min-height: 60vh;
        background-position: center;
    }

    .footer-links-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* ------------------------------------------------------------------
   11. STATS BAR (Premium Glass Strip)
   ------------------------------------------------------------------ */
.stats-bar {
    border-top: 1px solid hsla(var(--silver)/0.1);
    border-bottom: 1px solid hsla(var(--silver)/0.1);
    background: hsla(var(--surface)/0.6);
    backdrop-filter: blur(12px);
    padding: 2rem 0;
    margin-top: -2rem;
    /* Pull up to overlap hero slightly or sit flush */
    position: relative;
    z-index: 10;
}

.stat-item {
    text-align: center;
    flex: 1;
    min-width: 150px;
    padding: 1rem;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-family: var(--font-heading);
    color: hsl(var(--silver));
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, hsl(var(--silver)) 0%, hsl(var(--muted)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(var(--muted));
    font-weight: 600;
}

.stat-separator {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, hsla(var(--silver)/0.2), transparent);
}

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

    .stats-bar {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
   12. FEATURE CARDS (Keystone Standard)
   ------------------------------------------------------------------ */
.feature-card {
    /* Base styles inherited from .card */
    padding: 2.5rem 1.5rem;
    text-align: center;
}

/* Feature Card Hover Specifics (Icon scale etc) */
/* .feature-card:hover inherits base .card:hover effects */

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: hsla(var(--surface));
    border: 1px solid hsla(var(--silver)/0.1);
    border-radius: 50%;
    margin-bottom: 1.5rem;
    color: hsl(var(--silver));
    transition: all 0.4s var(--ease-out-expo);
}

.feature-card:hover .feature-icon {
    background: hsl(var(--gold));
    color: hsl(var(--bg));
    border-color: hsl(var(--gold));
    box-shadow: 0 0 20px hsla(var(--gold)/0.4);
    transform: scale(1.1) rotate(5deg);
}

.feature-card h4 {
    font-family: var(--font-heading);
    color: hsl(var(--silver));
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.feature-card p {
    font-size: 0.9rem;
    color: hsl(var(--muted));
    line-height: 1.6;
}

/* ------------------------------------------------------------------
   13. RECENT WORK (Project Cards)
   ------------------------------------------------------------------ */
.project-card {
    /* Base styles inherited from .card */
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* .project-card:hover inherits base .card:hover effects */

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Placeholder gradient until images are loaded */
    background: linear-gradient(to bottom, transparent 40%, hsla(var(--bg), 0.95) 90%),
        linear-gradient(45deg, hsla(var(--surface)/0.5), hsla(var(--bg)/0.5));
    z-index: 0;
    transition: transform 0.6s var(--ease-out-expo);
}

.project-card:hover .project-overlay {
    transform: scale(1.05);
}

.project-content {
    position: relative;
    z-index: 1;
    padding: 2.5rem;
}

.project-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-card h3 {
    margin-bottom: 0.5rem;
    color: hsl(var(--silver));
}

/* ------------------------------------------------------------------
   14. REVIEWS (Social Proof)
   ------------------------------------------------------------------ */
.review-card {
    /* Base styles inherited from .card */
    text-align: center;
    padding: 2rem;
}

.stars {
    color: hsl(var(--gold));
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.review-text {
    font-style: italic;
    color: hsl(var(--silver));
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.review-author {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ------------------------------------------------------------------
   12. BENEFIT-FIRST COMPONENTS (TESTIMONIALS & FINAL CTA)
   ------------------------------------------------------------------ */

.testimonial-section {
    background-color: hsla(var(--surface)/0.3);
    border-top: 1px solid hsla(var(--silver)/0.05);
    border-bottom: 1px solid hsla(var(--silver)/0.05);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Reusing card logic for consistency but with specific testimonial styling */
.testimonial-card {
    background-color: hsl(var(--surface));
    padding: 2.5rem;
    border-radius: var(--radius);
    border: 1px solid hsla(var(--silver)/0.1);
    position: relative;
    transition: transform 0.4s var(--ease-out-expo);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: hsla(var(--gold)/0.4);
}

.testimonial-text {
    font-size: 1.1rem;
    color: hsl(var(--silver));
    font-style: italic;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-meta strong {
    display: block;
    color: hsl(var(--gold));
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.testimonial-meta span {
    font-size: 0.8rem;
    color: hsl(var(--muted));
}

/* FINAL CTA (The "Maui" Closer) */
.final-cta {
    text-align: center;
    background-color: hsl(var(--bg));
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, hsla(var(--gold)/0.15), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.final-cta-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.final-cta h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin-bottom: 1.5rem;
    color: hsl(var(--gold));
    line-height: 1.1;
}

.final-cta p {
    font-size: 1.25rem;
    color: hsl(var(--muted));
    margin-bottom: 3rem;
}

@media (max-width: 900px) {
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .final-cta h2 {
        font-size: 2.5rem;
    }
}

/* ------------------------------------------------------------------
   10. NANO CARDS (Premium Service Grid V3)
   ------------------------------------------------------------------ */
.card-nano {
    /* Default to Electric Blue if not set */
    --nano-accent: #0066FF;

    background: var(--industrial-surface);
    /* Fallback */
    background: linear-gradient(145deg, rgba(20, 30, 48, 0.6) 0%, rgba(6, 11, 19, 0.9) 100%);
    border: 1px solid color-mix(in srgb, var(--nano-accent), transparent 90%);
    border-radius: 12px;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-nano:hover {
    border-color: var(--nano-accent);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px color-mix(in srgb, var(--nano-accent), transparent 85%);
}

.nano-icon-wrapper {
    width: 100%;
    height: 240px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--nano-accent), transparent 85%) 0%, transparent 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
}

.nano-icon {
    width: 180px;
    height: 180px;
    max-width: 95%;
    object-fit: contain;
    /* mix-blend-mode: screen is no longer needed since we have real transparency */
    /* Boost brightness and contrast to make the 3D assets pop on the dark cards */
    filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 20px color-mix(in srgb, var(--nano-accent), transparent 50%));
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.card-nano:hover .nano-icon {
    transform: scale(1.1) translateY(-15px) rotate(2deg);
    filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 40px color-mix(in srgb, var(--nano-accent), transparent 20%));
}

.nano-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.nano-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.nano-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    /* Ghost number */
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    line-height: 1;
}

.nano-title {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.nano-desc {
    font-size: 0.9rem;
    color: #8892b0;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.nano-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-chip {
    background: color-mix(in srgb, var(--nano-accent), transparent 90%);
    color: var(--nano-accent);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--nano-accent), transparent 80%);
}

.action-link {
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.card-nano:hover .action-link {
    opacity: 1;
    color: var(--nano-accent);
}

/* -------------------------------------------------------------------------- */
/* DUAL-CTA NANO CARD PATTERNS                                                */
/* -------------------------------------------------------------------------- */

.nano-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nano-cta-group {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.btn-nano {
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
}

.btn-nano-primary {
    background: var(--nano-accent);
    color: #000;
    border: 1px solid var(--nano-accent);
}

.btn-nano-primary:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--nano-accent), transparent 50%);
}

.btn-nano-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-nano-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--nano-accent);
    color: var(--nano-accent);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------
   11. SEO FAQ ACCORDION (Interactive)
   ------------------------------------------------------------------ */
.faq-section {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid hsla(var(--silver)/0.1);
    margin-bottom: 0.5rem;
}

.faq-trigger {
    width: 100%;
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: hsl(var(--silver));
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s;
}

.faq-trigger:hover {
    color: hsl(var(--gold));
}

.faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.4s var(--ease-heavy-slab);
    color: hsl(var(--gold));
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-heavy-slab);
    color: hsl(var(--muted));
    font-size: 1rem;
    line-height: 1.8;
}

.faq-item.active .faq-content {
    max-height: 500px;
    padding-bottom: 2rem;
}

.faq-content p {
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------------
   15. SEO ENGINE COMPONENTS (Deep Content Support)
   ------------------------------------------------------------------ */

/* 15.1 Division Theming (Variable Remapping) 
   This allows us to swap the "Gold" brand color for the Division color 
   just by adding a class to the body.
*/
body.theme-electrical { --gold: var(--accent-electrical); --gold-dim: var(--accent-electrical); --gold-glow: var(--accent-electrical); }
body.theme-creative   { --gold: var(--accent-creative);   --gold-dim: var(--accent-creative);   --gold-glow: var(--accent-creative); }
body.theme-marketing  { --gold: var(--accent-marketing);  --gold-dim: var(--accent-marketing);  --gold-glow: var(--accent-marketing); }
body.theme-systems    { --gold: var(--accent-systems);    --gold-dim: var(--accent-systems);    --gold-glow: var(--accent-systems); }
body.theme-lab        { --gold: var(--accent-labs);       --gold-dim: var(--accent-labs);       --gold-glow: var(--accent-labs); }

/* 15.2 Components */
.price-badge {
    background: hsl(var(--gold));
    color: hsl(var(--bg));
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}

.local-proof {
    background: hsl(var(--surface));
    padding: 20px;
    margin-top: 20px;
    font-style: italic;
    border-left: 2px solid hsl(var(--gold));
}

.tech-mesh {
    margin-top: 2rem;
}

.tech-mesh a {
    color: hsl(var(--muted));
    margin-right: 15px;
    text-decoration: none;
    border-bottom: 1px dotted hsl(var(--silver)/0.3);
    font-size: 0.9rem;
    line-height: 2;
    display: inline-block;
}

.tech-mesh a:hover {
    color: hsl(var(--gold));
    border-color: hsl(var(--gold));
}

/* 15.3 Mobile Overrides for SEO Pages */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5rem; /* Adjusted for mobile */
    }
}
/* DROPDOWN SYSTEM (Premium Navigation) */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: hsla(var(--surface)/0.9);
    backdrop-filter: blur(20px);
    border: 1px solid hsla(var(--gold)/0.2);
    border-radius: 8px;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1000;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    animation: slideUp 0.3s var(--ease-out-expo);
}

.dropdown-content a {
    color: hsla(var(--text)/0.8);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    transition: all 0.2s;
    font-weight: 500;
}

.dropdown-content a:hover {
    background: hsla(var(--gold)/0.1);
    color: hsl(var(--gold));
    padding-left: 2rem;
}

.dropdown:hover .dropdown-content {
    display: block;
}

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

/* Skip Navigation (Accessibility) */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  background: hsl(var(--gold));
  color: hsl(var(--bg));
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  z-index: 99999;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
  transition: top 0.2s ease;
}
.skip-nav:focus {
  top: 0;
  outline: 3px solid hsl(var(--gold-dim));
}