/* ExtensibilityCo Marketing Site - Global Styles */

/* ============================================
   CSS Variables - Brand Colors
   ============================================ */
:root {
    /* Primary Colors — accent used for text/links; -dark is the strong fill
       for buttons; -light is the soft tint used for outlines/backgrounds. */
    --color-primary: #79ade3;
    --color-primary-dark: #2d6fb8;
    --color-primary-light: #172536;

    /* Secondary - pERPetual accent (kept neutral/muted by design) */
    --color-secondary: #66707d;
    --color-secondary-dark: #4a5561;
    --color-secondary-light: #8a94a1;

    /* DataBridge accent */
    --color-databridge: #79ade3;
    --color-databridge-dark: #2d6fb8;

    /* Neutrals */
    --color-bg: #101418;
    --color-bg-alt: #171c22;
    --color-bg-dark: #0b0e12;
    --color-surface-2: #1d232a;
    --color-surface-3: #242b33;
    --color-text: #e6eaef;
    --color-text-2: #c0c7d0;
    --color-text-muted: #8a94a1;
    --color-text-light: #66707d;
    --color-border: #2b333d;
    --color-border-strong: #3b4551;

    /* Status */
    --color-success: #63c391;
    --color-warning: #d9a84d;
    --color-error: #e07b68;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Typography */
    --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    
    /* Sizing */
    --max-width: 1200px;
    --nav-height: 72px;
    
    /* Shadows */
    --shadow-sm: 0 0 0 1px rgba(255,255,255,0.03);
    --shadow-md: 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,0.07);
    --shadow-xl: 0 0 0 1px rgba(255,255,255,0.09);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-full: 9999px;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   Layout
   ============================================ */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    padding-top: var(--nav-height);
}

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

.center {
    text-align: center;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

.section-title {
    margin-bottom: var(--space-lg);
}

.section-subtitle {
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.section-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.section-badge.center {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    gap: var(--space-sm);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text);
    border-color: var(--color-secondary);
}

.btn-secondary:hover {
    background: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-text);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-text);
}

.btn-large {
    padding: var(--space-md) var(--space-xl);
    font-size: 1.125rem;
}

.btn-small {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: rgba(16, 20, 24, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

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

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-link {
    color: var(--color-text);
    font-weight: 500;
    padding: var(--space-sm) 0;
    position: relative;
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-sm);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.dropdown-item:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.dropdown-title {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.dropdown-desc {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: all var(--transition-fast);
}

/* ============================================
   Hero Sections
   ============================================ */
.hero {
    padding: var(--space-3xl) 0;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

.hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.hero-badge {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: var(--space-lg);
    line-height: 1.1;
}

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

.hero-description {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    max-width: 540px;
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.hero-stats {
    display: flex;
    gap: var(--space-2xl);
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-graphic {
    position: relative;
    width: 400px;
    height: 400px;
}

.floating-card {
    position: absolute;
    background: white;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    animation: float 6s ease-in-out infinite;
}

.floating-card .card-icon {
    font-size: 2rem;
}

.floating-card .card-text {
    font-weight: 600;
}

.card-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.card-2 {
    top: 50%;
    right: 10%;
    animation-delay: 2s;
}

.card-3 {
    bottom: 20%;
    left: 30%;
    animation-delay: 4s;
}

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

/* Product Hero Variants */
.product-hero {
    padding: var(--space-3xl) 0;
    text-align: center;
}

.product-hero .hero-container {
    display: block;
    max-width: 800px;
}

.product-hero h1 {
    font-size: 4rem;
}

.hero-tagline {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.databridge-hero {
    background: var(--color-bg);
}

.perpetual-hero {
    background: var(--color-bg);
}

.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-secondary);
    color: var(--color-text);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-weight: 600;
    margin-top: var(--space-xl);
}

/* ============================================
   Problem Section
   ============================================ */
.problem-section {
    padding: var(--space-3xl) 0;
    background: var(--color-bg-dark);
    color: var(--color-text);
}

.problem-section h2 {
    color: var(--color-text);
    margin-bottom: var(--space-lg);
}

.problem-section p {
    color: var(--color-text-2);
    font-size: 1.125rem;
    max-width: 700px;
    margin-bottom: var(--space-2xl);
}

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

.problem-point {
    display: flex;
    gap: var(--space-md);
}

.point-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.problem-point h4 {
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.problem-point p {
    color: var(--color-text-2);
    font-size: 0.9375rem;
    margin: 0;
}

/* ============================================
   Products Section
   ============================================ */
.products-section {
    padding: var(--space-3xl) 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.product-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all var(--transition-base);
}

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

.product-card.featured {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px var(--color-secondary);
}

.product-card .featured-badge {
    position: absolute;
    top: -12px;
    right: var(--space-lg);
    background: var(--color-secondary);
    color: var(--color-text);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

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

.product-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.databridge-icon {
    background: var(--color-primary-light);
    color: var(--color-databridge);
}

.perpetual-icon {
    background: var(--color-surface-2);
    color: var(--color-secondary);
}

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

.product-body {
    flex: 1;
}

.product-body p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.feature-list {
    list-style: none;
}

.feature-list li {
    padding: var(--space-sm) 0;
    padding-left: var(--space-lg);
    position: relative;
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: bold;
}

.product-footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-price {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ============================================
   Why Section
   ============================================ */
.why-section {
    padding: var(--space-3xl) 0;
    background: var(--color-bg-alt);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.why-card {
    background: white;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--color-border);
}

.why-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.why-card h4 {
    margin-bottom: var(--space-sm);
}

.why-card p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* ============================================
   Marketplace Preview
   ============================================ */
.marketplace-section {
    padding: var(--space-3xl) 0;
}

.marketplace-content {
    max-width: 800px;
}

.addon-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}

.addon-card {
    background: var(--color-bg-alt);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    position: relative;
}

.addon-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.addon-badge.free {
    background: rgba(99, 195, 145, 0.15);
    color: var(--color-success);
}

.addon-badge.premium {
    background: rgba(217, 168, 77, 0.15);
    color: var(--color-warning);
}

.addon-card h5 {
    margin-bottom: var(--space-xs);
}

.addon-card p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

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

.cta-content h2 {
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.cta-content p {
    color: var(--color-text-2);
    margin-bottom: var(--space-xl);
}

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

.cta-section .btn-primary {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-bg);
}

.cta-section .btn-primary:hover {
    background: var(--color-bg-alt);
}

.cta-section .btn-outline {
    color: var(--color-text);
    border-color: var(--color-text);
}

.cta-section .btn-outline:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.perpetual-cta {
    background: var(--color-secondary);
}

.perpetual-cta .btn-primary {
    color: var(--color-secondary);
}

.perpetual-cta .btn-outline:hover {
    color: var(--color-secondary);
}

/* ============================================
   Features Grid
   ============================================ */
.features-section {
    padding: var(--space-3xl) 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.feature-card {
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.feature-card h3 {
    margin-bottom: var(--space-sm);
}

.feature-card > p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.feature-card ul {
    list-style: none;
}

.feature-card ul li {
    padding: var(--space-xs) 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.feature-card ul li::before {
    content: "•";
    color: var(--color-primary);
    margin-right: var(--space-sm);
}

/* ============================================
   Pricing
   ============================================ */
.pricing-hero {
    padding: var(--space-3xl) 0;
    text-align: center;
    background: var(--color-bg-alt);
}

.pricing-section {
    padding: var(--space-3xl) 0;
}

.pricing-toggle {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.toggle-btn {
    padding: var(--space-md) var(--space-xl);
    border: 2px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toggle-btn.active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text);
}

.pricing-grid {
    display: grid;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

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

.pricing-grid.two-column {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    position: relative;
}

.pricing-card.featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.pricing-card .featured-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary-dark);
    color: var(--color-text);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.pricing-card h3 {
    margin-bottom: var(--space-sm);
}

.price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.price-desc {
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.pricing-features {
    list-style: none;
    margin-bottom: var(--space-xl);
}

.pricing-features li {
    padding: var(--space-sm) 0;
    font-size: 0.9375rem;
}

.pricing-features li.included {
    color: var(--color-text);
}

.pricing-features li.excluded {
    color: var(--color-text-light);
}

.pricing-note {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background: var(--color-bg-dark);
    color: var(--color-text);
    padding: var(--space-3xl) 0 var(--space-xl);
}

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

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.footer-brand .logo-text {
    color: var(--color-text);
    margin-bottom: var(--space-md);
    display: block;
}

.footer-tagline {
    color: var(--color-text-2);
    margin-bottom: var(--space-lg);
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.footer-social a {
    color: var(--color-text-2);
    transition: color var(--transition-fast);
}

.footer-social a:hover {
    color: var(--color-text);
}

.footer-links h4 {
    color: var(--color-text);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

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

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

.footer-links a {
    color: var(--color-text-2);
    font-size: 0.9375rem;
}

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

.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ============================================
   Additional Components
   ============================================ */
.highlight-section {
    padding: var(--space-3xl) 0;
    background: var(--color-bg-alt);
}

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

.highlight-list {
    list-style: none;
    margin: var(--space-lg) 0;
}

.highlight-list li {
    padding: var(--space-sm) 0;
    padding-left: var(--space-lg);
    position: relative;
}

.highlight-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.module-card {
    background: var(--color-bg-alt);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
}

.module-card h3 {
    margin-bottom: var(--space-md);
}

.module-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.module-card-head h3 {
    margin-bottom: 0;
}

.pipeline-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-2xl);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
}

.pipeline-strip-step {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9375rem;
}

.pipeline-strip-arrow {
    color: var(--color-text-muted);
}

.pipeline-strip-sep {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.module-card ul {
    list-style: none;
}

.module-card li {
    padding: var(--space-xs) 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* Contact Page */
.contact-section {
    padding: var(--space-3xl) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
}

.contact-methods {
    margin: var(--space-xl) 0;
}

.contact-method {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.method-icon {
    font-size: 1.5rem;
}

.contact-form-container {
    background: var(--color-bg-alt);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-md);
    background: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(121, 173, 227, 0.2);
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.form-success {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border-radius: var(--radius-md);
    text-align: center;
}

.form-error {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    border-radius: var(--radius-md);
    text-align: center;
}

/* Marketplace Page */
.marketplace-filters {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.filter-btn {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-btn.active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text);
}

.addon-list {
    display: grid;
    gap: var(--space-lg);
}

.addon-list-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.addon-list-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.addon-list-icon {
    font-size: 2rem;
}

.addon-list-info {
    flex: 1;
}

.addon-list-info h3 {
    margin-bottom: var(--space-xs);
}

.addon-category {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.badge {
    display: inline-block;
    vertical-align: middle;
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.free {
    background: rgba(99, 195, 145, 0.15);
    color: var(--color-success);
}

.badge.premium {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.badge.warn {
    background: rgba(217, 168, 77, 0.15);
    color: var(--color-warning);
}

.marketplace-note {
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.addon-list-description {
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.addon-list-includes ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin-top: var(--space-sm);
}

.addon-list-includes li {
    background: var(--color-bg-alt);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.addon-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.addon-tier {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* FAQ */
.faq-section {
    padding: var(--space-3xl) 0;
    background: var(--color-bg-alt);
}

.faq-list {
    max-width: 800px;
    margin: var(--space-2xl) auto 0;
}

.faq-item {
    background: white;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
}

.faq-item h4 {
    margin-bottom: var(--space-sm);
}

.faq-item p {
    color: var(--color-text-muted);
    margin: 0;
}

/* Not Found */
.not-found {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
}

.not-found h1 {
    font-size: 6rem;
    color: var(--color-primary);
}

.not-found p {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    margin: var(--space-lg) 0;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-description {
        max-width: 100%;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-visual {
        display: none;
    }
    
    .products-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

    .highlight-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .problem-points {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 64px;
    }
    
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .product-hero h1 {
        font-size: 2.75rem;
    }
    
    .nav-menu {
        display: none;
    }

    .nav-actions-desktop {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .pricing-grid.two-column {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
    
    .cta-actions {
        flex-direction: column;
    }
    
    .addon-preview {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Machine Room — structural layer
   Added 2026-08. The token block above carries the palette; these rules
   carry the things a colour swap cannot express: the engineering grid, the
   monospace label voice, hairline structure instead of drop shadows, and
   the deliberate de-emphasis of pERPetual (in development, not for sale).
   ============================================ */

:root {
    /* Data palette. RULE: lime is the interface, these are throughput.
       Nothing clickable is mint or blue; nothing measuring volume is lime.
       That separation is what stops the trio reading as decoration. */
    --color-data-1: #7dd3a0;
    --color-data-2: #6ea8fe;
    --color-accent-tint: #172536;
    --grid-line: #1a1f26;
}

/* Small caps + mono is the label voice throughout: eyebrows, badges, tags. */
.section-badge, .hero-badge, .addon-category, .addon-tier, .product-tagline,
.stat-label, .price-desc, .coming-soon-badge, .filter-btn, .badge {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
}

/* Eyebrow badges are outlined, not filled pills — filled pills read consumer. */
.section-badge, .hero-badge {
    display: inline-block;
    border: 1px solid var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: 7px 12px;
    border-radius: 0;
}

/* The engineering grid behind the hero — the single strongest signal that this
   is infrastructure rather than a landing page. */
.hero, .databridge-hero, .pricing-hero, .product-hero {
    position: relative;
    background-color: var(--color-bg);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
}
.hero > *, .databridge-hero > *, .pricing-hero > *, .product-hero > * { position: relative; }

/* Structure from hairlines, not elevation. */
.feature-card, .why-card, .product-card, .pricing-card, .module-card,
.addon-card, .addon-list-card, .floating-card, .contact-method, .faq-item, .stat {
    box-shadow: none;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    transition: border-color 150ms ease, background 150ms ease;
}
.feature-card:hover, .why-card:hover, .product-card:hover, .module-card:hover,
.addon-card:hover, .addon-list-card:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-2);
}

/* Buttons: square, mono, decisive. Primary inverts to dark-on-accent. */
.btn {
    border-radius: 0;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}
.btn-primary { background: var(--color-primary); color: var(--color-bg); border: 1px solid var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); }
.btn-outline:hover { border-color: var(--color-text-light); color: var(--color-text); }

/* Numerals carry weight in this system — prices and stats set in mono. */
.price, .stat-value, .product-price { font-family: var(--font-mono); letter-spacing: -0.02em; }

/* Nav + footer sit on hairlines rather than shadows. */
.navbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: none; }
.footer { background: var(--color-bg-dark); border-top: 1px solid var(--color-border); }
.nav-link { color: var(--color-text-muted); }
.nav-link:hover { color: var(--color-text); }

/* pERPetual is IN DEVELOPMENT and must never read as purchasable:
   dashed edge, muted throughout, no accent, no filled CTA. */
.perpetual-hero, .perpetual-icon, .product-card.featured {
    border-style: dashed !important;
    border-color: var(--color-border) !important;
    background: transparent !important;
    color: var(--color-text-light);
}
.product-card.featured .featured-badge,
.coming-soon-badge {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    border-radius: 0;
}
.perpetual-cta { display: none !important; }


/* ============================================
   Contrast guards — measured, not eyeballed (WCAG 2.1)
   The accent is a light colour: white on it fails contrast.
   Anything sitting ON the accent must therefore use the dark ground, and the
   accent itself is only ever used as text against the dark ground (7.9:1).
   ============================================ */

/* Never white-on-accent. Enforced rather than left to convention. */
.btn-primary, .btn-primary:hover, .btn-primary:focus,
.badge.badge-primary, .featured-badge.filled {
    color: var(--color-bg) !important;   /* 12.57:1 — white here would be 1.56:1 */
}

/* Guard against any surface that is still light: if a pale background survives
   anywhere, the accent must not be painted on it as text. */
.card-1, .card-2, .card-3, .form-success, .form-error {
    background: var(--color-bg-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* Measured on #101418:
     body   #e6eaef  15.6:1
     muted  #8a94a1   6.3:1
     light  #66707d   4.3:1
     accent #79ade3   7.9:1
     mint   #63c391   7.6:1
     blue   #6ea8fe   7.4:1
   Borders are non-text and exempt. */

/* ============================================
   Pipeline panel — replaces the emoji "floating cards"
   Three absolutely-positioned cards with emoji glyphs overlapped at narrow
   widths (pERPetual was clipped behind On-Prem) and rendered differently on
   every OS. This is a flow-laid panel that depicts the actual product path.
   ============================================ */

.pipeline-panel {
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    padding: 22px;
    font-family: var(--font-mono);
}
.pipeline-head, .pipeline-foot {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
}
.pipeline-head { margin-bottom: 16px; }
.pipeline-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }

/* Flex + gap, so rows cannot collide the way the absolute cards did. */
.pipeline-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.pipeline-dot { width: 8px; height: 8px; flex-shrink: 0; }
.pipeline-name { font-size: 0.78rem; color: var(--color-text); width: 82px; flex-shrink: 0; }
.pipeline-track { flex-grow: 1; height: 3px; background: var(--color-surface-3); position: relative; }
.pipeline-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.pipeline-val { font-size: 0.72rem; color: var(--color-text-light); width: 40px; text-align: right; flex-shrink: 0; }

/* Palette rule in practice: the accent marks OUR stage, mint and blue are
   throughput, grey is idle. Nothing here is clickable, so nothing here is
   allowed to look like an action. */
.dot-accent, .fill-accent { background: var(--color-primary); }
.dot-mint,   .fill-mint   { background: var(--color-data-1); }
.dot-blue,   .fill-blue   { background: var(--color-data-2); }
.dot-grey,   .fill-grey   { background: var(--color-text-light); }

/* Retire the old absolute cards entirely. */
.hero-graphic, .floating-card { position: static !important; animation: none !important; }

/* ============================================
   Icon component sizing — the emoji-sized containers above (feature-icon,
   why-icon, point-icon, solution-icon, value-icon, method-icon, link-icon,
   addon-list-icon) now hold an <Icon /> SVG instead of emoji text.
   ============================================ */
.feature-icon svg, .why-icon svg, .solution-icon svg, .value-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
}
.point-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}
.method-icon svg, .addon-list-icon svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}
.link-icon svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

/* ============================================
   Light mode — this site has no theme toggle, so it follows the OS.
   Same token names, paper-grey palette. Never #fff/#000 as a surface.
   Placed last so it wins over every unconditional :root token block above.
   ============================================ */
@media (prefers-color-scheme: light) {
    :root {
        --color-primary: #1f5fa8;
        --color-primary-dark: #17497f;
        --color-primary-light: #e1ebf6;

        --color-secondary: #6b7482;
        --color-secondary-dark: #3d4650;
        --color-secondary-light: #98a1ad;

        --color-databridge: #1f5fa8;
        --color-databridge-dark: #17497f;

        --color-bg: #e9ecf0;
        --color-bg-alt: #f4f6f8;
        --color-bg-dark: #dfe3e8;
        --color-surface-2: #eceff3;
        --color-surface-3: #e3e7ec;
        --color-text: #1b2128;
        --color-text-2: #3d4650;
        --color-text-muted: #6b7482;
        --color-text-light: #98a1ad;
        --color-border: #cfd5dc;
        --color-border-strong: #b6bec8;

        --color-success: #1e6f4d;
        --color-warning: #8a5a08;
        --color-error: #a32b1e;

        --color-data-1: #1e6f4d;
        --color-data-2: #2d6fb8;
        --color-accent-tint: #e1ebf6;
        --grid-line: #d7dce2;

        --shadow-sm: 0 0 0 1px rgba(0,0,0,0.04);
        --shadow-md: 0 0 0 1px rgba(0,0,0,0.06);
        --shadow-lg: 0 0 0 1px rgba(0,0,0,0.09);
        --shadow-xl: 0 0 0 1px rgba(0,0,0,0.12);
    }

    .navbar {
        background: rgba(233, 236, 240, 0.95);
    }
}

/* ============================================
   RESPONSIVE
   Mobile nav (drawer + scrim + tap dropdown), and breakpoints at
   1024 / 768 / 480 for hero, stats, grids, pricing, pipeline, footer,
   buttons and type scale. Works with the existing max-width:1024/768
   blocks above — this section only adds what those didn't cover, and
   overrides `.nav-menu` / `.nav-actions` display rules (previously
   `display:none` unconditionally, which is why the hamburger looked
   like it did nothing: the drawer had no `.active` state to show).
   ============================================ */

/* Desktop/mobile action-row split + scrim, defined outside any query
   so they hold at every width until the 768px block below flips them. */
.nav-actions-mobile {
    display: none;
}

.nav-scrim {
    display: none;
}

@media (max-width: 1024px) {
    .nav-container {
        padding: 0 var(--space-md);
    }

    .pricing-grid.three-column,
    .module-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* backdrop-filter turns .navbar into the containing block for fixed descendants, so the
       fixed .nav-menu/.nav-scrim were being positioned inside the 72px bar and clipped to it.
       On phones the bar is opaque anyway: drop the filter so the drawer is viewport-fixed. */
    .navbar {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--color-bg);
    }

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

    .nav-menu {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        height: calc(100dvh - var(--nav-height));
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        padding: var(--space-lg);
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-base), transform var(--transition-base);
        z-index: 1001;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-menu .nav-link {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--color-border);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-dropdown {
        border-bottom: 1px solid var(--color-border);
    }

    .nav-dropdown .dropdown-toggle {
        border-bottom: none;
    }

    /* Dropdown becomes tap-driven inline content, not a hover flyout. */
    .nav-dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0 0 var(--space-sm);
        min-width: 0;
        display: none;
    }

    .nav-dropdown.open .dropdown-menu {
        display: block;
    }

    .nav-actions-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
    }

    .nav-actions-mobile .btn {
        width: 100%;
        min-height: 44px;
    }

    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        align-items: center;
        z-index: 1002;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav-scrim.active {
        display: block;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    /* Body scroll lock while the drawer is open — no JS needed. */
    html:has(.nav-menu.active) {
        overflow: hidden;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .product-hero h1 {
        font-size: 2.25rem;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    .products-grid,
    .features-grid,
    .why-grid,
    .module-grid,
    .pricing-grid.three-column {
        grid-template-columns: 1fr;
    }

    .pricing-card.featured {
        box-shadow: 0 0 0 2px var(--color-primary);
        transform: none;
    }

    .addon-list-header {
        flex-wrap: wrap;
    }

    .hero-actions,
    .cta-actions {
        flex-direction: column;
    }

    .hero-actions .btn,
    .cta-actions .btn,
    .product-footer .btn {
        width: 100%;
    }

    .btn {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    :root {
        --nav-height: 60px;
    }

    .section-container,
    .nav-container,
    .hero-container,
    .footer-container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    h1, .hero h1 {
        font-size: 1.75rem;
    }

    .product-hero h1 {
        font-size: 1.875rem;
    }

    h2 { font-size: 1.5rem; }

    .hero-description {
        font-size: 1.0625rem;
    }

    .price {
        font-size: 2.25rem;
    }

    .pipeline-strip {
        justify-content: flex-start;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .pricing-toggle {
        flex-wrap: wrap;
    }

    .toggle-btn {
        min-height: 44px;
    }
}