/* ===========================================
   TechConcepts.org — Main Stylesheet
   Extracted from monolith index.html
   =========================================== */

/* --- Fonts --- */
/* Inter loaded asynchronously via nav.js — see scripts/nav.js injectFonts() */

/* --- CSS Variables — TechConcepts Design System -----------
   Source of truth: techconcepts-design-system bundle
   (claude.ai/design export 2026-04-25). Mirrors
   colors_and_type.css. One-accent rule: teal only.
   ----------------------------------------------------------- */
:root {
    /* Color foundations (light mode) */
    --primary:         #000000;   /* Foreground / headings */
    --accent:          #0d9488;   /* Brand teal — links, prices, accents */
    --accent-hover:    #0f766e;   /* Pressed / hover */
    --success:         #10b981;   /* Stat numerals, positive states */
    --success-deep:    #059669;
    --warning:         #f59e0b;
    --danger:          #ef4444;

    /* Neutrals */
    --gray:            #6b7280;   /* Body copy on light surfaces */
    --gray-light:      #9ca3af;   /* Captions, deemphasised */
    --light-gray:      #f3f4f6;   /* Soft surface, badges */
    --border:          #e5e7eb;   /* Hairlines */
    --white:           #fff;
    --surface:         #f9fafb;   /* Pill / chip backgrounds */
    --text-body:       #374151;   /* Long-form body */
    --paper:           #ede4d1;   /* Aged-paper Bauhaus background */

    /* Bauhaus design tokens (aged-paper system) */
    --ink:             #1a1410;
    --ink-muted:       #4a3d33;
    --ink-hairline:    rgba(26,20,16,.15);
    --paper-text:      #f5ecd9;
    --brick:           #a83a30;
    --ochre:           #c89b2c;
    --navy:            #1e3a8a;
    --mono:            ui-monospace, 'SF Mono', Monaco, monospace;

    /* Semantic surface tokens */
    --surface-card:     #fff;
    --surface-elevated: #fff;
    --bg-dark:          #050505;  /* Proof section, full-bleed black */
    --bg-gradient:      linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); /* CTA + Wattora hero only */

    /* Foreground roles */
    --fg-on-dark:        #fff;
    --fg-on-dark-muted:  rgba(255, 255, 255, 0.55);

    /* Typography */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
    --font-feature: 'cv02', 'cv03', 'cv04', 'cv11';

    /* Type scale */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */
    --text-5xl:  3rem;      /* 48px */
    --text-6xl:  3.75rem;   /* 60px */

    /* Radii — surface-specific per design system */
    --radius-xs:   4px;     /* tags, code chips */
    --radius-sm:   6px;     /* mobile menu */
    --radius-md:   8px;     /* buttons, inputs */
    --radius-lg:   12px;    /* service / blog / tool cards */
    --radius-xl:   16px;    /* case studies, testimonials */
    --radius-2xl:  20px;    /* quick-take liquid glass */
    --radius-pill: 100px;

    /* Elevation */
    --shadow-card:    0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-glass:   0 8px 32px rgba(0, 0, 0, 0.30), 0 0 40px rgba(16, 185, 129, 0.06);
    --shadow-glow:    0 0 40px rgba(16, 185, 129, 0.40);
    --shadow-pop:     0 20px 60px rgba(0, 0, 0, 0.25);
    --shadow-quick-take: 0 8px 32px rgba(13, 148, 136, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);

    /* Layout */
    --container-max:    1100px;
    --container-pad:    24px;
    --section-pad-y:    100px;
    --section-pad-y-sm: 80px;

    /* Motion */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --dur-quick:  0.15s;
    --dur-base:   0.2s;
    --dur-slow:   0.4s;
    --dur-slower: 0.6s;
}

/* Dark mode disabled — Bauhaus aged-paper system is intentionally paper-only.
   --paper, --ink and related Bauhaus tokens must not be overridden. */

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter alternate glyphs */
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* P3: prevent horizontal scroll on mobile */
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(26,20,16,.07) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .55;
    mix-blend-mode: multiply;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Section Utilities --- */
.section-dark {
    background: var(--bg-dark);
    color: #fff;
}

.section-alt {
    background: var(--light-gray);
}

.section-gradient {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
}

.section-subtitle {
    text-align: center;
    color: var(--gray);
    margin-bottom: 50px;
    font-size: var(--text-lg);
}

/* Section eyebrow — small uppercase label above an H2 */
.section-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

/* Section sub — short lede under an H2 */
.section-sub {
    font-size: var(--text-lg);
    color: var(--gray);
    line-height: 1.55;
    margin-bottom: 40px;
    max-width: 640px;
}

/* On dark backgrounds (.proof), tone the sub for contrast */
.proof .section-eyebrow {
    color: var(--accent);
    text-align: center;
}
.proof h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 8px;
}

/* --- Navigation (legacy — pages without .tc-header) --- */
nav:not(.tc-header) {
    padding: 20px 0;
    border-bottom: 2px solid var(--primary);
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 100;
}

nav:not(.tc-header) .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
}
.logo img {
    height: 36px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-links a {
    color: var(--gray);
    text-decoration: none;
    font-size: var(--text-sm);
}

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

.nav-links a.active {
    color: var(--primary);
    font-weight: 600;
}

.mobile-menu-btn {
    display: none;
    background: var(--light-gray);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 8px 12px;
    font-size: var(--text-2xl);
    line-height: 1;
    z-index: 101;
}

/* --- Language Switcher --- */
.lang-switcher {
    position: relative;
    margin-right: 16px;
}

.lang-btn {
    background: var(--light-gray);
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-btn:hover {
    background: var(--border);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 160px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 200;
    margin-top: 4px;
}

.lang-dropdown.active {
    display: block;
}

.lang-option {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--text-xs);
}

.lang-option:hover {
    background: var(--light-gray);
}

.lang-option:first-child {
    border-radius: 8px 8px 0 0;
}

.lang-option:last-child {
    border-radius: 0 0 8px 8px;
}

/* RTL support for Arabic */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .footer-links { flex-direction: row-reverse; }
[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
[dir="rtl"] .lang-option { text-align: right; }
[dir="rtl"] .hero { text-align: right; }
[dir="rtl"] .faq-item { text-align: right; }
[dir="rtl"] .product-card { text-align: right; }
[dir="rtl"] .service-card { text-align: right; }

/* --- Buttons — sentence-case, 8px radius per design system --- */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
    cursor: pointer;
    border: none;
    font-family: var(--font-sans);
}

.btn-primary {
    background: var(--bg-dark);
    color: var(--fg-on-dark);
}

.btn-primary:hover {
    background: #333;
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--bg-dark);
    color: var(--fg-on-dark);
}

/* --- Hero --- */
.hero {
    padding: 100px 0 80px;
    text-align: center;
}

.hero h1 {
    font-size: var(--text-6xl);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.hero p {
    font-size: var(--text-xl);
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto 40px;
}

/* Advisory reframe: hero-subtitle left-aligns on desktop inside .hero-with-photo */
.hero-with-photo .hero-subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.hero-buttons,
.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 12px;
}

.hero-email-alt {
    font-size: var(--text-sm);
    color: var(--gray);
    margin-bottom: 32px;
    text-align: center;
}
.hero-email-alt a {
    color: var(--accent);
    text-decoration: none;
}
.hero-email-alt a:hover { text-decoration: underline; }

.trust-badges {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--gray);
}

.trust-badges span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Services Grid --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--surface-card);
    padding: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--primary);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}

.service-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}

.service-card .icon {
    position: relative;
    z-index: 1;
    margin: 24px 0 0 24px;
    font-size: var(--text-2xl);
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-card h3 {
    font-size: var(--text-lg);
    padding: 0 24px;
    margin-top: 28px;
    margin-bottom: 8px;
}

.service-card p {
    color: var(--gray);
    font-size: var(--text-sm);
    padding: 0 24px;
    margin-bottom: 12px;
    flex: 1;
}

.service-card .price-range,
.service-card .service-price {
    font-size: var(--text-xs);
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 24px 24px;
}

.service-card .service-icon {
    position: relative;
    z-index: 1;
    margin: 24px 0 0 24px;
    font-size: var(--text-2xl);
    line-height: 1;
}

/* --- Proof / Stats Bar --- */
.proof {
    padding: 100px 0;
    background: var(--bg-dark);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* SVG noise texture — 3% per design system spec */
.proof::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

/* Radial green glow — centred behind the stat grid */
.proof::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.09) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.proof h2 {
    font-size: var(--text-4xl);
    text-align: center;
    margin-bottom: 50px;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* --- Glass stat cards (proof strip — load-bearing brand moment) --- */
.proof-stat {
    text-align: center;
    padding: 40px 24px 36px;
    position: relative;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        transform var(--dur-slow) var(--ease-out),
        background var(--dur-slow) ease,
        border-color var(--dur-slow) ease,
        box-shadow var(--dur-slow) ease;
    /* Entry animation — hidden by default */
    opacity: 0;
    transform: translateY(24px);
}

.proof-stat.proof-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* Bauhaus accent line — top of card, cycling colors */
.proof-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.proof-stat:nth-child(2)::after { background: var(--accent); }
.proof-stat:nth-child(3)::after { background: var(--accent); }
.proof-stat:nth-child(4)::after { background: var(--accent); }
.proof-stat:nth-child(5)::after { background: var(--accent); }

/* Hover — card lifts, green-tint border, glass drop-shadow */
.proof-stat:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(16, 185, 129, 0.20);
    box-shadow: var(--shadow-glass);
}

.proof-stat:hover::after {
    transform: scaleX(1);
}

/* Contact Form Section */
.contact-form-section {
    padding: 80px 0;
    background: var(--bg-dark);
    border-top: 3px solid var(--accent);
}
.contact-form-eyebrow {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 8px;
    font-weight: 700;
}
.contact-form-sub {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 36px;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
}
.form-group input,
.form-group textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: #fff;
    font-size: var(--text-sm);
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
    resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.22);
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    background: rgba(13, 148, 136, 0.05);
}
.contact-submit {
    align-self: flex-start;
    padding: 14px 32px;
}
.contact-form-section .container { max-width: 680px; text-align: left; }
.contact-form-section h2 {
    color: var(--fg-on-dark);
    font-size: 1.8rem;
    margin-bottom: 10px;
}
.field-hint { opacity: 0.5; }

.contact-form-success {
    display: none;
    padding: 40px;
    background: rgba(13, 148, 136, 0.08);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    text-align: center;
}
.contact-form-success.visible { display: block; }
.contact-form-success__icon {
    font-size: 2rem;
    margin-bottom: 12px;
}
.contact-form-success h3 {
    color: var(--fg-on-dark);
    margin-bottom: 8px;
}
.contact-form-success p {
    color: var(--fg-on-dark-muted);
    font-size: 0.9rem;
}
.contact-form-note {
    margin-top: 14px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    .contact-submit { width: 100%; text-align: center; }
}

/* --- Number typography --- */
.proof-item .number,
.proof-stat .proof-number {
    font-size: var(--text-6xl);
    font-weight: 700;
    color: var(--success);
    text-shadow: var(--shadow-glow);
    margin-bottom: 14px;
    letter-spacing: -2px;
    line-height: 1;
    line-height: 1;
}

.proof-stat .proof-value {
    font-weight: 700;
}

.proof-stat .proof-unit {
    font-size: 0.45em;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.7;
    vertical-align: baseline;
}

/* --- Label --- */
.proof-item p,
.proof-stat .proof-label {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    font-weight: 500;
}

/* --- Context line --- */
.proof-stat .proof-context {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    max-width: 200px;
    margin: 0 auto;
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce) {
    .proof-stat {
        opacity: 1;
        transform: none;
        transition: background 0.2s ease, border-color 0.2s ease;
    }
    .proof-stat:hover {
        transform: none;
    }
}

/* --- Proof Stories (Designer spec STEP D) --- */
.proof-stories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.proof-story {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 32px;
    backdrop-filter: blur(16px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.proof-story.proof-visible {
    opacity: 1;
    transform: translateY(0);
}
.proof-story__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-light);
    margin-bottom: 16px;
}
.proof-story__body {
    font-size: 18px;
    line-height: 1.6;
    color: #fff;
}
.proof-story__num {
    color: var(--success);
    font-weight: 700;
    text-shadow: var(--shadow-glow);
}
.proof-footnote {
    margin-top: 40px;
    font-size: 14px;
    color: var(--gray-light);
    text-align: center;
}
.proof-footnote a {
    color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
    .proof-story {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
@media (max-width: 768px) {
    .proof-stories {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .proof-story { padding: 24px; }
    .proof-story__body { font-size: 16px; }
}

.testimonial-card {
    background: #fff;
    padding: 32px;
    border-radius: 0;
    border: 2px solid var(--border);
    border-left: 4px solid var(--accent);
}

.testimonial-quote {
    font-size: var(--text-base);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 24px;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.testimonial-industry-tag {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 16px;
}

.testimonial-card--featured {
    margin-bottom: 32px;
}

.testimonial-card--featured .testimonial-quote {
    font-size: var(--text-lg);
}

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

.badge {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: var(--text-base);
}

/* --- Pricing Cards --- */
.pricing {
    padding: 100px 0;
}

.pricing h2 {
    font-size: var(--text-4xl);
    text-align: center;
    margin-bottom: 16px;
}

.pricing .subtitle {
    text-align: center;
    color: var(--gray);
    margin-bottom: 60px;
    font-size: var(--text-lg);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pricing-card {
    border: 2px solid var(--border);
    border-radius: 0;
    padding: 40px 32px;
    position: relative;
    transition: border-color 0.3s;
    background: var(--surface-card);
}

.pricing-card:hover {
    border-color: var(--primary);
}

.pricing-card.featured {
    border-color: var(--primary);
    border-top: 4px solid var(--accent);
    background: var(--surface-card);
}

.pricing-card.featured::before {
    content: "MOST POPULAR";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-dark);
    color: #fff;
    padding: 4px 16px;
    border-radius: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 1px;
}

.pricing-card h3 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray);
    margin-bottom: 8px;
}

.price {
    font-size: var(--text-5xl);
    font-weight: 700;
    margin-bottom: 8px;
}

.price span {
    font-size: var(--text-base);
    color: var(--gray);
    font-weight: 400;
}

.timeline {
    font-size: var(--text-sm);
    color: var(--gray);
    margin-bottom: 24px;
}

.pricing-card ul {
    list-style: none;
    margin-bottom: 32px;
}

.pricing-card li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-card li::before {
    content: "\2713";
    color: var(--success);
    font-weight: bold;
}

.pricing-card .btn {
    width: 100%;
    text-align: center;
}

/* --- Process Steps --- */
.process {
    padding: 100px 0;
}

.process h2 {
    font-size: var(--text-4xl);
    text-align: center;
    margin-bottom: 60px;
}

.process-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.process-steps::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 60px;
    right: 60px;
    height: 2px;
    background: var(--border);
}

.process-step {
    text-align: center;
    flex: 1;
    position: relative;
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--bg-dark);
    color: #fff;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
}

.process-step:nth-child(1) .step-number { background: var(--accent); }
.process-step:nth-child(2) .step-number { background: var(--accent); color: var(--primary); }
.process-step:nth-child(3) .step-number { background: var(--accent); }
.process-step:nth-child(4) .step-number { background: var(--bg-dark); }

.process-step h3 {
    font-size: var(--text-base);
    margin-bottom: 8px;
}

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

/* --- About Section --- */
.about {
    padding: 80px 0;
    background: var(--light-gray);
    border-top: 3px solid var(--accent);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: center;
}

.about-photo-img {
    width: 360px;
    height: 360px;
    border-radius: 16px;
    object-fit: cover;
}

.about-text h1 {
    font-size: clamp(28px, 5vw, 42px);
    margin-bottom: 8px;
}

.about-text h2 {
    font-size: var(--text-3xl);
    margin-bottom: 16px;
}

.about-text .title {
    font-size: var(--text-lg);
    color: var(--accent);
    margin-bottom: 24px;
}

.about-text p {
    color: var(--gray);
    margin-bottom: 24px;
    font-size: var(--text-base);
}

.credentials {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.credential {
    background: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: var(--text-sm);
    border: 1px solid var(--border);
}

/* --- Testimonials --- */
.testimonials {
    padding: 100px 0;
}

.testimonials h2 {
    font-size: var(--text-4xl);
    text-align: center;
    margin-bottom: 60px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial {
    background: #fff;
    padding: 32px;
    border-radius: 0;
    border: 2px solid var(--border);
    border-left: 4px solid var(--accent);
}

.testimonial-text {
    font-size: var(--text-base);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 24px;
}

.author-name {
    font-weight: 600;
    font-size: var(--text-sm);
}

.author-title {
    font-size: var(--text-xs);
    color: var(--gray);
}

/* --- Case Studies --- */
.case-studies {
    padding: 100px 0;
    background: var(--light-gray);
}

.case-studies h2 {
    font-size: var(--text-4xl);
    text-align: center;
    margin-bottom: 12px;
}

.case-study {
    background: #fff;
    border-radius: 0;
    padding: 40px;
    margin-bottom: 32px;
    border: 2px solid var(--border);
}

.case-header {
    margin-bottom: 32px;
}

.case-tag {
    display: inline-block;
    background: var(--bg-dark);
    color: #fff;
    padding: 4px 12px;
    border-radius: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.case-header h3 {
    font-size: var(--text-2xl);
}

.case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.case-grid h4 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 12px;
}

.case-grid p {
    font-size: var(--text-sm);
    line-height: 1.7;
}

.case-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.metric {
    text-align: center;
    padding: 16px;
    background: var(--light-gray);
    border-radius: 0;
}

.metric-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--accent);
}

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

/* --- Blog --- */
.blog {
    padding: 80px 0;
    background: #fff;
}

.blog h2 {
    font-size: var(--text-4xl);
    text-align: center;
    margin-bottom: 50px;
}

.blog-article {
    max-width: 800px;
    margin: 0 auto;
    background: var(--surface-card);
    border-radius: 0;
    padding: 40px;
    border: 2px solid var(--border);
    color: var(--text-body);
}

/* Liquid Glass Quick Take box — used across all book review posts */
.quick-take {
    position: relative;
    background: #fff;
    border: 2px solid var(--accent);
    border-left: 4px solid var(--accent);
    border-radius: 0;
    padding: 28px 32px;
    margin-bottom: 40px;
}

.quick-take::before {
    display: none;
}

.quick-take-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin: 0 0 16px;
}

.quick-take p {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.quick-take p:last-child {
    margin-bottom: 0;
}

.blog-article + .blog-article {
    margin-top: 32px;
}

.blog-article h2,
.blog-article h3 {
    color: var(--primary);
}

.blog-article h2 {
    font-size: var(--text-4xl);
    margin: 40px 0 16px;
}

.blog-article h3 {
    font-size: var(--text-3xl);
    margin-bottom: 8px;
}

.blog-meta {
    color: var(--gray);
    font-size: var(--text-sm);
    margin-bottom: 24px;
}

.blog-article h4 {
    font-size: var(--text-xl);
    margin: 32px 0 16px;
    color: var(--primary);
}

.blog-article p {
    font-size: var(--text-base);
    line-height: 1.8;
    margin-bottom: 16px;
    color: var(--text-body);
}

.blog-article code {
    background: var(--light-gray);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: var(--text-sm);
    color: var(--text-body);
}

.blog-article pre {
    background: var(--bg-dark);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
    font-size: var(--text-xs);
    line-height: 1.5;
}

.blog-article ul {
    margin: 16px 0;
    padding-left: 24px;
}

.blog-article li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.blog-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.blog-stat {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.blog-stat .number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--success);
}

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

/* --- Blog Cards (listing pages) --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blog-card {
    background: #fff;
    border-radius: 0;
    padding: 28px;
    border: 2px solid var(--border);
    text-decoration: none;
    color: var(--primary);
    transition: border-color 0.2s;
}

.blog-card:hover {
    border-color: var(--primary);
}

.blog-card .tag {
    display: inline-block;
    background: var(--light-gray);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: var(--text-xs);
    color: var(--gray);
    margin-bottom: 12px;
}

.blog-card h3 {
    font-size: var(--text-lg);
    margin-bottom: 8px;
}

.blog-card p {
    color: var(--gray);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: 12px;
}

.blog-card .read-more {
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* --- FAQ --- */
.faq {
    padding: 100px 0;
}

.faq h2 {
    font-size: var(--text-4xl);
    text-align: center;
    margin-bottom: 60px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    padding: 24px;
    border: 2px solid var(--border);
    border-radius: 0;
}

.faq-item h3 {
    font-size: var(--text-base);
    margin-bottom: 12px;
}

.faq-item p {
    font-size: var(--text-sm);
    color: var(--gray);
}

/* --- Final CTA --- */
.final-cta {
    padding: 100px 0;
    background: var(--bg-dark);
    color: #fff;
    text-align: center;
}

.final-cta h2 {
    font-size: var(--text-4xl);
    margin-bottom: 16px;
}

.final-cta p {
    font-size: var(--text-lg);
    opacity: 0.8;
    margin-bottom: 40px;
}

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

.final-cta .btn-primary:hover {
    background: var(--accent);
    color: var(--primary);
}

/* --- Newsletter --- */
.newsletter {
    padding: 80px 0;
    background: var(--light-gray);
}

.newsletter-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 800px;
    margin: 0 auto;
    gap: 40px;
}

.newsletter-text h2 {
    font-size: var(--text-3xl);
    margin-bottom: 8px;
}

.newsletter-text p {
    font-size: var(--text-sm);
    color: var(--gray);
}

.newsletter-form {
    display: flex;
    gap: 12px;
}

.newsletter-form input[type="email"] {
    padding: 14px 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    width: 260px;
    background: #fff;
}

.newsletter-success {
    display: none;
    color: var(--success);
    font-weight: 600;
    margin-top: 12px;
}
.newsletter-success.visible { display: block; }

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
}

.newsletter-form button {
    white-space: nowrap;
}

/* --- Products Links --- */
.products {
    padding: 80px 0;
    border-top: 1px solid var(--border);
}

.products h2 {
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: 40px;
    color: var(--gray);
}

.product-links {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.product-link {
    text-decoration: none;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.product-link:hover {
    color: var(--accent);
}

/* --- Product Cards (products page) --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-card {
    background: #fff;
    border-radius: 0;
    padding: 32px;
    border: 2px solid var(--border);
    text-decoration: none;
    color: var(--primary);
    transition: border-color 0.2s, transform 0.2s;
}

.product-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
}

.product-card .icon {
    font-size: var(--text-4xl);
    margin-bottom: 16px;
}

.product-card h3 {
    font-size: var(--text-lg);
    margin-bottom: 8px;
}

.product-card p {
    color: var(--gray);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: 16px;
}

.product-card .platform {
    font-size: var(--text-xs);
    color: var(--gray-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Tools / Lead Magnets --- */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tool-card {
    background: #fff;
    border-radius: 0;
    padding: 28px;
    border: 2px solid var(--border);
    text-align: center;
}

.tool-card .icon {
    font-size: var(--text-5xl);
    margin-bottom: 16px;
}

.tool-card h3 {
    font-size: var(--text-lg);
    margin-bottom: 12px;
}

.tool-card p {
    font-size: var(--text-sm);
    color: var(--gray);
    margin-bottom: 20px;
    line-height: 1.6;
}

.tool-card .tool-link {
    color: var(--accent);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
}

.coming-soon {
    opacity: 0.5;
    cursor: default;
}

/* --- Footer --- */
footer:not(.tc-footer) {
    padding: 40px 0;
    border-top: 3px solid var(--primary);
    background: var(--light-gray);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}

.footer-col h2,
.footer-col h4,
.footer-col-heading {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    color: var(--primary);
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col a {
    color: var(--gray);
    text-decoration: none;
    font-size: var(--text-sm);
}

.footer-col a:hover {
    color: var(--accent);
}

.footer-col p {
    color: var(--gray);
    font-size: var(--text-sm);
    margin-bottom: 4px;
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--gray);
}

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

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    color: var(--gray);
    text-decoration: none;
    font-size: var(--text-sm);
}

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

.footer-info {
    font-size: var(--text-sm);
    color: var(--gray);
}

/* --- Deliverables Checklist (service pages) --- */
.deliverables {
    list-style: none;
    padding: 0;
}

.deliverables li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.deliverables li::before {
    content: "\2713";
    color: var(--success);
    font-weight: bold;
}

/* --- Content Upgrades (blog lead magnets) --- */
.content-upgrade {
    background: rgba(13, 148, 136, 0.06);
    border: 2px solid var(--accent);
    border-radius: 0;
    padding: 28px 24px;
    margin: 40px 0;
    text-align: center;
}

.content-upgrade h3 {
    font-size: var(--text-xl);
    margin-bottom: 12px;
    color: var(--primary);
}

.content-upgrade p {
    font-size: var(--text-base);
    color: var(--gray);
    margin-bottom: 20px;
    line-height: 1.6;
}

.content-upgrade form {
    display: flex;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.content-upgrade input[type="email"] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--text-sm);
}

.content-upgrade input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
}

.content-upgrade button {
    background: var(--bg-dark);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.content-upgrade button:hover {
    background: #333;
}

.content-upgrade .btn {
    display: inline-block;
    text-decoration: none;
}

@media (max-width: 600px) {
    .content-upgrade form {
        flex-direction: column;
        max-width: 100%;
    }

    .content-upgrade input[type="email"],
    .content-upgrade button {
        width: 100%;
    }
}

/* --- Mobile CTA Bar --- */
.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    z-index: 99;
    text-align: center;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
.mobile-cta-bar .btn { width: 100%; }

/* --- SVG Service Icons — neutral chip --- */
.service-card .service-icon-svg {
    display: block;
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--accent);
    margin: 24px 0 0 24px;
    flex-shrink: 0;
    stroke-width: 1.6;
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}
.service-card:hover .service-icon-svg {
    background: rgba(13, 148, 136, 0.08);
}

/* --- Trusted By --- */
.trusted-by {
    padding: 40px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.trusted-by-label {
    text-align: center;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray);
    margin-bottom: 20px;
}
.trusted-by-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
}
.trusted-by-item {
    text-align: center;
    color: var(--gray);
    font-size: var(--text-sm);
    font-weight: 500;
}
.trusted-by-item .type {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
    display: block;
    margin-top: 4px;
}

/* --- Hero with Photo Layout --- */
.hero-with-photo {
    display: flex;
    align-items: center;
    gap: 60px;
}
.hero-text { flex: 1; text-align: left; }
.hero-photo {
    flex-shrink: 0;
}
.hero-photo img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

/* --- Availability Banner --- */
.availability-banner {
    display: inline-block;
    background: #ecfdf5;
    color: var(--success-deep);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: 24px;
}
.availability-banner::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--success-deep);
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --- Blog Card Category Colors --- */
.blog-card[data-category="build-story"] { border-top: 3px solid #8b5cf6; }
.blog-card[data-category="architecture"] { border-top: 3px solid var(--accent); }
.blog-card[data-category="optimization"] { border-top: 3px solid var(--warning); }
.blog-card[data-category="tutorial"] { border-top: 3px solid #3b82f6; }
.blog-card[data-category="growth"] { border-top: 3px solid #ec4899; }
.blog-card[data-category="devops"] { border-top: 3px solid #6366f1; }
.blog-card .tag[data-tag="build-story"] { background: #f5f3ff; color: #7c3aed; }
.blog-card .tag[data-tag="architecture"] { background: #f0fdfa; color: var(--accent); }
.blog-card .tag[data-tag="optimization"] { background: #fffbeb; color: #d97706; }
.blog-card .tag[data-tag="tutorial"] { background: #eff6ff; color: #2563eb; }
.blog-card .tag[data-tag="growth"] { background: #fdf2f8; color: #db2777; }
.blog-card .tag[data-tag="devops"] { background: #eef2ff; color: #4f46e5; }

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 900px) {
    .hero h1 {
        font-size: var(--text-3xl);
    }

    .services-grid,
    .pricing-grid,
    .blog-grid,
    .product-grid,
    .tools-grid {
        grid-template-columns: 1fr;
    }

    /* Proof grid — 2x2 on tablet */
    .proof-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .proof-stat .proof-number {
        font-size: var(--text-5xl);
    }

    .process-steps {
        flex-direction: column;
        gap: 40px;
    }

    .process-steps::before {
        display: none;
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-photo-img {
        margin: 0 auto;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .mobile-menu-btn {
        display: block !important;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        flex-direction: column;
        padding: 20px 24px;
        gap: 16px;
        border-bottom: 2px solid var(--primary);
        box-shadow: 0 4px 12px rgba(26,26,46,0.1);
    }

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

    .nav-links .btn {
        text-align: center;
    }

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

    .footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .product-links {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .mobile-cta-bar { display: block; }
    body { padding-bottom: 70px; }

    .hero-with-photo {
        flex-direction: column-reverse;
        text-align: center;
    }
    .hero-text { text-align: center; }
    .hero-photo img { width: 140px; height: 140px; }
    .hero-with-photo .hero-cta { justify-content: center; }
    .hero-demo { width: 100%; max-width: 340px; margin: 0 auto; }
}

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

    .testimonials-grid,
    .testimonials-grid--two {
        grid-template-columns: 1fr;
    }

    .newsletter-content {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form {
        flex-direction: column;
        width: 100%;
    }

    .newsletter-form input[type="email"] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .case-metrics {
        grid-template-columns: 1fr 1fr;
    }

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

    /* Proof grid — single column on phone */
    .proof-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .proof-stat {
        padding: 32px 20px 28px;
    }

    .proof-stat .proof-number {
        font-size: var(--text-4xl);
    }

    .about-photo-img {
        width: 100%;
        max-width: 320px;
        height: auto;
    }
}

/* ===========================================
   PRODUCT CARD SCREENSHOT IMAGE
   =========================================== */
.product-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    margin-bottom: 16px;
    display: block;
    background: var(--light-gray);
}
.product-card--apple .product-card-img  { object-position: center center; }
.product-card--chrome .product-card-img { object-position: top center; }
.product-card--jira   .product-card-img { object-position: top left; }

/* ===========================================
   PROOF BAR (products page lightweight version)
   =========================================== */
.proof-bar {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}
.proof-bar .proof-item {
    text-align: center;
}
.proof-bar .proof-item .number {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--accent);
}
.proof-bar .proof-item .label {
    font-size: var(--text-xs);
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* ===========================================
   FREE AUDIT CTA SECTION
   =========================================== */
.cta-start-call {
    padding: 100px 0;
    background: var(--bg-dark);
    color: #fff;
    text-align: center;
    border-top: 4px solid var(--accent);
}
.cta-start-call h2 { font-size: 2rem; margin-bottom: 16px; font-weight: 700; }
.cta-start-call p { font-size: 1.1rem; line-height: 1.7; opacity: 0.9; margin-bottom: 2rem; }
.cta-start-call .container { max-width: 700px; }
.cta-start-call .btn-primary {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}
.cta-start-call .btn-primary:hover { background: var(--accent); color: var(--primary); }

/* ===========================================
   HERO DEMO (mock bot interaction)
   =========================================== */
.hero-demo {
    flex-shrink: 0;
    width: 460px;
    background: #0d1117;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--shadow-pop), 0 0 60px rgba(13, 148, 136, 0.07);
    font-size: var(--text-xs);
}
.hero-demo-header {
    background: #161b27;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-demo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f57;
}
.hero-demo-dot:nth-child(2) { background: #febc2e; }
.hero-demo-dot:nth-child(3) { background: #28c840; }
.hero-demo-title {
    margin-left: 8px;
    color: var(--gray-light);
    font-size: var(--text-xs);
    font-weight: 500;
}
.hero-demo-body { padding: 16px 18px; }
.hero-demo-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin: 14px 0 12px;
}
.hero-demo-avatar--human { background: #374151; }
.hero-demo-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.hero-demo-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.hero-demo-content { color: #d1d5db; line-height: 1.6; flex: 1; }
.hero-demo-name {
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.hero-demo-time {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--gray-light);
    margin-left: 8px;
}
.hero-demo-tags { display: flex; gap: 6px; margin: 6px 0; }
.hero-demo-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
}
.tag-blue { background: rgba(59,130,246,0.2); color: #93c5fd; }
.tag-red  { background: rgba(239,68,68,0.2);  color: #fca5a5; }
.hero-demo-row {
    margin-top: 4px;
    font-size: var(--text-xs);
    color: var(--gray-light);
}
.hero-demo-success { color: #5eead4; }

/* ===========================================
   PRODUCT CARD PLATFORM VARIANTS
   =========================================== */
.product-card--apple  { border-top: 3px solid var(--primary); }
.product-card--chrome { border-top: 3px solid #4285f4; }
.product-card--jira   { border-top: 3px solid #0052cc; }

/* Product section header consistency */
.products-section-header {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: 6px;
}
.products-section-sub {
    color: var(--gray);
    font-size: var(--text-sm);
    margin-bottom: 28px;
}

/* ===========================================
   DARK MODE
   =========================================== */

/* Dark mode disabled — Bauhaus identity requires warm paper palette.
   The geometric color system (orange/yellow/teal on cream) loses
   its meaning when inverted. Force light scheme on all devices. */
html { color-scheme: light only; }

/* Skip to content — keyboard/screen reader accessibility */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 16px;
    background: var(--bg-dark);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    transition: top 0.1s;
}
.skip-to-content:focus {
    top: 16px;
}

/* Screen-reader only — visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Two-arm grid — responsive (replaces inline grid styles in index.html) */
.two-arm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 700px) {
    .two-arm-grid {
        grid-template-columns: 1fr;
    }
}

/* Layout/spacing utilities (replace inline styles in services/, tools/, blog/) */
.section-pad-xl { padding: 80px 0; }
.section-pad-lg { padding: 64px 0; }
.row-divider   { padding: 8px 0; border-bottom: 1px solid var(--border); }
.cell          { padding: 12px 16px; }
.cell-center   { padding: 12px 16px; text-align: center; }
.cell-accent   { padding: 12px 16px; text-align: center; color: var(--accent); }
.list-reset    { list-style: none; padding: 0; margin: 0; }
.stat-accent   { font-size: 2rem; font-weight: 700; color: var(--accent); margin: 1rem 0; }
.container-narrow { max-width: 720px; margin: 0 auto; }

/* Accessibility: keyboard focus indicators (WCAG 2.1 AA) */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
*:focus:not(:focus-visible) {
    outline: none;
}

/* ===========================================================
   Design-system component classes (extracted 2026-04-25)
   Replaces inline style="" blocks per anti-friction rule.
   =========================================================== */

/* Status pill — live availability chip with pulsing dot */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--gray);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 28px;
}
.status-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
    flex-shrink: 0;
    animation: pulse-dot 2s infinite;
}
.status-pill__sep {
    color: var(--border);
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
    .status-pill__dot { animation: none; }
}

/* Recent results section — case-card grid */
.case-results {
    padding: var(--section-pad-y-sm) 0;
    border-top: 1px solid var(--border);
}
.case-results__eyebrow {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 40px;
}

.case-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
    background: var(--surface-card);
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.case-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}
.case-card__eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 16px;
}
.case-card__stat {
    font-size: var(--text-5xl);
    font-weight: 800;
    letter-spacing: -2px;
    margin-bottom: 6px;
    line-height: 1;
    color: var(--primary);
}
.case-card__stat-label {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 10px;
}
.case-card__body {
    font-size: var(--text-sm);
    color: var(--gray);
    line-height: 1.55;
}
.case-card__cta {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary);
    margin-top: 20px;
    border-bottom: 1.5px solid var(--primary);
    display: inline;
}

/* ─── AI Ops Sprint feature banner ───────────────────────── */
.sprint-feature-banner {
    background: var(--bg-dark);
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--accent);
}
.sprint-feature-banner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 280px;
    height: 280px;
    background: var(--accent);
    opacity: 0.07;
    border-radius: 50%;
    pointer-events: none;
}
.sprint-feature-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.sprint-feature-eyebrow {
    font-family: var(--font-mono, 'SF Mono', monospace);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 16px;
}
.sprint-feature-copy h2 {
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    color: #fff;
}
.sprint-feature-copy p {
    color: rgba(255,255,255,0.72);
    font-size: var(--text-base);
    line-height: 1.7;
    margin-bottom: 28px;
}
.sprint-feature-cta {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.sprint-feature-link {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: color 0.15s;
}
.sprint-feature-link:hover { color: #fff; }
.sprint-feature-stats {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.sprint-fs {
    border-left: 3px solid var(--accent);
    padding-left: 20px;
}
.sprint-fs-num {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 900;
    color: #10b981;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sprint-fs-label {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}
@media (max-width: 768px) {
    .sprint-feature-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .sprint-feature-stats {
        flex-direction: row;
        gap: 0;
    }
    .sprint-fs {
        flex: 1;
        border-left: none;
        border-top: 3px solid var(--accent);
        padding-left: 0;
        padding-top: 16px;
    }
}

/* --- Blog post section wrapper --- */
.blog-section {
    padding: 0 0 80px;
}

.blog-section .container {
    max-width: 740px;
}

/* --- Blog mobile overrides --- */
@media (max-width: 640px) {
    .hero {
        padding: 40px 0 40px;
    }

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

    .blog-article {
        padding: 24px;
    }

    .blog-article p,
    .blog-article li {
        line-height: 1.7;
    }
}

/* ===========================================
   HERO MOBILE/TABLET — Designer spec STEP C
   =========================================== */

/* Standalone demo (hidden by default, shown on tablet only) */
.hero-demo-standalone { display: none; }

@media (max-width: 640px) {
    .hero-with-photo {
        flex-direction: column;
        gap: 0;
    }
    .hero-demo {
        display: none;
    }
    .hero-cta {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .hero-cta .btn {
        width: 100%;
        text-align: center;
    }
    .hero h1 {
        font-size: 36px;
        line-height: 1.15;
        letter-spacing: -0.5px;
    }
    .hero-subtitle {
        font-size: 17px;
        line-height: 1.5;
    }
    .status-pill {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .hero-demo { display: none; }
    .hero-demo-standalone { display: block; }
}

/* ===========================================
   TC-HEADER — Aged-paper Bauhaus design system
   Applies to all pages via nav.js + components.js injection
   =========================================== */

/* --- Bauhaus logo mark --- */
.tc-logo {
    display: flex; align-items: center; gap: 14px;
    font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink); text-decoration: none;
    flex-shrink: 0;
}
.tc-logo .mark { width: 28px; height: 28px; position: relative; flex-shrink: 0; }
.tc-logo .mark .sq { position: absolute; left: 0; top: 6px; width: 14px; height: 14px; background: var(--brick); border: 1px solid var(--ink); }
.tc-logo .mark .ci { position: absolute; left: 11px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 1px solid var(--ink); }
.tc-logo .mark .tr { position: absolute; left: 7px; bottom: 0; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--ochre); }

/* --- tc-header shell --- */
nav.tc-header, header.tc-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    backdrop-filter: blur(8px);
}
.tc-header .row {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}

/* --- Primary nav links --- */
.tc-nav {
    display: flex; gap: 36px; align-items: center;
}
.tc-nav a {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--ink); text-decoration: none;
    position: relative; padding: 6px 0; opacity: 0.7;
}
.tc-nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1.5px; background: var(--ink); transition: right .25s ease;
}
.tc-nav a:hover { opacity: 1; }
.tc-nav a:hover::after, .tc-nav a[aria-current]::after { right: 0; }
.tc-nav a[aria-current] { opacity: 1; }

/* --- Right side: meta chip + CTA --- */
.tc-header .right { display: flex; align-items: center; gap: 16px; }
.tc-header .meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--ink); opacity: .65; padding: 6px 0;
    border-bottom: 1px solid var(--ink);
}
.tc-header .cta-mini {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; padding: 8px 14px;
    border: 1.5px solid var(--ink); background: var(--ink);
    color: var(--paper-text); text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.tc-header .cta-mini:hover { background: transparent; color: var(--ink); }

/* --- Utility row (desktop second-tier nav) --- */
.tc-header .row-utility {
    border-top: 1px solid var(--ink);
    padding: 6px 0;
    display: flex;
    justify-content: center;
}
.tc-nav-utility {
    display: flex;
    gap: 28px;
    align-items: center;
}
.tc-nav-utility a {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink);
    opacity: 0.7;
    text-decoration: none;
    transition: opacity 0.15s;
}
.tc-nav-utility a:hover,
.tc-nav-utility a[aria-current] { opacity: 1; }

/* --- Mobile: sticky bottom primary nav, hide utility row + meta --- */
@media (max-width: 880px) {
    .tc-header .row-utility,
    .tc-header .meta { display: none; }

    .tc-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        background: var(--paper);
        border-top: 2px solid var(--ink);
        box-shadow: 0 -4px 0 var(--ink);
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .tc-nav a {
        font-family: var(--mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: center;
        padding: 6px 2px;
        opacity: 0.85;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tc-nav a::after { display: none; }
    .tc-nav a[aria-current] {
        opacity: 1;
        color: var(--brick);
        font-weight: 700;
    }
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ===========================================
   TC-FOOTER — Aged-paper Bauhaus design system
   =========================================== */

footer.tc-footer {
    background: var(--paper);
    border-top: 1.5px solid var(--ink);
    padding: 64px 0 32px;
}
.tc-footer .top {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 48px;
    padding-bottom: 48px; border-bottom: 1px solid var(--ink-hairline);
}
.tc-footer .brand { display: flex; flex-direction: column; }
.tc-footer .brand .tc-logo { margin-bottom: 18px; }
.tc-footer .brand p { font-size: 14px; line-height: 1.6; color: var(--ink-muted); max-width: 280px; }
.tc-footer h4 {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink); opacity: .65;
    margin-bottom: 18px;
}
.tc-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tc-footer ul li { font-size: 14px; color: var(--ink-muted); }
.tc-footer ul a { color: var(--ink-muted); text-decoration: none; }
.tc-footer ul a:hover { color: var(--brick); }
.tc-footer .bottom {
    margin-top: 28px; display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 16px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--ink); opacity: .65;
}
.tc-footer .bottom .links { display: flex; gap: 24px; }
.tc-footer .bottom .links a { color: var(--ink); text-decoration: none; }
.tc-footer .bottom .links a:hover { opacity: 1; color: var(--brick); }

@media (max-width: 880px) {
    .tc-footer .top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
    .tc-footer .top { grid-template-columns: 1fr; }
}

/* Case study testimonial quote */
.cs-quote {
  margin: 48px auto 0;
  max-width: 680px;
  padding: 28px 32px;
  border-left: 4px solid var(--brick);
  background: var(--paper-2, #e3d8c0);
}
.cs-quote p {
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 12px;
}
.cs-quote cite {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted, #4a3d33);
  text-transform: uppercase;
}