/**
 * Utenfra.no - Modern Video Agency Design 2026
 * Mobile-first, video-centric, conversion-optimized
 */

/* ===================================
   CSS Variables
   =================================== */
:root {
    /* Primary - Deep dark for video contrast */
    --color-dark: #0a0a0f;
    --color-dark-soft: #141419;
    --color-dark-medium: #1e1e26;

    /* Accent - Warm coral/orange for energy */
    --color-accent: #ff6b35;
    --color-accent-hover: #ff8555;
    --color-accent-soft: rgba(255, 107, 53, 0.15);

    /* Neutrals */
    --color-white: #ffffff;
    --color-gray-50: #fafafa;
    --color-gray-100: #f4f4f5;
    --color-gray-200: #e4e4e7;
    --color-gray-300: #d4d4d8;
    --color-gray-400: #a1a1aa;
    --color-gray-500: #71717a;
    --color-gray-600: #52525b;
    --color-gray-700: #3f3f46;
    --color-gray-800: #27272a;
    --color-gray-900: #18181b;

    /* Success/Trust */
    --color-success: #22c55e;
    --color-success-soft: rgba(34, 197, 94, 0.15);

    /* Typography */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
    --shadow-glow: 0 0 40px rgba(255, 107, 53, 0.3);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-normal: 300ms var(--ease-out);
    --transition-slow: 500ms var(--ease-out);
}

/* ===================================
   Reset & Base
   =================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-gray-700);
    background: var(--color-white);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

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

ul, ol {
    list-style: none;
}

/* ===================================
   Typography
   =================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-dark);
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    margin-bottom: var(--space-4);
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ff8c42 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero highlight - for emphasized text on dark backgrounds */
.hero-highlight {
    color: var(--color-accent);
}

/* ===================================
   Layout
   =================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-sm { max-width: 720px; }
.container-lg { max-width: 1400px; }

.section {
    padding: var(--space-16) 0;
}

.section-lg {
    padding: var(--space-24) 0;
}

/* Dark sections */
.section-dark {
    background: var(--color-dark);
    color: var(--color-white);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--color-white);
}

.section-dark p {
    color: var(--color-gray-300);
}

/* ===================================
   Header
   =================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--space-4) 0;
    transition: all var(--transition-normal);
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.logo {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-dark);
    letter-spacing: -0.03em;
}

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

/* On dark hero */
.hero .site-header .logo,
.site-header:not(.scrolled) .logo {
    color: var(--color-white);
}

/* Desktop nav */
.desktop-nav {
    display: none;
    align-items: center;
    gap: var(--space-1);
}

.nav-link {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-dark);
    background: var(--color-gray-100);
}

.site-header:not(.scrolled) .nav-link {
    color: rgba(255,255,255,0.8);
}

.site-header:not(.scrolled) .nav-link:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.1);
}

.header-ctas {
    display: none;
    align-items: center;
    gap: var(--space-3);
}

.header-cta {
    display: inline-flex;
}

.header-cta-secondary {
    background: transparent;
    border: 1px solid var(--color-gray-300);
    color: var(--color-dark);
}

.header-cta-secondary:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

/* Fix: Header button on dark/transparent background (before scroll) */
.site-header:not(.scrolled) .header-cta-secondary {
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
}

.site-header:not(.scrolled) .header-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Dark header mode - for pages with dark hero sections */
body.dark-header .site-header .logo,
body.dark-header .site-header .logo span {
    color: #ffffff !important;
}

body.dark-header .site-header .nav-link {
    color: rgba(255,255,255,0.9) !important;
}

body.dark-header .site-header .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.1);
}

body.dark-header .site-header .mobile-menu-toggle span {
    background: #ffffff !important;
}

body.dark-header .site-header .header-cta-secondary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5);
}

body.dark-header .site-header .header-cta {
    background: var(--color-accent);
    color: #ffffff;
}

/* When scrolled on dark-header pages, restore normal colors */
body.dark-header .site-header.scrolled .logo,
body.dark-header .site-header.scrolled .logo span {
    color: #0a0a0f !important;
}

body.dark-header .site-header.scrolled .nav-link {
    color: #52525b !important;
}

body.dark-header .site-header.scrolled .nav-link:hover {
    color: #0a0a0f !important;
    background: rgba(0,0,0,0.05);
}

body.dark-header .site-header.scrolled .mobile-menu-toggle span {
    background: #0a0a0f !important;
}

body.dark-header .site-header.scrolled .header-cta-secondary {
    color: #0a0a0f !important;
    border-color: rgba(0, 0, 0, 0.2);
}

/* Light hero mode - for pages with light/white hero backgrounds (like package pages) */
body.light-hero .site-header:not(.scrolled) .logo,
body.light-hero .site-header:not(.scrolled) .logo span {
    color: #0a0a0f !important;
}

body.light-hero .site-header:not(.scrolled) .nav-link {
    color: rgba(10, 10, 15, 0.8) !important;
}

body.light-hero .site-header:not(.scrolled) .nav-link:hover {
    color: #0a0a0f !important;
    background: rgba(0, 0, 0, 0.05);
}

body.light-hero .site-header:not(.scrolled) .mobile-menu-toggle span {
    background: #0a0a0f !important;
}

body.light-hero .site-header:not(.scrolled) .header-cta-secondary {
    color: #0a0a0f !important;
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-hero .site-header:not(.scrolled) .header-cta {
    background: var(--color-primary);
    color: #ffffff;
}

/* Mobile nav - slide in from right */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: var(--color-white);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}

.mobile-nav.active {
    transform: translateX(0);
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
}

.mobile-nav-header .logo {
    color: var(--color-dark);
}

.mobile-nav-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-close:active {
    background: var(--color-gray-200);
}

.mobile-nav-links {
    flex: 1;
    padding: var(--space-4) 0;
    overflow-y: auto;
}

.mobile-nav-link {
    display: block;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: none;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-link:active,
.mobile-nav-link.active {
    background: var(--color-gray-50);
}

.mobile-nav-link.active {
    color: var(--color-accent);
}

.mobile-nav-footer {
    padding: var(--space-5);
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.mobile-nav-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    text-align: center;
}

.mobile-nav-contact a {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-nav-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile menu */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 200;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-dark);
    border-radius: 2px;
    transition: all var(--transition-fast);
    pointer-events: none;
}

.site-header:not(.scrolled) .mobile-menu-toggle span {
    background: var(--color-white);
}

.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-overlay.active {
    display: block;
}

.mobile-nav-close {
    display: none;
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 44px;
    height: 44px;
    background: var(--color-gray-100);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-nav-close svg {
    pointer-events: none;
}

/* ===================================
   Buttons
   =================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    white-space: nowrap;
}

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

.btn-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-secondary {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-secondary:hover {
    background: var(--color-dark-soft);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-gray-300);
}

.btn-outline:hover {
    border-color: var(--color-dark);
    background: var(--color-gray-50);
}

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

.btn-white:hover {
    background: var(--color-gray-100);
    transform: translateY(-2px);
}

.btn-ghost {
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    border-color: rgba(255,255,255,0.2);
}

.btn-ghost:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.btn-icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-full);
}

/* ===================================
   Hero Section
   =================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--color-dark);
    color: var(--color-white);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg video,
.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 10, 15, 0.85) 0%,
        rgba(10, 10, 15, 0.7) 50%,
        rgba(10, 10, 15, 0.85) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: var(--space-32) 0 var(--space-16);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent-soft);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);
    margin-bottom: var(--space-6);
}

.hero-badge svg {
    width: 16px;
    height: 16px;
}

.hero h1 {
    color: var(--color-white);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-6);
    line-height: 1.1;
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: var(--text-5xl);
    }
}

.hero p {
    font-size: var(--text-xl);
    color: var(--color-gray-300);
    margin-bottom: var(--space-8);
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.hero-stat {
    text-align: left;
}

.hero-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.hero-stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

/* Hero with phone mockup */
.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    text-align: center;
}

.hero-container .hero-buttons {
    justify-content: center;
}

.hero-container .hero-stats {
    justify-content: center;
}

.hero-phone {
    display: block;
    flex-shrink: 0;
}

.phone-frame {
    position: relative;
    width: 180px;
    height: 380px;
    background: #1a1a1a;
    border-radius: 36px;
    padding: 8px;
    margin: 0 auto;
    box-shadow:
        0 0 0 2px #333,
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(255, 107, 53, 0.1);
}

.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 20px;
    background: #1a1a1a;
    border-radius: 14px;
    z-index: 10;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: var(--color-dark);
    border-radius: 28px;
    overflow: hidden;
    position: relative;
}

.phone-screen video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.video-mute-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background var(--transition-fast);
}

.video-mute-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.video-mute-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.video-mute-btn .icon-unmuted {
    display: none;
}

.video-mute-btn.unmuted .icon-muted {
    display: none;
}

.video-mute-btn.unmuted .icon-unmuted {
    display: block;
}

.phone-video-placeholder {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: var(--color-dark-medium);
    color: var(--color-gray-500);
}

.phone-video-placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

.phone-video-placeholder span {
    font-size: var(--text-sm);
}

/* Show placeholder if video fails to load */
.phone-screen video:not([src]),
.phone-screen video[src=""] {
    display: none;
}

.phone-screen video:not([src]) + .phone-video-placeholder,
.phone-screen video[src=""] + .phone-video-placeholder {
    display: flex;
}

.phone-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #666;
    border-radius: 2px;
}

/* ===================================
   Video Feature Section (Services page)
   =================================== */
.video-feature {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

.video-feature-content .overline {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.video-feature-content h2 {
    margin-bottom: var(--space-4);
}

.video-feature-content > p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.video-feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.video-feature-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-gray-700);
}

.video-feature-list li svg {
    width: 20px;
    height: 20px;
    color: var(--color-success);
    flex-shrink: 0;
}

.video-feature-player {
    position: relative;
}

.video-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--color-dark);
    box-shadow: var(--shadow-xl);
}

.video-thumbnail {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 2;
}

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

.video-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
}

.video-thumbnail:hover::after {
    background: rgba(0, 0, 0, 0.4);
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(255, 107, 53, 0.4);
}

.video-play-btn svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
    margin-left: 4px;
}

.video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 15px 50px rgba(255, 107, 53, 0.5);
}

.video-duration {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    padding: var(--space-1) var(--space-3);
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    z-index: 3;
}

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

.video-wrapper.playing .video-thumbnail {
    display: none;
}

@media (min-width: 768px) {
    .video-feature {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .hero-container {
        flex-direction: row;
        justify-content: space-between;
        gap: var(--space-12);
        text-align: left;
    }

    .hero-container .hero-buttons {
        justify-content: flex-start;
    }

    .hero-container .hero-stats {
        justify-content: flex-start;
    }

    .hero-phone {
        display: block;
        margin: 0;
    }

    .phone-frame {
        width: 280px;
        height: 580px;
        border-radius: 44px;
        padding: 12px;
    }

    .phone-notch {
        width: 100px;
        height: 28px;
        top: 16px;
        border-radius: 16px;
    }

    .phone-screen {
        border-radius: 34px;
    }

    .phone-home-indicator {
        width: 140px;
        height: 5px;
        bottom: 10px;
    }

    .hero-content {
        max-width: 550px;
    }

    .video-wrapper {
        aspect-ratio: 1 / 1;
        max-width: 480px;
    }
}

/* ===================================
   Section Headers
   =================================== */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12);
}

.section-header .overline {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.section-header h2 {
    margin-bottom: var(--space-4);
}

.section-header p {
    font-size: var(--text-lg);
    color: var(--color-gray-500);
    margin-bottom: 0;
}

.section-dark .section-header p {
    color: var(--color-gray-400);
}

/* ===================================
   How It Works
   =================================== */
.process-grid {
    display: grid;
    gap: var(--space-6);
}

.process-step {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    transition: all var(--transition-normal);
}

.process-step:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.process-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    border-radius: var(--radius-lg);
}

.process-content h4 {
    margin-bottom: var(--space-2);
}

.process-content p {
    color: var(--color-gray-500);
    margin-bottom: 0;
    font-size: var(--text-sm);
}

/* Process steps in dark sections */
.section-dark .process-step {
    background: var(--color-dark-soft);
}

.section-dark .process-step:hover {
    background: var(--color-dark-medium);
    box-shadow: var(--shadow-xl);
}

.section-dark .process-content h4 {
    color: var(--color-white);
}

.section-dark .process-content p {
    color: var(--color-gray-400);
}

/* ===================================
   Packages / Pricing
   =================================== */
.packages-grid {
    display: grid;
    gap: var(--space-6);
}

.package-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    transition: all var(--transition-normal);
}

.package-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-lg);
}

.package-card.recommended {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.package-badge {
    position: absolute;
    top: calc(-1 * var(--space-3));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-4);
    background: var(--color-accent);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.package-header {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.package-name {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
}

.package-tagline {
    color: #3f3f46 !important;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.package-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
}

.package-price-value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-dark);
}

.package-price-period {
    font-size: var(--text-sm);
    color: var(--color-gray-800);
}

.package-features {
    margin-bottom: var(--space-6);
}

.package-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.package-features li svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-success);
    margin-top: 2px;
}

.package-card .btn {
    width: 100%;
}

/* ===================================
   Testimonials
   =================================== */
.testimonials-grid {
    display: grid;
    gap: var(--space-6);
}

.testimonial-card {
    background: var(--color-dark-soft);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.testimonial-content {
    font-size: var(--text-lg);
    color: var(--color-gray-200);
    margin-bottom: var(--space-6);
    font-style: italic;
    line-height: 1.7;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-gray-700);
    overflow: hidden;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-name {
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-1);
}

.testimonial-title {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

/* Testimonials with placeholders */
.testimonials-section {
    background: var(--color-gray-50);
}

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

.testimonials-section .testimonial-card {
    background: white;
    text-align: center;
}

.testimonials-section .testimonial-card .media-placeholder {
    width: 120px;
    height: 120px;
    min-height: auto;
    margin: 0 auto var(--space-6);
    border-radius: var(--radius-full);
}

.testimonial-quote {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    margin-bottom: var(--space-6);
    font-style: italic;
    line-height: 1.7;
    border: none;
    padding: 0;
}

cite.testimonial-author {
    display: block;
    font-style: normal;
}

cite.testimonial-author strong {
    display: block;
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

cite.testimonial-author span {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

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

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

/* ===================================
   FAQ
   =================================== */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-gray-200);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-dark);
    transition: color var(--transition-fast);
}

.faq-question:hover {
    color: var(--color-accent);
}

.faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
}

.faq-icon svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-normal);
}

.faq-item.active .faq-icon {
    background: var(--color-accent);
    color: var(--color-white);
}

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

.faq-answer {
    display: none;
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    color: var(--color-gray-600);
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    display: block;
}

/* ===================================
   CTA Section
   =================================== */
.cta-section {
    background: var(--color-dark);
    color: var(--color-white);
    text-align: center;
    padding: var(--space-20) 0;
}

.cta-section h2 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.cta-section p {
    color: var(--color-gray-400);
    font-size: var(--text-lg);
    margin-bottom: var(--space-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* ===================================
   Footer
   =================================== */
.site-footer {
    background: var(--color-dark);
    color: var(--color-gray-400);
    padding: var(--space-16) 0 var(--space-8);
}

.footer-grid {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.footer-brand .logo {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.footer-brand p {
    font-size: var(--text-sm);
    max-width: 300px;
}

.footer-col h4 {
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.footer-links li {
    margin-bottom: var(--space-2);
}

.footer-links a {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    transition: color var(--transition-fast);
}

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

.footer-link-all {
    color: var(--color-accent) !important;
    font-weight: 500;
}
.footer-link-all:hover {
    color: var(--color-white) !important;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-800);
    font-size: var(--text-sm);
    text-align: center;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    max-width: 132px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-dark-medium);
    color: var(--color-gray-400);
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
}

/* ===================================
   Tooltips
   =================================== */
.tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--color-gray-400);
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

.tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
}

.tooltip:hover::after,
.tooltip:hover::before,
.tooltip:focus::after,
.tooltip:focus::before {
    opacity: 1;
    visibility: visible;
}

/* Tooltip icon variant */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: var(--space-1);
    vertical-align: middle;
    color: var(--color-gray-400);
    cursor: help;
}

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

/* Stat tooltip with source - magnifying glass icon */
.stat-tooltip {
    position: relative;
    cursor: help;
}

.stat-tooltip .stat-source-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: var(--space-1);
    vertical-align: middle;
    color: rgba(255,255,255,0.5);
    transition: color var(--transition-fast);
}

.stat-tooltip:hover .stat-source-icon {
    color: var(--color-accent);
}

.stat-tooltip .stat-tooltip-content {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-white);
    color: var(--color-dark);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.6;
    width: max-content;
    max-width: 320px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
    box-shadow: var(--shadow-xl);
    pointer-events: none;
    text-align: left;
}

.stat-tooltip .stat-tooltip-content::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-white);
}

.stat-tooltip:hover .stat-tooltip-content {
    opacity: 1;
    visibility: visible;
}

.stat-tooltip .stat-tooltip-content strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-dark);
}

.stat-tooltip .stat-tooltip-content a {
    color: var(--color-accent);
    text-decoration: underline;
    font-size: var(--text-xs);
}

/* Term tooltip for technical terms */
.term-tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dashed var(--color-accent);
    color: inherit;
}

.term-tooltip::after {
    content: attr(data-term);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

.term-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ===================================
   Forms
   =================================== */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ===================================
   Responsive
   =================================== */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-6);
    }

    .desktop-nav {
        display: flex;
    }

    .header-ctas {
        display: flex;
    }

    .mobile-menu-toggle {
        display: none;
    }

    .mobile-nav,
    .mobile-nav-overlay {
        display: none !important;
    }

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

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

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

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

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

@media (min-width: 1024px) {
    :root {
        --text-5xl: 4rem;
        --text-6xl: 5rem;
    }

    .section {
        padding: var(--space-20) 0;
    }

    .section-lg {
        padding: var(--space-32) 0;
    }

    .hero-content {
        max-width: 650px;
    }

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

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

/* Mobile styles */
@media (max-width: 767px) {
    :root {
        --text-5xl: 2.25rem;
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
    }

    .section {
        padding: var(--space-12) 0;
    }

    .hero {
        min-height: auto;
        padding: var(--space-24) 0 var(--space-12);
    }

    .hero-content {
        padding: 0 0 var(--space-8);
    }

    .hero h1 {
        font-size: var(--text-4xl);
    }

    .hero h1 .text-gradient {
        display: block;
    }

    .hero-buttons {
        flex-direction: column;
    }

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

    .package-card {
        padding: var(--space-6);
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

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

/* ===================================
   Page Header
   =================================== */
.page-header {
    background: var(--color-dark);
    color: var(--color-white);
    text-align: center;
    padding: var(--space-32) 0 var(--space-16);
    min-height: 320px;
    display: flex;
    align-items: center;
}

.page-header .container {
    width: 100%;
}

.page-header .overline {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.page-header h1 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.page-header p {
    font-size: var(--text-lg);
    color: var(--color-gray-400);
    max-width: 600px;
    margin: 0 auto;
}

.page-header p a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ===================================
   Features Grid
   =================================== */
.features-grid {
    display: grid;
    gap: var(--space-6);
}

.feature-card {
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    transition: all var(--transition-normal);
}

.feature-card:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-soft);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
}

.feature-card h4 {
    margin-bottom: var(--space-2);
}

.feature-card p {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================================
   Packages Detailed
   =================================== */
.packages-detailed .package-card {
    display: flex;
    flex-direction: column;
}

.package-pricing {
    margin-top: var(--space-2);
}

.package-price-monthly {
    font-size: var(--text-sm);
    color: #3f3f46 !important;
    margin-top: var(--space-1);
}

.package-body {
    flex-grow: 1;
}

.package-description {
    font-size: var(--text-sm);
    color: #3f3f46 !important;
    margin-bottom: var(--space-4);
}

.package-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.btn-block {
    width: 100%;
}

/* ===================================
   Addons
   =================================== */
.addons-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.addon-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-5);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
}

.addon-content h4 {
    margin-bottom: var(--space-1);
}

.addon-content p {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

.addon-price {
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-dark);
}

.addon-price small {
    font-weight: 400;
    font-family: var(--font-body);
    color: var(--color-gray-500);
    font-size: var(--text-xs);
}

/* ===================================
   Comparison Table
   =================================== */
.comparison-table-wrapper {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--color-gray-200);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
}

.comparison-table th {
    font-size: var(--text-lg);
    font-weight: 600;
    background: var(--color-white);
    position: relative;
}

.comparison-table th.recommended {
    background: var(--color-accent-soft);
}

.comparison-table td.recommended {
    background: rgba(255, 107, 53, 0.05);
}

.comparison-badge {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: var(--space-1);
}

.comparison-table .check {
    width: 20px;
    height: 20px;
    stroke: var(--color-success);
    stroke-width: 3;
    fill: none;
}

.comparison-table .price-row td {
    font-size: var(--text-lg);
    border-bottom: none;
}

/* ===================================
   Contact Page
   =================================== */
.contact-grid {
    display: grid;
    gap: var(--space-12);
}

.contact-form-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
}

.contact-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--color-gray-400);
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: grid;
    gap: var(--space-4);
}

.form-note {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    text-align: center;
    margin-top: var(--space-4);
    margin-bottom: 0;
}

.form-note a {
    color: var(--color-accent);
    text-decoration: underline;
}

.form-success {
    text-align: center;
    padding: var(--space-8);
}

.form-success svg {
    color: var(--color-success);
    margin-bottom: var(--space-4);
}

.form-success h3 {
    margin-bottom: var(--space-2);
}

.form-success p {
    color: var(--color-gray-500);
    margin-bottom: 0;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-info-card {
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
}

.contact-info-card.highlight {
    background: var(--color-accent-soft);
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.contact-info-card h3 {
    margin-bottom: var(--space-3);
}

.contact-info-card p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    font-weight: 500;
    color: var(--color-dark);
    transition: all var(--transition-fast);
}

.contact-method:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.contact-method svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.contact-steps {
    counter-reset: contact-step;
    margin-top: var(--space-4);
}

.contact-steps li {
    counter-increment: contact-step;
    position: relative;
    padding-left: var(--space-10);
    padding-bottom: var(--space-4);
}

.contact-steps li::before {
    content: counter(contact-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.contact-steps li:last-child {
    padding-bottom: 0;
}

.contact-steps strong {
    display: block;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.contact-steps span {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1.2fr 1fr;
    }
}

/* ===================================
   Package Detail Page
   =================================== */
.package-hero {
    background: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-32) 0 var(--space-16);
}

.package-hero-content {
    max-width: 600px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin-bottom: var(--space-6);
    transition: color var(--transition-fast);
}

.back-link:hover {
    color: var(--color-white);
}

.back-link svg {
    width: 16px;
    height: 16px;
}

.package-hero-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    background: var(--color-accent);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

.package-hero h1 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.package-hero-tagline {
    font-size: var(--text-xl);
    color: var(--color-gray-400);
    margin-bottom: var(--space-6);
}

.package-hero-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.package-hero-price .price-value {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-white);
}

.package-hero-price .price-period {
    font-size: var(--text-xl);
    color: var(--color-gray-400);
}

.package-hero-price .price-note {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.package-details-grid {
    display: grid;
    gap: var(--space-12);
}

.package-section {
    margin-bottom: var(--space-10);
}

.package-section h2 {
    margin-bottom: var(--space-4);
}

.package-section .lead {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
}

.package-features-detailed {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.package-features-detailed li {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.package-features-detailed li svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-success);
}

.package-features-detailed li span {
    color: var(--color-gray-700);
}

.package-process {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.package-process-step {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
}

.package-process-step .step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: var(--radius-lg);
}

.package-process-step .step-content h4 {
    margin-bottom: var(--space-1);
}

.package-process-step .step-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
}

.simple-list {
    margin-top: var(--space-4);
}

.simple-list li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-gray-600);
}

.simple-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
}

/* Sidebar */
.package-details-sidebar {
    display: none;
}

.sidebar-card {
    padding: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-2xl);
}

.sidebar-card.sticky {
    position: sticky;
    top: calc(var(--space-20));
}

.sidebar-card h3 {
    margin-bottom: var(--space-4);
}

.sidebar-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.sidebar-price .price-value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-dark);
}

.sidebar-price .price-period {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.sidebar-price-note {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

.sidebar-features {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.sidebar-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.sidebar-features li svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-success);
    margin-top: 2px;
}

.sidebar-note {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-top: var(--space-3);
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .package-details-grid {
        grid-template-columns: 1fr 350px;
    }

    .package-details-sidebar {
        display: block;
    }
}

/* ===================================
   About Page
   =================================== */
.about-intro-grid {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 768px) {
    .about-intro-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.about-intro {
    margin-bottom: 0;
}

.about-intro h2 {
    margin-bottom: var(--space-6);
}

.about-intro .lead {
    font-size: var(--text-xl);
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}

.about-intro-image img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.values-grid {
    display: grid;
    gap: var(--space-6);
}

.value-card {
    padding: var(--space-6);
    background: var(--color-dark-soft);
    border-radius: var(--radius-xl);
}

.value-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-soft);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.value-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
}

.value-card h3 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.value-card p {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Founder section */
.founder-section {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

.founder-image {
    display: flex;
    justify-content: center;
}

.founder-image img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
    .founder-image img {
        width: 280px;
        height: 280px;
    }
}

.founder-content .overline {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.founder-content h2 {
    margin-bottom: var(--space-4);
}

.founder-content .lead {
    font-size: var(--text-xl);
    color: var(--color-gray-600);
    font-style: italic;
    margin-bottom: var(--space-4);
}

.founder-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
}

.founder-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.founder-meta-item strong {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    font-weight: 600;
}

.founder-meta-item span {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
}

@media (min-width: 768px) {
    .founder-section {
        grid-template-columns: 280px 1fr;
    }
}

/* Company facts */
.company-facts {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .company-facts {
        grid-template-columns: repeat(3, 1fr);
    }
}

.company-fact {
    text-align: center;
    padding: var(--space-6);
}

.company-fact-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-soft);
    border-radius: var(--radius-lg);
}

.company-fact-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
}

.company-fact h4 {
    margin-bottom: var(--space-2);
}

.company-fact p {
    color: var(--color-gray-600);
    margin-bottom: 0;
    font-size: var(--text-sm);
}

/* Funnel section */
.funnel-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.funnel-step {
    padding: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
}

.funnel-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.funnel-step h4 {
    margin-bottom: var(--space-2);
}

.funnel-step p {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

.funnel-arrow {
    display: flex;
    justify-content: center;
    color: var(--color-gray-300);
}

.funnel-arrow svg {
    width: 24px;
    height: 24px;
}

/* ===================================
   FAQ Page
   =================================== */
.faq-category {
    margin-bottom: var(--space-10);
}

.faq-category:last-child {
    margin-bottom: 0;
}

.faq-category-title {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-gray-200);
}

/* ===================================
   Legal Content
   =================================== */
.legal-content h2,
.legal-content h3 {
    font-size: var(--text-xl);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
}

.legal-content h2:first-child,
.legal-content h3:first-child {
    margin-top: 0;
}

.legal-content h2 + h3 {
    margin-top: var(--space-6);
}

.legal-content p {
    color: var(--color-gray-600);
}

.legal-content ul {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.legal-content ul li {
    position: relative;
    padding-left: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--color-gray-600);
}

.legal-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--color-gray-400);
    border-radius: var(--radius-full);
}

.legal-content a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ===================================
   Utilities
   =================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }

.hidden { display: none; }

.lead {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
}

@media (max-width: 767px) {
    .hide-mobile { display: none; }

    .page-header {
        padding: var(--space-24) 0 var(--space-12);
    }

    .package-hero {
        padding: var(--space-24) 0 var(--space-12);
    }

    .addon-item {
        flex-direction: column;
        gap: var(--space-3);
    }

    .addon-price {
        text-align: left;
    }
}

/* ===================================
   Results Page - Comparison Section
   =================================== */
.comparison-wrapper {
    background: var(--color-dark-medium);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-top: var(--space-8);
}

.comparison-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.comparison-header h3 {
    color: var(--color-white);
    font-size: var(--text-xl);
    font-weight: 600;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

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

.comparison-card {
    background: var(--color-dark-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid var(--color-gray-700);
}

.comparison-card-highlight {
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.2);
}

.comparison-card-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    margin-bottom: var(--space-4);
    font-weight: 600;
}

.comparison-card-highlight .comparison-card-label {
    color: var(--color-accent);
}

.comparison-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.comparison-stat {
    display: flex;
    flex-direction: column;
}

.comparison-stat-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-white);
    font-family: var(--font-display);
}

.comparison-stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.comparison-stat-primary .comparison-stat-value {
    color: var(--color-accent);
    font-size: var(--text-3xl);
}

.comparison-takeaway {
    display: flex;
    justify-content: center;
    gap: var(--space-12);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-700);
}

@media (max-width: 767px) {
    .comparison-takeaway {
        flex-direction: column;
        gap: var(--space-4);
        align-items: center;
    }
}

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

.takeaway-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-success);
    font-family: var(--font-display);
}

.takeaway-label {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

/* Details/Expandable Section */
.details-section {
    margin-top: var(--space-8);
}

.details-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: transparent;
    border: 1px solid var(--color-gray-600);
    border-radius: var(--radius-lg);
    color: var(--color-gray-300);
    font-size: var(--text-base);
    cursor: pointer;
    transition: var(--transition-fast);
}

.details-toggle:hover {
    background: var(--color-dark-soft);
    border-color: var(--color-gray-500);
    color: var(--color-white);
}

.details-toggle svg {
    transition: transform var(--transition-fast);
}

.details-content {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--color-dark-soft);
    border-radius: var(--radius-lg);
}

.details-intro {
    margin-bottom: var(--space-6);
    color: var(--color-gray-300);
}

.details-content h4 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
    font-size: var(--text-lg);
}

/* Data Tables */
.table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--space-6);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.data-table th,
.data-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-700);
}

.data-table th {
    color: var(--color-gray-400);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table td {
    color: var(--color-gray-300);
}

.data-table tbody tr:hover {
    background: var(--color-dark-medium);
}

.data-table tfoot td {
    border-top: 2px solid var(--color-gray-600);
    color: var(--color-white);
}

.data-table .highlight-row {
    background: rgba(255, 107, 53, 0.1);
}

.data-table .best-value {
    color: var(--color-success);
    font-weight: 600;
}

.data-table-compact th,
.data-table-compact td {
    padding: var(--space-2) var(--space-3);
}

.table-note {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-dark-medium);
    border-radius: var(--radius-md);
}

.nested-details {
    margin-top: var(--space-6);
}

.nested-details summary {
    cursor: pointer;
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    padding: var(--space-3);
    background: var(--color-dark-medium);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.nested-details summary:hover {
    color: var(--color-white);
}

.nested-details[open] summary {
    margin-bottom: var(--space-4);
}

/* Story Card */
.story-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-lg);
}

.story-header {
    margin-bottom: var(--space-6);
}

.story-header h2 {
    color: var(--color-dark);
    margin-top: var(--space-2);
}

.story-content p {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}

.story-quote {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    background: var(--color-accent-soft);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.story-footer p {
    color: var(--color-gray-500);
    font-size: var(--text-base);
}

/* Experience Grid */
.experience-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-12);
    align-items: start;
    margin-top: var(--space-8);
}

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

.experience-content p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
    font-size: var(--text-lg);
}

.experience-stats {
    display: flex;
    gap: var(--space-8);
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

@media (max-width: 767px) {
    .experience-stats {
        flex-direction: column;
        gap: var(--space-4);
    }
}

.experience-stat {
    text-align: center;
    flex: 1;
}

.experience-stat-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-accent);
    font-family: var(--font-display);
}

.experience-stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.experience-promo {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
    border: 1px solid var(--color-gray-200);
}

.experience-promo h4 {
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
}

.experience-promo p {
    font-size: var(--text-base);
    margin-bottom: 0;
}

.experience-relevance {
    padding: var(--space-4);
    background: var(--color-accent-soft);
    border-radius: var(--radius-md);
    font-size: var(--text-base) !important;
}

.experience-sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
}

.experience-sources span {
    color: var(--color-gray-500);
    margin-right: var(--space-2);
}

.experience-sources a {
    color: var(--color-accent);
    text-decoration: none;
}

.experience-sources a:hover {
    text-decoration: underline;
}

.experience-image {
    position: sticky;
    top: var(--space-8);
}

.image-placeholder {
    aspect-ratio: 4/3;
    background: var(--color-gray-200);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
}

.image-caption {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    text-align: center;
    margin-top: var(--space-2);
}

/* Current Work / Video Preview */
.current-work {
    text-align: center;
}

.current-work .lead {
    margin-bottom: var(--space-4);
}

.current-work > p {
    color: var(--color-gray-600);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.video-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

@media (max-width: 767px) {
    .video-preview-grid {
        grid-template-columns: 1fr;
    }
}

.video-placeholder {
    aspect-ratio: 9/16;
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.video-placeholder-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--color-gray-400);
}

.video-placeholder-inner svg {
    opacity: 0.5;
}

.video-placeholder-inner span {
    font-size: var(--text-sm);
}

.follow-cta {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

.social-links-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.social-links-row .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Results Summary Cards */
.results-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}

@media (max-width: 767px) {
    .results-summary {
        grid-template-columns: 1fr;
    }
}

.result-card {
    background: var(--color-dark-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border: 1px solid var(--color-gray-700);
}

.result-card-highlight {
    border-color: var(--color-accent);
    background: rgba(255, 107, 53, 0.1);
}

.result-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-dark-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.result-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-gray-400);
}

.result-card-highlight .result-icon {
    background: var(--color-accent);
}

.result-card-highlight .result-icon svg {
    stroke: var(--color-white);
}

.result-content {
    display: flex;
    flex-direction: column;
}

.result-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-white);
    font-family: var(--font-display);
    line-height: 1.2;
}

.result-card-highlight .result-value {
    color: var(--color-accent);
}

.result-label {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.results-note {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--color-dark-soft);
    border-radius: var(--radius-md);
    color: var(--color-gray-300);
    font-size: var(--text-base);
    text-align: center;
}

/* Results grid for timeline cards */
.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* Result card with timeframe structure (anbefalt.php) - light background */
.result-card:has(.result-timeframe) {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.result-timeframe {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.result-card:has(.result-timeframe) h4 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #0a0a0f;
    margin: 0 0 var(--space-2) 0;
}

.result-card:has(.result-timeframe) p {
    font-size: var(--text-base);
    color: #4a4a4a;
    margin: 0;
    line-height: 1.6;
}

.result-card.featured {
    border-color: var(--color-accent);
    background: rgba(255, 107, 53, 0.06);
}

.result-card.featured .result-timeframe {
    color: var(--color-accent);
}

/* Video Preview with Labels */
.video-preview-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.video-label {
    display: block;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    font-weight: 500;
}

/* ===================================
   Video vs Image Comparison
   =================================== */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}

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

.comparison-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 2px solid var(--color-gray-200);
    transition: var(--transition-normal);
}

.comparison-card-highlight {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.comparison-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.comparison-header svg {
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.comparison-card-highlight .comparison-header svg {
    color: var(--color-accent);
}

.comparison-header h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    flex-grow: 1;
}

.comparison-tag {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-white);
}

.comparison-tag-muted {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
}

.comparison-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.comparison-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.comparison-stat:last-child {
    border-bottom: none;
}

.comparison-stat-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    font-family: var(--font-display);
}

.comparison-card-highlight .comparison-stat-highlight .comparison-stat-value {
    color: var(--color-accent);
}

.comparison-stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

/* Comparison Summary/Insights */
.comparison-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
}

@media (max-width: 767px) {
    .comparison-summary {
        grid-template-columns: 1fr;
    }
}

.comparison-insight {
    text-align: center;
    padding: var(--space-4);
}

.comparison-insight-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-success);
    font-family: var(--font-display);
    margin-bottom: var(--space-2);
}

.comparison-insight-highlight .comparison-insight-value {
    color: var(--color-accent);
}

.comparison-insight-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    font-weight: 500;
}

/* ===================================
   Industry Landing Pages
   =================================== */

/* Industry Hero */
.industry-hero {
    position: relative;
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a3e 100%);
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.industry-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.industry-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(255,107,53,0.1) 0%, transparent 50%),
                      radial-gradient(circle at 80% 80%, rgba(124,58,237,0.1) 0%, transparent 50%);
}

.industry-hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

@media (max-width: 900px) {
    .industry-hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .industry-hero {
        min-height: auto;
        padding: var(--space-12) 0;
    }
}

.industry-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,107,53,0.15);
    border: 1px solid rgba(255,107,53,0.3);
    color: var(--color-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.industry-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: white;
    margin-bottom: var(--space-6);
    line-height: 1.1;
}

.industry-hero-lead {
    font-size: var(--text-xl);
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin-bottom: var(--space-8);
}

.industry-hero-lead em {
    color: var(--color-accent);
    font-style: normal;
    font-weight: 600;
}

.industry-hero-stats {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
    .industry-hero-stats {
        justify-content: center;
    }
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.hero-stat-value {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-accent);
    font-family: var(--font-display);
}

.hero-stat-label {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.6);
    max-width: 150px;
}

.industry-hero-cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .industry-hero-cta {
        justify-content: center;
    }
}

/* Fix for outline buttons on dark hero background */
.industry-hero .btn-outline {
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
}

.industry-hero .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Hero Visual */
.industry-hero-visual {
    position: relative;
    height: 400px;
}

@media (max-width: 900px) {
    .industry-hero-visual {
        display: none;
    }
}

.floating-video-card {
    position: absolute;
    top: 20%;
    left: 10%;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-xl);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.video-thumbnail {
    width: 200px;
    height: 280px;
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button {
    width: 56px;
    height: 56px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.video-caption {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.caption-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.caption-text {
    font-weight: 600;
    color: var(--color-dark);
}

.floating-stats-card {
    position: absolute;
    bottom: 20%;
    right: 10%;
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: white;
    animation: float 6s ease-in-out infinite;
    animation-delay: -3s;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.stat-row:first-child {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.stat-icon {
    font-size: var(--text-lg);
}

.stat-text {
    font-weight: 600;
}

/* Industry Challenges */
.industry-challenges {
    background: var(--color-gray-50);
}

.challenges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

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

.challenge-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--color-gray-200);
    transition: var(--transition-normal);
}

.challenge-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-lg);
}

.challenge-icon {
    width: 48px;
    height: 48px;
    background: var(--color-accent-soft);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.challenge-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
}

.challenge-card h3 {
    margin-bottom: var(--space-2);
}

.challenge-card p {
    color: var(--color-gray-600);
    margin: 0;
}

/* Industry Solution */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

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

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

.solution-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.solution-number {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
}

.solution-card h3 {
    color: white;
    margin-bottom: var(--space-3);
    padding-right: var(--space-10);
}

.solution-card p {
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--space-4);
    flex: 1;
}

.solution-impact {
    display: inline-block;
    background: rgba(34,197,94,0.2);
    color: #4ade80;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Industry Data */
.data-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

@media (max-width: 767px) {
    .data-comparison {
        flex-direction: column;
    }
}

.data-card {
    background: var(--color-gray-50);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    flex: 1;
    max-width: 300px;
}

.data-card-highlight {
    background: white;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.data-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: 600;
}

.data-card-header svg {
    color: var(--color-gray-500);
}

.data-card-highlight .data-card-header svg {
    color: var(--color-accent);
}

.data-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) 0;
}

.data-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    font-family: var(--font-display);
}

.data-label {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.data-vs {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-gray-400);
}

.data-summary {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
}

@media (max-width: 600px) {
    .data-summary {
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
    }
}

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

.summary-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-success);
    font-family: var(--font-display);
}

.summary-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

/* Simple Calculator */
.simple-calculator {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
}

.calc-question {
    margin-bottom: var(--space-6);
}

.calc-question label {
    display: block;
    color: white;
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.calc-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.calc-option {
    padding: var(--space-3) var(--space-4);
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-lg);
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: var(--text-sm);
}

.calc-option:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
}

.calc-option.selected {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.calc-result {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: white;
    border-radius: var(--radius-xl);
    text-align: center;
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-success);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.result-grid {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}

.result-item {
    display: flex;
    flex-direction: column;
}

.result-item .result-value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-dark);
    font-family: var(--font-display);
}

.result-item.result-highlight .result-value {
    color: var(--color-accent);
    font-size: var(--text-3xl);
}

.result-item .result-label {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.result-note {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-bottom: var(--space-4);
}

/* Industry FAQ */
.industry-faq {
    background: white;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-item {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    text-align: left;
}

.faq-question svg {
    width: 20px;
    height: 20px;
    color: var(--color-gray-400);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 var(--space-5) var(--space-4) var(--space-5);
    color: var(--color-gray-600);
    line-height: 1.7;
    margin: 0;
}

.faq-answer a {
    color: var(--color-accent);
}

/* Industry Prefooter Box */
.industry-prefooter {
    background: var(--color-gray-50);
    padding: var(--space-12) 0;
}

.prefooter-box {
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.prefooter-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(255,107,53,0.1) 0%, rgba(255,107,53,0.2) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    color: var(--color-accent);
}

.prefooter-box h3 {
    font-size: var(--text-2xl);
    color: var(--color-dark);
    margin-bottom: var(--space-6);
}

.prefooter-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.prefooter-feature {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
}

.prefooter-feature svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .prefooter-features {
        flex-direction: column;
        gap: var(--space-3);
    }
}

/* Legacy: Industry CTA (keeping for other pages) */
.industry-cta {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a3e 100%);
}

.industry-cta h2 {
    color: white;
    margin-bottom: var(--space-4);
}

.industry-cta p {
    color: rgba(255,255,255,0.8);
    font-size: var(--text-lg);
    margin-bottom: var(--space-8);
}

.industry-cta .cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.industry-cta .btn-ghost {
    color: white;
    border-color: rgba(255,255,255,0.3);
}

.industry-cta .btn-ghost:hover {
    background: rgba(255,255,255,0.1);
}

/* ===================================
   Media Placeholders
   For development - shows where media should be added
   =================================== */
.media-placeholder {
    position: relative;
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 200px;
}

.media-placeholder--video {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
    border-color: var(--color-accent);
}

.media-placeholder--image {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    border-color: var(--color-gray-400);
}

.media-placeholder--hero {
    min-height: 400px;
    border-radius: 0;
}

.media-placeholder--square {
    aspect-ratio: 1;
}

.media-placeholder--portrait {
    aspect-ratio: 9/16;
}

.media-placeholder--landscape {
    aspect-ratio: 16/9;
}

.media-placeholder--wide {
    aspect-ratio: 21/9;
}

.media-placeholder__icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.media-placeholder--video .media-placeholder__icon {
    color: var(--color-accent);
    opacity: 0.8;
}

.media-placeholder--image .media-placeholder__icon {
    color: var(--color-gray-500);
}

.media-placeholder__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.media-placeholder--video .media-placeholder__label {
    color: var(--color-accent);
}

.media-placeholder__description {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    text-align: center;
    max-width: 280px;
    line-height: 1.5;
}

.media-placeholder--video .media-placeholder__description {
    color: var(--color-gray-400);
}

.media-placeholder__specs {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    background: rgba(255,255,255,0.9);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.media-placeholder--video .media-placeholder__specs {
    background: rgba(0,0,0,0.5);
    color: var(--color-gray-300);
}

.media-placeholder__id {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    color: white;
    background: var(--color-accent);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

/* Video showcase grid */
.video-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.video-showcase-item {
    position: relative;
}

.video-showcase-item .media-placeholder {
    margin-bottom: var(--space-3);
}

.video-showcase-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    text-align: center;
}

/* Process with images */
.process-grid-visual {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

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

@media (max-width: 500px) {
    .process-grid-visual {
        grid-template-columns: 1fr;
    }
}

.process-step-visual {
    text-align: center;
}

.process-step-visual .media-placeholder {
    margin-bottom: var(--space-4);
    min-height: 180px;
}

.process-step-visual h4 {
    margin-bottom: var(--space-2);
}

.process-step-visual p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

/* Hero with background media */
.hero-media-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media-bg video,
.hero-media-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-media-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,15,0.9) 0%, rgba(10,10,15,0.7) 100%);
}

/* Image with fallback */
.img-with-fallback {
    position: relative;
    background: var(--color-gray-100);
    overflow: hidden;
}

.img-with-fallback img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.img-with-fallback img[data-loaded="false"] {
    opacity: 0;
}

.img-with-fallback .fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
}

/* About page specific */
.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

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

.about-intro-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.about-intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Founder section */
.founder-section {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: var(--space-12);
    align-items: start;
}

@media (max-width: 900px) {
    .founder-section {
        grid-template-columns: 1fr;
    }
}

.founder-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 3/4;
}

.founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Results page experience grid */
.experience-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-10);
    align-items: start;
}

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

.experience-image img {
    width: 100%;
    border-radius: var(--radius-lg);
}

.image-caption {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    text-align: center;
    margin-top: var(--space-2);
}

/* ===================================
   Guide Pages - Global Styles
   Ensures proper contrast on dark backgrounds
   =================================== */
.guide-hero {
    padding: calc(var(--space-16) + 80px) 0 var(--space-12) 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 100%);
    color: white;
    text-align: center;
}

.guide-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.2;
    margin-bottom: var(--space-6);
    color: white;
}

.guide-hero h1 .hero-highlight {
    color: var(--color-accent);
}

.guide-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.guide-lead {
    font-size: var(--text-lg);
    color: var(--color-gray-300);
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

/* Lead Capture Box - Dark Background */
.capture-box {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a2e 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    color: white;
}

.capture-content h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
    color: white;
}

.capture-content > p {
    color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

.capture-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-accent);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: white;
}

.capture-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
}

.capture-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--color-gray-200);
    font-size: var(--text-sm);
}

.capture-features svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Success state in capture box */
.capture-success h3 {
    color: white;
}

.capture-success > p {
    color: var(--color-gray-300);
}

/* ===================================
   Global Mobile Fixes - Prevent Horizontal Scrolling
   =================================== */

/* Ensure html and body don't allow horizontal overflow */
html {
    overflow-x: hidden;
}

/* Prevent any element from causing horizontal scroll */
* {
    max-width: 100vw;
}

/* Fix for elements that might overflow */
@media (max-width: 768px) {
    /* Ensure all sections stay within viewport */
    .section,
    .container,
    .container-sm,
    .container-lg {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix benchmark table for mobile */
    .benchmark-table {
        display: block;
        overflow-x: visible;
    }

    .benchmark-table-header {
        display: none;
    }

    .benchmark-table-row {
        display: flex;
        flex-direction: column;
        padding: var(--space-4);
        margin-bottom: var(--space-4);
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    .benchmark-table-cell {
        padding: var(--space-2) 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .benchmark-row-label {
        flex: 1;
        font-weight: 600;
        color: var(--color-gray-600);
    }

    .benchmark-big-number,
    .benchmark-number {
        font-size: var(--text-xl);
    }

    .benchmark-col-span {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .highlight-row .benchmark-col-span {
        background: var(--color-accent-soft);
        padding: var(--space-3);
        border-radius: var(--radius-md);
        width: 100%;
    }

    /* Fix data comparison cards */
    .data-comparison {
        flex-direction: column;
        gap: var(--space-4);
    }

    .data-card {
        min-width: 100%;
        max-width: 100%;
    }

    .data-vs {
        transform: rotate(90deg);
        margin: var(--space-2) 0;
    }

    /* Fix results grid */
    .results-grid {
        grid-template-columns: 1fr;
    }

    /* Fix funnel section */
    .funnel-wrapper {
        flex-direction: column;
    }

    .funnel-shape {
        width: 100%;
    }

    .funnel-tier {
        width: 100%;
    }

    .funnel-example {
        width: 100%;
        margin-top: var(--space-4);
    }

    /* Fix calculation steps */
    .calc-steps {
        overflow-x: hidden;
    }

    .calc-step {
        flex-wrap: wrap;
    }

    .calc-step-value {
        word-break: break-word;
        font-size: var(--text-sm);
    }

    /* Fix hero stats on mobile - keep horizontal, compact */
    .hero-stats,
    .industry-hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        text-align: center;
    }

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

    .hero-stat-value {
        font-size: var(--text-xl);
    }

    .hero-stat-label {
        font-size: var(--text-xs);
        line-height: 1.3;
    }

    /* Fix package grid */
    .packages-grid {
        grid-template-columns: 1fr;
    }

    /* Fix comparison grid */
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Fix ROI table values */
    .roi-table .roi-value {
        font-size: var(--text-sm);
    }

    /* Fix stat tooltip overflow */
    .stat-tooltip-content {
        left: 0;
        right: 0;
        transform: none;
        max-width: calc(100vw - 32px);
    }

    /* Fix any wide tables */
    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Fix pre and code blocks */
    pre, code {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    /* Ensure images don't overflow */
    img, video, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }

    /* Fix floating elements */
    .floating-video-card,
    .floating-stats-card {
        max-width: 100%;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    /* Reduce padding on very small screens */
    .container {
        padding: 0 var(--space-3);
    }

    .section {
        padding: var(--space-10) 0;
    }

    /* Smaller font sizes */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    /* Fix stat values */
    .data-stat-big {
        font-size: 2.5rem;
    }

    .data-summary-value {
        font-size: var(--text-2xl);
    }

    /* Fix buttons */
    .btn-lg {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-base);
    }

    /* Fix hero buttons */
    .hero-buttons,
    .industry-hero-cta {
        flex-direction: column;
        gap: var(--space-3);
    }

    .hero-buttons .btn,
    .industry-hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================
   Global Tooltips (Touch-friendly)
   =================================== */
.has-tooltip,
.term-tooltip,
.stat-tooltip {
    position: relative;
    cursor: help;
}

.has-tooltip {
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.has-tooltip:hover {
    background: rgba(255, 107, 53, 0.1);
}

/* Tooltip icon */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, var(--color-accent), #7c3aed);
    color: white;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
    font-style: normal;
}

/* Tooltip popup */
.tooltip-popup,
.term-tooltip::after,
.stat-tooltip-content {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a3e 100%);
    color: white;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 400;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    line-height: 1.5;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* Arrow */
.tooltip-popup::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--color-dark);
}

/* Hover state */
.has-tooltip:hover .tooltip-popup,
.term-tooltip:hover::after,
.stat-tooltip:hover .stat-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Left-aligned tooltip */
.tooltip-left .tooltip-popup {
    left: 0;
    transform: translateX(0) translateY(4px);
}

.tooltip-left .tooltip-popup::before {
    left: 20px;
    transform: none;
}

.tooltip-left:hover .tooltip-popup {
    transform: translateX(0) translateY(0);
}

/* Source link in tooltip */
.tooltip-source {
    display: block;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 10px;
    color: rgba(255,255,255,0.6);
}

.tooltip-source a {
    color: var(--color-accent);
    text-decoration: none;
}

.tooltip-source a:hover {
    text-decoration: underline;
}

/* Term tooltip (inline terms) */
.term-tooltip {
    border-bottom: 1px dotted var(--color-gray-400);
}

.term-tooltip::after {
    content: attr(data-term);
}

/* Stat tooltip */
.stat-tooltip .stat-source-icon {
    opacity: 0.5;
    margin-left: 4px;
    vertical-align: middle;
}

.stat-tooltip-content {
    width: 280px;
}

.stat-tooltip-content strong {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.stat-tooltip-content a {
    color: var(--color-accent);
    font-size: 10px;
}

/* Mobile tooltip - tap to show */
.has-tooltip.tooltip-active .tooltip-popup,
.term-tooltip.tooltip-active::after,
.stat-tooltip.tooltip-active .stat-tooltip-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Close button for mobile tooltips */
.tooltip-close {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .tooltip-close {
        display: flex;
    }

    /* Override ALL tooltip positioning on mobile */
    .tooltip-popup,
    .has-tooltip .tooltip-popup,
    .has-tooltip.tooltip-active .tooltip-popup,
    .has-tooltip:hover .tooltip-popup,
    .tooltip-left .tooltip-popup,
    .tooltip-left.tooltip-active .tooltip-popup,
    .stat-tooltip-content,
    .stat-tooltip .stat-tooltip-content,
    .stat-tooltip.tooltip-active .stat-tooltip-content {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        top: auto !important;
        transform: translateY(20px) translateX(0) !important;
        max-width: none !important;
        width: auto !important;
        z-index: 1000 !important;
        opacity: 0;
        visibility: hidden;
    }

    .tooltip-popup::before,
    .stat-tooltip-content::before {
        display: none !important;
    }

    .has-tooltip.tooltip-active .tooltip-popup,
    .stat-tooltip.tooltip-active .stat-tooltip-content,
    .tooltip-left.tooltip-active .tooltip-popup {
        transform: translateY(0) translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Term tooltips on mobile */
    .term-tooltip::after {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        top: auto !important;
        transform: translateY(20px) !important;
        max-width: none !important;
        width: auto !important;
        z-index: 1000 !important;
    }

    .term-tooltip.tooltip-active::after {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ===================================
   Cookie Consent Banner (GDPR/E-com Act)
   =================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-dark);
    color: white;
    padding: var(--space-5) var(--space-4);
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.cookie-banner.active {
    transform: translateY(0);
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
}

.cookie-banner-text {
    flex: 1;
    min-width: 280px;
}

.cookie-banner-text h3 {
    color: white;
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.cookie-banner-text p {
    font-size: var(--text-sm);
    color: var(--color-gray-300);
    margin: 0;
    line-height: 1.6;
}

.cookie-banner-text a {
    color: var(--color-accent);
    text-decoration: underline;
}

.cookie-banner-buttons {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* GDPR: Equal prominence for Accept and Reject */
.cookie-btn {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    min-width: 140px;
    text-align: center;
}

.cookie-btn-accept {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

.cookie-btn-accept:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.cookie-btn-reject {
    background: transparent;
    color: white;
    border-color: white;
}

.cookie-btn-reject:hover {
    background: rgba(255,255,255,0.1);
}

.cookie-btn-settings {
    background: transparent;
    color: var(--color-gray-400);
    border-color: var(--color-gray-600);
    min-width: auto;
    padding: var(--space-3) var(--space-4);
}

.cookie-btn-settings:hover {
    color: white;
    border-color: var(--color-gray-400);
}

@media (max-width: 768px) {
    .cookie-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-banner-buttons {
        width: 100%;
        justify-content: center;
    }

    .cookie-btn {
        flex: 1;
        min-width: 120px;
    }

    .cookie-btn-settings {
        flex: none;
        width: 100%;
    }
}

/* Cookie Settings Modal */
.cookie-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

.cookie-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: white;
    border-radius: var(--radius-xl);
    max-width: 560px;
    width: calc(100% - 40px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cookie-modal-overlay.active + .cookie-modal,
.cookie-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.cookie-modal-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-modal-header h2 {
    font-size: var(--text-xl);
    margin: 0;
}

.cookie-modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-gray-600);
    transition: all var(--transition-fast);
}

.cookie-modal-close:hover {
    background: var(--color-gray-200);
    color: var(--color-dark);
}

.cookie-modal-body {
    padding: var(--space-5);
}

.cookie-modal-body p {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
}

/* Cookie category toggles */
.cookie-category {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--color-gray-50);
    cursor: pointer;
}

.cookie-category-header h4 {
    font-size: var(--text-base);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cookie-category-required {
    font-size: var(--text-xs);
    background: var(--color-gray-200);
    color: var(--color-gray-600);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

/* Toggle switch */
.cookie-toggle {
    position: relative;
    width: 48px;
    height: 28px;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--color-gray-300);
    border-radius: 28px;
    transition: all 0.3s ease;
}

.cookie-toggle-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background: var(--color-success);
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
    transform: translateX(20px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
    opacity: 0.6;
    cursor: not-allowed;
}

.cookie-category-desc {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    border-top: 1px solid var(--color-gray-100);
    display: none;
}

.cookie-category.expanded .cookie-category-desc {
    display: block;
}

.cookie-category-header::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-gray-400);
    border-bottom: 2px solid var(--color-gray-400);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-left: var(--space-3);
}

.cookie-category.expanded .cookie-category-header::after {
    transform: rotate(-135deg);
}

.cookie-modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

.cookie-modal-footer .cookie-btn {
    color: var(--color-dark);
}

.cookie-modal-footer .cookie-btn-reject {
    border-color: var(--color-gray-300);
}

.cookie-modal-footer .cookie-btn-reject:hover {
    background: var(--color-gray-100);
}

/* Footer cookie settings link */
.footer-cookie-settings {
    cursor: pointer;
    text-decoration: underline;
}

.footer-cookie-settings:hover {
    color: var(--color-accent);
}

/* ===================================
   Benchmark Page
   =================================== */
.benchmark-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}

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

.benchmark-card {
    background: var(--color-dark-soft);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--color-gray-700);
}

.benchmark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-700);
}

.benchmark-label {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-white);
}

.benchmark-badge {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-gray-700);
    color: var(--color-gray-300);
}

.benchmark-badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.benchmark-comparison {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.benchmark-bar-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.benchmark-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.benchmark-value {
    font-weight: 600;
    color: var(--color-gray-300);
}

.benchmark-value-highlight {
    color: var(--color-accent);
    font-size: var(--text-base);
}

.benchmark-bar {
    height: 12px;
    background: var(--color-dark-medium);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.benchmark-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
}

.benchmark-bar-average {
    background: var(--color-gray-500);
}

.benchmark-bar-utenfra {
    background: linear-gradient(90deg, var(--color-accent), #ff8f4c);
}

.benchmark-note {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    line-height: 1.5;
}

/* Insights Grid */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
}

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

.insight-card {
    text-align: center;
    padding: var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
}

.insight-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-soft);
    border-radius: var(--radius-full);
}

.insight-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--color-accent);
}

.insight-card h3 {
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
}

.insight-card p {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* Stats Table */
.stats-table-container {
    overflow-x: auto;
    margin-top: var(--space-8);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.stats-table th,
.stats-table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.stats-table th {
    background: var(--color-gray-100);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-600);
}

.stats-table td {
    font-size: var(--text-base);
}

.stats-table td.highlight {
    font-weight: 700;
    color: var(--color-accent);
}

.stats-table td.positive {
    color: #22c55e;
    font-weight: 600;
}

.stats-table td.negative {
    color: #ef4444;
    font-weight: 600;
}

.stats-table td.neutral {
    color: var(--color-gray-500);
}

.stats-table tbody tr:last-child td {
    border-bottom: none;
}

.stats-table tbody tr:hover {
    background: var(--color-gray-50);
}

/* Stats Summary */
.stats-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

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

.stats-summary-item {
    text-align: center;
    padding: var(--space-4);
}

.stats-summary-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-accent);
    font-family: var(--font-display);
    margin-bottom: var(--space-1);
}

.stats-summary-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

/* Sources List */
.sources-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.source-item {
    padding: var(--space-5);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
}

.source-item h4 {
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-dark);
}

.source-item p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: 0;
}

.source-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.source-item ul li a {
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-decoration: none;
}

.source-item ul li a:hover {
    text-decoration: underline;
}

/* CTA Buttons Row */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ===================================
   Radaren Demo / Comparison Page
   =================================== */

/* Demo Hero */
.demo-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    padding: var(--space-20) 0 var(--space-16);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.demo-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,107,53,0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(124,58,237,0.15) 0%, transparent 50%);
    pointer-events: none;
}

.demo-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,107,53,0.15);
    border: 1px solid rgba(255,107,53,0.3);
    color: var(--color-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.demo-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: white;
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

.demo-hero h1 em {
    color: var(--color-accent);
    font-style: normal;
}

.demo-hero-lead {
    font-size: var(--text-xl);
    color: rgba(255,255,255,0.7);
    max-width: 600px;
    margin: 0 auto var(--space-10);
}

/* Impact Number */
.hero-impact-number {
    margin-top: var(--space-8);
}

.impact-number-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.impact-prefix {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.impact-value {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--color-accent) 0%, #ff8f4c 50%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.impact-suffix {
    font-size: var(--text-xl);
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}

/* Versus Container */
.versus-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
    align-items: stretch;
    margin-top: var(--space-10);
}

@media (max-width: 900px) {
    .versus-container {
        grid-template-columns: 1fr;
    }
}

.versus-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 2px solid var(--color-gray-200);
    transition: all 0.3s ease;
}

.versus-card-dim {
    opacity: 0.85;
}

.versus-card-highlight {
    border-color: var(--color-accent);
    box-shadow: 0 0 40px rgba(255,107,53,0.15);
    transform: scale(1.02);
}

.versus-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.versus-icon {
    font-size: var(--text-2xl);
}

.versus-header h3 {
    flex-grow: 1;
    font-size: var(--text-lg);
    margin: 0;
}

.versus-tag {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.versus-tag-accent {
    background: var(--color-accent);
    color: white;
}

.versus-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.versus-stat {
    position: relative;
}

.versus-stat-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.versus-stat-value.highlight {
    color: var(--color-accent);
}

.versus-stat-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
}

.versus-change {
    position: absolute;
    top: 0;
    right: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.versus-change.positive {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.versus-change.negative {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.versus-bar {
    height: 8px;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.versus-bar-fill {
    height: 100%;
    background: var(--color-gray-400);
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
}

.versus-bar-accent {
    background: linear-gradient(90deg, var(--color-accent), #ff8f4c);
}

.versus-bar-inverse .versus-bar-fill {
    background: #ef4444;
}

.versus-bar-inverse .versus-bar-accent {
    background: #22c55e;
}

.versus-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.versus-spent {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.versus-roi {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #16a34a;
}

.versus-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.versus-vs {
    width: 60px;
    height: 60px;
    background: var(--color-dark);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--text-lg);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
    .versus-divider {
        padding: var(--space-4) 0;
    }
    .versus-card-highlight {
        transform: none;
    }
}

/* Bottom Line Stats */
.comparison-bottom-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-10);
    padding: var(--space-6);
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: var(--radius-xl);
    border: 1px solid #bbf7d0;
}

@media (max-width: 767px) {
    .comparison-bottom-line {
        grid-template-columns: 1fr;
    }
}

.bottom-line-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
}

.bottom-line-icon {
    font-size: var(--text-2xl);
}

.bottom-line-content {
    display: flex;
    flex-direction: column;
}

.bottom-line-value {
    font-weight: 700;
    color: #15803d;
    font-size: var(--text-lg);
}

.bottom-line-desc {
    font-size: var(--text-sm);
    color: #166534;
}

/* Viral Story Section */
.viral-story {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-12);
    align-items: center;
}

@media (max-width: 900px) {
    .viral-story {
        grid-template-columns: 1fr;
    }
}

.viral-story-content {
    color: white;
}

.viral-story-content .overline {
    color: var(--color-accent);
}

.viral-story-content h2 {
    color: white;
    margin-bottom: var(--space-6);
}

.viral-lead {
    font-size: var(--text-xl);
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.viral-quote {
    font-size: var(--text-xl);
    font-style: italic;
    color: white;
    border-left: 4px solid var(--color-accent);
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
}

.viral-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-8);
}

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

.viral-stat {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}

.viral-stat-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-accent);
    font-family: var(--font-display);
}

.viral-stat-label {
    display: block;
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    margin-top: var(--space-1);
}

.viral-stat-compare {
    display: block;
    font-size: var(--text-xs);
    color: #22c55e;
    margin-top: var(--space-2);
    font-weight: 600;
}

/* Phone Mockup */
.viral-story-visual {
    position: relative;
}

.phone-mockup {
    background: #1a1a1a;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    max-width: 280px;
    margin: 0 auto;
}

.phone-screen {
    background: #000;
    border-radius: 32px;
    overflow: hidden;
    aspect-ratio: 9/16;
}

.video-preview-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.play-button-large {
    width: 80px;
    height: 80px;
    background: rgba(255,107,53,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.play-button-large:hover {
    transform: scale(1.1);
}

.play-button-large svg {
    margin-left: 4px;
}

.video-lang {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.6);
}

.engagement-bubbles {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bubble {
    background: white;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    animation: float 3s ease-in-out infinite;
}

.bubble-1 { animation-delay: 0s; }
.bubble-2 { animation-delay: 0.5s; }
.bubble-3 { animation-delay: 1s; }

@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-10px) translateX(5px); }
}

/* Potential Grid */
.potential-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
    align-items: stretch;
    margin-top: var(--space-10);
}

@media (max-width: 900px) {
    .potential-grid {
        grid-template-columns: 1fr;
    }
    .potential-arrow {
        transform: rotate(90deg);
    }
}

.potential-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 2px solid var(--color-gray-200);
}

.potential-card-current {
    background: var(--color-gray-50);
}

.potential-card-utenfra {
    border-color: var(--color-accent);
    box-shadow: 0 0 30px rgba(255,107,53,0.1);
}

.potential-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-1);
}

.potential-card-utenfra h3 {
    color: var(--color-accent);
}

.potential-desc {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

.potential-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.potential-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.potential-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.potential-list li div {
    display: flex;
    flex-direction: column;
}

.potential-list li strong {
    font-size: var(--text-base);
    color: var(--color-dark);
}

.potential-list li span {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.highlight-text {
    color: #16a34a !important;
    font-weight: 600;
}

.potential-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.potential-arrow svg {
    width: 48px;
    height: 48px;
}

/* Projection Box */
.projection-box {
    margin-top: var(--space-12);
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.projection-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.projection-icon {
    font-size: var(--text-2xl);
}

.projection-header h3 {
    margin: 0;
    color: #92400e;
}

.projection-content p {
    color: #78350f;
    margin-bottom: var(--space-6);
}

.projection-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 767px) {
    .projection-results {
        grid-template-columns: 1fr;
    }
}

.projection-result {
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
}

.projection-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 800;
    color: #92400e;
    font-family: var(--font-display);
}

.projection-label {
    display: block;
    font-size: var(--text-sm);
    color: #78350f;
    margin-top: var(--space-1);
}

.projection-vs {
    display: block;
    font-size: var(--text-xs);
    color: #a16207;
    margin-top: var(--space-2);
}

/* Campaign Stats Grid */
.campaign-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-10);
}

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

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

.campaign-stat-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    transition: all 0.3s ease;
}

.campaign-stat-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
}

.campaign-stat-card.highlight {
    background: rgba(255,107,53,0.1);
    border-color: rgba(255,107,53,0.3);
}

.campaign-stat-icon {
    font-size: var(--text-2xl);
    display: block;
    margin-bottom: var(--space-3);
}

.campaign-stat-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 800;
    color: white;
    font-family: var(--font-display);
}

.campaign-stat-card.highlight .campaign-stat-value {
    color: var(--color-accent);
}

.campaign-stat-label {
    display: block;
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    margin-top: var(--space-2);
}

.campaign-stat-compare {
    display: block;
    font-size: var(--text-xs);
    color: #22c55e;
    margin-top: var(--space-2);
    font-weight: 600;
}

.campaign-total {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.campaign-total-label {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.6);
}

.campaign-total-value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: white;
    font-family: var(--font-display);
}

.campaign-total-per {
    font-size: var(--text-base);
    color: #22c55e;
    font-weight: 600;
}

/* Video Funnel */
.video-funnel {
    max-width: 700px;
    margin: var(--space-10) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.funnel-stage {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.funnel-bar {
    height: 48px;
    background: linear-gradient(90deg, var(--color-accent), #ff8f4c);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--space-4);
    transition: width 1.5s ease-out;
    min-width: 80px;
}

.funnel-bar-highlight {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.funnel-value {
    font-weight: 700;
    color: white;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.funnel-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    white-space: nowrap;
    min-width: 150px;
}

/* Video Insight Box */
.video-insight-box {
    margin-top: var(--space-10);
    padding: var(--space-6);
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-xl);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.insight-icon-large {
    font-size: var(--text-3xl);
}

.video-insight-box p {
    margin: 0;
    font-size: var(--text-lg);
    color: #166534;
}

/* Proof Section */
.proof-section {
    text-align: center;
    padding: var(--space-8) 0;
}

.proof-section h2 {
    color: white;
    margin-bottom: var(--space-4);
}

.proof-lead {
    color: rgba(255,255,255,0.7);
    font-size: var(--text-lg);
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.proof-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.proof-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    color: rgba(255,255,255,0.9);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* CTA Section Demo */
.cta-section-demo {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    color: white;
}

.cta-section-demo h2 {
    color: white;
    margin-bottom: var(--space-4);
}

.cta-section-demo p {
    color: rgba(255,255,255,0.8);
    margin-bottom: var(--space-8);
}

.cta-buttons-demo {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.cta-buttons-demo .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.cta-subtext {
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.5) !important;
}

/* ===================================
   Guide Pages - Complete Styles
   =================================== */

/* Guide Badge */
.guide-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 107, 53, 0.2);
    color: var(--color-accent);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

/* Guide Meta */
.guide-meta {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.meta-item svg {
    opacity: 0.7;
}

/* Guide Stats Section */
.guide-stats {
    padding: var(--space-8) 0;
    background: var(--color-gray-50);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.stat-card {
    background: white;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.stat-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.stats-source {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-top: var(--space-6);
}

/* Guide Content Section */
.guide-content {
    padding: var(--space-12) 0;
}

.container-article {
    max-width: 720px;
    margin: 0 auto;
}

.content-intro h2 {
    font-size: var(--text-2xl);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    color: var(--color-dark);
}

.content-intro h2:first-child {
    margin-top: 0;
}

.content-intro h3 {
    font-size: var(--text-xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    color: var(--color-dark);
}

.content-intro p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-gray-700);
    margin-bottom: var(--space-4);
}

.content-intro strong {
    color: var(--color-dark);
}

.content-intro em {
    font-style: italic;
}

/* Content Callout Boxes */
.content-callout {
    display: flex;
    gap: var(--space-4);
    background: var(--color-gray-50);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.callout-icon {
    font-size: var(--text-2xl);
    line-height: 1;
    flex-shrink: 0;
}

.callout-content {
    flex: 1;
}

.callout-content strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-dark);
}

.callout-content p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

/* Principles Grid */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.principle-card {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
}

.principle-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.principle-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    color: var(--color-dark);
}

.principle-card p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.6;
}

/* Content Lists */
.content-list {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.content-list li {
    margin-bottom: var(--space-2);
    line-height: 1.7;
    color: var(--color-gray-700);
}

/* Mobile Adjustments for Guide Pages */
@media (max-width: 768px) {
    .guide-hero {
        padding: calc(var(--space-12) + 70px) 0 var(--space-8) 0;
    }
    
    .guide-hero h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .guide-meta {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .principles-grid {
        grid-template-columns: 1fr;
    }
    
    .content-callout {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .callout-icon {
        font-size: var(--text-xl);
    }
}