/* ============================================
   WebNuvexa — Concept 02: Dark Tech Lab
   ============================================ */

:root {
    --bg: #0A0A0F;
    --bg-alt: #0F0F16;
    --bg-card: #12121C;
    --text: #E0E0E8;
    --text-dim: #8888A0;
    --accent: #00D4FF;
    --accent-glow: rgba(0, 212, 255, 0.15);
    --accent2: #00FF88;
    --accent2-glow: rgba(0, 255, 136, 0.15);
    --border: #1E1E2E;
    --border-glow: rgba(0, 212, 255, 0.3);
    --mono: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius: 6px;
    --transition: 0.3s ease;
}

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

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

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

/* Grid Background */
.grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    font-family: var(--mono);
}

.nav-logo-icon {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 0 10px var(--accent-glow);
}

.nav-logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 0.85rem;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

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

.nav-link-num {
    color: var(--accent);
    opacity: 0.6;
    font-size: 0.75rem;
}

.nav-cta {
    background: var(--accent);
    color: var(--bg);
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius);
    font-weight: 600;
    transition: all 0.3s;
}

.nav-cta:hover {
    background: var(--accent2);
    box-shadow: 0 0 20px var(--accent2-glow);
    color: var(--bg);
}

.nav-cta-prompt {
    font-weight: 700;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

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

/* Hero */
.hero {
    padding: 10rem 2rem 4rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

.hero-tag {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.hero-title {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.hero-line {
    display: block;
}

.hero-line.accent {
    color: var(--accent);
    text-shadow: 0 0 30px var(--accent-glow);
}

.hero-subtitle {
    font-size: 1.05rem;
    color: var(--text-dim);
    max-width: 480px;
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.8rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-glow {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 0 20px var(--accent-glow);
}

.btn-glow:hover {
    background: var(--accent2);
    box-shadow: 0 0 30px var(--accent2-glow);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
}

.btn-prompt {
    font-weight: 700;
}

/* Terminal */
.hero-terminal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), 0 0 80px var(--accent-glow);
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}

.terminal-dots {
    display: flex;
    gap: 6px;
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.terminal-dot.red { background: #FF5F57; }
.terminal-dot.yellow { background: #FEBC2E; }
.terminal-dot.green { background: #28C840; }

.terminal-title {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-left: auto;
}

.terminal-body {
    padding: 1.5rem;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.8;
}

.terminal-line {
    margin-bottom: 0.3rem;
}

.prompt {
    color: var(--accent);
}

.cmd {
    color: var(--text);
}

.output {
    color: var(--text-dim);
}

.output.success {
    color: var(--accent2);
}

.cursor {
    animation: blink 1s step-end infinite;
    color: var(--accent);
}

@keyframes blink {
    50% { opacity: 0; }
}

.dots {
    animation: dots 1.5s steps(4) infinite;
}

@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* Hero Status Bar */
.hero-status {
    max-width: 1200px;
    margin: 3rem auto 0;
    display: flex;
    gap: 2rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-dim);
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--accent2);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent2);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Sections */
.section {
    padding: 7rem 0;
    position: relative;
    z-index: 1;
}

.section-header {
    margin-bottom: 3.5rem;
    max-width: 700px;
}

.section-tag {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--accent);
    display: block;
    margin-bottom: 0.8rem;
    opacity: 0.8;
}

.section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-desc {
    font-size: 1rem;
    color: var(--text-dim);
    line-height: 1.7;
}

/* Build / Design / Grow */
.bdg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.bdg-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.bdg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    opacity: 0;
    transition: opacity 0.3s;
}

.bdg-card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 0 30px var(--accent-glow);
    transform: translateY(-4px);
}

.bdg-card:hover::before {
    opacity: 1;
}

.bdg-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.bdg-module {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--accent);
}

.bdg-status {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--accent2);
    background: var(--accent2-glow);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

.bdg-icon {
    width: 40px;
    height: 40px;
    color: var(--accent);
    margin-bottom: 1.2rem;
}

.bdg-icon svg {
    width: 100%;
    height: 100%;
}

.bdg-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.bdg-card p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.bdg-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bdg-tech span {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    background: var(--bg-alt);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--border);
}

/* Capabilities */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.cap-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s;
}

.cap-item:hover {
    border-color: var(--border-glow);
    box-shadow: 0 0 20px var(--accent-glow);
}

.cap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.cap-num {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--accent);
}

.cap-type {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    background: var(--bg-alt);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.cap-item h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.cap-item p {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
}

/* Work */
.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.work-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.work-card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 0 30px var(--accent-glow);
    transform: translateY(-4px);
}

.work-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1rem;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}

.work-file {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-left: auto;
}

.work-visual {
    height: 200px;
    position: relative;
}

.work-visual-1 { background: linear-gradient(135deg, #0D1B2A 0%, #1B2838 100%); }
.work-visual-2 { background: linear-gradient(135deg, #1A0D2E 0%, #2D1B38 100%); }
.work-visual-3 { background: linear-gradient(135deg, #0D2E1A 0%, #1B3828 100%); }
.work-visual-4 { background: linear-gradient(135deg, #2E1A0D 0%, #38281B 100%); }

.work-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-placeholder-icon {
    font-family: var(--mono);
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255,255,255,0.1);
    letter-spacing: 0.1em;
}

.work-info {
    padding: 1.5rem;
}

.work-tag {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.work-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.4rem 0 0.6rem;
}

.work-info p {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.work-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.work-stack span {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--accent);
    background: var(--accent-glow);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

/* Case Study */
.case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.case-desc {
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.case-metrics {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.case-metric-value {
    font-family: var(--mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
    text-shadow: 0 0 20px var(--accent-glow);
}

.case-metric-label {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

.case-terminal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

.metric-line {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    font-size: 0.8rem;
}

.metric-label {
    color: var(--text-dim);
    width: 80px;
    flex-shrink: 0;
}

.metric-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-alt);
    border-radius: 3px;
    overflow: hidden;
}

.metric-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 3px;
    transition: width 1s ease;
}

.metric-value {
    color: var(--accent2);
    font-weight: 600;
    width: 50px;
    text-align: right;
}

/* Process */
.process-timeline {
    position: relative;
    padding-left: 2rem;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--accent2));
    opacity: 0.3;
}

.process-step {
    position: relative;
    margin-bottom: 2.5rem;
}

.process-step:last-child {
    margin-bottom: 0;
}

.process-node {
    position: absolute;
    left: -2rem;
    top: 0.3rem;
    width: 16px;
    height: 16px;
    background: var(--bg);
    border: 2px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-glow);
}

.process-num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent);
    display: block;
    margin-bottom: 0.4rem;
}

.process-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.process-content p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Why */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.why-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s;
}

.why-card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 0 20px var(--accent-glow);
}

.why-icon {
    width: 32px;
    height: 32px;
    color: var(--accent);
    margin-bottom: 1rem;
}

.why-icon svg {
    width: 100%;
    height: 100%;
}

.why-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.why-card p {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.why-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.why-stat {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.why-stat-value {
    font-family: var(--mono);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
    text-shadow: 0 0 20px var(--accent-glow);
}

.why-stat-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* CTA */
.cta-terminal {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 60px var(--accent-glow);
}

.cta-body {
    /* Slightly deeper at the top than the bottom: the panel's own terminal header
     * sits directly above this, and an even 2.5rem on both sides made the chrome
     * and the headline read as one undifferentiated block. */
    padding: 2.75rem 2.5rem 2.5rem;
    text-align: center;
}

.cta-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    /* Ignored where unsupported; keeps a two-line headline from ragging. */
    text-wrap: balance;
}

.cta-subtitle {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    /*
     * Cap the measure so this can never run the full 518px of the panel's content
     * box. The unit matters here: this heading inherits the mono face from
     * .terminal-body, so one ch is one mono character, not one proportional
     * average. The string is 55 characters, and a 46ch cap measured 384px and
     * wrapped it to two lines, breaking after "respond" and orphaning "within 24
     * hours." 58ch leaves the sentence intact on one line at full size while
     * still bounding it when the panel narrows.
     */
    max-width: 58ch;
    margin-inline: auto;
}

.cta-form {
    text-align: left;
    /*
     * The panel's content box is 518px, so every control - including the name and
     * email fields - stretched the full width of the panel. A one-line field at
     * 518px is roughly 60 characters, which forces the eye to travel the whole
     * panel on every character and made the form look like an unfinished table.
     * Capping at 460px keeps it a comfortable field width, and centring it puts
     * it on the same axis as the centred headline above instead of leaving a
     * ragged left edge under a centred title.
     *
     * max-width can only ever shrink, so this cannot overflow a narrower
     * container or any viewport.
     */
    max-width: 460px;
    margin-inline: auto;
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-label {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    display: block;
    margin-bottom: 0.4rem;
}

.cta-input,
.cta-textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.9rem;
    transition: border-color 0.3s;
}

.cta-input::placeholder,
.cta-textarea::placeholder {
    color: var(--text-dim);
    opacity: 0.5;
}

.cta-input:focus,
.cta-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.cta-textarea {
    resize: vertical;
}

.btn-submit {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 1rem;
    /* The label carries a mono "> execute" prompt; a little tracking keeps the
     * full-width bar from reading as a plain slab. */
    letter-spacing: 0.06em;
}

/*
 * CTA success state.
 *
 * These three declarations were inline styles on the markup. They have to live in
 * the stylesheet for the success variant to stay centred: .cta-subtitle is capped
 * at 58ch and relies on margin-inline:auto to sit on the panel's axis, and the
 * inline `margin:0` this replaces would have pinned the confirmation message to
 * the left edge, off the panel centre by 518px - 484.7px. Zeroing only the bottom
 * margin keeps the centring while matching the original intent.
 */
.msg-success .cta-title {
    color: var(--accent2);
    margin-bottom: 0.5rem;
}

.msg-success .cta-subtitle {
    margin-bottom: 0;
}

.msg-success .btn-outline {
    margin-top: 1.25rem;
}

/* Footer */
/*
 * Footer shell.
 *
 * padding was 4rem top against 1.5rem bottom, so the block sat on the page with
 * a 64px shoulder above it and a cramped 24px lip below the bottom bar. Measured
 * on the rendered footer: top 64px, bottom 24px. Opening the bottom up to 2.5rem
 * balances the block without touching the grid's internal rhythm.
 */
.footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding: 4.5rem 0 2.5rem;
    position: relative;
    z-index: 1;
    /*
     * isolate makes this element a stacking context, so the bloom below can be
     * painted at z-index:-1 - behind the footer's own content but still above
     * its background - without dropping behind the page background.
     */
    isolation: isolate;
}

/*
 * A single soft bloom off the top edge.
 *
 * The footer was one flat #0F0F16 field from top to bottom, which is what made
 * it read as a slab rather than a considered surface: measured, the whole block
 * was a single background colour with a single hairline and nothing else
 * contributing depth. 7% cyan is well below the threshold where it tints the
 * text - it only lifts the very top of the block.
 *
 * Inset to the top and 22rem tall, so it cannot add scrollable overflow.
 * pointer-events:none so it never intercepts a click on the links underneath.
 */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22rem;
    background: radial-gradient(120% 100% at 50% 0%, rgba(0, 212, 255, 0.07), rgba(0, 212, 255, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

/*
 * Four equal tracks for eight children.
 *
 * This used to be `2fr repeat(4, 1fr)` - five tracks - which never matched the
 * eight children the footer has always emitted. Three of them auto-placed into
 * a second row and left two empty cells in the bottom-right corner of every
 * page. The 2fr brand track made the problem worse: it was twice the width of
 * the link columns, so the columns underneath it could not line up with the
 * columns above and the second row looked staggered rather than banded.
 *
 * Four tracks divide eight children evenly, and the markup order in footer.php
 * puts the brand plus the three utility columns on row one and the four pillar
 * columns on row two. minmax(0, 1fr) rather than 1fr so a long service name
 * cannot push a track wider than its share and reintroduce the overflow.
 */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.75rem 2rem;
    margin-bottom: 3.25rem;
}

.footer-grid > * {
    min-width: 0;
}

.footer-brand p {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-top: 1.15rem;
    line-height: 1.7;
}

.footer-status {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent2);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/*
 * Column headings.
 *
 * These were the reason the footer did not look designed. Measured on the
 * rendered page, every heading was font-size:12px, colour #8888A0 - the exact
 * same colour as the service links under them, and slightly SMALLER than them.
 * Two tiers of text sharing one colour and one size is what reads as flat: there
 * was nothing for the eye to land on before it reached the links.
 *
 * Two changes, both tiering rather than decorating:
 *
 * 1. --text (#E0E0E8, 14.5:1) for the label against --text-dim (5.5:1) for the
 *    links. The label is now the brightest text in the column and the links are
 *    unambiguously body copy, so a column can be scanned heading-first. The
 *    mono/uppercase/tracked treatment is kept - a small tracked label is the
 *    intended register - but at 0.8rem it is no longer smaller than the copy it
 *    heads, and colour carries the hierarchy rather than size alone.
 *
 * 2. A 2px accent bar ahead of the label. Cyan is already this design's accent
 *    and until now it appeared exactly once in the entire footer, on the
 *    SERVICES band label. Repeating it as a consistent marker at every column
 *    head is what makes the two bands read as one designed system rather than
 *    one heading that was styled and six that were not. Emptied content, so it
 *    is a box rather than a character and has nothing for a screen reader to
 *    announce.
 */
.footer-col h5 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text);
    margin-bottom: 1.15rem;
}

.footer-col h5::before {
    content: '';
    flex: 0 0 auto;
    width: 2px;
    height: 0.85em;
    background: var(--accent);
    border-radius: 1px;
}

/*
 * The single source of truth for footer link presentation. Every footer link is
 * named here rather than each context restating the colour, the size and the
 * hover, so a link cannot end up looking different depending on which part of
 * the footer it sits in.
 *
 * There is no bare `a` rule anywhere in this stylesheet, which is why this
 * selector has to cover the footer explicitly: anything unlisted gets the
 * browser's own link colour and underline.
 *
 * The hover shifts the label by 3px. It is the only movement in the footer, so
 * it reads as deliberate rather than as four lists wobbling. transform does not
 * trigger layout, and the global prefers-reduced-motion block zeroes transitions
 * for anyone who has asked for that.
 *
 * :not(.footer-viewall) is load-bearing, not tidiness. The "View all services"
 * link lives inside .footer-col, so a plain `.footer-col a` would match it too -
 * and at (0,1,1) it outranks `.footer-viewall` at (0,1,0). Written the obvious
 * way, the view-all link silently inherited font-size:0.85rem, display:block,
 * padding and line-height from the service links above it, which is to say the
 * whole reason it exists as a distinct control was cancelled out and it rendered
 * as one more service. Excluding it here means the shared rule cannot match that
 * element at all, so there is no specificity contest to lose.
 */
.footer-col a:not(.footer-viewall) {
    display: block;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.25rem 0;
    line-height: 1.5;
    transition: color 0.3s, transform 0.3s;
}

.footer-col a:not(.footer-viewall):hover {
    color: var(--accent);
    transform: translateX(3px);
}

/*
 * The links the column rule above does not reach.
 *
 * .footer-col a covers 59 of the footer's 60 links. The other one is the contact
 * address in the bottom bar, which sits outside .footer-col entirely - so it was
 * getting no colour and no text-decoration from anywhere and falling through to
 * the browser's own blue underlined default. That is the one link in the footer
 * that still looked unstyled.
 *
 * color:inherit rather than a literal --text-dim, so the address keeps matching
 * whatever the bottom bar's own colour is set to rather than drifting from it
 * the next time that value changes.
 */
.footer-bottom a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

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

/*
 * Social links. These render only when social_links() returns something, and at
 * the moment it returns nothing - so this rule is currently doing nothing and is
 * here because the moment a profile URL is added to settings, these links
 * appear with the browser's default blue and underline and there is no bare `a`
 * rule in this stylesheet to catch them.
 */
.footer-social a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.3s;
}

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

/*
 * Keyboard focus for every link in the footer.
 *
 * There were no link focus styles anywhere in this stylesheet, so focus was
 * whatever ring the browser chose - easy to lose against a dark background, and
 * these are small, dim links. :focus-visible rather than :focus so the ring
 * appears for keyboard navigation and not on mouse click.
 */
.footer a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/*
 * Band divider between the utility row and the pillar row.
 *
 * grid-column: 1 / -1 so the rule spans the full width of the footer at every
 * breakpoint, which is why it does not need per-breakpoint overrides the way a
 * border on each column would - that approach leaves visible breaks in the line
 * wherever the column gap is, and puts orphaned rules above pillars that have
 * wrapped onto later rows.
 */
.footer-band {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    /* The grid's own row gap already provides the vertical rhythm; this only has
       to claw back the space the band itself adds. */
    padding-top: 0.5rem;
}

.footer-band-label {
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    /* Never shrink, and never wrap: a divider label that breaks onto two lines
       would pull the rule down with it and unalign the band. */
    white-space: nowrap;
    flex: 0 0 auto;
}

/*
 * The rule fades out of the accent it starts from rather than beginning at the
 * same flat --border as its far end. Over a full 1046px measured run a single
 * hairline colour is the least interesting thing in the footer; starting it in
 * accent ties the label to the line and to the marker bars on the column
 * headings. Still exactly one element spanning 1 / -1, so the width guarantee
 * is untouched - this changes the fill, not the geometry.
 */
.footer-band-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.4), var(--border) 32%);
}

/*
 * Pillar columns.
 *
 * display:flex with the "View all services" link pushed to the bottom by
 * margin-top:auto. The grid stretches every item in a row to the tallest, so this
 * keeps all four of those links on one baseline even if a pillar later gains or
 * loses a service and the columns stop being exactly equal.
 *
 * auto is correct at every width and is deliberately not overridden at any
 * breakpoint. It holds at two columns too, where the pillars pair off into rows
 * of two and each pair still stretches to a common height. When there is no slack
 * to consume auto resolves to zero and the link's own padding-top provides the
 * clearance, so pinning it to a fixed margin at a narrow width would only add
 * stacked space and throw away the alignment it was there to create.
 */
.footer-col--pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-col--pillar .footer-viewall {
    margin-top: auto;
}

/*
 * "View all services" - the way to the rest of a pillar's services.
 *
 * Deliberately not styled like the service links above it: monospace, smaller,
 * tracked out and arrowed, so it reads as an action at the end of the column
 * rather than one more service. The arrow is a real glyph in the markup and is
 * hidden from assistive technology, because the link already says where it goes.
 *
 * Every property it needs is declared here rather than inherited from the
 * shared column rule, because that rule now excludes this link outright (see the
 * :not(.footer-viewall) note above). Anything left out of this block falls
 * straight through to the browser default instead of to the service-link style.
 */
.footer-viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-top: 0.9rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-decoration: none;
    /* Matches the service links' 1.5. It has to be restated here because the
       shared column rule no longer applies to this element at all. */
    line-height: 1.5;
    /* Sits at the bottom of a flex column; needs a top margin to clear the last
       service link even when margin-top:auto has no slack to consume. */
    margin-top: 0.75rem;
    transition: color 0.3s;
}

.footer-viewall:hover {
    color: var(--accent);
    /* Pins the transform rather than overriding one. The shared hover rule
       excludes this link, so nothing shifts it today - but this link sits at the
       end of a column where a sideways nudge would read as misalignment, and a
       3px nudge is worth making immune to the shared rule being widened later. */
    transform: none;
}

.footer-arrow {
    transition: transform 0.3s;
}

.footer-viewall:hover .footer-arrow {
    transform: translateX(4px);
}

/*
 * Visually hidden, still available to assistive technology.
 *
 * Used by the four "View all services" links: on its own that text repeats four
 * times with nothing to tell the columns apart, and an aria-label would replace
 * the visible words and fail WCAG 2.5.3, which requires the accessible name to
 * contain the visible label.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Bottom bar.
 *
 * align-items:center so the copyright line and the RSS/cookie controls sit on
 * one optical centre line rather than on their own text baselines, and so the
 * bar cannot change height when one side wraps. flex-wrap plus an explicit gap
 * lets the two groups part company at narrow widths instead of colliding;
 * before, the only thing keeping them apart at 480px was the absence of enough
 * text to overlap.
 */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-terminal {
        max-width: 500px;
    }

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

    .case-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

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

    /* Four tracks hold all the way down to 768px; only the gutters tighten.
       Nine children still divide evenly at four tracks: the utility row, the
       band rule spanning all four, then the four pillars. Dropping to two
       tracks here would work arithmetically - the band spans, so nothing is
       stranded - but four tracks are kept because 230px per column still holds a
       service name on one line at tablet width, which two tracks of 330px cannot
       promise for the longest of them. */
    .footer-grid {
        gap: 2.5rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg);
        flex-direction: column;
        padding: 2rem;
        border-bottom: 1px solid var(--border);
        gap: 1.2rem;
        /* The services accordion puts all 34 service links into this column. On a
           short viewport (landscape phone, small tablet) that panel is taller than
           the screen, and without an explicit scroll container the lower items are
           simply unreachable. 100dvh tracks the dynamic viewport on mobile browsers
           where the chrome collapses while scrolling; the 100vh line above it is
           the fallback for browsers that do not support dvh. */
        max-height: calc(100vh - 100%);
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

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

    .nav-toggle {
        display: flex;
    }

    .hero {
        padding: 8rem 1.5rem 3rem;
    }

    .hero-status {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .section {
        padding: 5rem 0;
    }

    .cap-grid,
    .work-grid {
        grid-template-columns: 1fr;
    }

    .case-metrics {
        flex-direction: column;
        gap: 1.5rem;
    }

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

    /* Two columns, nine children. Rows are brand | Industries, Company | Legal,
       the band rule spanning both tracks, then Build | Design and Grow | Scale -
       five rows, every one of them complete, nothing stranded. Two columns is
       also the point at which a track gets too narrow for a service name such as
       "Conversion Rate Optimization" to sit on one line. */
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1.2rem;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .why-stats {
        grid-template-columns: 1fr;
    }

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