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

:root {
    /* Neutral Palette - Technical & Clean */
    --color-slate-900: #0F172A;
    --color-slate-800: #1E293B;
    --color-slate-600: #475569;
    --color-slate-500: #64748B;
    --color-slate-400: #94A3B8;
    --color-slate-200: #E2E8F0;
    --color-slate-100: #F1F5F9;
    --color-slate-50: #F8FAFC;
    --color-white: #FFFFFF;

    /* Action Colors */
    --color-primary: #F97316;
    /* Orange-500 */
    --color-primary-hover: #EA580C;
    /* Orange-600 */
    --color-link: #3B82F6;
    /* Blue-500 */

    /* Typography */
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Spacing Scale */
    --space-xs: 0.5rem;
    /* 8px */
    --space-sm: 1rem;
    /* 16px */
    --space-md: 1.5rem;
    /* 24px */
    --space-lg: 3rem;
    /* 48px */
    --space-xl: 5rem;
    /* 80px */

    /* Layout */
    --container-width: 1100px;
    --radius-sm: 4px;
    --radius-md: 8px;
}

body {
    font-family: var(--font-heading);
    background-color: var(--color-slate-50);
    color: var(--color-slate-600);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: 1.125rem;
    /* Base size 18px for better readability */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Typography Reset & Utils */
h1,
h2,
h3,
h4 {
    color: var(--color-slate-900);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.hidden {
    display: none;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: transparent;
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-200);
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
}

.btn-secondary:hover {
    border-color: var(--color-slate-900);
    color: var(--color-slate-900);
}

/* Header */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-slate-100);
    padding: var(--space-sm) 0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-slate-900);
    letter-spacing: -0.02em;
}

.logo .highlight {
    color: var(--color-primary);
}

/* Hero Section */
.hero {
    padding: var(--space-xl) 0;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.hero-text {
    max-width: 600px;
}

.headline {
    font-size: 3.5rem;
    /* ~56px */
    margin-bottom: var(--space-md);
    color: var(--color-slate-900);
    line-height: 1.05;
}

.subheadline {
    font-size: 1.25rem;
    /* 20px */
    color: var(--color-slate-500);
    margin-bottom: var(--space-md);
    font-weight: 400;
    line-height: 1.5;
}

.description {
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    color: var(--color-slate-600);
}

/* Pain Points List - Simplified */
.pain-points-list {
    margin-bottom: var(--space-lg);
    background: transparent;
    /* Removed background */
    border-left: 2px solid var(--color-slate-200);
    /* Subtler border */
    padding-left: var(--space-sm);
}

.list-intro {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-slate-800);
    margin-bottom: var(--space-xs);
}

.pain-points-list ul li {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--color-slate-600);
    position: relative;
    padding-left: 1rem;
}

.pain-points-list ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-orange-500);
    font-weight: bold;
}

/* Summary Section */
.summary-section {
    padding: var(--space-xl) 0;
    background-color: white;
    text-align: center;
    border-top: 1px solid var(--color-slate-100);
}

.summary-intro {
    font-size: 1.25rem;
    color: var(--color-slate-800);
    margin-bottom: var(--space-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.summary-differentiator {
    max-width: 600px;
    margin: 0 auto;
}

.diff-highlight {
    font-weight: 500;
    color: var(--color-slate-900);
    margin-bottom: var(--space-xs);
    font-size: 1.125rem;
}

.diff-body {
    color: var(--color-slate-900);
    line-height: 1.6;
    font-weight: 500;
    font-size: 1.125rem;
}

/* Access Form - Primary CTA */
.access-form {
    background: white;
    padding: var(--space-md);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-slate-900);
    background-color: var(--color-slate-50);
    transition: all 0.2s;
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.access-form .btn-primary {
    width: 100%;
    /* Full width for stronger CTA */
    font-size: 1.125rem;
    padding: 1rem;
}

.form-footer {
    font-size: 0.875rem;
    color: var(--color-slate-400);
    text-align: center;
    margin-top: var(--space-xs);
}

/* Hero Visual - Abstract Cards (Simplified) */
.hero-visual {
    position: relative;
    padding-top: var(--space-md);
}

.visual-card {
    background: white;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-slate-600);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.visual-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-slate-100);
    margin-bottom: var(--space-sm);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-400);
}

.visual-line {
    margin-bottom: 0.5rem;
}

.visual-line strong {
    color: var(--color-slate-900);
    font-weight: 600;
}

/* Second visual card - simpler positioning */
.card-offset {
    position: relative;
    /* Changed from absolute to relative/static flow */
    margin-top: var(--space-md);
    /* Add space between cards */
    margin-left: 2rem;
    /* Indent to keep the 'offset' look */
    width: 95%;
    /* Adjust width */
    background: var(--color-slate-900);
    color: var(--color-slate-200);
    border: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.card-offset .visual-header {
    border-color: var(--color-slate-700);
}

.visual-tag.alert {
    color: var(--color-primary);
    font-weight: 700;
}

.visual-line.action {
    color: var(--color-link);
    margin-top: var(--space-sm);
    display: inline-block;
    border-bottom: 1px solid transparent;
}

.visual-line.action:hover {
    border-color: currentColor;
}


/* Reality Check Section */
.reality-check {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-slate-200);
    background: white;
}

.reality-check h2 {
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: var(--space-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.card {
    padding: var(--space-md);
    background: var(--color-slate-50);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    /* Cleaner than visible border */
}

.card .icon {
    font-family: var(--font-mono);
    color: var(--color-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    display: block;
}

.card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-xs);
}

.card p {
    font-size: 1rem;
    color: var(--color-slate-500);
    margin: 0;
}

/* Solution Section */
.solution {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-slate-200);
    background: var(--color-slate-50);
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.text-content h2 {
    font-size: 2.25rem;
    margin-bottom: var(--space-sm);
}

.feature-list {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.feature-list li {
    padding-left: 0;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}

.feature-list li strong {
    color: var(--color-slate-900);
}

/* Clean up the arrow */
.feature-list li::before {
    content: "→";
    position: static;
    color: var(--color-primary);
}

/* Terminal Window */
.terminal-window {
    background: var(--color-slate-900);
    border-radius: var(--radius-md);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.terminal-header {
    background: var(--color-slate-800);
    padding: 0.75rem;
    display: flex;
    gap: 0.5rem;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-slate-600);
}

.dot.red {
    background: #EF4444;
}

.dot.yellow {
    background: #F59E0B;
}

.dot.green {
    background: #10B981;
}

.code-block {
    padding: var(--space-md);
    color: var(--color-slate-200);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.keyword {
    color: #C084FC;
}

.variable {
    color: #60A5FA;
}

.comment {
    color: var(--color-slate-500);
}

/* Differentiator Section */
.differentiator {
    padding: var(--space-lg) 0;
    text-align: center;
    background: white;
    border-top: 1px solid var(--color-slate-200);
}

.diff-box {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-md);
    background: var(--color-slate-50);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-slate-300);
}

.diff-box h3 {
    margin-bottom: var(--space-xs);
}

/* Footer */
.footer {
    padding: var(--space-md) 0;
    background: white;
    border-top: 1px solid var(--color-slate-200);
    color: var(--color-slate-400);
    font-size: 0.875rem;
}

.footer .container {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-sm);
    text-align: center;
    align-items: center;
}

.footer nav {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.footer nav a {
    color: var(--color-slate-500);
}

.footer nav a:hover {
    color: var(--color-slate-900);
}


/* Responsive */
@media (max-width: 900px) {

    .diff-highlight,
    .diff-body {
        font-weight: 700;
    }

    .header {
        padding: var(--space-xs) 0;
    }

    .hero {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .headline {
        font-size: 2.25rem;
    }

    .hero-content,
    .split-layout,
    .grid-3 {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .hero-content {
        /* Reverse order so form/text is on top of visual in mobile? 
           Usually hero visual goes under text, but here we want visual maybe second.
           Default 1fr puts them in DOM order (text, visual). Use that.
        */
        align-items: stretch;
    }

    .card-offset {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        margin-top: var(--space-sm);
        margin-left: 0;
    }

    /* Mobile CTA Enhancements */
    .header .btn-secondary {
        background-color: var(--color-primary);
        color: white;
        border: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .header .btn-secondary:hover {
        background-color: var(--color-primary-hover);
        color: white;
        border: none;
    }

    .hero .btn-primary {
        border: 2px solid white;
        /* Contrasting white border for orange button */
    }


}