/*
 * ControlTheme Design System — Alt SourceCode Homepage
 * Warm cream tones, Halant serif headings, elegant aesthetics
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE RESET — Matches ControlTheme's crisp rendering
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    line-height: 1.5;
    min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — Override theme.css variables for homepage
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Homepage footer uses warm cream, not white */
    --color-bg-card: #fcf6ef;
    --color-text: #000;
    --color-text-subtle: #94877c;
}

.home-page {
    /* Colors - ControlTheme warm cream palette */
    --background: #fcf6ef;
    --background-alt: #f6f0e9;
    --background-muted: #efe7dd;
    --text-primary: #000;
    --text-dark: #2b180a;
    --text-muted: #94877c;
    --accent: #3e2407;
    --accent-warm: #dab697;
    --accent-light: #e8d3c0;
    --link: #09f;
    --white: #fff;
    --black: #000;

    /* Opacity variants */
    --white-12: rgba(255, 255, 255, 0.12);
    --white-24: rgba(255, 255, 255, 0.24);
    --black-12: rgba(0, 0, 0, 0.12);
    --black-24: rgba(0, 0, 0, 0.24);

    /* Typography - ControlTheme fonts */
    --font-heading: "Halant", Georgia, serif;
    --font-body: "Geist Sans", "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    /* Sizes — ControlTheme exact values */
    --text-h1: 70px;
    --text-h2: 56px;
    --text-h3: 36px;
    --text-body-lg: 20px;
    --text-body: 16px;
    --text-small: 14px;
    --text-tiny: 12px;

    /* Line heights — ControlTheme exact values */
    --leading-tight: 100%;
    --leading-snug: 110%;
    --leading-normal: 120%;
    --leading-relaxed: 150%;

    /* Letter spacing — ControlTheme exact values */
    --tracking-tight: -0.07em;
    --tracking-snug: -0.06em;
    --tracking-normal: -0.05em;
    --tracking-wide: -0.04em;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 120px;

    /* Borders */
    --radius-lg: 28px;
    --radius-xl: 32px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* Motion */
    --duration-fast: 0.4s;
    --duration-normal: 1.1s;
    --duration-slow: 2.1s;
    --duration-enter: 0.6s;
    --ease-spring: cubic-bezier(0.56, 0.22, 0.05, 0.99);
    --ease-smooth: cubic-bezier(0.44, 0, 0.56, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ═══ MOTION TOKENS (Physics-First) ═══ */
    /* Durations */
    --motion-duration-xs: 150ms;   /* Hover, instant feedback */
    --motion-duration-sm: 300ms;   /* Small component transitions */
    --motion-duration-md: 500ms;   /* Card expansions, dialogs */
    --motion-duration-lg: 800ms;   /* Section entrances */

    /* Spring Physics Easings */
    --motion-ease-spring-stiff: cubic-bezier(0.175, 0.885, 0.32, 1.1);   /* Buttons */
    --motion-ease-spring-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);         /* Cards */
    --motion-ease-spring-bouncy: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Fun stuff */
    --motion-ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);                  /* Apple-style */

    /* Scale for depth */
    --motion-scale-press: 0.96;    /* Button press */
    --motion-scale-hover: 1.02;    /* Card lift */

    /* Stagger (40ms base, max 400ms total) */
    --stagger-base: 40ms;
    --appear-shift: 20px;

    /* Layout */
    --max-width: 1072px;
    --container-padding: 64px;

    /* Base styles */
    background: var(--background);
    color: var(--text-primary);
    font-family: var(--font-body);
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--background);
}

.home-page .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-6);
}

.home-page .nav-logo {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    text-decoration: none;
}

.home-page .nav-links {
    display: flex;
    gap: var(--space-8);
}

.home-page .nav-links a {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: var(--tracking-normal);
    transition: color var(--duration-fast);
}

.home-page .nav-links a:hover {
    color: var(--text-muted);
}

.home-page .nav-cta {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--text-primary);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.home-page .nav-cta:hover {
    background: var(--text-primary);
    color: var(--white);
}

.home-page .nav-hamburger {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
}

.home-page .nav-hamburger span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: transform var(--duration-fast);
}

.home-page .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    z-index: 9;
}

.home-page .nav-menu.active {
    display: flex;
}

.home-page .nav-menu a {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — Interactive with dot grid background (ControlTheme-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .hero-sp {
    position: relative;
    background: var(--background);
    padding: var(--space-20) var(--space-6) var(--space-4);
    overflow: visible;
}

/* 3D Dotted Wave Surface — overlaps with hero text */
.home-page .hero-dotted-surface {
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: -120px;
    overflow: visible;
}

.home-page .hero-dotted-surface canvas {
    display: block;
}

/* Main content container */
.home-page .hero-sp-container {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-16);
}

/* Star rating row */
.home-page .hero-sp-rating {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.home-page .hero-sp-stars {
    display: flex;
    gap: 2px;
}

.home-page .hero-sp-stars svg {
    width: 16px;
    height: 16px;
    color: var(--accent-warm);
}

/* Headline */
.home-page .hero-sp-headline {
    font-family: var(--font-heading);
    font-size: clamp(40px, 8vw, 72px);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    margin: 0;
    max-width: 900px;
}

/* Subtext */
.home-page .hero-sp-subtext {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    margin: 0;
    max-width: 600px;
}

.home-page .hero-sp-rating-text {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--text-primary);
}

/* Buttons row */
.home-page .hero-sp-buttons {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.home-page .hero-sp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-medium);
    padding: var(--space-4) var(--space-8);
    border-radius: 12px;
    text-decoration: none;
    /* transition set in SCROLL-TRIGGERED ANIMATIONS section */
}

.home-page .hero-sp-btn:hover {
    opacity: 0.9;
}

.home-page .hero-sp-btn--primary {
    background: var(--text-primary);
    color: var(--background);
}

.home-page .hero-sp-btn--secondary {
    background: var(--background-alt);
    color: var(--text-primary);
}

.home-page .hero-sp-btn--secondary svg {
    width: 18px;
    height: 18px;
}

/* Legacy hero styles (kept for reference) */
.home-page .hero {
    background: var(--background);
    padding: var(--space-24) var(--space-6);
    text-align: center;
}

.home-page .hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.home-page .hero-headline {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    max-width: 900px;
    margin: 0;
}

.home-page .hero-subtext {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    max-width: 600px;
    margin: 0;
}

.home-page .hero-cta {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--white);
    background: var(--text-primary);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: opacity var(--duration-fast);
}

.home-page .hero-cta:hover {
    opacity: 0.9;
}

.home-page .hero-visual {
    margin-top: var(--space-12);
    max-width: var(--max-width);
}

.home-page .hero-visual img {
    width: 100%;
    border-radius: var(--radius-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES — Interactive How We Work (ControlTheme-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .services {
    background: var(--background);
    padding: var(--space-20) var(--space-6);
}

.home-page .services-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.home-page .services-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

/* Pill badge above title */
.home-page .services-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    background: var(--background-alt);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    margin-bottom: var(--space-6);
}

.home-page .services-title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 6vw, 48px);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
    margin: 0 0 var(--space-4) 0;
}

.home-page .services-title .muted {
    color: var(--text-muted);
}

.home-page .services-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    max-width: 700px;
    margin: 0 auto;
}

.home-page .services-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-10);
    align-items: start;
}

/* Left Menu */
.home-page .services-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.home-page .service-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    /* transition moved to SCROLL-TRIGGERED ANIMATIONS section */
}

/* hover transform moved to SCROLL-TRIGGERED ANIMATIONS section */
.home-page .service-item:hover {
    background: var(--background-alt);
}

.home-page .service-item.active {
    background: var(--background-alt);
}

.home-page .service-number {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    min-width: 24px;
}

.home-page .service-name {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
    transition: color var(--duration-fast);
}

.home-page .service-item.active .service-name {
    color: var(--text-primary);
}

.home-page .service-item.active .service-number {
    color: var(--text-primary);
}

/* Right Display */
.home-page .services-display {
    position: relative;
    min-height: 400px;
}

.home-page .service-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-spring), visibility var(--duration-fast);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.home-page .service-panel.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    width: 100%;
}

.home-page .service-visual {
    background: var(--background-alt);
    border-radius: var(--radius-xl);
    padding: var(--space-16);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.home-page .service-icon {
    width: 120px;
    height: 120px;
    color: var(--text-primary);
}

.home-page .service-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.home-page .service-info h3 {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}

.home-page .service-info p {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* Responsive — Tablet */
@media (max-width: 1199px) {
    .home-page .services-content {
        grid-template-columns: 200px 1fr;
        gap: var(--space-8);
    }

    .home-page .service-name {
        font-size: 24px;
    }

    .home-page .service-visual {
        min-height: 240px;
        padding: var(--space-12);
    }

    .home-page .service-icon {
        width: 100px;
        height: 100px;
    }
}

/* Responsive — Mobile */
@media (max-width: 809px) {
    .home-page .services-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .home-page .services-menu {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
    }

    .home-page .service-item {
        flex-shrink: 0;
        padding: var(--space-3) var(--space-4);
    }

    .home-page .service-number {
        display: none;
    }

    .home-page .service-name {
        font-size: 18px;
    }

    .home-page .services-display {
        min-height: auto;
    }

    .home-page .service-visual {
        min-height: 200px;
        padding: var(--space-8);
    }

    .home-page .service-icon {
        width: 80px;
        height: 80px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURES (legacy - kept for reference)
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .features {
    background: var(--background);
    padding: var(--space-20) var(--space-6);
}

.home-page .features-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.home-page .features-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.home-page .features-title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-4) 0;
}

.home-page .features-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.home-page .features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.home-page .feature-card {
    background: var(--background-alt);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Uses motion tokens from SCROLL-TRIGGERED ANIMATIONS */
    transition:
        transform var(--motion-duration-sm) var(--motion-ease-spring-smooth),
        box-shadow var(--motion-duration-xs) var(--motion-ease-spring-smooth);
}

.home-page .feature-card:hover {
    transform: translateY(-4px) scale(var(--motion-scale-hover));
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);
}

.home-page .feature-number {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
}

.home-page .feature-card .feature-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.home-page .feature-description {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-muted);
    line-height: var(--leading-normal);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .testimonials {
    background: var(--background-alt);
    padding: var(--space-20) var(--space-6);
}

.home-page .testimonials-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.home-page .testimonial {
    margin: 0;
    padding: 0;
}

.home-page .testimonial-quote {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-8) 0;
}

.home-page .testimonial-author {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.home-page .testimonial-name {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.home-page .testimonial-title {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDIES
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .case-studies {
    background: var(--background);
    padding: var(--space-20) var(--space-6);
}

.home-page .case-studies-container {
    max-width: 1075px;
    margin: 0 auto;
}

.home-page .case-studies-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.home-page .case-studies-title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-regular);
    color: var(--text-dark);
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

.home-page .case-studies-title .text-muted {
    color: var(--text-muted);
}

.home-page .case-studies-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.home-page .case-studies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.home-page .case-study-card {
    background: var(--background-alt);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    position: relative;
    transition: transform var(--motion-duration-sm) var(--motion-ease-spring-smooth),
                box-shadow var(--motion-duration-sm) var(--motion-ease-spring-smooth);
}

.home-page .case-study-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.home-page .case-study-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    background: var(--background);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}

.home-page .case-study-name {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
    color: var(--text-dark);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-2);
}

.home-page .case-study-description {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.home-page .case-study-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--text-dark);
    border-radius: 50%;
    color: var(--white);
    transition: background var(--motion-duration-xs) ease,
                transform var(--motion-duration-xs) ease;
}

.home-page .case-study-link:hover {
    background: var(--accent);
    transform: scale(1.05);
}

.home-page .case-study-link svg {
    width: 20px;
    height: 20px;
}

/* Case Studies Responsive */
@media (max-width: 1024px) {
    .home-page .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .home-page .case-studies {
        padding: var(--space-16) var(--space-4);
    }

    .home-page .case-studies-title {
        font-size: 36px;
    }

    .home-page .case-studies-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .home-page .case-study-card {
        padding: var(--space-6);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .pricing {
    background: var(--background);
    padding: var(--space-20) var(--space-6);
}

.home-page .pricing-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.home-page .pricing-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.home-page .pricing-title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-4) 0;
}

.home-page .pricing-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.home-page .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 960px;
    margin: 0 auto;
}

.home-page .pricing-card {
    background: var(--background-alt);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* transition moved to SCROLL-TRIGGERED ANIMATIONS section */
}

/* hover moved to SCROLL-TRIGGERED ANIMATIONS section */

.home-page .pricing-card--featured {
    background: var(--text-primary);
    color: var(--white);
}

.home-page .pricing-card--featured .pricing-card-name,
.home-page .pricing-card--featured .pricing-card-price,
.home-page .pricing-card--featured .pricing-card-description,
.home-page .pricing-card--featured .pricing-card-features li {
    color: var(--white);
}

.home-page .pricing-card--featured .pricing-card-features li::before {
    color: var(--accent-warm);
}

.home-page .pricing-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.home-page .pricing-card-name {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.home-page .pricing-card-price {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-snug);
}

.home-page .pricing-card-description {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.home-page .pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.home-page .pricing-card-features li {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.home-page .pricing-card-features li::before {
    content: "✓";
    color: var(--accent);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}

.home-page .pricing-card-cta {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--white);
    background: var(--text-primary);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-xl);
    text-decoration: none;
    text-align: center;
    transition: opacity var(--duration-fast);
}

.home-page .pricing-card-cta:hover {
    opacity: 0.9;
}

.home-page .pricing-card--featured .pricing-card-cta {
    background: var(--white);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .faq {
    background: var(--background);
    padding: var(--space-20) var(--space-6);
}

.home-page .faq-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.home-page .faq-title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 var(--space-12) 0;
    letter-spacing: var(--tracking-snug);
}

.home-page .faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: none;
    width: 100%;
}

.home-page .faq-item {
    border-bottom: 1px solid var(--black-12);
    padding-bottom: var(--space-4);
    border-radius: 0;
    background: none;
    overflow: visible;
}

.home-page .faq-item summary {
    padding: var(--space-4) 0;
}

.home-page .faq-question {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--space-4) 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color var(--duration-fast);
}

.home-page .faq-question:hover {
    color: var(--text-dark);
}

.home-page .faq-question::after {
    content: "+";
    font-size: 24px;
    font-weight: var(--weight-regular);
    color: var(--text-muted);
    transition: transform var(--duration-fast);
}

.home-page .faq-item[open] .faq-question::after {
    transform: rotate(45deg);
}

.home-page .faq-answer {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-regular);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    padding: 0 0 var(--space-4) 0;
    animation: fadeIn var(--duration-fast) var(--ease-out);
}

/* Hide default marker */
.home-page .faq-question::-webkit-details-marker {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .cta {
    background: var(--background-alt);
    padding: var(--space-20) var(--space-6);
    text-align: center;
}

.home-page .cta-container {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.home-page .cta-title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-tight);
    margin: 0;
}

.home-page .cta-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    margin: 0;
}

.home-page .cta-button {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--white);
    background: var(--text-primary);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: opacity var(--duration-fast);
}

.home-page .cta-button:hover {
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .site-footer {
    background: var(--background);
    color: var(--text-primary);
    padding: 80px 64px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.home-page .site-footer .footer-main {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    gap: 64px;
}

.home-page .site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 300px;
}

.home-page .site-footer .logo {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: var(--tracking-tight);
}

.home-page .site-footer .footer-brand p {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.home-page .site-footer .footer-nav {
    display: flex;
    gap: 64px;
}

.home-page .site-footer .footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-page .site-footer .footer-column h4 {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.home-page .site-footer .footer-column a {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-regular);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.home-page .site-footer .footer-column a:hover {
    color: var(--text-primary);
}

.home-page .site-footer .footer-bottom {
    width: 100%;
    max-width: 1200px;
    padding-top: 32px;
    border-top: 1px solid var(--black-12);
}

.home-page .site-footer .footer-bottom p {
    font-family: var(--font-body);
    font-size: var(--text-tiny);
    color: var(--text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
    .home-page {
        --text-h1: 56px;
        --text-h2: 36px;
        --text-h3: 28px;
    }

    .home-page .hero-sp-grid {
        height: 300px;
    }

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

    .home-page .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .home-page .site-footer .footer-main {
        flex-direction: column;
        gap: 48px;
    }

    .home-page .site-footer .footer-nav {
        gap: 32px;
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 809px) {
    .home-page {
        --text-h1: 48px;
        --text-h2: 32px;
        --text-h3: 24px;
        --text-body: 16px;
        --container-padding: 24px;
    }

    .home-page .nav-links,
    .home-page .nav-cta {
        display: none;
    }

    .home-page .nav-hamburger {
        display: flex;
    }

    .home-page .hero {
        padding: var(--space-16) var(--space-4);
    }

    .home-page .hero-cta {
        width: 100%;
        text-align: center;
    }

    /* Hero SP mobile — 67% of desktop proportions */
    .home-page .hero-sp {
        padding: 72px var(--space-4) 12px;
        overflow: visible;
    }

    /* ThreeJS canvas — proportional overlap (67% of desktop -120px) */
    .home-page .hero-dotted-surface {
        height: 270px;
        margin-top: -80px;
    }

    .home-page .hero-sp-container {
        gap: var(--space-4);
        padding-top: 48px;
    }

    .home-page .hero-sp-headline {
        font-size: 36px;
    }

    .home-page .hero-sp-subtext {
        font-size: 16px;
    }

    .home-page .hero-sp-buttons {
        flex-direction: column;
        width: 100%;
    }

    .home-page .hero-sp-btn {
        justify-content: center;
        width: 100%;
    }

    .home-page .features {
        padding: var(--space-16) var(--space-4);
    }

    .home-page .features-grid {
        grid-template-columns: 1fr;
    }

    .home-page .testimonials {
        padding: var(--space-16) var(--space-4);
    }

    .home-page .testimonial-quote {
        font-size: 24px;
    }

    .home-page .pricing {
        padding: var(--space-16) var(--space-4);
    }

    .home-page .faq {
        padding: var(--space-16) var(--space-4);
    }

    .home-page .faq-title {
        font-size: 32px;
    }

    .home-page .faq-question {
        font-size: 16px;
    }

    .home-page .cta {
        padding: var(--space-16) var(--space-4);
    }

    .home-page .cta-button {
        width: 100%;
    }

    .home-page .site-footer {
        padding: 64px 24px 32px;
    }

    .home-page .site-footer .footer-main {
        flex-direction: column;
        gap: 48px;
    }

    .home-page .site-footer .footer-nav {
        gap: 32px;
        flex-wrap: wrap;
    }

    .home-page .site-footer .footer-bottom {
        text-align: left;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small Mobile (iPhone 15 and smaller)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 420px) {
    /* Headline must fit on one line at 390px viewport
       390px - 32px padding = 358px content width
       28px font with -0.03em tracking fits "Most AI projects fail. Ours ship." */
    .home-page .hero-sp-headline {
        font-size: 28px;
        letter-spacing: -0.03em;
    }

    /* Slightly more horizontal padding gives more visual breathing room */
    .home-page .hero-sp {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    /* ThreeJS overlap — consistent with 809px breakpoint */
    .home-page .hero-dotted-surface {
        margin-top: -80px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE LOAD ANIMATION — Smooth entrance for entire page
   Body starts hidden, fades in when DOM ready
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page starts invisible to prevent flash of unstyled content */
.home-page {
    animation: pageEnter 400ms var(--motion-ease-fluid) 50ms both;
}

@keyframes pageEnter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Navigation slides down from top */
.home-page .nav {
    opacity: 0;
    transform: translateY(-10px);
    animation: navEnter 500ms var(--motion-ease-fluid) 100ms forwards;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL-TRIGGERED ANIMATIONS — Physics-First
   Using CSS animations (not transitions) for smooth, interruptible motion
   Stagger: 40ms base, max 400ms total
   Duration: 500ms (calculated: 300ms base + 20px/fast)
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ─── HERO ENTRANCE (Page Load) ─── */
.home-page .hero-sp-rating,
.home-page .hero-sp-headline,
.home-page .hero-sp-subtext,
.home-page .hero-sp-buttons {
    opacity: 0;
    animation: fadeSlideUp 500ms var(--motion-ease-fluid) forwards;
}

.home-page .hero-sp-rating   { animation-delay: 0ms; }
.home-page .hero-sp-headline { animation-delay: 40ms; }
.home-page .hero-sp-subtext  { animation-delay: 80ms; }
.home-page .hero-sp-buttons  { animation-delay: 120ms; }

/* ─── SCROLL-TRIGGERED SECTIONS ─── */
.home-page .services-header,
.home-page .pricing-header,
.home-page .faq-title,
.home-page .cta-container,
.home-page .testimonial {
    opacity: 0;
}

.home-page .services-header.is-visible,
.home-page .pricing-header.is-visible,
.home-page .faq-title.is-visible,
.home-page .cta-container.is-visible,
.home-page .testimonial.is-visible {
    animation: fadeSlideUp 500ms var(--motion-ease-fluid) forwards;
}

/* ─── SERVICE MENU (Staggered List Pattern) ─── */
.home-page .service-item {
    opacity: 0;
}

.home-page .services-menu.is-visible .service-item {
    animation: fadeSlideUp 500ms var(--motion-ease-fluid) forwards;
}

.home-page .services-menu.is-visible .service-item:nth-child(1) { animation-delay: 0ms; }
.home-page .services-menu.is-visible .service-item:nth-child(2) { animation-delay: 40ms; }
.home-page .services-menu.is-visible .service-item:nth-child(3) { animation-delay: 80ms; }
.home-page .services-menu.is-visible .service-item:nth-child(4) { animation-delay: 120ms; }

/* ─── PRICING CARDS (Staggered List Pattern) ─── */
.home-page .pricing-card {
    opacity: 0;
}

.home-page .pricing-grid.is-visible .pricing-card {
    animation: fadeSlideUp 500ms var(--motion-ease-fluid) forwards;
}

.home-page .pricing-grid.is-visible .pricing-card:nth-child(1) { animation-delay: 0ms; }
.home-page .pricing-grid.is-visible .pricing-card:nth-child(2) { animation-delay: 40ms; }
.home-page .pricing-grid.is-visible .pricing-card:nth-child(3) { animation-delay: 80ms; }

/* ─── FAQ ITEMS (Staggered List Pattern) ─── */
.home-page .faq-item {
    opacity: 0;
}

.home-page .faq-list.is-visible .faq-item {
    animation: fadeSlideUp 500ms var(--motion-ease-fluid) forwards;
}

.home-page .faq-list.is-visible .faq-item:nth-child(1) { animation-delay: 0ms; }
.home-page .faq-list.is-visible .faq-item:nth-child(2) { animation-delay: 40ms; }
.home-page .faq-list.is-visible .faq-item:nth-child(3) { animation-delay: 80ms; }
.home-page .faq-list.is-visible .faq-item:nth-child(4) { animation-delay: 120ms; }
.home-page .faq-list.is-visible .faq-item:nth-child(5) { animation-delay: 160ms; }

/* ─── ELEVATION LIFT (Hover Pattern) ─── */
/* Objects lift up to meet the user — spring physics */
.home-page .pricing-card {
    transition:
        transform 300ms var(--motion-ease-fluid),
        box-shadow 300ms var(--motion-ease-fluid);
}

.home-page .pricing-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.1);
}

.home-page .service-item {
    transition:
        transform 300ms var(--motion-ease-fluid),
        background 150ms;
}

.home-page .service-item:hover {
    transform: translateY(-2px);
}

/* ─── PRESS SCALE (Micro-interaction Pattern) ─── */
/* Physical objects recede slightly when pressed */
.home-page .hero-sp-btn,
.home-page .nav-cta,
.home-page .cta-button,
.home-page .pricing-card-cta {
    transition:
        transform 150ms var(--motion-ease-spring-stiff),
        background 150ms,
        opacity 150ms;
}

.home-page .hero-sp-btn:active,
.home-page .nav-cta:active,
.home-page .cta-button:active,
.home-page .pricing-card-cta:active {
    transform: scale(0.96);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced Motion Support
   For people who experience dizziness from animations
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    /* Page and nav entrance — instant visibility */
    .home-page {
        animation: none;
        opacity: 1;
    }

    .home-page .nav {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .home-page .hero-sp-rating,
    .home-page .hero-sp-headline,
    .home-page .hero-sp-subtext,
    .home-page .hero-sp-buttons {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .home-page .services-header,
    .home-page .pricing-header,
    .home-page .faq-title,
    .home-page .cta-container,
    .home-page .testimonial,
    .home-page .service-item,
    .home-page .pricing-card,
    .home-page .faq-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .home-page .pricing-card:hover,
    .home-page .feature-card:hover {
        transform: none;
    }

    .home-page .hero-sp-btn:active,
    .home-page .nav-cta:active,
    .home-page .cta-button:active {
        transform: none;
    }

    /* Contact page elements */
    .contact-page .contact-badge,
    .contact-page .contact-headline,
    .contact-page .contact-subtext,
    .contact-page .contact-method,
    .contact-page .contact-form-wrapper,
    .contact-page .form-group {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Legal page elements */
    .legal-page .legal-badge,
    .legal-page .legal-title,
    .legal-page .legal-date,
    .legal-page .legal-body {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}