:root {
    --bg: #0B0D10;
    --surface: #11151A;
    --surface-2: #161B21;
    --border-color: #232A32;
    --text-light: #F1F5F9;
    --text-muted: #8B949E;
    --text-dim: #5B6472;
    --accent: #00D9FF;
    --accent-dim: rgba(0, 217, 255, 0.12);
    --accent-hover: #33e1ff;
    --success: #3FB950;
    --navbar-bg: rgba(11, 13, 16, 0.9);
    --code-string: #9ECBFF;
    --font-sans: 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
}

/* Light mode - opt-in via data-theme, set by public/js/custom.js and
   persisted to localStorage; dark (the :root values above) stays the
   default for anyone who hasn't picked light yet. */
[data-theme="light"] {
    --bg: #F7F9FB;
    --surface: #FFFFFF;
    --surface-2: #F1F5F9;
    --border-color: #E2E8F0;
    --text-light: #0F172A;
    --text-muted: #475569;
    --text-dim: #94A3B8;
    --accent: #0090AB;
    --accent-dim: rgba(0, 144, 171, 0.1);
    --accent-hover: #00a8c6;
    --success: #16A34A;
    --navbar-bg: rgba(255, 255, 255, 0.9);
    --code-string: #0969DA;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text-light);
    overflow-x: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mono {
    font-family: var(--font-mono);
}

a {
    color: var(--accent);
}

::selection {
    background: var(--accent-dim);
    color: var(--text-light);
}

/* Dotted grid decoration */
.grid-bg {
    position: relative;
}

.grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.2));
}

.code-decoration {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.9;
    color: var(--accent);
    opacity: 0.06;
    white-space: pre;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Navbar */
.navbar {
    background-color: var(--navbar-bg) !important;
    backdrop-filter: blur(10px);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.theme-toggle .bi-sun-fill {
    display: none;
}

[data-theme="light"] .theme-toggle .bi-sun-fill {
    display: inline;
}

[data-theme="light"] .theme-toggle .bi-moon-stars-fill {
    display: none;
}

/* .navbar is hardcoded navbar-dark (see app.blade.php) regardless of theme,
   so its Bootstrap toggler icon is always the light-on-transparent variant -
   invert it under the light theme so it doesn't blend into the white navbar. */
[data-theme="light"] .navbar-toggler-icon {
    filter: invert(1);
}

[data-theme="light"] .navbar-toggler {
    border-color: var(--border-color);
}

.navbar .navbar-brand {
    padding: 0;
}

.bt-logo-text {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

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

.bt-logo-digital {
    color: var(--text-light);
}

.bt-logo-cursor {
    animation: blink 1.4s step-end infinite;
}

.navbar .nav-link {
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 8px 16px !important;
    transition: color 0.2s ease;
}

.navbar .nav-link.active {
    color: var(--accent) !important;
}

.navbar .nav-link:hover {
    color: var(--text-light) !important;
}

.navbar .btn-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-dim);
    color: var(--accent) !important;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 18px !important;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.navbar .btn-nav-cta .arrow {
    display: inline-flex;
    line-height: 1;
}

.navbar .btn-nav-cta:hover {
    background: var(--accent);
    color: var(--bg) !important;
}

.navbar .lang-switch {
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.navbar .lang-switch:hover,
.navbar .lang-switch.active {
    color: var(--accent);
    border-color: var(--accent);
}

/* Buttons (generic accent) */
.btn-accent {
    background: var(--accent);
    color: var(--bg) !important;
    border: none;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-accent:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 217, 255, 0.18);
}

.btn-outline-accent {
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border-color);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-outline-accent:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Hero */
.hero {
    padding: 150px 0 90px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.hero .eyebrow {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero .eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.hero h1 {
    font-family: var(--font-sans);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.4rem;
    letter-spacing: -0.02em;
}

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

.hero .hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 2.2rem;
    max-width: 520px;
}

/* Terminal panel */
.terminal {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    font-family: var(--font-mono);
}

.terminal .terminal-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-color);
}

.terminal .terminal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--border-color);
}

.terminal .terminal-titlebar span.label {
    margin-left: 8px;
    color: var(--text-dim);
    font-size: 0.78rem;
}

.terminal .terminal-body {
    padding: 22px 24px;
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--text-muted);
}

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

.terminal .line-text {
    color: var(--text-light);
}

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

.terminal .cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: var(--accent);
    vertical-align: text-bottom;
    animation: blink 1.1s step-end infinite;
    margin-left: 2px;
}

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

.stack-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0;
}

.stack-bar-row .stack-name {
    width: 96px;
    color: var(--text-light);
    flex-shrink: 0;
}

.stack-bar-track {
    flex: 1;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.stack-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
}

.stack-bar-pct {
    width: 40px;
    text-align: right;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.status-available {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--success);
    font-weight: 600;
}

.status-available .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

/* Tech strip */
.tech-strip {
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 30px 0;
}

.tech-strip .strip-label {
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}

.tech-strip .tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
}

.tech-strip .tech-list span {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.tech-strip .tech-list span:hover {
    color: var(--accent);
}

/* Section base */
.section {
    padding: 90px 0;
}

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

.section-title {
    margin-bottom: 50px;
}

.section-title .eyebrow {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.section-title h2 {
    font-family: var(--font-sans);
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    letter-spacing: -0.01em;
}

.section-title p {
    color: var(--text-muted);
    font-size: 1.02rem;
    max-width: 620px;
}

.text-center .section-title p {
    margin-left: auto;
    margin-right: auto;
}

/* Intro block code panel */
.code-panel {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 26px 28px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--text-muted);
}

.code-panel .kw { color: var(--accent); }
.code-panel .str { color: var(--code-string); }
.code-panel .prop { color: var(--text-light); }
.code-panel .ln {
    display: inline-block;
    width: 22px;
    color: var(--text-dim);
    user-select: none;
}

/* Numbered service blocks */
.service-block {
    padding: 34px 0;
    border-bottom: 1px solid var(--border-color);
    transition: padding-left 0.2s ease;
}

.service-block:first-child {
    padding-top: 0;
}

.service-block:hover {
    padding-left: 8px;
}

.service-block .service-number {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.service-block .service-divider {
    color: var(--border-color);
    margin: 0 0 14px;
}

.service-block h3 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-block p {
    color: var(--text-muted);
    max-width: 560px;
    margin-bottom: 14px;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-tags span {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 10px;
}

/* Compact numbered card (home teaser) */
.service-card-mini {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 28px;
    height: 100%;
    transition: all 0.25s ease;
}

.service-card-mini:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.service-card-mini .service-number {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.8rem;
    margin-bottom: 14px;
}

.service-card-mini h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-card-mini p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

/* Services orbit - animated visual on the services page: a terminal
   "core" typing out each service name, with the service icons floating
   in a ring around it. Falls back to a plain wrapped grid of icons
   below the tablet breakpoint, since the circular trig-based
   positioning needs real width to avoid overlap/clipping. */
.services-orbit {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 10px;
}

.services-orbit-track {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px dashed var(--border-color);
    border-radius: 50%;
}

.services-orbit-core {
    position: relative;
    z-index: 2;
    width: 320px;
    max-width: 86vw;
}

.services-orbit-core .terminal-body {
    min-height: 74px;
}

.services-orbit-typed::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    background: var(--accent);
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}

.services-orbit-ring {
    position: absolute;
    inset: 0;
}

.services-orbit-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%) rotate(var(--angle)) translate(200px) rotate(calc(-1 * var(--angle)));
}

.services-orbit-icon-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--accent);
    font-size: 1.3rem;
    animation: orbit-float 4.5s ease-in-out infinite;
    animation-delay: var(--delay);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.services-orbit-icon-inner:hover {
    border-color: var(--accent);
    transform: scale(1.12);
}

@keyframes orbit-float {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(0, 217, 255, 0);
    }
    50% {
        transform: translateY(-10px);
        box-shadow: 0 8px 20px var(--accent-dim);
    }
}

@media (max-width: 767px) {
    .services-orbit {
        min-height: 0;
        flex-direction: column;
        gap: 24px;
    }

    .services-orbit-track {
        display: none;
    }

    .services-orbit-ring {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .services-orbit-icon {
        position: static;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-orbit-icon-inner {
        animation: none;
    }

    .services-orbit-typed::after {
        animation: none;
    }
}

/* Project / reference cards */
.project-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.project-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.project-card .project-media {
    position: relative;
    height: 190px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 2.2rem;
    overflow: hidden;
    padding: 12px;
}

.project-card .project-media:has(img) {
    cursor: zoom-in;
}

.project-card .project-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.08s linear;
}

/* Cursor-tracked live zoom (desktop, pointer:fine) is driven by custom.js
   setting transform/transform-origin inline on mousemove; this hint badge
   just signals the image is zoomable/clickable before the user hovers. */
.project-card .zoom-hint {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navbar-bg);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1;
}

.project-card .project-media:hover .zoom-hint {
    opacity: 1;
}

/* Reference/project image lightbox - opened on click, mainly what makes the
   zoom useful on touch devices where hover (the live-zoom effect above)
   never fires. */
.image-zoom-modal .modal-content {
    background: transparent;
    border: none;
}

.image-zoom-modal .modal-dialog {
    max-width: min(90vw, 900px);
}

.image-zoom-modal img {
    width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border-color);
}

.image-zoom-modal .btn-close {
    position: absolute;
    top: -14px;
    right: -14px;
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    padding: 8px;
    opacity: 1;
    z-index: 1;
    /* Bootstrap's .btn-close icon is a fixed dark svg - invert it on the
       dark theme (the default) so it's visible against --surface. */
    filter: invert(1) grayscale(1);
}

[data-theme="light"] .image-zoom-modal .btn-close {
    filter: none;
}

.project-card .project-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-card .project-id {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.project-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.project-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    flex: 1;
}

.project-card .desc-toggle,
.blog-card .desc-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-top: -8px;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
}

.project-card .desc-toggle:hover,
.blog-card .desc-toggle:hover {
    text-decoration: underline;
}

.project-card .project-divider {
    border-top: 1px dashed var(--border-color);
    margin: 16px 0;
}

.project-card .project-cta {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.project-card .project-cta:hover {
    text-decoration: underline;
}

.status-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--success);
    border: 1px solid rgba(63, 185, 80, 0.4);
    background: rgba(63, 185, 80, 0.08);
    border-radius: 4px;
    padding: 2px 8px;
}

/* Filter buttons */
.filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 7px 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 4px 8px;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

/* Case study */
.case-study-hero {
    background: var(--bg);
    padding: 150px 0 60px;
    border-bottom: 1px solid var(--border-color);
}

.case-study-block {
    margin-bottom: 34px;
}

.case-study-block .label {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.case-study-block .value {
    color: var(--text-light);
    white-space: pre-line;
    line-height: 1.7;
}

.result-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.result-list li {
    font-family: var(--font-mono);
    color: var(--text-light);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-list li::before {
    content: '▲';
    color: var(--success);
    font-size: 0.7rem;
}

/* Build script terminal (home process) */
.build-terminal {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--font-mono);
    max-width: 640px;
    margin: 0 auto;
}

.build-terminal .step-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: var(--text-muted);
}

.build-terminal .step-line .check {
    color: var(--success);
}

.build-terminal .success-line {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    color: var(--success);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Process steps (services page) */
.process-step {
    text-align: center;
    padding: 32px 26px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s ease;
    height: 100%;
}

.process-step:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

.process-step .step-number {
    width: 48px;
    height: 48px;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    margin: 0 auto 18px;
}

.process-step h5 {
    font-weight: 700;
    margin-bottom: 10px;
}

.process-step p {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Stats */
.stat-item {
    text-align: center;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.stat-item .number {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-item .label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 6px;
}

/* Skills */
.skill-item .skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.skill-item .progress {
    height: 8px;
    background: var(--border-color);
    border-radius: 8px;
}

.skill-item .progress-bar {
    background: var(--accent);
    border-radius: 8px;
}

/* Choose / feature cards */
.choose-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    transition: all 0.2s ease;
    height: 100%;
}

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

.choose-card .icon {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 16px;
}

.choose-card h5 {
    font-weight: 700;
    margin-bottom: 10px;
}

.choose-card p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Team */
.team-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    transition: all 0.2s ease;
}

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

.team-card .avatar {
    width: 96px;
    height: 96px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 2.2rem;
    color: var(--text-dim);
}

.team-card h5 {
    font-weight: 700;
}

.team-card .role {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.82rem;
    margin-bottom: 8px;
}

/* Values code block (About) */
.values-block {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 28px 30px;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    line-height: 2;
    color: var(--text-muted);
    max-width: 520px;
}

.values-block .kw { color: var(--accent); }
.values-block .str { color: var(--code-string); }

/* CTA */
.cta-section {
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 80px 0;
    text-align: center;
}

.cta-section h2 {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-section p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

/* Contact terminal form */
.contact-terminal {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.contact-terminal .terminal-body {
    padding: 30px;
}

.contact-terminal label {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 6px;
    display: block;
}

.contact-terminal .form-control,
.contact-terminal .form-select {
    background: var(--bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-light);
    padding: 11px 14px;
    font-size: 0.92rem;
}

.contact-terminal .form-control:focus,
.contact-terminal .form-select:focus {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--text-light);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.contact-terminal .form-control::placeholder {
    color: var(--text-dim);
}

.contact-terminal .btn-submit {
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.contact-terminal .btn-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.invalid-feedback {
    font-size: 0.78rem;
    color: #f87171;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #f87171 !important;
}

.contact-info-panel {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 30px;
}

.contact-info-panel .panel-label {
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.contact-info-panel .info-line {
    color: var(--text-light);
    margin-bottom: 22px;
}

.contact-info-panel .info-line a {
    color: var(--text-light);
    text-decoration: none;
}

.contact-info-panel .info-line a:hover {
    color: var(--accent);
}

/* Blog cards - deliberately styled differently from .project-card (references):
   a wide 16:9 cover with the category floating on top of the image instead of
   in the body, softer rounded corners, and an editorial title/meta treatment
   instead of the reference card's mono "PROJECT_ID" + tech-tag-pill look. */
.blog-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

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

/* .blog-card-cover is used on the blog index/homepage cards (the ones that
   get the full redesign); .blog-img alone (no wrapper) still works as-is for
   the smaller "recent posts" teaser on the post-show page.

   Deliberately a fixed height, NOT `aspect-ratio` - aspect-ratio here (inside
   a Bootstrap flex column with no explicit width below the md breakpoint)
   made Chrome miscompute the column's width from the image's native pixel
   size, blowing the card out past the viewport on mobile. A fixed height
   sidesteps that box-sizing computation entirely, same as .project-media
   and the plain .blog-img below, which never had this problem. */
.blog-card-cover {
    position: relative;
    height: 200px;
    background: var(--surface-2);
    overflow: hidden;
}

/* Extra-specific (3 classes) on purpose so this reliably wins over the plain
   .blog-card .blog-img rule below regardless of source order - both set
   height/display/etc, and without this the cover would silently fall back
   to the older fixed 190px box. */
.blog-card .blog-card-cover .blog-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    padding: 12px;
}

.blog-card-cover .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.blog-category-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--navbar-bg);
    backdrop-filter: blur(4px);
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--accent-dim);
}

.blog-card .blog-img {
    height: 190px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    padding: 12px;
}

.blog-card .blog-body {
    padding: 22px;
}

.blog-card .blog-body h5 {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 10px;
}

.blog-card .blog-body p {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
}

.blog-card .blog-body .blog-meta {
    color: var(--text-dim);
    font-size: 0.78rem;
    font-family: var(--font-mono);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.blog-card .blog-body .read-more {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.blog-card .blog-body .read-more:hover {
    gap: 8px;
}

.sidebar-widget {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}

.sidebar-widget h5 {
    font-weight: 700;
    margin-bottom: 16px;
    font-size: 1.05rem;
}

.sidebar-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-widget ul li a {
    color: var(--text-muted);
    text-decoration: none;
}

.sidebar-widget ul li a:hover,
.sidebar-widget ul li a.active {
    color: var(--accent);
}

.sidebar-widget ul li a.active span:first-child {
    font-weight: 600;
}

/* Pagination */
.pagination .page-link {
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.pagination .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

/* Alerts */
.alert-success {
    background: rgba(63, 185, 80, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
    border-radius: 8px;
}

/* Subpage hero */
.hero-subpage {
    background: var(--bg);
    padding: 150px 0 60px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.hero-subpage .eyebrow {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-subpage h1 {
    font-family: var(--font-sans);
    font-size: 2.4rem;
    font-weight: 700;
    margin-top: 8px;
}

.hero-subpage .breadcrumb {
    background: transparent;
    justify-content: center;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.hero-subpage .breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
}

.hero-subpage .breadcrumb-item.active {
    color: var(--accent);
}

/* Error pages (404/403/419/429/500/503) */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.error-code {
    font-family: var(--font-mono);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 30px var(--accent-dim);
    margin: 28px 0 8px;
}

@media (max-width: 576px) {
    .error-code {
        font-size: 3.6rem;
    }
}

/* Footer */
.footer {
    background: var(--bg);
    border-top: 1px solid var(--border-color);
    padding: 60px 0 0;
}

.footer h6 {
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.footer p, .footer a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer a {
    text-decoration: none;
}

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

.footer .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-right: 8px;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.footer .social-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.footer .footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    margin-top: 40px;
    text-align: center;
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 991px) {
    .hero {
        padding: 130px 0 60px;
        min-height: auto;
    }

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

    .section {
        padding: 60px 0;
    }

    .terminal .terminal-body,
    .code-panel {
        font-size: 0.82rem;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 1.9rem;
    }

    .tech-strip .tech-list {
        gap: 10px 20px;
    }

    .terminal-body {
        overflow-x: auto;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* Cookie consent banner */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    padding: 20px;
    display: none;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

.cookie-consent.is-open {
    display: block;
}

.cookie-consent__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.cookie-consent p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cookie-consent__actions .btn {
    font-size: 0.85rem;
}

.cookie-consent__settings {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.cookie-consent__settings.is-open {
    display: block;
}

.cookie-consent__category {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
}

.cookie-consent__category p {
    margin-bottom: 0;
}

.btn-link-plain {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

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