/* ============================================
   Aligntra Landing Page Design System
   Shared CSS Variables for Consistency
   ============================================ */

/*
 * DARK SECTION CONTRACT (2026-03-26)
 *
 * CORRECT text color pattern for ALL landing page elements:
 *   color: var(--theme-text, var(--gray-900));           /* headers */
 *   color: var(--theme-text-secondary, var(--gray-600)); /* body text */
 *
 * These auto-flip to white in [data-theme="dark"] sections.
 * NEVER use bare var(--gray-*) for text color — it won't adapt.
 *
 * A safety net (section[data-theme="dark"] h1-h6, p, etc.)
 * catches missed cases, but the correct fix is always to use
 * theme-aware variables in the source rule.
 */

:root {
    /* Primary Colors (Brand Blue) */
    --primary-50: #EBF5FF;
    --primary-100: #D2E8FF;
    --primary-200: #A5D0FF;
    --primary-300: #6BB0FF;
    --primary-400: #3B94FF;
    --primary-500: #1E78E0;
    --primary-600: #1560BC;
    --primary-700: #0F4A94;
    --primary-800: #0A336B;
    --primary-900: #051D42;

    /* Teal Accent (CTA buttons, gradients) */
    --teal-100: #CCFBF1;
    --teal-600: #0D9488;
    --teal-700: #0F766E;

    /* Gray Scale (Consistent across all pages) */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;  /* IMPORTANT: NOT #212121 */

    /* Semantic Colors */
    --success: #10B981;
    --success-light: #D1FAE5;
    --success-dark: #065F46;
    --warning: #F59E0B;
    --warning-600: #D97706;
    --warning-light: #FEF3C7;
    --warning-dark: #92400E;
    --error: #EF4444;
    --error-light: #FEE2E2;
    --error-dark: #991B1B;
    --info: #3B82F6;
    --info-light: #DBEAFE;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    
    /* Spacing (4px grid system) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    --spacing-5xl: 96px;

    /* Effects */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.08);

    /* Animation Easing (from Linear/Vercel research) */
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

    /* Extended Palette (used across landing pages) */
    --green-50: #dcfce7;
    --green-100: #f0fdf4;
    --green-600: #16a34a;
    --green-800: #166534;
    --blue-600: #2563eb;
    --blue-700: #0369a1;
    --amber-800: #92400e;
    --purple-800: #6b21a8;
    --rose-800: #9f1239;
    --teal-800: #115e59;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;

    /* Dark Hero Backgrounds (TODO: replace hardcoded hex values in hero.css, industries.css, index.html) */
    --hero-bg-start: #0a1628;
    --hero-bg-mid: #1a2d4a;
    --hero-bg-end: #0f1f36;

    /* Section Spacing */
    --section-padding-lg: 64px;
    --section-padding-md: 48px;
    --section-padding-sm: 32px;

    /* Monospace (for standard names, clause references) */
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

/* ============================================================================
   THREE-THEME SECTION SYSTEM (Mercury pattern)
   Add data-theme="light|neutral|dark" to any <section>.
   ============================================================================ */

[data-theme="light"] {
    --theme-bg: #ffffff;
    --theme-text: var(--gray-900);
    --theme-text-secondary: var(--gray-600);
    --theme-border: var(--gray-200);
    --theme-card-bg: var(--gray-50);
    --theme-accent: var(--primary-600);
    background: var(--theme-bg);
    color: var(--theme-text);
}

[data-theme="neutral"] {
    --theme-bg: var(--gray-50);
    --theme-text: var(--gray-900);
    --theme-text-secondary: var(--gray-600);
    --theme-border: var(--gray-200);
    --theme-card-bg: #ffffff;
    --theme-accent: var(--primary-600);
    background: var(--theme-bg);
    color: var(--theme-text);
}

[data-theme="dark"] {
    --theme-bg: var(--hero-bg-start, #0a1628);
    --theme-text: #ffffff;
    --theme-text-secondary: rgba(255,255,255,0.7);
    --theme-border: rgba(255,255,255,0.12);
    --theme-card-bg: rgba(255,255,255,0.06);
    --theme-accent: #60a5fa;
    background: linear-gradient(135deg, var(--hero-bg-start, #0a1628), var(--hero-bg-mid, #1a2d4a));
    color: var(--theme-text);
}

/* ============================================================
   DARK SECTION SAFETY NET (2026-03-26)

   Catches text elements inside [data-theme="dark"] sections
   that use hardcoded var(--gray-*) instead of var(--theme-text).

   Uses section[data-theme="dark"] for specificity 0,1,2 which
   beats inline .class element selectors (0,1,1).
   ============================================================ */
section[data-theme="dark"] h1,
section[data-theme="dark"] h2,
section[data-theme="dark"] h3,
section[data-theme="dark"] h4,
section[data-theme="dark"] h5,
section[data-theme="dark"] h6 {
    color: var(--theme-text, #ffffff);
}

section[data-theme="dark"] p,
section[data-theme="dark"] li,
section[data-theme="dark"] td,
section[data-theme="dark"] th,
section[data-theme="dark"] label,
section[data-theme="dark"] span {
    color: var(--theme-text-secondary, rgba(255,255,255,0.7));
}

/* ============================================================================
   SECTION LAYOUT LIBRARY — 10 distinct patterns, each used max once per page
   ============================================================================ */

/* Shared section container — inherits max-width from parent (.industry-section etc.) */
.section-layout {
    padding: var(--section-padding-md, 48px) 24px;
}

/* ── LAYOUT 1: Challenge/Solution Two-Column ── */

.layout-challenge-solution {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--theme-border, var(--gray-200));
}

.cs-row:last-child {
    border-bottom: none;
}

.cs-challenge,
.cs-solution {
    padding: 24px 28px;
}

.cs-challenge {
    border-right: 1px solid var(--theme-border, var(--gray-200));
    border-left: 3px solid var(--error, #EF4444);
}

.cs-solution {
    border-left: none;
    padding-left: 28px;
    position: relative;
}

.cs-solution::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    background: var(--success, #10B981);
}

.cs-challenge h4,
.cs-solution h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.cs-challenge h4 { color: var(--error, #EF4444); }
.cs-solution h4 { color: var(--success, #10B981); }

.cs-challenge p,
.cs-solution p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--theme-text-secondary, var(--gray-600));
    margin: 0;
}

@media (max-width: 768px) {
    .cs-row { grid-template-columns: 1fr; }
    .cs-challenge { border-right: none; border-bottom: 1px solid var(--theme-border, var(--gray-200)); }
    .cs-solution::before { display: none; }
    .cs-solution { border-left: 3px solid var(--success, #10B981); }
}

/* ── LAYOUT 2: Split-Asset Accordion ── */

.layout-split-accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.split-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.split-accordion-item {
    padding: 20px 24px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-quint, ease);
}

.split-accordion-item:hover {
    background: var(--theme-card-bg, var(--gray-50));
}

.split-accordion-item.active {
    border-left-color: var(--theme-accent, var(--primary-600));
    background: var(--theme-card-bg, var(--gray-50));
}

.split-accordion-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text, var(--gray-900));
    margin: 0 0 4px;
}

.split-accordion-item p {
    font-size: 14px;
    color: var(--theme-text-secondary, var(--gray-600));
    line-height: 1.5;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease-out-quint, ease), opacity 0.3s;
    opacity: 0;
}

.split-accordion-item.active p {
    max-height: 200px;
    opacity: 1;
}

.split-accordion-visual {
    background: var(--theme-card-bg, var(--gray-50));
    border: 1px solid var(--theme-border, var(--gray-200));
    border-radius: 12px;
    padding: 32px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 100px;
}

@media (max-width: 768px) {
    .layout-split-accordion { grid-template-columns: 1fr; }
    .split-accordion-visual { position: static; min-height: 200px; }
}

/* ── LAYOUT 3: Large Number Strip ── */

.layout-number-strip {
    display: flex;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
    text-align: center;
    padding: 48px 24px;
}

.number-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.number-strip-value {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--theme-text, var(--gray-900));
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.number-strip-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-secondary, var(--gray-600));
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Metric number color on dark sections */
[data-theme="dark"] .number-strip-value { color: white; }

@media (max-width: 768px) {
    .layout-number-strip { gap: 32px; }
    .number-strip-value { font-size: 40px; }
}

/* ── LAYOUT 4: Dark Testimonial Block (asymmetric) ── */
/* CSS already defined in .social-proof-* classes above */

/* ── LAYOUT 5: Horizontal Scroller ── */

.layout-h-scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 20px;
    padding: 8px 24px 24px;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.layout-h-scroller::-webkit-scrollbar { display: none; }

.h-scroller-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: var(--theme-card-bg, white);
    border: 1px solid var(--theme-border, var(--gray-200));
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.h-scroller-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.h-scroller-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text, var(--gray-900));
    margin: 0 0 8px;
}

.h-scroller-card p {
    font-size: 14px;
    color: var(--theme-text-secondary, var(--gray-600));
    line-height: 1.6;
    margin: 0;
}

/* ── LAYOUT 6: Named AI Persona Cards ── */

.layout-ai-personas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .layout-ai-personas {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.ai-persona-card {
    border-left: 3px solid var(--theme-accent, var(--primary-600));
    padding: 24px 24px 24px 20px;
    background: var(--theme-card-bg, var(--gray-50));
    border-radius: 0 8px 8px 0;
}

.ai-persona-name {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-accent, var(--primary-600));
    margin-bottom: 10px;
}

.ai-persona-card blockquote,
.ai-persona-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--theme-text, var(--gray-900));
    margin: 0;
}

/* ── LAYOUT 7: Process Timeline ── */

.layout-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    position: relative;
    padding: 32px 0;
}

.timeline-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 16px;
}

.timeline-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-accent, var(--primary-600));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto 12px;
    position: relative;
    z-index: 1;
}

.timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 24px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 2px;
    background: var(--theme-border, var(--gray-300));
    z-index: 0;
}

.timeline-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-secondary, var(--gray-500));
    margin-bottom: 4px;
}

.timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text, var(--gray-900));
    margin-bottom: 4px;
}

.timeline-desc {
    font-size: 13px;
    color: var(--theme-text-secondary, var(--gray-600));
    line-height: 1.5;
}

@media (max-width: 768px) {
    .layout-timeline { flex-direction: column; align-items: stretch; gap: 24px; }
    .timeline-step { text-align: left; display: flex; gap: 16px; align-items: flex-start; padding: 0; }
    .timeline-dot { margin: 0; flex-shrink: 0; }
    .timeline-step:not(:last-child)::after {
        top: 48px; left: 23px; right: auto;
        width: 2px; height: calc(100% + 24px);
    }
}

/* ── LAYOUT 8: Bento Grid (asymmetric tiles) ── */

.layout-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 16px;
}

.bento-tile {
    background: var(--theme-card-bg, white);
    border: 1px solid var(--theme-border, var(--gray-200));
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bento-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.bento-tile--wide { grid-column: span 2; }
.bento-tile--tall { grid-row: span 2; }

.bento-tile h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text, var(--gray-900));
    margin: 0 0 8px;
}

.bento-tile p {
    font-size: 14px;
    color: var(--theme-text-secondary, var(--gray-600));
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .layout-bento { grid-template-columns: 1fr; }
    .bento-tile--wide { grid-column: span 1; }
    .bento-tile--tall { grid-row: span 1; }
}

/* ── LAYOUT 9: Logo Marquee — already defined in .trust-bar-* ── */

/* ── LAYOUT 10: Full-Width Product Screenshot ── */

.layout-product-shot {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.product-shot-frame {
    background: var(--gray-900);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.product-shot-bar {
    background: var(--gray-800);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-shot-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-600);
}

.product-shot-frame img {
    width: 100%;
    display: block;
}

/* ============================================================================
   TEXT WRAP BALANCE - Prevents orphaned words in headings
   ============================================================================ */

h1, h2, h3,
.hero-title,
.section-title,
.section-header h2 {
    text-wrap: balance;
}

/* ============================================================================
   TABULAR NUMS - Consistent numeric alignment
   ============================================================================ */

.stat-value,
.stat-number,
.pricing-amount,
.metric-value,
[data-numeric] {
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   TRUST BAR / LOGO MARQUEE
   ============================================================================ */

.trust-bar {
    padding: 32px 24px;
    text-align: center;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    overflow: hidden;
}

.trust-bar-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    margin-bottom: 20px;
}

.trust-bar-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.trust-bar-track {
    display: flex;
    width: max-content;
    gap: 48px;
    align-items: center;
    animation: marquee 30s linear infinite;
    will-change: transform;
}

.trust-bar-logo {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-500);
    white-space: nowrap;
    flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
    .trust-bar-track {
        animation: none;
    }
}

/* ============================================================================
   SOCIAL PROOF SECTION — Dark background, asymmetric testimonial layout
   Ready for activation when real testimonials are available.
   ============================================================================ */

.social-proof-section {
    background: linear-gradient(135deg, var(--hero-bg-start, #0a1628), var(--hero-bg-mid, #1a2d4a));
    padding: 64px 24px;
    color: white;
}

.social-proof-container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.social-proof-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    text-align: left;
    margin-top: 32px;
}

.social-proof-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 28px;
}

.social-proof-card--featured {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.social-proof-card--featured .social-proof-quote {
    font-size: 20px;
    line-height: 1.5;
}

.social-proof-quote {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin: 0 0 20px;
    font-style: normal;
}

.social-proof-attribution {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-proof-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.social-proof-name {
    font-weight: 600;
    font-size: 14px;
    color: white;
}

.social-proof-title {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

.social-proof-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

/* ============================================================================
   MONOSPACE STANDARD NAMES — precision brand signal
   ============================================================================ */

.standard-name {
    font-family: var(--font-mono);
    font-size: 0.9em;
    letter-spacing: -0.01em;
}

/* ============================================================================
   SCROLL-TRIGGERED ENTRANCE ANIMATIONS
   ============================================================================ */

.landing-fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out-quint, cubic-bezier(0.23, 1, 0.32, 1)),
                transform 0.6s var(--ease-out-quint, cubic-bezier(0.23, 1, 0.32, 1));
}

.landing-fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.landing-fade-in-up.visible:nth-child(2) { transition-delay: 0.1s; }
.landing-fade-in-up.visible:nth-child(3) { transition-delay: 0.2s; }
.landing-fade-in-up.visible:nth-child(4) { transition-delay: 0.3s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .landing-fade-in-up,
    .scroll-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================================
   480px SMALL-PHONE BREAKPOINT
   ============================================================================ */

@media (max-width: 480px) {
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 1rem; }
    .pricing-grid { grid-template-columns: 1fr; }
    .floating-cta { padding: 0.75rem 1rem; font-size: 0.875rem; }
}

/* Global Focus Visible */
:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font-primary);
    background: white;
    color: var(--gray-900);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}