:root {
    --bg: #050505;
    --bg-2: #090909;
    --bg-3: #0d0d0d;

    --surface: rgba(255, 255, 255, 0.028);
    --surface-2: rgba(255, 255, 255, 0.042);
    --surface-3: rgba(255, 255, 255, 0.065);
    --surface-soft: rgba(255, 255, 255, 0.02);
    --surface-soft-2: rgba(255, 255, 255, 0.025);

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --line: rgba(255, 255, 255, 0.055);
    --line-strong: rgba(255, 255, 255, 0.10);

    --text: #f4f2ec;
    --muted: rgba(244, 242, 236, 0.74);
    --soft: rgba(244, 242, 236, 0.48);
    --soft-2: rgba(244, 242, 236, 0.24);

    --accent: #ffffff;
    --button-text: #050505;

    --accent-warm: #d6b25e;
    --accent-warm-soft: rgba(214, 178, 94, 0.16);
    --accent-warm-line: rgba(214, 178, 94, 0.24);

    --shadow-xl: 0 28px 90px rgba(0, 0, 0, 0.46);
    --shadow-lg: 0 18px 54px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.24);

    --radius-xs: 14px;
    --radius-sm: 18px;
    --radius-md: 28px;
    --radius-lg: 38px;
    --radius-xl: 52px;

    --max: 1280px;
    --section-space: 48px;
    --hero-space: 176px;

    --header-bg: rgba(5, 5, 5, 0.66);
    --header-bg-scrolled: rgba(5, 5, 5, 0.82);
    --nav-layer: 1000;
    --nav-menu-layer: 1020;
    --nav-account-menu-bg: rgba(10, 10, 11, 0.96);

    --grid: rgba(255, 255, 255, 0.034);
    --vignette: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.42) 100%);
}

html.light {
    --bg: #f4f1eb;
    --bg-2: #efebe4;
    --bg-3: #e8e2d8;

    --surface: rgba(255, 255, 255, 0.46);
    --surface-2: rgba(255, 255, 255, 0.60);
    --surface-3: rgba(255, 255, 255, 0.78);
    --surface-soft: rgba(17, 17, 17, 0.04);
    --surface-soft-2: rgba(17, 17, 17, 0.06);

    --border: rgba(17, 17, 17, 0.08);
    --border-strong: rgba(17, 17, 17, 0.14);
    --line: rgba(17, 17, 17, 0.06);
    --line-strong: rgba(17, 17, 17, 0.12);

    --text: #111111;
    --muted: rgba(17, 17, 17, 0.72);
    --soft: rgba(17, 17, 17, 0.48);
    --soft-2: rgba(17, 17, 17, 0.24);

    --accent: #111111;
    --button-text: #f7f4ee;

    --accent-warm: #b9984c;
    --accent-warm-soft: rgba(185, 152, 76, 0.14);
    --accent-warm-line: rgba(185, 152, 76, 0.20);

    --shadow-xl: 0 28px 70px rgba(17, 17, 17, 0.10);
    --shadow-lg: 0 18px 40px rgba(17, 17, 17, 0.08);
    --shadow-md: 0 10px 24px rgba(17, 17, 17, 0.07);

    --header-bg: rgba(244, 241, 235, 0.68);
    --header-bg-scrolled: rgba(244, 241, 235, 0.86);
    --nav-account-menu-bg: rgba(250, 248, 244, 0.98);

    --grid: rgba(17, 17, 17, 0.035);
    --vignette: radial-gradient(circle at center, transparent 48%, rgba(0, 0, 0, 0.035) 100%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Override the shared shell's 100% height so long pages paint continuously. */
    height: auto;
    min-height: 100%;
    /* Keep the viewport canvas opaque while Safari repaints fixed layers. */
    background-color: var(--bg);
}

body {
    margin: 0;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
    overflow-x: hidden;
    background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.05), transparent 24%),
    radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.03), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 44%, var(--bg-3) 100%);
    background-color: var(--bg);
    transition: background 0.25s ease,
    color 0.25s ease;
}

.header,
.card,
.work-card,
.why-card,
.metrics-card,
.cta-panel,
.faq-item,
.footer,
.artifact,
.contact-team-shell,
.contact-page-shell,
.auth-panel,
.work-client-card {
    transition: background 0.22s ease, background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ambient-architecture,
.grid-overlay,
.vignette,
.grain,
.card::before,
.work-card::before,
.why-card::before,
.metrics-card::before,
.cta-panel::before,
.cta-panel::after,
.artifact::before,
.artifact::after,
.contact-team-shell::after,
.contact-page-shell::after,
.auth-panel::after {
    transition: opacity 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 12px;
    z-index: 200;
    background: var(--accent);
    color: var(--button-text);
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
}

.skip-link:focus {
    left: 16px;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.ambient-architecture {
    --ambient-line-opacity: 0.09;
    --ambient-signal-opacity: 0.24;
    width: 100%;
    height: 100%;
    color: var(--text);
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    fill: none;
    stroke-width: 1;
}

.ambient-line {
    stroke: currentColor;
    stroke-opacity: var(--ambient-line-opacity);
}

.ambient-signal {
    stroke: url(#ambient-flow-spectrum);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-opacity: var(--ambient-signal-opacity);
    stroke-dasharray: 72 2000;
    stroke-dashoffset: 72;
    opacity: 0;
}

.grid-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black 33%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 33%, transparent 100%);
    opacity: 0.48;
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--vignette);
    transition: background 0.25s ease;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.02;
    background-image: radial-gradient(circle at 20% 20%, #fff 0.7px, transparent 0.7px),
    radial-gradient(circle at 80% 46%, #fff 0.7px, transparent 0.7px),
    radial-gradient(circle at 50% 80%, #fff 0.7px, transparent 0.7px);
    background-size: 170px 170px;
    mix-blend-mode: screen;
}

html.light .grain {
    mix-blend-mode: multiply;
    opacity: 0.016;
}

html.light .ambient-architecture {
    --ambient-line-opacity: 0.05;
    --ambient-signal-opacity: 0.14;
}

html.light .grid-overlay {
    opacity: 0.5;
}

.site {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.site > main {
    flex: 1 0 auto;
}

.container {
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
}

.header {
    position: sticky;
    top: 0;
    z-index: var(--nav-layer);
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}

.header.scrolled {
    background: var(--header-bg-scrolled);
    border-bottom-color: var(--line-strong);
}

.nav {
    min-height: 80px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nav-mobile-toggle {
    display: none;
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.nav-mobile-panel {
    display: none;
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.03em;
}

.brand-wordmark {
    display: grid;
    justify-items: center;
    gap: 2px;
    line-height: 1;
    text-align: center;
}

.brand-wordmark span {
    color: var(--text);
    font-size: 1.22rem;
    font-weight: 780;
    letter-spacing: -0.035em;
}

.brand-wordmark small {
    color: var(--soft);
    font-size: 0.5rem;
    font-weight: 760;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
}

.brand-mark {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent-warm);
    box-shadow: 0 0 18px rgba(214, 178, 94, 0.18);
    flex: 0 0 auto;
}

html.light .brand-mark {
    box-shadow: 0 0 18px rgba(185, 152, 76, 0.12);
}

.brand-logo {
    width: 44px;
    height: 56px;
    display: block;
    flex: 0 0 auto;
    filter: drop-shadow(0 8px 18px rgba(37, 99, 235, 0.22));
    margin: 0;
}

.nav-links {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.nav-links a {
    text-decoration: none;
    white-space: nowrap;
    color: var(--muted);
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 0.94rem;
    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.nav-links a:hover {
    color: var(--text);
    background: var(--surface);
}

.why-short {
    display: none;
}

@media (max-width: 1480px) {
    .nav-why-link .why-full {
        display: none;
    }

    .nav-why-link .why-short {
        display: inline;
    }
}

.nav-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 4px;
    color: var(--text);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.nav-cta:hover,
.footer-action a:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.nav-cta:focus-visible,
.footer-action a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
    border-radius: 3px;
}

.nav-cta-mobile {
    display: none;
}

.nav-account {
    position: relative;
    z-index: calc(var(--nav-layer) + 1);
    flex: 0 0 auto;
}

.nav-account[open] {
    z-index: var(--nav-menu-layer);
}

.nav-account-toggle,
.nav-account-login {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    list-style: none;
    place-items: center;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.nav-account-toggle::-webkit-details-marker {
    display: none;
}

.nav-account-toggle:hover,
.nav-account[open] .nav-account-toggle,
.nav-account-login:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-strong);
    transform: translateY(-1px);
}

.nav-account-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: var(--nav-menu-layer);
    display: grid;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--nav-account-menu-bg);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-account-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 17px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: var(--nav-account-menu-bg);
    transform: rotate(45deg);
}

.nav-account-summary {
    display: grid;
    gap: 3px;
    padding: 10px 12px 9px;
    color: var(--soft);
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    line-height: 1.25;
}

.nav-account-summary strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-summary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-menu a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 11px;
    color: var(--text);
    border-radius: 11px;
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.nav-account-menu a:hover {
    background: var(--surface);
}

.utility-dock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 56;
    display: flex;
    align-items: flex-end;
    filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.36));
}

.utility-dock::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle at 72% 50%, rgba(102, 183, 255, 0.28), transparent 62%),
        radial-gradient(circle at 30% 50%, rgba(94, 246, 191, 0.16), transparent 58%);
    opacity: 0.72;
    pointer-events: none;
    animation: utilityDockGlow 3.8s ease-in-out infinite;
}

body.mobile-nav-open .utility-dock {
    opacity: 0;
    pointer-events: none;
}

.control-bundle {
    --language-control-width: 76px;
    display: grid;
    grid-template-columns: 44px var(--language-control-width) 0;
    align-items: center;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(102, 183, 255, 0.38);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 46%),
        rgba(14, 16, 18, 0.82);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 26px rgba(102, 183, 255, 0.20),
        0 14px 34px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    transition: grid-template-columns 0.2s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.control-bundle:hover,
.control-bundle:focus-within {
    border-color: rgba(94, 246, 191, 0.52);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 34px rgba(94, 246, 191, 0.24),
        0 16px 38px rgba(0, 0, 0, 0.38);
}

.control-bundle.is-expanded {
    grid-template-columns: 44px var(--language-control-width) 44px;
}

html.light .utility-dock {
    filter: drop-shadow(0 18px 34px rgba(17, 43, 68, 0.16));
}

html.light .utility-dock::before {
    background:
        radial-gradient(circle at 72% 50%, rgba(21, 115, 204, 0.24), transparent 62%),
        radial-gradient(circle at 30% 50%, rgba(17, 148, 106, 0.14), transparent 58%);
}

html.light .control-bundle {
    border-color: rgba(21, 115, 204, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58)),
        rgba(245, 249, 252, 0.82);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.72) inset,
        0 0 24px rgba(21, 115, 204, 0.18),
        0 14px 32px rgba(20, 35, 52, 0.12);
}

html.light .control-bundle:hover,
html.light .control-bundle:focus-within {
    border-color: rgba(17, 148, 106, 0.42);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.82) inset,
        0 0 32px rgba(17, 148, 106, 0.20),
        0 16px 36px rgba(20, 35, 52, 0.14);
}

@keyframes utilityDockGlow {
    0%,
    100% {
        opacity: 0.52;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.94;
        transform: scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .utility-dock::before {
        animation: none;
        opacity: 0.78;
        transform: none;
    }
}

.lang-form {
    margin: 0;
}

.lang-form-bundle {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: 1px solid var(--border);
    width: var(--language-control-width);
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

.lang-form-bundle:hover {
    background: var(--surface-2);
}

.lang-form-bundle:focus-within {
    background: var(--surface-2);
}

.lang-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 0 34px 0 14px;
    height: 44px;
    font: inherit;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: none;
    cursor: pointer;
}

.lang-select-bundle {
    border: 0;
    background: transparent;
    height: 100%;
    width: 100%;
    min-width: 0;
    padding: 0 6px;
    margin: 0;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: none;
    text-align: center;
    text-align-last: center;
    letter-spacing: 0;
    line-height: normal;
    text-indent: 0;
    border-radius: 0;
    cursor: pointer;
}

.lang-select-bundle option {
    text-align: center;
}

.lang-select-bundle:hover,
.lang-select-bundle:focus-visible {
    background: transparent;
    outline: none;
}

.lang-select:not(.lang-select-bundle):hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.lang-select:not(.lang-select-bundle):focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
}

.icon-btn,
.btn,
.btn-secondary,
.card,
.work-card {
    transition: transform 0.24s ease,
    background 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease,
    box-shadow 0.24s ease,
    opacity 0.24s ease;
}

.icon-btn:hover,
.btn:hover,
.btn-secondary:hover {
    transform: translateY(-1px);
}

.icon-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1;
}

.control-bundle .icon-btn {
    width: 44px;
    height: 42px;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.control-bundle .icon-btn:hover {
    transform: none;
    background: var(--surface-2);
}

.control-bundle .icon-btn:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: -2px;
}

.icon-btn-theme {
    position: relative;
    color: rgba(255, 255, 255, 0.95);
}

.utility-top-btn {
    width: 0;
    height: 42px;
    border: 0;
    border-left: 0 solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: width 0.2s ease, opacity 0.2s ease, border-left-color 0.2s ease, background 0.24s ease, border-color 0.24s ease;
}

.utility-top-btn.is-visible {
    width: 44px;
    border-left-width: 1px;
    opacity: 1;
    pointer-events: auto;
}

.theme-icon {
    display: block;
}

html.light .icon-btn-theme {
    color: rgba(17, 17, 17, 0.85);
}

.btn,
.btn-secondary {
    appearance: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
    padding: 14px 20px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn {
    background: var(--accent);
    color: var(--button-text);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

html.light .btn {
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.10);
}

.btn:hover {
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
}

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

.btn-secondary:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.hero {
    min-height: calc(100vh - 80px);
    padding: 92px 0 96px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.hero-container {
    width: 100%;
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(500px, 0.92fr);
    gap: clamp(28px, 3vw, 52px);
    align-items: start;
    max-width: 1840px;
    margin: 0 auto;
}

.hero-meta-shell {
    max-width: 1840px;
    margin: clamp(28px, 4vw, 56px) auto 0;
    width: 100%;
    min-width: 0;
}

.hero-copy {
    min-width: 0;
    max-width: 920px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft-2);
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.eyebrow::before {
    content: "";
    width: 9px;
    height: 9px;
    background: linear-gradient(145deg, #efcf76 0%, #d6b25e 100%);
    clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
    opacity: 0.95;
    box-shadow: 0 0 14px rgba(214, 178, 94, 0.18);
}

.hex-prefix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hex-prefix::before {
    content: "";
    width: 0.68em;
    height: 0.68em;
    flex: 0 0 auto;
    background: linear-gradient(145deg, #efcf76 0%, #d6b25e 100%);
    clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
    box-shadow: 0 0 10px rgba(214, 178, 94, 0.36);
}

.section-kicker.hex-prefix::before {
    width: 0.78em;
    height: 0.78em;
}

.btn.hex-prefix::before {
    width: 0.56em;
    height: 0.56em;
    background: linear-gradient(145deg, #7e5a12 0%, #473109 100%);
    box-shadow: none;
}

html.light .hex-prefix::before {
    background: linear-gradient(145deg, #222 0%, #0f0f0f 100%);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
}

.hero h1 {
    margin: 0;
    font-size: clamp(3.5rem, 6.5vw, 7rem);
    line-height: 0.93;
    letter-spacing: -0.055em;
    max-width: 8.7ch;
    text-wrap: balance;
}

.hero-title-mobile {
    display: none;
}

.hero-title-mobile[hidden] {
    display: none !important;
}

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

.hero-accent {
    color: var(--accent-warm);
    text-shadow: 0 0 24px rgba(214, 178, 94, 0.10);
}

.hero h1 .hero-lite-word {
    font-weight: 420 !important;
    color: rgba(244, 242, 236, 0.70);
    -webkit-text-fill-color: rgba(244, 242, 236, 0.70);
    opacity: 1;
}

.hero h1 .hero-prism-line {
    background-image: linear-gradient(
        94deg,
        #f1eee6 0%,
        #ded8cc 34%,
        #d3c3a0 68%,
        #c7beb0 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero h1 .hero-prism-line .hero-accent {
    color: var(--accent-warm) !important;
    -webkit-text-fill-color: var(--accent-warm) !important;
    background: none !important;
    text-shadow: 0 0 24px rgba(214, 178, 94, 0.10);
}

html.light .hero h1 .hero-prism-line {
    background-image: linear-gradient(
        94deg,
        #1a1a1a 0%,
        #2a2a2a 34%,
        #6f5a2c 68%,
        #3a3428 100%
    );
}

html.light .hero h1 .hero-lite-word {
    color: rgba(17, 17, 17, 0.60);
    -webkit-text-fill-color: rgba(17, 17, 17, 0.60);
}

.hero-hex-end-dot {
    position: absolute;
    right: -0.34em;
    bottom: 0.22em;
    width: 0.26em;
    height: 0.26em;
    background: linear-gradient(145deg, #efcf76 0%, #d6b25e 100%);
    clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
    box-shadow: 0 0 8px rgba(214, 178, 94, 0.35);
}

.hero-line-last {
    position: relative;
    display: inline-block;
    padding-right: 0.34em;
}

.reveal-line {
    overflow: hidden;
    padding-top: 0.12em;
    margin-top: -0.12em;
    padding-bottom: 0.08em;
}

.reveal-line > span {
    display: block;
    transform: none;
    opacity: 1;
}

.hero-intro {
    margin-top: 26px;
    max-width: 54ch;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.hero-intro strong {
    color: var(--text);
    font-weight: 650;
}

.hero-capability-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hero-capability-list::-webkit-scrollbar {
    display: none;
}

#capabilities .hero-capability-list .meta-chip {
    white-space: nowrap;
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.capability-card {
    min-height: 250px;
}

.capability-bridge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(165deg, var(--surface-2), var(--surface-soft));
    box-shadow: var(--shadow-md);
}

.capability-bridge div {
    display: grid;
    gap: 5px;
}

.capability-bridge strong {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.35;
}

.capability-bridge span {
    color: var(--muted);
    line-height: 1.5;
}

.capability-bridge-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.hero-meta {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-meta-inline {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
    width: 100%;
    padding-right: 14px;
}

.hero-meta-inline::-webkit-scrollbar {
    display: none;
}

.hero-meta-inline::after {
    content: "";
    position: sticky;
    right: 0;
    width: 36px;
    height: 100%;
    flex: 0 0 36px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 5, 5, 0), rgba(5, 5, 5, 0.78));
}

.hero-meta-inline .meta-chip {
    white-space: nowrap;
    padding: 8px 11px;
    font-size: 0.8rem;
    font-weight: 580;
}

.hero-meta-inline .meta-chip:nth-child(1) { opacity: 1; }
.hero-meta-inline .meta-chip:nth-child(2) { opacity: 0.92; }
.hero-meta-inline .meta-chip:nth-child(3) { opacity: 0.84; }
.hero-meta-inline .meta-chip:nth-child(4) { opacity: 0.76; }
.hero-meta-inline .meta-chip:nth-child(5) { opacity: 0.68; }
.hero-meta-inline .meta-chip:nth-child(6) { opacity: 0.60; }

html.light .hero-meta-inline .meta-chip:nth-child(1) { opacity: 0.98; }
html.light .hero-meta-inline .meta-chip:nth-child(2) { opacity: 0.9; }
html.light .hero-meta-inline .meta-chip:nth-child(3) { opacity: 0.82; }
html.light .hero-meta-inline .meta-chip:nth-child(4) { opacity: 0.74; }
html.light .hero-meta-inline .meta-chip:nth-child(5) { opacity: 0.66; }
html.light .hero-meta-inline .meta-chip:nth-child(6) { opacity: 0.58; }

html.light .hero-meta-inline::after {
    background: linear-gradient(90deg, rgba(244, 241, 235, 0), rgba(244, 241, 235, 0.92));
}

.hero-proof-strip {
    display: grid;
    grid-template-columns: minmax(360px, 0.75fr) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 82px);
    align-items: center;
    padding: clamp(28px, 3.2vw, 44px);
    border: 1px solid var(--border);
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 20%, rgba(37, 99, 235, 0.12), transparent 28%),
        radial-gradient(circle at 84% 68%, rgba(20, 184, 166, 0.10), transparent 26%),
        linear-gradient(145deg, var(--surface-soft), rgba(255, 255, 255, 0.02));
    box-shadow: var(--shadow-lg);
}

.hero-proof-strip h2 {
    max-width: 34ch;
    margin: 0;
    color: var(--text);
    font-size: clamp(1.5rem, 2.2vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}

.hero-proof-strip .architecture-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding-left: clamp(22px, 3vw, 54px);
    border-left: 1px solid var(--border);
}

.hero-proof-strip .architecture-benefit {
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.035);
}

.hero-proof-strip .architecture-benefit-icon {
    width: 52px;
    height: 52px;
}

.hero-proof-strip .architecture-benefit-icon svg {
    width: 22px;
    height: 22px;
}

.hero-proof-strip .architecture-benefit strong {
    color: var(--text);
    font-size: clamp(0.95rem, 1vw, 1.08rem);
}

.hero-proof-strip .architecture-benefit small {
    color: var(--muted);
    font-size: 0.68rem;
}

html:not(.light) .hero-proof-strip .architecture-benefit-icon {
    background: rgba(255, 255, 255, 0.07);
    color: #dbeafe;
}

html:not(.light) .hero-proof-strip {
    border-color: rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(circle at 14% 18%, rgba(37, 99, 235, 0.22), transparent 30%),
        radial-gradient(circle at 86% 70%, rgba(20, 184, 166, 0.13), transparent 26%),
        linear-gradient(145deg, rgba(13, 18, 31, 0.94), rgba(8, 11, 19, 0.88));
}

html:not(.light) .hero-proof-strip .architecture-benefit {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.045);
}

@media (max-width: 720px) {
    .hero-meta-inline {
        gap: 8px;
    }

    .hero-meta-inline .meta-chip {
        padding: 8px 11px;
        font-size: 0.8rem;
    }

    .hero-proof-strip {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-proof-strip .architecture-benefits {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-left: 0;
        border-left: 0;
    }
}

/* About page polish: isolate refinements to avoid impacting homepage hero */
#about-hero {
    min-height: auto;
    padding-top: 76px;
    padding-bottom: 78px;
}

#about-hero .hero-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 42px;
    align-items: start;
}

#about-hero .hero-copy {
    min-width: 0;
    max-width: 760px;
}

#about-hero .hero-card {
    width: 100%;
}

#about-hero .hero-title {
    max-width: 10ch;
    font-size: clamp(3.1rem, 6.2vw, 6rem);
    letter-spacing: -0.068em;
    line-height: 0.95;
    margin-bottom: 0;
}

#about-hero .hero-sub {
    margin-top: 22px;
    max-width: 52ch;
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.75;
}

#about-hero .hero-actions {
    margin-top: 30px;
}

#about-hero .hero-card {
    min-height: 0;
    align-self: start;
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 22px 22px 20px;
    background: linear-gradient(170deg, var(--surface-2), var(--surface));
    box-shadow: var(--shadow-md);
}

#about-hero .hero-card h2 {
    max-width: 18ch;
}

#about-hero .hero-card-kicker {
    font-size: 0.88rem;
    color: var(--soft);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

#about-hero .hero-card > p {
    margin-top: 14px;
}

#about-hero .hero-facts {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

#about-hero .hero-facts > div {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

#about-hero .hero-facts span {
    color: var(--muted);
    font-size: 0.95rem;
    white-space: nowrap;
}

#about-hero .hero-facts strong {
    margin: 0;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 660;
    line-height: 1.35;
}

#about-principles {
    padding-top: 56px;
}

#about-principles .section-head {
    margin-bottom: 34px;
}

#about-principles .section-title {
    max-width: 12ch;
}

#about-principles .section-text {
    max-width: 64ch;
}

#about-principles .approach-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#about-principles .card {
    min-height: 230px;
}

html.light #about-hero .hero-sub,
html.light #about-principles .section-text {
    color: rgba(24, 24, 24, 0.80);
}

html.light #about-hero .hero-card,
html.light #about-principles .card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(249, 247, 241, 0.92));
    border-color: rgba(34, 34, 34, 0.14);
    box-shadow: 0 14px 34px rgba(18, 18, 18, 0.08);
}

html.light #about-hero .hero-card p,
html.light #about-principles .card p {
    color: rgba(20, 20, 20, 0.78);
}

html.light #about-hero .hero-facts > div {
    background: rgba(255, 255, 255, 0.70);
    border-color: rgba(28, 28, 28, 0.12);
}

.landing-hero {
    min-height: auto;
    padding-top: 76px;
    padding-bottom: 78px;
}

.landing-hero .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
    gap: 42px;
    align-items: start;
}

.landing-hero .hero-copy {
    max-width: 820px;
}

.landing-hero .hero-title {
    max-width: 11ch;
    font-size: 5.4rem;
    letter-spacing: 0;
    line-height: 0.95;
}

.services-hero .hero-title {
    max-width: 14ch;
}

.technologies-hero .hero-title {
    max-width: 15ch;
}

.landing-hero .hero-sub {
    margin-top: 22px;
    max-width: 58ch;
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.75;
}

.landing-hero-panel {
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 22px;
    background: linear-gradient(170deg, var(--surface-2), var(--surface));
    box-shadow: var(--shadow-md);
}

.landing-panel-kicker {
    margin-bottom: 12px;
    color: var(--soft);
    font-size: 0.88rem;
    letter-spacing: 0;
}

.landing-panel-list {
    display: grid;
    gap: 10px;
}

.landing-panel-list > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.landing-panel-list span {
    color: var(--muted);
    font-size: 0.9rem;
}

.landing-panel-list strong {
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 660;
    line-height: 1.35;
}

.system-layer-list {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface-soft);
}

.system-layer-list > div {
    display: grid;
    grid-template-columns: minmax(112px, 0.36fr) minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.system-layer-list > div:last-child {
    border-bottom: 0;
}

.system-layer-list span {
    color: var(--accent-warm);
    font-size: 0.75rem;
    font-weight: 740;
    letter-spacing: 0;
    text-transform: uppercase;
}

.system-layer-list strong {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.38;
}

.service-fit-section {
    padding-top: 24px;
    padding-bottom: 28px;
}

.service-fit-band {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(165deg, var(--surface-2), var(--surface-soft));
    box-shadow: var(--shadow-md);
}

.technology-scope-band {
    justify-content: center;
    gap: 9px;
    padding: 20px;
}

.technology-scope-band .meta-chip {
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 650;
}

.technology-scope-band .meta-chip:nth-child(4n + 1) {
    border-color: rgba(214, 178, 94, 0.28);
}

.technology-scope-band .meta-chip:nth-child(4n + 2) {
    border-color: rgba(103, 175, 255, 0.24);
}

.technology-scope-band .meta-chip:nth-child(4n + 3) {
    border-color: rgba(103, 230, 190, 0.22);
}

.technology-map {
    --map-accent: rgba(102, 183, 255, 0.34);
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 24px;
    padding: 30px;
    border: 1px solid var(--border-strong);
    border-radius: 30px;
    background:
        radial-gradient(circle at 22% 14%, rgba(102, 183, 255, 0.14), transparent 32%),
        radial-gradient(circle at 78% 20%, rgba(94, 246, 191, 0.10), transparent 30%),
        radial-gradient(circle at 50% 94%, rgba(214, 178, 94, 0.10), transparent 34%),
        linear-gradient(165deg, var(--surface-2), var(--surface-soft) 68%);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.technology-map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(to right, var(--grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black 18%, transparent 74%);
    opacity: 0.72;
}

.technology-map::after {
    content: "";
    position: absolute;
    inset: 18% 12%;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 999px;
    transform: rotate(-4deg);
    opacity: 0.9;
}

.technology-map-intro {
    max-width: 760px;
}

.technology-map-intro h2 {
    margin: 10px 0 0;
    max-width: 13ch;
    color: var(--text);
    font-size: 2.65rem;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.technology-map-intro p {
    max-width: 66ch;
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.technology-map-core {
    justify-self: center;
    display: grid;
    gap: 7px;
    width: min(100%, 380px);
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(10, 12, 14, 0.74);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 54px rgba(102, 183, 255, 0.18),
        var(--shadow-md);
    text-align: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.technology-map-core span {
    color: var(--accent-warm);
    font-size: 0.76rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.technology-map-core strong {
    color: var(--text);
    font-size: 1.22rem;
    line-height: 1.25;
}

.technology-map-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.technology-cluster {
    --cluster-accent: rgba(102, 183, 255, 0.42);
    --cluster-fill: rgba(102, 183, 255, 0.08);
    position: relative;
    min-height: 244px;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid color-mix(in oklab, var(--cluster-accent) 64%, var(--border));
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 12%, var(--cluster-fill), transparent 44%),
        rgba(255, 255, 255, 0.032);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.technology-cluster::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--cluster-accent);
    box-shadow: 0 0 18px var(--cluster-accent);
}

.technology-cluster-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-right: 24px;
}

.technology-cluster-head span {
    color: var(--cluster-accent);
    font-size: 0.76rem;
    font-weight: 780;
    letter-spacing: 0;
}

.technology-cluster h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.18rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.technology-cluster p {
    margin: 12px 0 18px;
    color: var(--muted);
    line-height: 1.58;
}

.technology-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.technology-token-list span {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 7px 10px;
    border: 1px solid color-mix(in oklab, var(--cluster-accent) 34%, var(--border));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
}

.technology-cluster[data-tone="core"] {
    --cluster-accent: rgba(214, 178, 94, 0.64);
    --cluster-fill: rgba(214, 178, 94, 0.11);
}

.technology-cluster[data-tone="product"] {
    --cluster-accent: rgba(102, 183, 255, 0.62);
    --cluster-fill: rgba(102, 183, 255, 0.11);
}

.technology-cluster[data-tone="mobile"] {
    --cluster-accent: rgba(94, 246, 191, 0.50);
    --cluster-fill: rgba(94, 246, 191, 0.09);
}

.technology-cluster[data-tone="data"] {
    --cluster-accent: rgba(255, 171, 145, 0.54);
    --cluster-fill: rgba(255, 171, 145, 0.09);
}

.technology-cluster[data-tone="ai"] {
    --cluster-accent: rgba(185, 146, 255, 0.58);
    --cluster-fill: rgba(185, 146, 255, 0.10);
}

.technology-cluster[data-tone="ops"] {
    --cluster-accent: rgba(170, 218, 255, 0.56);
    --cluster-fill: rgba(170, 218, 255, 0.09);
}

.technologies-ai-hero .hero-title {
    max-width: 12ch;
}

.services-ai-hero .hero-title {
    max-width: 12ch;
}

.service-advisor-console {
    background:
        radial-gradient(circle at 20% 18%, rgba(214, 178, 94, 0.14), transparent 34%),
        radial-gradient(circle at 82% 24%, rgba(102, 183, 255, 0.13), transparent 32%),
        radial-gradient(circle at 48% 92%, rgba(94, 246, 191, 0.11), transparent 34%),
        linear-gradient(165deg, var(--surface-2), var(--surface-soft) 70%);
}

.ai-advisor-console {
    position: relative;
    isolation: isolate;
    min-height: 460px;
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 26px;
    border: 1px solid var(--border-strong);
    border-radius: 30px;
    background:
        radial-gradient(circle at 20% 18%, rgba(102, 183, 255, 0.15), transparent 34%),
        radial-gradient(circle at 82% 24%, rgba(185, 146, 255, 0.13), transparent 32%),
        radial-gradient(circle at 48% 92%, rgba(214, 178, 94, 0.12), transparent 34%),
        linear-gradient(165deg, var(--surface-2), var(--surface-soft) 70%);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ai-advisor-console::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, transparent, black 18%, black 76%, transparent);
    opacity: 0.74;
}

.ai-console-core {
    display: grid;
    gap: 10px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(8, 10, 12, 0.72);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 52px rgba(102, 183, 255, 0.16),
        var(--shadow-md);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ai-console-core span {
    color: var(--accent-warm);
    font-size: 0.76rem;
    font-weight: 780;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ai-console-core strong {
    max-width: 14ch;
    color: var(--text);
    font-size: 2rem;
    line-height: 1.04;
    letter-spacing: 0;
    text-wrap: balance;
}

.ai-console-layers {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.ai-console-layers span {
    display: grid;
    place-items: center;
    min-height: 58px;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

.ai-console-layers span:nth-child(1) {
    border-color: rgba(214, 178, 94, 0.28);
}

.ai-console-layers span:nth-child(2) {
    border-color: rgba(102, 183, 255, 0.26);
}

.ai-console-layers span:nth-child(3) {
    border-color: rgba(255, 171, 145, 0.24);
}

.ai-console-layers span:nth-child(4) {
    border-color: rgba(185, 146, 255, 0.28);
}

.ai-console-layers span:nth-child(5) {
    border-color: rgba(94, 246, 191, 0.22);
}

.ai-advisor-section {
    padding-top: 48px;
}

.ai-advisor-section .section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 38px;
}

.ai-advisor-section .section-title {
    max-width: 18ch;
    font-size: clamp(3.4rem, 8vw, 7.1rem);
    line-height: 0.92;
    letter-spacing: -0.07em;
}

.ai-advisor-section .section-text {
    max-width: 76ch;
    margin-top: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.42rem);
    line-height: 1.65;
}

.ai-stack-advisor {
    display: grid;
    grid-template-columns: minmax(280px, 0.56fr) minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--border-strong);
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 18%, rgba(102, 183, 255, 0.11), transparent 28%),
        radial-gradient(circle at 94% 20%, rgba(185, 146, 255, 0.09), transparent 30%),
        linear-gradient(165deg, var(--surface-2), var(--surface-soft) 70%);
    box-shadow: var(--shadow-lg);
}

.ai-stack-selector {
    display: grid;
    gap: 10px;
}

.ai-stack-option {
    appearance: none;
    display: grid;
    gap: 6px;
    width: 100%;
    min-height: 88px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.032);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.ai-stack-option:hover,
.ai-stack-option:focus-visible,
.ai-stack-option.is-active {
    border-color: rgba(102, 183, 255, 0.48);
    background:
        linear-gradient(180deg, rgba(102, 183, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.042);
    box-shadow: 0 0 0 1px rgba(102, 183, 255, 0.16) inset, 0 14px 30px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

.ai-stack-option:focus-visible {
    outline: 2px solid rgba(102, 183, 255, 0.72);
    outline-offset: 2px;
}

.ai-stack-option span {
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 760;
    line-height: 1.22;
}

.ai-stack-option strong {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 520;
    line-height: 1.42;
}

.ai-stack-output {
    min-width: 0;
}

.ai-stack-result {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        radial-gradient(circle at 86% 16%, rgba(214, 178, 94, 0.12), transparent 30%),
        rgba(255, 255, 255, 0.036);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.ai-stack-result[hidden] {
    display: none;
}

.ai-stack-result-head {
    display: grid;
    gap: 10px;
}

.ai-stack-result-head span {
    color: var(--accent-warm);
    font-size: 0.78rem;
    font-weight: 780;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ai-stack-result h3 {
    margin: 0;
    max-width: 14ch;
    color: var(--text);
    font-size: 2.35rem;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.ai-stack-result p {
    max-width: 64ch;
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.68;
}

.ai-stack-blueprint {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ai-stack-blueprint div {
    display: grid;
    gap: 7px;
    min-height: 116px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.ai-stack-blueprint span {
    color: var(--accent-warm);
    font-size: 0.74rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ai-stack-blueprint strong {
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 640;
    line-height: 1.42;
}

.ai-stack-cta {
    align-self: flex-start;
    margin-top: auto;
}

.ai-advisor-proof-section {
    padding-top: 42px;
}

html.light .ai-advisor-console,
html.light .ai-stack-advisor {
    background:
        radial-gradient(circle at 12% 18%, rgba(21, 115, 204, 0.09), transparent 28%),
        radial-gradient(circle at 92% 20%, rgba(126, 82, 196, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 247, 241, 0.90));
    border-color: rgba(34, 34, 34, 0.12);
}

html.light .ai-console-core,
html.light .ai-stack-result {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.70)),
        rgba(245, 249, 252, 0.86);
    border-color: rgba(21, 115, 204, 0.16);
    box-shadow: var(--shadow-md);
}

html.light .ai-console-layers span,
html.light .ai-stack-option,
html.light .ai-stack-blueprint div {
    background: rgba(255, 255, 255, 0.64);
    border-color: rgba(17, 17, 17, 0.10);
}

html.light .ai-stack-option:hover,
html.light .ai-stack-option:focus-visible,
html.light .ai-stack-option.is-active {
    border-color: rgba(21, 115, 204, 0.38);
    background:
        linear-gradient(180deg, rgba(21, 115, 204, 0.08), rgba(255, 255, 255, 0.72)),
        rgba(255, 255, 255, 0.76);
    box-shadow: 0 0 0 1px rgba(21, 115, 204, 0.12) inset, 0 12px 24px rgba(17, 17, 17, 0.07);
}

.enterprise-surface-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.enterprise-surface-card {
    min-height: 390px;
    display: flex;
    flex-direction: column;
}

.enterprise-surface-card-primary {
    border-color: rgba(214, 178, 94, 0.34);
    background:
        radial-gradient(circle at top right, rgba(214, 178, 94, 0.16), transparent 44%),
        var(--surface);
}

.service-card-kicker {
    margin-bottom: 12px;
    color: var(--accent-warm);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.service-card-includes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 22px;
    position: relative;
    z-index: 1;
}

.service-card-includes span {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft-2);
    color: var(--text);
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 620;
    line-height: 1.2;
}

.engagement-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border-strong);
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(165deg, var(--surface-2), var(--surface-soft) 62%);
    box-shadow: var(--shadow-lg);
}

.engagement-path {
    padding: 26px;
    border-right: 1px solid var(--border);
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.engagement-path:last-child {
    border-right: 0;
}

.engagement-path > span {
    margin-bottom: 28px;
    color: var(--accent-warm);
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0;
}

.engagement-path h3 {
    margin: 0;
    font-size: 1.34rem;
    line-height: 1.12;
    letter-spacing: 0;
}

.engagement-path p {
    margin: 14px 0 20px;
    color: var(--muted);
    line-height: 1.68;
}

.engagement-path strong {
    margin-top: auto;
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.45;
}

.compact-section-head {
    margin-bottom: 30px;
}

.landing-hero ~ .section .compact-section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.landing-hero ~ .section .compact-section-head .section-title {
    max-width: none;
    width: min(100%, 1220px);
    font-size: clamp(3.2rem, 6.8vw, 6.8rem);
    line-height: 0.92;
}

.landing-hero ~ .section .compact-section-head .section-text {
    max-width: 78ch;
    margin-top: 0;
    font-size: clamp(1.02rem, 1.45vw, 1.28rem);
    line-height: 1.68;
}

.service-cta-panel,
.enterprise-standard-panel {
    border: 1px solid var(--border-strong);
    border-radius: 30px;
    background: linear-gradient(165deg, var(--surface-2), var(--surface-soft) 62%);
    box-shadow: var(--shadow-lg);
}

.service-cta-panel h2,
.enterprise-standard-panel h2 {
    margin: 0;
    font-size: 2.45rem;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.service-cta-panel p,
.enterprise-standard-panel p {
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.enterprise-standard-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    padding: 30px;
}

.standard-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.standard-list span {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft-2);
    color: var(--text);
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 620;
    line-height: 1.35;
}

.service-cta-section {
    padding-bottom: 42px;
}

.service-cta-panel {
    display: flex;
    justify-content: space-between;
    gap: 26px;
    align-items: center;
    padding: 30px;
}

.service-cta-panel p {
    max-width: 62ch;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tech-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.tech-card p {
    margin-bottom: 22px;
}

.tech-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.tech-chip-list .meta-chip {
    padding: 8px 11px;
    font-size: 0.82rem;
    color: var(--text);
}

html.light .landing-hero .hero-sub,
html.light .landing-panel-list span {
    color: rgba(24, 24, 24, 0.78);
}

html.light .landing-hero-panel,
html.light .landing-panel-list > div {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(249, 247, 241, 0.92));
    border-color: rgba(34, 34, 34, 0.14);
}

html.light .service-fit-band,
html.light .capability-bridge,
html.light .service-cta-panel,
html.light .enterprise-standard-panel,
html.light .engagement-path-grid {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(249, 247, 241, 0.92));
    border-color: rgba(34, 34, 34, 0.14);
}

html.light .technology-scope-band .meta-chip {
    background: rgba(255, 255, 255, 0.72);
}

html.light .technology-map {
    background:
        radial-gradient(circle at 22% 14%, rgba(21, 115, 204, 0.10), transparent 32%),
        radial-gradient(circle at 78% 20%, rgba(17, 148, 106, 0.08), transparent 30%),
        radial-gradient(circle at 50% 94%, rgba(185, 152, 76, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 247, 241, 0.90));
    border-color: rgba(34, 34, 34, 0.12);
}

html.light .technology-map::after {
    border-color: rgba(21, 115, 204, 0.08);
}

html.light .technology-map-core {
    border-color: rgba(21, 115, 204, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.70)),
        rgba(245, 249, 252, 0.86);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.72) inset,
        0 0 42px rgba(21, 115, 204, 0.14),
        var(--shadow-md);
}

html.light .technology-cluster {
    background:
        radial-gradient(circle at 88% 12%, var(--cluster-fill), transparent 44%),
        rgba(255, 255, 255, 0.66);
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.06);
}

html.light .technology-token-list span {
    background: rgba(255, 255, 255, 0.70);
}

html.light .enterprise-surface-card-primary {
    border-color: rgba(185, 152, 76, 0.34);
    background:
        radial-gradient(circle at top right, rgba(185, 152, 76, 0.12), transparent 44%),
        rgba(255, 255, 255, 0.88);
}

html.light .system-layer-list,
html.light .standard-list span {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(34, 34, 34, 0.12);
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft-2);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
}

.hero-right {
    min-height: 640px;
}

.artifact {
    position: relative;
    min-height: 640px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008)),
    rgba(255, 255, 255, 0.008);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.26);
    overflow: hidden;
    padding: 30px;
    isolation: isolate;
}

.artifact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.042), transparent 24%),
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.02), transparent 24%);
    pointer-events: none;
    z-index: 0;
}

html.light .artifact {
    border-color: rgba(17, 17, 17, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.24);
    box-shadow: 0 14px 40px rgba(17, 17, 17, 0.08);
}

html.light .artifact::before {
    background: radial-gradient(circle at 16% 14%, rgba(17, 17, 17, 0.032), transparent 24%),
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.12), transparent 24%);
}

.artifact::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.14) 100%);
    pointer-events: none;
    z-index: 0;
}

html.light .artifact::after {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.03) 100%);
}

.artifact-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
}

.artifact-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.artifact-label {
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 14px;
}

.artifact-title {
    margin: 0;
    font-size: clamp(1.9rem, 2.7vw, 2.65rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    max-width: 13ch;
    text-wrap: balance;
}

.artifact-title-line {
    white-space: nowrap;
}

.artifact-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-warm);
    opacity: 0.96;
    box-shadow: 0 0 20px rgba(214, 178, 94, 0.22);
    flex: 0 0 auto;
    margin-top: 6px;
}

.artifact-center {
    position: relative;
    border-radius: 32px;
    border: 1px solid var(--line-strong);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.01);
    overflow: hidden;
    padding: 24px;
    min-height: 332px;
}

.artifact-grid {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.18) 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
}

.artifact-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.3;
    background: radial-gradient(circle at 50% 57%, transparent 0 18%, rgba(255, 255, 255, 0.10) 18.2% 18.6%, transparent 19%),
    radial-gradient(circle at 50% 57%, transparent 0 29%, rgba(255, 255, 255, 0.07) 29.2% 29.6%, transparent 30%),
    radial-gradient(circle at 50% 57%, transparent 0 40%, rgba(255, 255, 255, 0.05) 40.2% 40.6%, transparent 41%);
}

.artifact-link,
.artifact-node,
.artifact-node-label,
.artifact-pulse {
    position: absolute;
}

.artifact-link {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform-origin: left center;
    opacity: 0.72;
}

.artifact-link--messaging {
    left: 17%;
    top: 64%;
    width: 24%;
    transform: rotate(-24deg);
}

.artifact-link--platform {
    left: 39%;
    top: 49%;
    width: 20%;
    transform: rotate(-5deg);
}

.artifact-link--infrastructure {
    left: 52%;
    top: 50%;
    width: 18%;
    transform: rotate(20deg);
}

.artifact-link--security {
    left: 58%;
    top: 39%;
    width: 14%;
    transform: rotate(42deg);
}

.artifact-link--ai {
    left: 46%;
    top: 43%;
    width: 14%;
    transform: rotate(-34deg);
}

html.light .artifact-link {
    background: linear-gradient(90deg, transparent, rgba(17, 17, 17, 0.16), transparent);
}

.artifact-node {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.045),
    0 0 18px rgba(255, 255, 255, 0.16);
    z-index: 2;
}

.artifact-node--core {
    left: 49.2%;
    top: 55.7%;
}

.artifact-node--messaging {
    left: 17%;
    top: 64%;
}

.artifact-node--platform {
    left: 39%;
    top: 49%;
}

.artifact-node--infrastructure {
    left: 69%;
    top: 55%;
}

.artifact-node--security {
    left: 53%;
    top: 24%;
}

.artifact-node--observability {
    left: 72%;
    top: 38%;
}

.artifact-node--ai {
    left: 59%;
    top: 45%;
}

.artifact-node--flows {
    left: 33%;
    top: 80%;
}

html.light .artifact-node {
    box-shadow: 0 0 0 6px rgba(17, 17, 17, 0.05),
    0 0 14px rgba(17, 17, 17, 0.10);
}

.artifact-node.core-node {
    background: var(--accent-warm);
    box-shadow: 0 0 0 6px rgba(214, 178, 94, 0.08),
    0 0 18px rgba(214, 178, 94, 0.20);
}

html.light .artifact-node.core-node {
    box-shadow: 0 0 0 6px rgba(185, 152, 76, 0.08),
    0 0 16px rgba(185, 152, 76, 0.16);
}

.artifact-pulse {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(214, 178, 94, 0.22);
    transform: translate(-22px, -22px);
    opacity: 0.45;
    z-index: 1;
}

.artifact-pulse--core {
    left: 50%;
    top: 57%;
}

.artifact-node-label {
    color: var(--soft);
    font-size: 0.84rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    z-index: 2;
}

.artifact-node-label--core {
    left: 53.5%;
    top: 53.4%;
}

.artifact-node-label--messaging {
    left: 6%;
    top: 67.6%;
}

.artifact-node-label--platform {
    left: 25%;
    top: 42%;
}

.artifact-node-label--infrastructure {
    left: 72%;
    top: 59%;
}

.artifact-node-label--security {
    left: 56%;
    top: 18%;
}

.artifact-node-label--observability {
    left: 75%;
    top: 33%;
}

.artifact-node-label--ai {
    left: 62%;
    top: 40%;
}

.artifact-node-label--flows {
    left: 18%;
    top: 83%;
}

.artifact-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.signal-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft-2);
    width: auto;
    min-height: 0;
}

.signal-name {
    color: var(--muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.signal-value {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.meta-chip,
.signal-row {
    max-width: 100%;
}

.section {
    padding: var(--section-space) 0;
    position: relative;
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 30px;
    align-items: start;
    margin-bottom: 44px;
}

/* Shared V3 section introductions, including Work and product capability pages. */
.section-heading {
    display: grid;
    gap: 16px;
    margin-bottom: clamp(28px, 3vw, 44px);
}

.section-heading > div { min-width: 0; }

.section-heading .section-title { max-width: 24ch; }

.section-heading p {
    max-width: 74ch;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.section-heading > p { margin-top: 0; }

.section-kicker {
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 14px;
}

.hero-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hero-breadcrumb li { display: inline-flex; gap: 12px; min-width: 0; }
.hero-breadcrumb li:last-child { flex: 1 1 auto; }
.hero-breadcrumb [aria-current] { overflow-wrap: anywhere; }
.hero-breadcrumb a { color: var(--text); text-decoration: none; }
.hero-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-breadcrumb a:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; border-radius: 2px; }
.hero-breadcrumb-separator { color: var(--soft); flex: 0 0 auto; }

.section-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(2.35rem, 4vw, 4.2rem);
    line-height: 0.96;
    letter-spacing: -0.056em;
    max-width: 11ch;
    text-wrap: balance;
}

.section-text {
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.9;
    max-width: 72ch;
}

.section-head .section-text {
    margin-top: 28px;
}

#capabilities .section-head,
#work > .container > .section-head,
#why .section-head,
#approach .section-head,
#how-it-works .section-head,
#faq .section-head {
    grid-template-columns: 1fr;
    gap: 16px;
}

#capabilities .section-title,
#work > .container > .section-head .section-title,
#why .section-title,
#approach .section-title,
#how-it-works .section-title,
#faq .section-title,
#work .work-clients-title {
    max-width: none;
    width: min(100%, 1120px);
    font-size: clamp(3.1rem, 5.8vw, 6.2rem);
    line-height: 0.92;
}

#capabilities .section-head .section-text,
#work > .container > .section-head .section-text,
#why .section-head .section-text,
#approach .section-head .section-text,
#how-it-works .section-head .section-text,
#faq .section-head .section-text {
    max-width: 76ch;
    margin-top: 0;
    font-size: clamp(1.02rem, 1.35vw, 1.22rem);
    line-height: 1.68;
}

.cards-4,
.work-grid,
.approach-grid {
    display: grid;
    gap: 18px;
}

.team-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-team-section .section-head {
    margin-bottom: 28px;
    grid-template-columns: 1fr;
    gap: 0;
}

.contact-team-shell {
    border: 1px solid var(--border-strong);
    border-radius: 32px;
    padding: 36px;
    background: linear-gradient(165deg, var(--surface-2), var(--surface-soft) 62%);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.contact-team-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.08), transparent 32%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), transparent);
    pointer-events: none;
}

html.light .contact-team-shell {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.20) 62%);
    box-shadow: 0 22px 54px rgba(17, 17, 17, 0.08);
}

html.light .contact-team-shell::after {
    background: radial-gradient(circle at 15% 10%, rgba(17, 17, 17, 0.035), transparent 32%),
    linear-gradient(90deg, transparent, rgba(17, 17, 17, 0.02), transparent);
}

.contact-team-section .section-title {
    font-size: clamp(2.35rem, 4vw, 4.2rem);
    max-width: 14ch;
    line-height: 0.96;
    min-height: 0;
    text-wrap: balance;
}

.team-typing-line {
    margin: 12px 0 0;
    min-height: 1.8em;
    color: var(--accent-warm);
    font-size: clamp(1.12rem, 1.7vw, 1.42rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.3;
}

.team-typing-line::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -0.12em;
    background: currentColor;
    opacity: 0;
}

.team-typing-line.is-active::after {
    opacity: 1;
    animation: team-caret-blink 0.9s steps(1, end) infinite;
}

@keyframes team-caret-blink {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

.contact-team-section .section-intro {
    max-width: 46rem;
}

.contact-team-section .section-subtitle {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 1.03rem;
    line-height: 1.72;
    max-width: 36ch;
}

.contact-team-section .section-text {
    margin-top: 16px;
    font-size: clamp(1.02rem, 1.35vw, 1.22rem);
    line-height: 1.68;
    max-width: 62ch;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    box-shadow: var(--shadow-md);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item p {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.team-card {
    border-radius: 22px;
    padding: 24px 24px 22px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
}

.team-card-top {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    height: 40px;
}

.team-card-top h3 {
    all: unset;
    display: block;
}

.team-name {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
    align-self: center;
}

.team-card-top .team-name {
    line-height: 40px;
    height: 40px;
    margin: 0;
}

.team-initial {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    flex: 0 0 auto;
    overflow: hidden;
}

.team-initial-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.team-role {
    margin: 0;
    color: var(--text);
    font-weight: 640;
    font-size: 1.06rem;
    line-height: 1.45;
    text-align: left;
}

.team-note {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.62;
    text-align: left;
    max-width: 34ch;
}

.team-linkedin {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--muted);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.team-linkedin:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.team-card--featured {
    border-color: var(--accent-warm-line);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(180deg, var(--surface-2), rgba(229, 197, 122, 0.08));
}

.contact-team-actions {
    margin-top: 30px;
    padding-top: 8px;
    position: relative;
    z-index: 1;
}

.contact-team-note {
    margin: 12px 0 0;
    color: var(--soft);
    font-size: 0.92rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.contact-page-section {
    padding-top: 72px;
}

.contact-page-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
    gap: 28px;
    align-items: start;
    border: 1px solid var(--border-strong);
    border-radius: 32px;
    padding: 36px;
    background: linear-gradient(165deg, var(--surface-2), var(--surface-soft) 62%);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.contact-page-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.025), transparent);
}

html.light .contact-page-shell {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22) 62%);
    box-shadow: 0 24px 58px rgba(17, 17, 17, 0.08);
}

html.light .contact-page-shell::after {
    background: radial-gradient(circle at 10% 10%, rgba(17, 17, 17, 0.035), transparent 28%),
    linear-gradient(120deg, transparent, rgba(17, 17, 17, 0.02), transparent);
}

.contact-page-copy,
.contact-page-form-panel {
    position: relative;
    z-index: 1;
}

.contact-page-kicker {
    margin-bottom: 22px;
}

.contact-page-title {
    margin: 0;
    font-size: clamp(2.2rem, 4.2vw, 4.4rem);
    line-height: 0.96;
    letter-spacing: -0.06em;
    max-width: 10ch;
    text-wrap: balance;
}

.contact-page-text {
    margin: 22px 0 0;
    max-width: 42ch;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.78;
}

.contact-page-form-panel {
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 22px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface-soft));
    box-shadow: var(--shadow-md);
}

.contact-page-form {
    margin: 0;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contact-field {
    min-width: 0;
}

.contact-field--full,
.contact-form-actions {
    grid-column: 1 / -1;
}

.contact-label {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.contact-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    min-height: 60px;
    padding: 0 18px;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.contact-input::placeholder {
    color: var(--soft);
}

.contact-input:hover {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.045);
}

.contact-input:focus {
    outline: none;
    border-color: rgba(214, 178, 94, 0.55);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.14);
}

.contact-textarea {
    min-height: 168px;
    padding-top: 16px;
    padding-bottom: 16px;
    resize: vertical;
}

.contact-input.is-invalid {
    border-color: rgba(255, 107, 107, 0.72);
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.08);
}

.contact-page-form-panel .invalid-feedback {
    display: block;
    margin-top: 8px;
    color: #ffb4b4;
    font-size: 0.9rem;
    line-height: 1.45;
}

.contact-page-form-panel .alert {
    border: 1px solid rgba(255, 188, 108, 0.24);
    border-radius: 18px;
    background: rgba(255, 188, 108, 0.10);
    color: var(--text);
    box-shadow: none;
}

.contact-page-form-panel .btn-close {
    filter: invert(1);
    opacity: 0.72;
}

html.light .contact-page-form-panel .btn-close {
    filter: none;
}

.auth-page-section {
    padding-top: clamp(40px, 7vw, 88px);
}

.auth-page-heading {
    margin-bottom: 28px;
}

.auth-page-title {
    margin: 0;
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.auth-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.auth-page-grid--single {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
}

.auth-panel {
    border: 1px solid var(--border-strong);
    border-radius: 28px;
    padding: 28px;
    background: linear-gradient(165deg, var(--surface-2), var(--surface-soft) 72%);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.auth-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.08), transparent 26%),
        linear-gradient(130deg, transparent, rgba(255, 255, 255, 0.025), transparent);
}

html.light .auth-panel {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22) 72%);
    box-shadow: 0 18px 44px rgba(17, 17, 17, 0.08);
}

html.light .auth-panel::after {
    background: radial-gradient(circle at 10% 8%, rgba(17, 17, 17, 0.035), transparent 26%),
    linear-gradient(130deg, transparent, rgba(17, 17, 17, 0.02), transparent);
}

.auth-panel > * {
    position: relative;
    z-index: 1;
}

.auth-panel--active {
    border-color: rgba(214, 178, 94, 0.34);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
}

.auth-panel-header {
    margin-bottom: 18px;
}

.auth-panel-kicker {
    margin: 0 0 10px;
    color: var(--soft);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.auth-panel-title {
    margin: 0;
    font-size: clamp(1.65rem, 2.8vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.auth-form,
.auth-stack {
    display: grid;
    gap: 16px;
}

.auth-grid {
    display: grid;
    gap: 16px;
}

.auth-grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-field {
    min-width: 0;
}

.auth-label {
    display: block;
    margin-bottom: 9px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.auth-input {
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.45;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.auth-input::placeholder {
    color: var(--soft);
}

.auth-input:hover,
.auth-select:hover {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.045);
}

.auth-input:focus,
.auth-select:focus {
    outline: none;
    border-color: rgba(214, 178, 94, 0.55);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.14);
}

.auth-select {
    appearance: none;
    padding-right: 44px;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.8) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.8) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 2px),
        calc(100% - 16px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.auth-input.is-invalid,
.auth-check-input.is-invalid + .auth-check-box {
    border-color: rgba(255, 107, 107, 0.72);
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.08);
}

.auth-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin: 4px 0 0;
    cursor: pointer;
}

.auth-check--full {
    margin-top: 6px;
}

.auth-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-check-box {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.auth-check-label {
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

.auth-check-label a {
    color: var(--text);
}

.auth-check-input:checked + .auth-check-box {
    border-color: rgba(214, 178, 94, 0.72);
    background: rgba(214, 178, 94, 0.18);
}

.auth-check-input:checked + .auth-check-box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-check-input:focus + .auth-check-box {
    box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.14);
}

.auth-company-panel {
    display: grid;
    gap: 16px;
    padding-top: 6px;
}

.auth-company-panel[hidden] {
    display: none;
}

.auth-captcha {
    min-height: 1px;
}

.auth-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 6px;
}

.auth-submit {
    min-width: 170px;
}

.auth-text-link {
    color: var(--soft);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
}

.auth-text-link:hover {
    color: var(--text);
}

.auth-support-text {
    margin: 0 0 4px;
    max-width: 48ch;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.auth-socials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 6px;
}

.auth-social-btn {
    justify-content: center;
    gap: 8px;
    min-height: 52px;
}

.auth-social-btn--facebook,
.auth-social-btn--google {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
}

.auth-social-btn--facebook:hover,
.auth-social-btn--google:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-strong);
}

.auth-divider {
    color: var(--soft);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.auth-rules {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.03);
}

.auth-rules-title {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auth-rules-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.65;
}

.auth-panel--status {
    max-width: 760px;
}

.auth-panel .invalid-feedback {
    display: block;
    margin-top: 8px;
    color: #ffb4b4;
    font-size: 0.9rem;
    line-height: 1.45;
}

.auth-panel .alert {
    border: 1px solid rgba(255, 188, 108, 0.24);
    border-radius: 18px;
    background: rgba(255, 188, 108, 0.10);
    color: var(--text);
    box-shadow: none;
}

.auth-panel .btn-close {
    filter: invert(1);
    opacity: 0.72;
}

html.light .auth-panel .btn-close {
    filter: none;
}

.auth-form-actions--start {
    justify-content: flex-start;
}

.contact-field--captcha {
    min-height: 1px;
}

.contact-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 8px;
}

.contact-submit {
    min-width: 190px;
}

.contact-form-note {
    margin: 0;
    max-width: 34ch;
    color: var(--soft);
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: right;
}

.contact-methods-section {
    padding-top: 64px;
}

.contact-methods-shell {
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 36px;
    background: linear-gradient(170deg, var(--surface-2), var(--surface));
    box-shadow: var(--shadow-lg);
}

.contact-methods-head {
    margin-bottom: 26px;
}

.contact-methods-title {
    margin: 0;
    font-size: clamp(1.9rem, 3.45vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
    max-width: 26ch;
    text-wrap: balance;
}

.contact-methods-support {
    margin: 14px 0 0;
    max-width: 66ch;
    color: var(--soft);
    line-height: 1.65;
}

.contact-methods-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-method-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    background: var(--surface-soft);
    min-height: 210px;
}

.contact-method-card-primary {
    border-color: rgba(63, 128, 255, 0.34);
    background:
        radial-gradient(circle at top right, rgba(63, 128, 255, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        var(--surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.contact-method-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.contact-method-icon {
    width: 28px;
    height: 28px;
    color: #3f80ff;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.contact-method-badge {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(63, 128, 255, 0.28);
    background: rgba(63, 128, 255, 0.12);
    color: #d7e4ff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

html.light .contact-method-card-primary {
    border-color: rgba(45, 94, 198, 0.32);
    background:
        radial-gradient(circle at top right, rgba(63, 128, 255, 0.14), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 255, 0.90)),
        #ffffff;
}

html.light .contact-method-badge {
    border-color: rgba(45, 94, 198, 0.36);
    background: rgba(63, 128, 255, 0.14);
    color: #1f3f88;
}

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

.contact-method-icon svg path,
.contact-method-icon svg circle {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-method-card h3 {
    margin: 0;
    font-size: 1.04rem;
}

.contact-method-card p {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.55;
}

.contact-method-link {
    color: #3f80ff;
    text-underline-offset: 3px;
    word-break: break-word;
}

.contact-method-link:hover {
    color: #5a94ff;
}

.contact-method-card-primary .contact-method-link {
    font-weight: 600;
}

.contact-method-note {
    margin-top: 12px;
    color: var(--soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.contact-address {
    display: grid;
    gap: 8px;
    margin: 8px 0 0;
    font-style: normal;
}

.contact-address span {
    color: var(--text);
    font-weight: 600;
}

.contact-hours {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 18px;
    color: var(--text);
    font-weight: 600;
}

.contact-hours span:nth-child(odd) {
    color: var(--muted);
    font-weight: 500;
}

.cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-clients-head {
    margin-top: 56px;
    margin-bottom: 28px;
}

.work-clients-title {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.work-clients-industries {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.work-clients-industries .meta-chip {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-strong);
}

.work-clients-slider {
    display: grid;
    gap: 14px;
}

.work-clients-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 20px;
    cursor: grab;
    touch-action: pan-y;
}

.work-clients-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
}

.work-clients-arrow {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.work-clients-arrow:hover {
    background: var(--surface-3);
    border-color: var(--text);
    transform: translateY(-1px);
}

.work-clients-progress {
    flex: 0 0 180px;
    margin-left: auto;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    overflow: hidden;
}

.work-clients-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--text);
    transition: width 0.08s linear;
}

.work-clients-carousel::-webkit-scrollbar {
    display: none;
}

.work-clients-track {
    display: flex;
    gap: 18px;
}

.work-client-card {
    --client-accent: #ffffff;
    flex: 0 0 auto;
    width: clamp(290px, 34vw, 460px);
    scroll-snap-align: start;
    min-height: 360px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 16px;
    outline: none;
    padding: 24px;
    position: relative;
    border: 1px solid #2a2f38;
    background: #111318;
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.work-client-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--client-accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 0;
}

.work-client-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, var(--client-accent), color-mix(in oklab, var(--client-accent) 40%, #ffffff 60%));
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 1;
}

.work-client-card:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-warm-line), var(--shadow-md);
}

.work-client-content {
    display: grid;
    gap: 16px;
    padding: 14px 14px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.46));
    position: relative;
    z-index: 2;
}

.work-client-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.work-client-mark {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: linear-gradient(145deg, color-mix(in srgb, var(--client-accent) 30%, #ffffff 70%), rgba(255, 255, 255, 0.12));
    color: #0f1116;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    flex: 0 0 auto;
}

.work-client-domain {
    margin: 0 0 6px;
    font-size: 0.78rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.72);
}

.work-client-card h3 {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
    letter-spacing: -0.03em;
    color: var(--client-accent);
}

.work-client-story {
    margin: 0;
    color: #e6e6e6;
    font-size: 1rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.work-client-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.work-client-taxonomy {
    display: grid;
    gap: 10px;
}

.work-meta-group {
    display: grid;
    gap: 0;
    min-width: 0;
}

.work-meta-line {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(235, 235, 235, 0.9);
    white-space: normal;
}

.work-meta-line strong {
    font-weight: 650;
    color: rgba(255, 255, 255, 0.96);
}

.work-meta-value {
    white-space: normal;
    color: rgba(235, 235, 235, 0.9);
    transition: color 0.18s ease;
}

.work-client-card:hover .work-meta-value,
.work-client-card:focus-within .work-meta-value {
    color: var(--accent-warm);
}

.work-client-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 14px;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    justify-content: center;
    justify-self: start;
    align-self: start;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.work-client-card:hover .work-client-link,
.work-client-card:focus-within .work-client-link {
    border-color: rgba(255, 255, 255, 0.34);
    color: #ffffff;
}

.work-client-link:hover,
.work-client-link:focus-visible {
    color: #090909;
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-1px);
}

.work-client-card:hover .work-client-link:hover,
.work-client-card:focus-within .work-client-link:focus-visible {
    color: #090909;
}

.work-client-link-arrow {
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.18s ease;
}

.work-client-link:hover .work-client-link-arrow,
.work-client-link:focus-visible .work-client-link-arrow {
    transform: translateX(2px);
}

.work-client-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--client-accent) 55%, #2a2f38 45%);
}

.work-client-card:hover::before,
.work-client-card:focus-within::before {
    opacity: 0.12;
}

.work-client-card:hover::after,
.work-client-card:focus-within::after {
    opacity: 0.9;
}

html.light .work-client-card {
    border-color: #d5dbe6;
    background: #f8fafc;
    box-shadow: 0 10px 24px rgba(18, 28, 45, 0.08);
}

html.light .work-client-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 252, 0.92));
    border: 1px solid rgba(30, 46, 74, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html.light .work-client-domain {
    color: rgba(25, 33, 47, 0.62);
}

html.light .work-client-card:hover,
html.light .work-client-card:focus-within {
    border-color: color-mix(in oklab, var(--client-accent) 62%, #d7dce5 38%);
}

html.light .work-client-card:hover::before,
html.light .work-client-card:focus-within::before {
    opacity: 0.11;
}

html.light .work-client-card h3 {
    color: color-mix(in oklab, var(--client-accent) 56%, #1a1a1a 44%);
    text-shadow: none;
}

html.light .work-client-story {
    color: rgba(20, 26, 37, 0.88);
}

html.light .work-meta-line {
    color: rgba(18, 24, 35, 0.88);
}

html.light .work-meta-line strong {
    color: rgba(10, 14, 22, 0.97);
}

html.light .work-meta-value {
    color: rgba(18, 24, 35, 0.86);
}

html.light .work-client-link {
    color: rgba(22, 22, 22, 0.88);
}

html.light .work-client-card:hover .work-client-link,
html.light .work-client-card:focus-within .work-client-link {
    border-color: rgba(18, 18, 18, 0.28);
    color: rgba(16, 16, 16, 0.96);
}

@media (max-width: 560px) {
    .work-client-card {
        grid-template-rows: auto 1fr auto;
    }

    .work-client-footer {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .work-client-link {
        justify-self: start;
    }
}

.approach-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.approach-model {
    margin-top: 12px;
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.approach-model-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 580;
}

.card,
.work-card,
.why-card,
.metrics-card,
.cta-panel {
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.card::before,
.work-card::before,
.why-card::before,
.metrics-card::before,
.cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 40%);
    pointer-events: none;
}

html.light .card::before,
html.light .work-card::before,
html.light .why-card::before,
html.light .metrics-card::before,
html.light .cta-panel::before {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.035), transparent 40%);
}

.card {
    padding: 28px;
    border-radius: var(--radius-md);
}

.card h3,
.work-card h3,
.why-card h3,
.metrics-card h3 {
    margin: 0 0 12px;
    font-size: 1.18rem;
    line-height: 1.18;
    letter-spacing: -0.025em;
    position: relative;
    z-index: 1;
}

.card p,
.work-card p,
.why-card p,
.metrics-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.78;
    position: relative;
    z-index: 1;
}

.card:hover,
.work-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.work-card {
    border-radius: 32px;
    padding: 30px;
    min-height: 306px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.work-card.work-client-card {
    border-color: #2a2f38;
    background: #111318;
    box-shadow: var(--shadow-md);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.work-card.work-client-card::before {
    background: var(--client-accent);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.work-card.work-client-card::after {
    display: none;
}

.work-card.work-client-card:hover,
.work-card.work-client-card:focus-within {
    transform: none;
    border-color: var(--client-accent);
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--client-accent) 18%, transparent), color-mix(in oklab, var(--client-accent) 8%, transparent)),
        #111318;
    box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in oklab, var(--client-accent) 30%, transparent);
}

.work-card.work-client-card:hover::before,
.work-card.work-client-card:focus-within::before {
    opacity: 0.08;
}

html.light .work-card.work-client-card {
    border-color: #d5dbe6;
    background: #f8fafc;
    box-shadow: 0 10px 24px rgba(18, 28, 45, 0.08);
}

html.light .work-card.work-client-card:hover,
html.light .work-card.work-client-card:focus-within {
    border-color: var(--client-accent);
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--client-accent) 14%, transparent), color-mix(in oklab, var(--client-accent) 6%, transparent)),
        #f8fafc;
    transform: none;
    box-shadow: 0 18px 36px rgba(18, 28, 45, 0.12), 0 0 0 1px color-mix(in oklab, var(--client-accent) 32%, transparent);
}

html.light .work-card.work-client-card:hover::before,
html.light .work-card.work-client-card:focus-within::before {
    opacity: 0.06;
}

.work-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.work-tag {
    color: var(--soft);
    font-size: 0.75rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.work-index {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.84rem;
    background: var(--surface-soft);
}

.work-card h3 {
    font-size: 1.62rem;
    letter-spacing: -0.04em;
    margin-bottom: 10px;
}

.work-meta {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.work-meta span {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.88rem;
}

.why-layout {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: 18px;
    align-items: stretch;
}

.why-card,
.metrics-card {
    padding: 30px;
    border-radius: 32px;
}

.principles {
    margin-top: 24px;
    display: grid;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.principle {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--muted);
    line-height: 1.76;
}

.principle strong {
    color: var(--text);
}

.metrics {
    display: grid;
    gap: 22px;
    position: relative;
    z-index: 1;
}

.metric {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.metric:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.metric-value {
    font-size: clamp(2rem, 3vw, 2.95rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.055em;
    margin-bottom: 8px;
}

.metric-copy {
    color: var(--muted);
    line-height: 1.78;
}

.metrics-kicker {
    margin-bottom: 18px;
}

.cta-wrap {
    padding-top: 20px;
}

.cta-panel {
    border-radius: 38px;
    padding: 50px;
    box-shadow: var(--shadow-xl);
}

.cta-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.05), transparent 25%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.03), transparent 24%);
    pointer-events: none;
}

html.light .cta-panel::after {
    background: radial-gradient(circle at 16% 10%, rgba(17, 17, 17, 0.03), transparent 25%),
    radial-gradient(circle at 84% 18%, rgba(17, 17, 17, 0.018), transparent 24%);
}

.cta-panel h2 {
    margin: 0 0 14px;
    font-size: clamp(2.5rem, 4.1vw, 4.55rem);
    line-height: 0.94;
    letter-spacing: -0.06em;
    max-width: 10ch;
    position: relative;
    z-index: 1;
    text-wrap: balance;
}

.cta-panel p {
    margin: 0;
    max-width: 72ch;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.88;
    position: relative;
    z-index: 1;
}

.cta-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.footer {
    position: relative;
    overflow: hidden;
    padding: 88px 0 38px;
    color: rgba(244, 247, 251, 0.78);
    font-size: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(135deg, rgba(30, 19, 48, 0.94), rgba(17, 28, 42, 0.96) 52%, rgba(31, 25, 20, 0.94)),
        #111827;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(124, 66, 218, 0.18), transparent 36%, rgba(24, 150, 255, 0.14) 78%, transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%);
    opacity: 0.9;
    pointer-events: none;
}

.footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 76px 76px;
    opacity: 0.28;
    pointer-events: none;
}

.footer .container {
    position: relative;
    z-index: 1;
}

html.light .footer::before {
    background:
        linear-gradient(90deg, rgba(124, 66, 218, 0.18), transparent 36%, rgba(24, 150, 255, 0.14) 78%, transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%);
    opacity: 0.9;
}

html.light .footer::after {
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    opacity: 0.28;
}

.footer-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.55fr);
    gap: 58px 80px;
}

.footer-lead {
    max-width: 760px;
}

.footer-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    color: inherit;
    text-decoration: none;
}

.footer-brand-lockup div {
    display: grid;
    gap: 2px;
}

.footer-brand-lockup strong {
    color: rgba(255, 255, 255, 0.96);
    font-size: 1.03rem;
    letter-spacing: 0.02em;
}

.footer-brand-lockup span {
    color: rgba(244, 247, 251, 0.58);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.footer-lead p {
    max-width: 16ch;
    margin: 36px 0 0;
    color: rgba(244, 247, 251, 0.84);
    font-size: clamp(2rem, 3.2vw, 2.65rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.footer-action {
    align-self: start;
    justify-self: end;
    display: grid;
    justify-items: start;
    gap: 8px;
    padding-top: 4px;
}

.footer-action-label {
    margin-bottom: 4px;
    color: rgba(244, 247, 251, 0.58);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.96);
    font-size: 1.08rem;
    font-weight: 650;
    text-decoration: none;
}

.footer-contact-email {
    color: rgba(244, 247, 251, 0.68);
    font-size: .95rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.footer-action a:hover {
    color: rgba(255, 255, 255, 0.98);
}

.footer-brand-lockup:focus-visible,
.footer-action a:focus-visible,
.footer-link-group a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.96);
    outline-offset: 4px;
    border-radius: 3px;
}

.footer-nav-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px;
    padding-top: 54px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-link-group {
    display: grid;
    align-content: start;
    gap: 10px;
}

.footer-link-group h2 {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-link-group a {
    display: flex;
    align-items: center;
    min-height: 34px;
    text-decoration: none;
    color: rgba(244, 247, 251, 0.72);
    padding: 3px 0;
    font-size: 0.93rem;
    line-height: 1.2;
}

.footer-link-group a:hover,
.footer-link-group a:focus-visible {
    color: rgba(255, 255, 255, 0.98);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-brand-rail {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding-top: 0;
    color: rgba(244, 247, 251, 0.54);
    font-size: 0.72rem;
    font-weight: 680;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.footer-brand-logo {
    width: clamp(72px, 10vw, 88px);
    height: clamp(72px, 10vw, 88px);
    display: block;
    flex: 0 0 auto;
    margin-right: 2px;
    filter: drop-shadow(0 12px 26px rgba(37, 99, 235, 0.34));
}

.footer-brand-rail strong {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.78);
    font: inherit;
}

.footer-line--legal {
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(244, 247, 251, 0.48);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-align: center;
}

.fade-up {
    opacity: 1;
    transform: none;
}

@media (max-width: 1160px) {
    .hero-grid,
    .section-head,
    .why-layout,
    .contact-page-shell {
        grid-template-columns: 1fr;
    }

    .hero-right,
    .artifact {
        min-height: 580px;
    }

    .cards-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .technology-map-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .technology-map-intro h2 {
        max-width: 18ch;
    }

    .ai-stack-advisor {
        grid-template-columns: 1fr;
    }

    .ai-stack-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-grid,
    .approach-grid,
    .team-grid,
    .contact-methods-grid {
        grid-template-columns: 1fr;
    }

    .work-client-card {
        flex-basis: min(100%, 560px);
    }

    .contact-team-shell {
        padding: 24px;
        border-radius: 26px;
    }

    .contact-page-shell {
        padding: 24px;
        border-radius: 26px;
    }

    .auth-page-grid {
        grid-template-columns: 1fr;
    }

    .auth-page-grid--single {
        grid-template-columns: 1fr;
    }

    .contact-page-title {
        max-width: none;
    }

    .contact-page-text {
        max-width: none;
    }

    .contact-page-form-panel {
        padding: 18px;
        border-radius: 22px;
    }

    .auth-panel {
        padding: 24px;
        border-radius: 24px;
    }

    .contact-team-section .section-title {
        font-size: clamp(2rem, 11vw, 3rem);
        max-width: none;
    }

    .contact-team-section .section-subtitle,
    .contact-team-section .section-text {
        max-width: none;
    }

    .team-card {
        min-height: 0;
        padding: 20px;
        gap: 10px;
    }

    .team-name {
        font-size: 1.65rem;
        line-height: 34px;
        height: 34px;
    }

    .team-initial {
        width: 34px;
        height: 34px;
        border-radius: 0;
        font-size: 0.86rem;
    }

    .team-role {
        font-size: 1rem;
    }

    .team-note {
        font-size: 0.95rem;
        max-width: none;
    }

    .contact-methods-shell {
        padding: 24px;
        border-radius: 24px;
    }

    .contact-method-card {
        min-height: 0;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-submit {
        width: 100%;
    }

    .contact-form-note {
        max-width: none;
        text-align: left;
    }

    .work-client-card {
        flex-basis: min(100%, 92vw);
    }

    .work-clients-controls {
        justify-content: space-between;
    }

    .work-clients-progress {
        max-width: none;
    }

    .section-title,
    .cta-panel h2 {
        max-width: none;
    }

    #capabilities .hero-capability-list {
        flex-wrap: wrap;
        overflow-x: visible;
        margin-bottom: 18px;
    }

    #about-hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .landing-hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .landing-hero .hero-copy,
    .landing-hero .hero-title,
    .landing-hero .hero-sub {
        max-width: none;
    }

    .landing-hero .hero-title {
        font-size: 4.4rem;
        letter-spacing: 0;
    }

    .capability-grid,
    .enterprise-surface-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .engagement-path-grid,
    .enterprise-standard-panel,
    .standard-list {
        grid-template-columns: 1fr;
    }

    .engagement-path {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .engagement-path:last-child {
        border-bottom: 0;
    }

    .service-cta-panel {
        align-items: flex-start;
    }

    .service-cta-panel {
        flex-direction: column;
    }

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

    #about-hero .hero-copy,
    #about-hero .hero-title {
        max-width: none;
    }

    #about-principles .approach-grid {
        grid-template-columns: 1fr;
    }

    #about-principles .card {
        min-height: 0;
    }

    .auth-page-grid--register .auth-panel--login {
        order: 2;
    }

    .auth-page-grid--register .auth-panel--register {
        order: 1;
    }
}

@media (max-width: 1240px) {
    .nav {
        min-height: 72px;
        gap: 10px;
    }

    .nav-links {
        display: none;
    }

    .nav-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        order: 3;
    }

    .nav-actions {
        order: 2;
        gap: 8px;
        margin-left: auto;
        margin-right: 8px;
        width: auto;
    }

    .nav-actions .btn {
        display: inline-flex;
        padding: 9px 13px;
        min-height: 38px;
        font-size: 0.9rem;
        font-weight: 600;
        white-space: nowrap;
        background: transparent;
        color: var(--text);
        border: 1px solid var(--border);
        box-shadow: none;
    }

    .nav-account-toggle,
    .nav-account-login {
        width: 38px;
        height: 38px;
        box-shadow: none;
    }

    .nav-actions .btn:hover {
        background: var(--surface);
        border-color: var(--border-strong);
        box-shadow: none;
    }

    .nav-cta-full {
        display: none;
    }

    .nav-cta-mobile {
        display: inline;
    }

    .nav-mobile-panel {
        display: grid;
        gap: 8px;
        padding: 0 0 14px;
    }

    .nav-mobile-panel[hidden] {
        display: none;
    }

    .nav-mobile-panel a {
        text-decoration: none;
        color: var(--text);
        padding: 10px 12px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--border);
    }

    .nav-mobile-panel a.btn {
        margin-top: 6px;
        justify-content: center;
    }

    .nav-mobile-legal {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    .nav-mobile-legal a {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--soft);
        font-size: 0.82rem;
        line-height: 1.4;
        text-decoration: none;
    }

    .nav-mobile-legal a:hover {
        color: var(--text);
        background: transparent;
        border-color: transparent;
    }
}

@media (max-width: 720px) {
    :root {
        --section-space: 32px;
        --hero-space: 118px;
    }

    .container {
        width: min(var(--max), calc(100% - 24px));
    }

    .hero-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .nav {
        min-height: 68px;
        gap: 10px;
    }

    .nav-links {
        display: none;
    }

    .nav-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-account-menu {
        right: -44px;
        min-width: min(230px, calc(100vw - 32px));
    }

    .lang-select:not(.lang-select-bundle) {
        min-width: 84px;
        padding: 0 26px 0 12px;
    }

    .utility-dock {
        right: 50%;
        bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
        transform: translateX(50%);
        filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.48));
    }

    .utility-dock::before {
        inset: -20px -28px;
        background:
            radial-gradient(circle at 72% 50%, rgba(102, 183, 255, 0.34), transparent 64%),
            radial-gradient(circle at 28% 50%, rgba(94, 246, 191, 0.18), transparent 62%);
        opacity: 0.86;
        animation: none;
    }

    .control-bundle {
        --language-control-width: 76px;
        height: 48px;
        grid-template-columns: 48px var(--language-control-width) 0;
        border-color: rgba(255, 255, 255, 0.18);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
            rgba(12, 14, 17, 0.78);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.08) inset,
            0 0 34px rgba(102, 183, 255, 0.22),
            0 18px 42px rgba(0, 0, 0, 0.42);
    }

    .control-bundle.is-expanded {
        grid-template-columns: 48px var(--language-control-width) 48px;
    }

    .control-bundle .icon-btn {
        width: 48px;
        height: 46px;
    }

    .utility-top-btn {
        width: 0;
        height: 46px;
    }

    .utility-top-btn.is-visible {
        width: 48px;
    }

    html.light .utility-dock {
        filter: drop-shadow(0 18px 34px rgba(17, 43, 68, 0.18));
    }

    html.light .control-bundle {
        border-color: rgba(21, 115, 204, 0.28);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)),
            rgba(246, 249, 252, 0.86);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.82) inset,
            0 0 30px rgba(21, 115, 204, 0.20),
            0 16px 34px rgba(20, 35, 52, 0.14);
    }

    .hero {
        min-height: auto;
    }

    #about-hero {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    #about-hero .container,
    #about-principles .container {
        width: min(var(--max), calc(100% - 16px));
    }

    #about-hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #about-hero .hero-copy {
        max-width: none;
    }

    #about-hero .hero-title {
        font-size: clamp(2.1rem, 10vw, 3.4rem);
        line-height: 0.97;
        letter-spacing: -0.058em;
        max-width: none;
    }

    #about-hero .hero-sub {
        margin-top: 14px;
        font-size: 0.96rem;
        line-height: 1.58;
    }

    #about-hero .hero-actions {
        margin-top: 18px;
        gap: 10px;
    }

    #about-hero .hero-card {
        padding: 16px 16px 14px;
        border-radius: 20px;
    }

    #about-hero .hero-card h2 {
        max-width: none;
        font-size: 1.4rem;
        line-height: 1.08;
    }

    #about-hero .hero-card > p {
        margin-top: 12px;
        font-size: 0.96rem;
        line-height: 1.58;
    }

    #about-hero .hero-facts {
        margin-top: 14px;
        gap: 8px;
    }

    #about-hero .hero-facts > div {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 8px 10px;
        border-radius: 10px;
    }

    #about-hero .hero-facts span {
        font-size: 0.88rem;
    }

    #about-hero .hero-facts strong {
        font-size: 0.96rem;
        line-height: 1.28;
    }

    #about-principles {
        padding-top: 34px;
        padding-bottom: 56px;
    }

    #about-principles .section-head {
        margin-bottom: 22px;
        gap: 12px;
    }

    #about-principles .section-title {
        font-size: clamp(1.95rem, 9.8vw, 2.7rem);
    }

    #about-principles .section-head .section-text {
        margin-top: 8px;
        font-size: 0.96rem;
        line-height: 1.58;
    }

    .hero-meta-shell {
        margin-top: 16px;
    }

    #capabilities {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    #capabilities .container {
        width: min(var(--max), calc(100% - 12px));
    }

    #capabilities .section-head {
        margin-bottom: 26px;
        gap: 14px;
    }

    #capabilities .section-kicker {
        margin-bottom: 10px;
    }

    #capabilities .section-title {
        font-size: clamp(2rem, 10.6vw, 2.9rem);
    }

    #capabilities .section-head .section-text {
        margin-top: 8px;
        font-size: 0.98rem;
        line-height: 1.62;
    }

    #work > .container > .section-head .section-title,
    #why .section-title,
    #approach .section-title,
    #how-it-works .section-title,
    #faq .section-title,
    #work .work-clients-title {
        width: 100%;
        font-size: clamp(2.35rem, 11vw, 3.35rem);
        line-height: 0.94;
    }

    #work > .container > .section-head .section-text,
    #why .section-head .section-text,
    #approach .section-head .section-text,
    #how-it-works .section-head .section-text,
    #faq .section-head .section-text {
        max-width: none;
        font-size: 0.98rem;
        line-height: 1.62;
    }

    .hero h1 {
        font-size: clamp(2.45rem, 11.8vw, 4.1rem);
        line-height: 0.96;
        letter-spacing: -0.056em;
        max-width: none;
        text-wrap: initial;
    }

    .hero-title-desktop {
        display: none;
    }

    .hero-title-mobile {
        display: block;
    }

    .hero-title-mobile[hidden] {
        display: block !important;
    }

    .hero-intro,
    .section-text,
    .cta-panel p {
        font-size: 1rem;
    }

    .landing-hero {
        padding-top: 54px;
        padding-bottom: 54px;
    }

    .landing-hero .hero-title {
        font-size: 3.1rem;
        letter-spacing: 0;
    }

    .service-fit-section {
        padding-top: 12px;
        padding-bottom: 18px;
    }

    .service-fit-band,
    .capability-bridge,
    .service-cta-panel,
    .enterprise-standard-panel {
        border-radius: 22px;
        padding: 18px;
    }

    .technology-map {
        gap: 18px;
        padding: 18px;
        border-radius: 24px;
    }

    .technology-map::after {
        inset: 22% -18%;
        opacity: 0.48;
    }

    .technology-map-intro h2 {
        max-width: none;
        font-size: 2rem;
    }

    .ai-advisor-section .section-head {
        gap: 14px;
        margin-bottom: 24px;
    }

    .landing-hero ~ .section .compact-section-head {
        gap: 14px;
        margin-bottom: 24px;
    }

    .landing-hero ~ .section .compact-section-head .section-title {
        max-width: none;
        width: 100%;
        font-size: clamp(2.45rem, 12vw, 3.7rem);
        line-height: 0.94;
    }

    .landing-hero ~ .section .compact-section-head .section-text {
        max-width: none;
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .ai-advisor-section .section-title {
        max-width: none;
        font-size: clamp(2.55rem, 13vw, 3.8rem);
        line-height: 0.94;
    }

    .ai-advisor-section .section-text {
        max-width: none;
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .technology-map-intro p {
        font-size: 0.95rem;
        line-height: 1.62;
    }

    .technology-map-core {
        width: 100%;
        padding: 16px;
        border-radius: 18px;
        text-align: left;
    }

    .technology-map-core strong {
        font-size: 1.05rem;
    }

    .technology-map-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .technology-cluster {
        min-height: 0;
        padding: 16px;
        border-radius: 18px;
    }

    .technology-cluster p {
        margin-bottom: 16px;
    }

    .technology-token-list {
        gap: 7px;
    }

    .technology-token-list span {
        min-height: 30px;
        padding: 7px 9px;
        font-size: 0.78rem;
    }

    .ai-advisor-console {
        min-height: 0;
        gap: 12px;
        padding: 18px;
        border-radius: 24px;
    }

    .ai-console-core {
        padding: 18px;
        border-radius: 18px;
    }

    .ai-console-core strong {
        max-width: none;
        font-size: 1.45rem;
    }

    .ai-console-layers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-console-layers span {
        min-height: 48px;
    }

    .ai-stack-advisor {
        padding: 12px;
        border-radius: 24px;
    }

    .ai-stack-selector {
        grid-template-columns: 1fr;
    }

    .ai-stack-option {
        min-height: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .ai-stack-result {
        gap: 18px;
        padding: 18px;
        border-radius: 20px;
    }

    .ai-stack-result h3 {
        max-width: none;
        font-size: 1.82rem;
    }

    .ai-stack-result p {
        font-size: 0.96rem;
        line-height: 1.62;
    }

    .ai-stack-blueprint {
        grid-template-columns: 1fr;
    }

    .ai-stack-blueprint div {
        min-height: 0;
        padding: 14px;
    }

    .ai-stack-cta {
        width: 100%;
    }

    .service-cta-panel h2,
    .enterprise-standard-panel h2 {
        font-size: 1.8rem;
    }

    .capability-grid,
    .enterprise-surface-grid {
        grid-template-columns: 1fr;
    }

    .capability-bridge {
        align-items: flex-start;
        flex-direction: column;
    }

    .capability-card,
    .enterprise-surface-card,
    .engagement-path {
        min-height: 0;
    }

    .engagement-path {
        padding: 18px;
    }

    .engagement-path > span {
        margin-bottom: 16px;
    }

    .system-layer-list > div {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 12px;
    }

    .service-card-includes {
        gap: 7px;
    }

    .service-card-includes span {
        font-size: 0.78rem;
    }

    #capabilities .hero-capability-list .meta-chip {
        font-size: 0.82rem;
        padding: 9px 12px;
    }

    .artifact,
    .card,
    .why-card,
    .metrics-card,
    .work-card,
    .cta-panel {
        padding: 22px;
    }

    .artifact {
        min-height: 0;
        padding: 10px;
        border-radius: 22px;
    }

    .artifact-inner {
        gap: 10px;
    }

    .artifact-top {
        gap: 10px;
    }

    .artifact-label {
        margin-bottom: 6px;
        font-size: 0.68rem;
        letter-spacing: 0.13em;
    }

    .artifact-title {
        font-size: clamp(1.32rem, 6.6vw, 1.72rem);
        line-height: 1;
        letter-spacing: -0.04em;
        max-width: none;
        text-wrap: pretty;
    }

    .artifact-title-line {
        white-space: normal;
    }

    .artifact-center {
        min-height: 184px;
        padding: 8px;
        border-radius: 20px;
    }

    .artifact-grid {
        background-size: 24px 24px;
    }

    .artifact-node {
        width: 11px;
        height: 11px;
    }

    .artifact-pulse {
        width: 38px;
        height: 38px;
        transform: translate(-13px, -13px);
    }

    .artifact-node-label {
        font-size: 0.57rem;
    }

    .cards-4 {
        grid-template-columns: 1fr;
    }

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

    .hero-actions > * {
        min-width: 0;
    }

    .contact-page-shell {
        padding: 16px;
        border-radius: 22px;
    }

    .contact-page-kicker {
        margin-bottom: 16px;
    }

    .contact-page-title {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .contact-page-text {
        margin-top: 16px;
        font-size: 0.98rem;
        line-height: 1.62;
    }

    .contact-page-form-panel {
        padding: 14px;
        border-radius: 18px;
    }

    .contact-form-grid,
    .auth-form,
    .auth-stack,
    .auth-grid {
        gap: 12px;
    }

    .contact-label,
    .auth-label {
        margin-bottom: 7px;
    }

    .contact-input,
    .auth-input {
        min-height: 54px;
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 16px;
    }

    .contact-textarea {
        min-height: 140px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .auth-page-heading {
        margin-bottom: 18px;
    }

    .auth-page-title {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .auth-panel {
        padding: 16px;
        border-radius: 20px;
    }

    .auth-panel-title {
        font-size: clamp(1.45rem, 7.4vw, 1.95rem);
    }

    .auth-panel-header {
        margin-bottom: 14px;
    }

    .auth-support-text {
        font-size: 0.96rem;
        line-height: 1.58;
    }

    .auth-rules {
        padding: 14px 15px;
        border-radius: 16px;
    }

    .auth-grid--split,
    .auth-socials {
        grid-template-columns: 1fr;
    }

    .auth-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .auth-submit {
        width: 100%;
    }

    .artifact-footer {
        gap: 6px;
    }

    .signal-row {
        gap: 5px;
        padding: 7px 8px;
        border-radius: 16px;
    }

    .signal-name,
    .signal-value {
        font-size: 0.71rem;
    }

    .btn,
    .btn-secondary {
        width: 100%;
        white-space: normal;
    }

    .footer {
        padding: 38px 0 28px;
    }

    .footer-shell {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-lead p {
        margin-top: 28px;
        font-size: clamp(1.8rem, 8vw, 2.35rem);
    }

    .footer-action {
        justify-self: start;
        min-width: 0;
        padding: 0;
    }

    .footer-nav-grid {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-top: 38px;
    }

    .footer-link-group {
        padding: 0;
    }

    .footer-brand-rail {
        gap: 10px 14px;
        letter-spacing: 0.16em;
    }

    .footer-brand-rail strong {
        flex-basis: 100%;
        margin-left: 0;
    }

    .signal-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .signal-value {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation: none !important;
        transition: none !important;
    }

    .fade-up,
    .reveal-line > span {
        opacity: 1 !important;
        transform: none !important;
    }
}

.blog-hero,
.blog-post-hero {
    min-height: auto;
    padding-bottom: 88px;
}

.blog-index-section,
.blog-article-section {
    padding-top: 72px;
}

.blog-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 42px;
}

.blog-filter-link,
.blog-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 680;
    line-height: 1.1;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.blog-filter-link:hover,
.blog-filter-link.active,
.blog-tags a:hover {
    transform: translateY(-1px);
    border-color: var(--accent-warm-line);
    background: var(--accent-warm-soft);
    color: var(--text);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.blog-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.blog-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.blog-card-edit {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.blog-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

.blog-card-kicker,
.blog-post-category {
    margin: 0 0 12px;
    color: var(--accent-warm);
    font-size: 0.77rem;
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.blog-post-category {
    display: inline-flex;
    text-decoration: none;
}

.blog-card-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.18;
}

.blog-card-title a {
    color: var(--text);
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--accent-warm);
}

.blog-draft-label {
    display: inline-flex;
    margin-left: 8px;
    color: var(--soft);
    font-size: 0.58em;
    font-weight: 600;
}

.blog-card-date,
.blog-post-meta {
    color: var(--soft);
    font-size: 0.92rem;
}

.blog-card-date {
    margin-top: 14px;
}

.blog-card-excerpt {
    margin: 18px 0 24px;
    color: var(--muted);
    line-height: 1.72;
}

.blog-card-link {
    margin-top: auto;
    color: var(--text);
    font-weight: 740;
    text-decoration-color: var(--accent-warm);
    text-underline-offset: 5px;
}

.blog-pagination-wrap {
    display: flex;
    justify-content: center;
    padding-bottom: 92px;
}

.blog-article-shell {
    max-width: 860px;
    margin: 0 auto;
}

.blog-article-content {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.86;
}

.blog-article-content > *:first-child {
    margin-top: 0;
}

.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
    margin: 2.1em 0 0.7em;
    color: var(--text);
    line-height: 1.18;
}

.blog-article-content a {
    color: var(--text);
    text-decoration-color: var(--accent-warm);
    text-underline-offset: 5px;
}

.blog-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.blog-tags,
.blog-share,
.blog-comments {
    margin-top: 42px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.blog-tags span {
    color: var(--soft);
    font-size: 0.92rem;
}

.blog-share .share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 0;
    list-style: none;
}

.blog-post-nav {
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding-bottom: 104px;
}

.blog-post-nav-link {
    display: flex;
    max-width: 48%;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    font-weight: 740;
    line-height: 1.2;
    text-decoration: none;
}

.blog-post-nav-link span {
    color: var(--soft);
    font-size: 0.78rem;
    font-weight: 680;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.blog-post-nav-link-next {
    margin-left: auto;
    text-align: right;
}

@media (max-width: 980px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .blog-hero,
    .blog-post-hero {
        padding-bottom: 64px;
    }

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

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

    .blog-post-nav {
        flex-direction: column;
    }

    .blog-post-nav-link {
        max-width: 100%;
    }
}

.hero-architecture {
    min-height: calc(100vh - 80px);
    padding: 32px 0 54px;
    align-items: stretch;
}

.hero-architecture-container {
    width: 100%;
    max-width: none;
    padding-inline: 30px;
}

.architecture-panel {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 112px);
    padding: clamp(28px, 3.2vw, 54px);
    border: 1px solid rgba(17, 17, 17, 0.09);
    border-radius: clamp(28px, 4vw, 58px);
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.22) 48%, transparent 70%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(246, 244, 240, 0.86));
    color: #101421;
    box-shadow: 0 22px 70px rgba(17, 17, 17, 0.11);
}

.architecture-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(75, 102, 255, 0.06), transparent 24%),
        radial-gradient(circle at 88% 50%, rgba(43, 203, 159, 0.08), transparent 24%),
        radial-gradient(circle at 50% 80%, rgba(255, 169, 50, 0.06), transparent 22%);
    pointer-events: none;
}

.architecture-panel-top,
.architecture-map,
.architecture-panel-bottom,
.architecture-panel-foot {
    position: relative;
    z-index: 1;
}

.architecture-panel-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
    gap: 38px;
    align-items: start;
}

.architecture-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    color: rgba(16, 20, 33, 0.46);
    font-size: clamp(0.74rem, 0.95vw, 1rem);
    font-weight: 760;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.architecture-kicker::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: rgba(16, 20, 33, 0.38);
}

.architecture-title {
    max-width: 21ch;
    margin: 0;
    color: #101421;
    font-size: clamp(3rem, 5vw, 5.8rem);
    line-height: 0.99;
    letter-spacing: 0;
}

.architecture-title::after {
    content: "";
    display: inline-block;
    width: 0.13em;
    height: 0.13em;
    margin-left: 0.05em;
    border-radius: 50%;
    background: #5d6bff;
    vertical-align: baseline;
}

.architecture-intro {
    margin: clamp(34px, 5vw, 64px) 0 0;
    color: rgba(16, 20, 33, 0.62);
    font-size: clamp(1rem, 1.35vw, 1.32rem);
    line-height: 1.46;
}

.architecture-map {
    min-height: clamp(360px, 42vh, 510px);
    margin-top: clamp(34px, 4vw, 54px);
    border: 1px solid rgba(16, 20, 33, 0.09);
    border-radius: clamp(24px, 3.2vw, 48px);
    background: rgba(255, 255, 255, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.architecture-rings {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(38vw, 500px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0.48;
    background:
        repeating-radial-gradient(circle, transparent 0 28px, rgba(72, 84, 116, 0.11) 29px 30px),
        radial-gradient(circle, rgba(92, 107, 255, 0.10), transparent 58%);
}

.architecture-connector {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 23%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(54, 125, 214, 0.72), transparent);
    transform-origin: left center;
}

.architecture-connector::before,
.architecture-connector::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: currentColor;
    box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 12%, transparent);
}

.architecture-connector::before {
    left: 0;
}

.architecture-connector::after {
    right: 0;
}

.architecture-connector--left {
    color: #2d8de7;
    transform: rotate(180deg);
}

.architecture-connector--top {
    color: #675cff;
    width: 15%;
    transform: rotate(-90deg);
}

.architecture-connector--right {
    color: #18b987;
}

.architecture-connector--bottom {
    color: #f2a12b;
    width: 15%;
    transform: rotate(90deg);
}

.architecture-core {
    position: absolute;
    left: 50%;
    top: 52%;
    display: grid;
    justify-items: center;
    transform: translate(-50%, -50%);
    text-align: center;
}

.architecture-core-mark {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4d5566, #202638 64%, #121724);
    color: #fff;
    font-size: 3rem;
    font-weight: 840;
    box-shadow: 0 20px 46px rgba(58, 72, 153, 0.28), 0 0 38px rgba(103, 92, 255, 0.38);
}

.architecture-core-mark img {
    display: block;
    width: 64%;
    height: 64%;
    object-fit: contain;
    transform: translateX(5%);
}

.architecture-core h2 {
    margin: 0;
    color: #101421;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.08;
}

.architecture-core p {
    margin: 10px 0 0;
    color: rgba(16, 20, 33, 0.58);
    font-size: 0.92rem;
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.architecture-node-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 270px;
    padding: 20px 24px;
    border: 1px solid rgba(16, 20, 33, 0.09);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 16px 44px rgba(17, 17, 17, 0.09);
    backdrop-filter: blur(18px);
}

.architecture-node-card--left {
    left: 7.4%;
    top: 49%;
    transform: translateY(-50%);
}

.architecture-node-card--top {
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
}

.architecture-node-card--right {
    right: 7.4%;
    top: 49%;
    transform: translateY(-50%);
}

.architecture-node-card--bottom {
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
}

.architecture-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.architecture-icon svg,
.architecture-benefit-icon svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.architecture-icon--blue {
    background: #d8eaff;
    color: #1d5da8;
}

.architecture-icon--violet {
    background: #dfd7ff;
    color: #5546dc;
}

.architecture-icon--mint {
    background: #cbf8e8;
    color: #0a7358;
}

.architecture-icon--amber {
    background: #fff0d7;
    color: #8c5510;
}

.architecture-node-card strong,
.architecture-benefit strong {
    display: block;
    color: #101421;
    font-size: 1.14rem;
    line-height: 1.16;
}

.architecture-node-card small,
.architecture-benefit small {
    display: block;
    margin-top: 8px;
    color: rgba(16, 20, 33, 0.58);
    font-size: 0.76rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.architecture-panel-bottom {
    display: grid;
    grid-template-columns: minmax(260px, 440px) 1fr;
    gap: clamp(28px, 4vw, 72px);
    align-items: center;
    margin-top: 28px;
    padding-top: 30px;
    border-top: 1px solid rgba(16, 20, 33, 0.10);
}

.architecture-panel-bottom h2 {
    margin: 0;
    color: #101421;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.16;
    letter-spacing: 0;
}

.architecture-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding-left: clamp(0px, 3vw, 56px);
    border-left: 1px solid rgba(16, 20, 33, 0.16);
}

.architecture-benefit {
    display: flex;
    align-items: center;
    gap: 16px;
}

.architecture-benefit-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(16, 20, 33, 0.045);
    color: #334056;
}

.architecture-panel-foot {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
    color: rgba(16, 20, 33, 0.42);
    font-size: 0.78rem;
    font-weight: 680;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.architecture-panel-foot span:first-child::after {
    content: "";
    display: inline-block;
    width: 58px;
    height: 1px;
    margin-left: 20px;
    background: rgba(16, 20, 33, 0.16);
    vertical-align: middle;
}

.architecture-panel-foot strong {
    margin-left: auto;
    color: rgba(16, 20, 33, 0.46);
    font: inherit;
}

@media (max-width: 1180px) {
    .architecture-panel-top,
    .architecture-panel-bottom {
        grid-template-columns: 1fr;
    }

    .architecture-intro {
        max-width: 620px;
        margin-top: 0;
    }

    .architecture-map {
        min-height: 720px;
    }

    .architecture-node-card--left,
    .architecture-node-card--right {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .architecture-node-card--left {
        top: 25%;
    }

    .architecture-node-card--right {
        top: 75%;
    }

    .architecture-node-card--bottom {
        bottom: 4%;
    }

    .architecture-connector--left,
    .architecture-connector--right {
        display: none;
    }

    .architecture-benefits {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .hero-architecture {
        padding-top: 18px;
    }

    .hero-architecture-container {
        padding-inline: 14px;
    }

    .architecture-panel {
        min-height: 0;
        padding: 22px;
        border-radius: 30px;
    }

    .architecture-title {
        font-size: clamp(2.25rem, 13vw, 3.45rem);
    }

    .architecture-map {
        display: grid;
        gap: 14px;
        min-height: 0;
        padding: 18px;
    }

    .architecture-rings,
    .architecture-connector {
        display: none;
    }

    .architecture-core,
    .architecture-node-card {
        position: static;
        transform: none;
    }

    .architecture-core {
        order: 1;
        padding: 16px 0;
    }

    .architecture-node-card {
        min-width: 0;
        padding: 16px;
        border-radius: 20px;
    }

    .architecture-node-card--top {
        order: 2;
    }

    .architecture-node-card--left {
        order: 3;
    }

    .architecture-node-card--right {
        order: 4;
    }

    .architecture-node-card--bottom {
        order: 5;
    }

    .architecture-icon {
        width: 52px;
        height: 52px;
    }

    .architecture-panel-bottom {
        margin-top: 22px;
        padding-top: 22px;
    }

    .architecture-benefits {
        grid-template-columns: 1fr;
    }

    .architecture-panel-foot {
        flex-wrap: wrap;
        gap: 12px;
        letter-spacing: 0.18em;
    }

    .architecture-panel-foot strong {
        flex-basis: 100%;
        margin-left: 0;
    }
}

.hero-right .architecture-panel {
    min-height: 610px;
    padding: 28px;
    border-radius: 34px;
    display: flex;
    align-items: stretch;
}

html:not(.light) .hero-right .architecture-panel {
    border-color: rgba(255, 255, 255, 0.11);
    background:
        radial-gradient(circle at 74% 22%, rgba(124, 58, 237, 0.30), transparent 32%),
        radial-gradient(circle at 18% 68%, rgba(37, 99, 235, 0.20), transparent 34%),
        linear-gradient(145deg, rgba(18, 24, 38, 0.96), rgba(8, 11, 19, 0.92));
    color: #f7f8fb;
    box-shadow: 0 26px 82px rgba(0, 0, 0, 0.38);
}

html:not(.light) .hero-right .architecture-panel::before {
    background:
        radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.16), transparent 24%),
        radial-gradient(circle at 88% 50%, rgba(124, 58, 237, 0.14), transparent 24%),
        radial-gradient(circle at 50% 80%, rgba(37, 99, 235, 0.10), transparent 22%);
}

.hero-right .architecture-panel-top {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

.hero-right .architecture-kicker {
    margin-bottom: 12px;
    font-size: 0.64rem;
    letter-spacing: 0.24em;
}

.hero-right .architecture-title {
    max-width: 28ch;
    font-size: clamp(1.34rem, 1.48vw, 1.68rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}

html:not(.light) .hero-right .architecture-title,
html:not(.light) .hero-right .architecture-core h2,
html:not(.light) .hero-right .architecture-node-card strong,
html:not(.light) .hero-right .architecture-benefit strong,
html:not(.light) .hero-right .architecture-panel-bottom h2 {
    color: #f7f8fb;
}

.hero-right .architecture-title span {
    display: block;
}

.hero-right .architecture-title::after {
    content: none;
}

.hero-right .architecture-intro {
    max-width: 27ch;
    margin: 30px 0 0;
    font-size: 0.78rem;
    line-height: 1.42;
}

.hero-right .architecture-map {
    flex: 1 1 auto;
    min-height: 552px;
    margin-top: 0;
    border-radius: 26px;
}

html:not(.light) .hero-right .architecture-map {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html:not(.light) .hero-right .architecture-rings {
    opacity: 0.38;
    background:
        repeating-radial-gradient(circle, transparent 0 28px, rgba(255, 255, 255, 0.12) 29px 30px),
        radial-gradient(circle, rgba(124, 58, 237, 0.22), transparent 58%);
}

.hero-right .architecture-rings {
    width: min(28vw, 360px);
}

.hero-right .architecture-connector {
    width: 18%;
}

.hero-right .architecture-core-mark {
    width: 74px;
    height: 74px;
    margin-bottom: 10px;
    font-size: 1.85rem;
}

.hero-right .architecture-core h2 {
    font-size: clamp(1rem, 1.3vw, 1.22rem);
}

.hero-right .architecture-core p {
    font-size: 0.62rem;
}

html:not(.light) .hero-right .architecture-core p,
html:not(.light) .hero-right .architecture-node-card small,
html:not(.light) .hero-right .architecture-benefit small {
    color: rgba(247, 248, 251, 0.58);
}

.hero-right .architecture-node-card {
    gap: 10px;
    min-width: 188px;
    padding: 13px 16px;
    border-radius: 20px;
}

html:not(.light) .hero-right .architecture-node-card {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(11, 12, 12, 0.78);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
}

.hero-right .architecture-node-card--left {
    left: 4%;
}

.hero-right .architecture-node-card--top {
    top: 4%;
}

.hero-right .architecture-node-card--right {
    right: 4%;
}

.hero-right .architecture-node-card--bottom {
    bottom: 4%;
}

.hero-right .architecture-icon {
    width: 46px;
    height: 46px;
}

.hero-right .architecture-icon svg,
.hero-right .architecture-benefit-icon svg {
    width: 20px;
    height: 20px;
}

.hero-right .architecture-node-card strong,
.hero-right .architecture-benefit strong {
    font-size: 0.94rem;
}

.hero-right .architecture-node-card small,
.hero-right .architecture-benefit small {
    margin-top: 5px;
    font-size: 0.55rem;
}

.hero-right .architecture-panel-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
}

html:not(.light) .hero-right .architecture-panel-bottom {
    border-top-color: rgba(255, 255, 255, 0.10);
}

.hero-right .architecture-panel-bottom h2 {
    font-size: clamp(0.96rem, 1.1vw, 1.08rem);
}

.hero-right .architecture-benefits {
    gap: 8px;
    padding-left: 0;
    border-left: 0;
}

.hero-right .architecture-benefit {
    gap: 10px;
}

.hero-right .architecture-benefit-icon {
    width: 34px;
    height: 34px;
}

html:not(.light) .hero-right .architecture-benefit-icon {
    background: rgba(255, 255, 255, 0.07);
    color: #dbeafe;
}

.hero-right .architecture-panel-foot {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.52rem;
    letter-spacing: 0.18em;
}

.hero-right .architecture-panel-foot span:first-child::after {
    width: 32px;
    margin-left: 10px;
}

.hero-right .architecture-panel-foot strong {
    margin-left: 0;
}

@media (max-width: 1320px) {
    .hero-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(460px, 0.92fr);
    }

    .hero-right .architecture-panel {
        padding: 22px;
    }

    .hero-right .architecture-panel-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-right .architecture-title {
        max-width: 30ch;
        font-size: clamp(1.18rem, 1.48vw, 1.44rem);
    }

    .hero-right .architecture-intro {
        max-width: 36ch;
        margin-top: 0;
    }

    .hero-right .architecture-node-card {
        min-width: 148px;
    }

    .hero-right .architecture-node-card--left {
        left: 2%;
    }

    .hero-right .architecture-node-card--right {
        right: 2%;
    }

    .hero-proof-strip {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hero-proof-strip .architecture-benefits {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 1160px) {
    .hero-right .architecture-panel {
        padding: 30px;
        min-height: 0;
    }

    .hero-right .architecture-panel-top {
        grid-template-columns: 1fr;
    }

    .hero-right .architecture-title {
        max-width: 18ch;
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .hero-right .architecture-intro {
        margin-top: 44px;
    }

    .hero-right .architecture-map {
        min-height: 500px;
    }

    .hero-right .architecture-node-card--left {
        top: 22%;
    }

    .hero-right .architecture-node-card--right {
        top: 78%;
    }
}

:root { --blog-link: #93c5fd; }
html.light { --blog-link: #1d4ed8; }

.blog-lab-hero {
    position: relative;
    overflow: hidden;
    padding: 118px 0 74px;
    background:
        radial-gradient(circle at 78% 18%, rgba(124, 58, 237, 0.34), transparent 30%),
        radial-gradient(circle at 24% 72%, rgba(37, 99, 235, 0.22), transparent 34%),
        linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 62%, var(--bg-3) 100%);
    color: var(--text);
}

.blog-lab-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(to right, var(--border-strong) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border-strong) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(180deg, black, transparent 82%);
    pointer-events: none;
}

.blog-lab-head,
.blog-featured,
.blog-section-head {
    position: relative;
    z-index: 1;
}

.blog-lab-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
    gap: 42px;
    align-items: end;
    margin-bottom: 42px;
}

.blog-lab-mark,
.blog-visual-mark {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    object-fit: contain;
    filter: drop-shadow(0 18px 34px rgba(37, 99, 235, 0.30));
}

.blog-lab-eyebrow {
    margin: 0 0 10px;
    color: var(--soft);
    font-size: 0.76rem;
    font-weight: 760;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.blog-lab-title {
    max-width: 12ch;
    margin: 0;
    color: var(--text);
    font-size: clamp(3.4rem, 7vw, 7rem);
    line-height: 0.92;
    letter-spacing: 0;
}

.blog-lab-intro {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: clamp(1rem, 1.3vw, 1.22rem);
    line-height: 1.58;
}

.blog-featured {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(300px, 0.9fr);
    gap: 0;
    overflow: hidden;
    align-items: stretch;
    border: 1px solid rgba(124, 58, 237, 0.42);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.blog-featured-copy {
    padding: clamp(26px, 3vw, 42px);
}

.blog-featured h2 {
    max-width: 18ch;
    margin: 0 0 14px;
    color: var(--text);
    font-size: clamp(1.65rem, 2.7vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.blog-featured h2 a,
.blog-featured-link {
    color: inherit;
    text-decoration: none;
}

.blog-featured time {
    display: block;
    margin-bottom: 18px;
    color: var(--soft);
    font-size: 0.82rem;
}

.blog-featured p {
    max-width: 62ch;
    color: var(--muted);
    line-height: 1.7;
}

.blog-featured-link {
    display: inline-flex;
    margin-top: 8px;
    color: var(--blog-link);
    font-weight: 760;
}

.blog-featured-visual,
.blog-card-media {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    background:
        radial-gradient(circle at 72% 24%, rgba(124, 58, 237, 0.84), transparent 30%),
        radial-gradient(circle at 22% 72%, rgba(37, 99, 235, 0.74), transparent 34%),
        linear-gradient(135deg, #2563eb, #7c3aed);
}

.blog-featured-visual {
    display: grid;
    place-items: center;
    border-left: 1px solid var(--border);
}

.blog-featured-visual::before,
.blog-card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.26) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.26) 1px, transparent 1px);
    background-size: 32px 32px;
}

.blog-featured-visual .blog-visual-mark {
    width: 142px;
    height: 142px;
    margin: 0;
    transform: scale(1.35);
}

.blog-featured-visual--image {
    background: #090b10;
    min-height: 0;
    aspect-ratio: 16 / 10;
}

.blog-featured-visual--image::before {
    content: none;
}

.blog-featured-visual > .blog-featured-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-index-section {
    background: var(--bg-2);
}

.blog-section-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 26px;
}

.blog-section-head h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.blog-section-head p {
    margin: 0;
    color: var(--soft);
    font-size: 0.78rem;
    font-weight: 720;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.blog-index-section .blog-filter-link {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--muted);
}

.blog-index-section .blog-filter-link:hover,
.blog-index-section .blog-filter-link.active {
    border-color: rgba(124, 58, 237, 0.58);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(124, 58, 237, 0.20));
    color: var(--text);
}

.blog-index-section .blog-card {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.blog-index-section .blog-card:hover {
    border-color: rgba(124, 58, 237, 0.50);
    background: var(--surface-2);
}

.blog-card-generated-visual {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.blog-card-media .blog-visual-mark {
    margin: 0;
    transform: scale(1.15);
}

.blog-index-section .blog-card-title a,
.blog-index-section .blog-card-link {
    color: var(--text);
}

.blog-index-section .blog-card-kicker {
    color: var(--blog-link);
}

.blog-index-section .blog-card-date,
.blog-index-section .blog-card-excerpt {
    color: var(--muted);
}

@media (max-width: 980px) {
    .blog-lab-head,
    .blog-featured {
        grid-template-columns: 1fr;
    }

    .blog-featured-visual {
        min-height: 260px;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .blog-featured-visual--image {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 680px) {
    .blog-lab-hero {
        padding: 94px 0 54px;
    }

    .blog-section-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Homepage V3 */
.v3-hero {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    padding: clamp(58px, 7vw, 96px) 0 clamp(46px, 6vw, 82px);
}

.v3-hero-grid {
    display: grid;
    grid-template-columns: minmax(520px, 0.98fr) minmax(320px, 0.82fr);
    gap: clamp(44px, 7vw, 118px);
    align-items: center;
}

.v3-hero-copy h1 {
    max-width: 9.5ch;
    margin: 0;
    font-size: clamp(4rem, 7.35vw, 8.05rem);
    line-height: 0.9;
    letter-spacing: -0.055em;
}

.v3-hero-copy h1 > span {
    display: block;
}

.v3-gradient-text {
    background-image: linear-gradient(112deg, #2563eb 0%, #7c3aed 52%, #60ecff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.v3-hero-text {
    max-width: 540px;
    margin: clamp(22px, 2.2vw, 30px) 0 0;
    color: var(--muted);
    font-size: clamp(1.06rem, 1.25vw, 1.22rem);
    line-height: 1.62;
}

.v3-hero-actions {
    margin-top: 28px;
}

.v3-section-head {
    display: grid;
    gap: 14px;
    max-width: 760px;
    margin-bottom: clamp(24px, 3vw, 36px);
}

.v3-page-hero {
    display: grid;
    gap: 18px;
    max-width: 960px;
    padding: clamp(16px, 2vw, 28px) 0 8px;
}

.v3-page-hero h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--text);
    font-size: clamp(3.3rem, 7.4vw, 8rem);
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.v3-page-hero p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.12rem, 1.45vw, 1.38rem);
    line-height: 1.62;
}

.v3-product-hero-visual { min-width: 0; margin: 0; }
.v3-product-hero-visual figcaption { margin-top: 10px; color: var(--muted); font-size: .8rem; text-align: right; }
.v3-product-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: var(--shadow-md);
}
.v3-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.v3-product-actions a { white-space: normal; text-align: center; }

@media (max-width: 980px) {
    .v3-product-hero-visual { max-width: 760px; }
}
@media (max-width: 600px) {
    .v3-product-actions { align-items: stretch; flex-direction: column; }
    .v3-product-actions a { width: 100%; }
    .v3-product-hero-visual img { border-radius: 22px; }
}

.v3-service-list {
    border-top: 1px solid var(--border);
}

.v3-service-list--large {
    margin-top: -28px;
}

.v3-service-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: clamp(20px, 4vw, 68px);
    align-items: center;
    padding: clamp(24px, 3vw, 38px) 0;
    border-bottom: 1px solid var(--border);
}

.v3-service-item > span {
    color: var(--soft);
    font-size: 0.8rem;
    font-weight: 760;
    letter-spacing: 0.16em;
}

.v3-service-item h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.55rem, 2.6vw, 3rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.v3-service-item p {
    max-width: 660px;
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.v3-service-item a,
.v3-section-action a {
    white-space: nowrap;
}

.v3-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.v3-work-grid--page {
    gap: 22px;
}

.v3-work-card {
    min-height: 430px;
    display: grid;
    grid-template-rows: minmax(190px, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: linear-gradient(145deg, var(--surface-2), var(--surface-soft));
    box-shadow: var(--shadow-md);
}

a.v3-work-card {
    color: inherit;
    text-decoration: none;
}

a.v3-work-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.v3-work-card--case {
    min-height: 560px;
}

.v3-work-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 28%, rgba(96, 236, 255, 0.20), transparent 30%),
        radial-gradient(circle at 72% 64%, rgba(124, 58, 237, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(37, 99, 235, 0.16), rgba(8, 11, 19, 0.10));
}

.v3-work-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    object-position: center;
    transition: transform 320ms ease;
}

/* Keep the AI Core logo and copy visible when cover crops the artwork. */
.v3-work-visual img.v3-work-image--left {
    object-position: left center;
}

a.v3-work-card:hover .v3-work-visual img {
    transform: scale(1.015);
}

.v3-work-visual--full {
    background: #080d17;
}

.v3-work-visual--full img {
    object-fit: contain;
}

/* Artwork with embedded copy must remain fully visible, including on hover. */
a.v3-work-card:hover .v3-work-visual--full img {
    transform: none;
}

.v3-work-visual span {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 820;
    letter-spacing: 0.12em;
    background: rgba(255, 255, 255, 0.06);
}

.v3-work-body {
    padding: 28px;
}

.v3-work-body p {
    margin: 0 0 10px;
    color: var(--soft);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.v3-work-body h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.7rem, 2.7vw, 3rem);
    letter-spacing: -0.04em;
}

.v3-work-body span {
    display: block;
    max-width: 48ch;
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.65;
}

.v3-case-points {
    display: grid;
    gap: 14px;
    margin: 24px 0 0;
}

.v3-case-points div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.v3-case-points dt {
    color: var(--soft);
    font-size: 0.7rem;
    font-weight: 780;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.v3-case-points dd {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.v3-client-work {
    display: grid;
    grid-template-columns: minmax(260px, 0.5fr) minmax(0, 1fr);
    gap: clamp(26px, 5vw, 82px);
    align-items: start;
    padding-top: clamp(26px, 4vw, 48px);
    border-top: 1px solid var(--border);
}

.v3-client-work h2 {
    max-width: 14ch;
    margin: 12px 0 0;
    color: var(--text);
    font-size: clamp(2rem, 4vw, 4.7rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.v3-client-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.v3-client-list a {
    display: grid;
    gap: 6px;
    min-height: 98px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.035);
    text-decoration: none;
}

.v3-client-list span {
    color: var(--text);
    font-weight: 760;
}

.v3-client-list small {
    color: var(--soft);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.v3-case-system {
    display: grid;
    grid-template-columns: minmax(280px, 0.45fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 88px);
    align-items: center;
    padding: clamp(34px, 5vw, 72px);
    border: 1px solid var(--border);
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 24%, rgba(37, 99, 235, 0.16), transparent 32%),
        radial-gradient(circle at 82% 64%, rgba(124, 58, 237, 0.14), transparent 32%),
        linear-gradient(145deg, var(--surface-2), var(--surface-soft));
}

.v3-case-system img {
    width: 86px;
    height: 86px;
    margin-bottom: 26px;
    filter: drop-shadow(0 20px 42px rgba(37, 99, 235, 0.30));
}

.v3-case-system p {
    max-width: 42ch;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.08rem, 1.35vw, 1.28rem);
    line-height: 1.65;
}

.v3-case-diagram {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
}

.v3-case-diagram span {
    min-height: 160px;
    display: grid;
    place-items: center;
    padding: 18px;
    border-right: 1px solid var(--border);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 780;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.035);
}

.v3-case-diagram span:last-child {
    border-right: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.16), transparent 56%),
        rgba(255, 255, 255, 0.045);
}

.v3-case-section-list {
    border-top: 1px solid var(--border);
}

.v3-section-action {
    margin-top: 26px;
}

.v3-system-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 92px);
    align-items: center;
    padding: clamp(34px, 5vw, 72px);
    border: 1px solid var(--border);
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.16), transparent 32%),
        linear-gradient(145deg, var(--surface-2), var(--surface-soft));
}

.v3-system-panel h2 {
    max-width: 12ch;
    margin: 12px 0 0;
    color: var(--text);
    font-size: clamp(2.2rem, 4.2vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.v3-contact-shell {
    display: grid;
    grid-template-columns: minmax(280px, 0.44fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 82px);
    align-items: start;
    padding: clamp(28px, 4vw, 54px);
    border: 1px solid var(--border);
    border-radius: 34px;
    background: linear-gradient(145deg, var(--surface-2), var(--surface-soft));
}

.v3-contact-guidance h2 {
    max-width: 11ch;
    margin: 12px 0 28px;
    color: var(--text);
    font-size: clamp(2rem, 4vw, 4.6rem);
    line-height: 0.96;
    letter-spacing: -0.052em;
}

.v3-contact-form form {
    display: grid;
    gap: 16px;
}

.v3-contact-form label {
    color: var(--soft);
    font-size: 0.82rem;
    font-weight: 720;
}

.v3-contact-form input,
.v3-contact-form textarea,
.v3-contact-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    padding: 14px 16px;
}

.v3-contact-form textarea {
    min-height: 190px;
}

.v3-system-flow {
    display: grid;
}

.v3-system-flow span {
    position: relative;
    padding: 18px 0 22px 34px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    font-weight: 720;
}

.v3-system-flow span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 0 24px rgba(37, 99, 235, 0.34);
}

.v3-system-flow span:not(:last-child)::after {
    content: "↓";
    position: absolute;
    left: 1px;
    bottom: -12px;
    color: var(--soft);
    font-size: 0.8rem;
}

.v3-brand-moment {
    display: grid;
    justify-items: center;
    gap: clamp(22px, 3vw, 34px);
    padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 80px);
    border: 1px solid var(--border);
    border-radius: 42px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 16%, rgba(37, 99, 235, 0.20), transparent 30%),
        radial-gradient(circle at 50% 72%, rgba(124, 58, 237, 0.18), transparent 34%),
        linear-gradient(145deg, var(--surface-soft), rgba(255, 255, 255, 0.02));
}

.v3-brand-moment img {
    width: clamp(76px, 9vw, 130px);
    height: clamp(76px, 9vw, 130px);
    object-fit: contain;
    filter: drop-shadow(0 22px 48px rgba(37, 99, 235, 0.32));
}

.v3-brand-moment h2 {
    display: grid;
    gap: 0.08em;
    margin: 0;
    color: var(--text);
    font-size: clamp(3rem, 8vw, 8.2rem);
    line-height: 0.9;
    letter-spacing: 0;
}

.v3-brand-moment h2 span {
    opacity: 1;
}

.v3-brand-moment p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.4vw, 1.32rem);
    line-height: 1.65;
}

.v3-brand-principles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.v3-brand-principles span {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--soft);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.82rem;
    font-weight: 680;
}

.v3-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--surface-2), var(--surface-soft));
}

.v3-process article {
    position: relative;
    min-height: 260px;
    padding: clamp(24px, 3vw, 40px);
}

.v3-process article + article {
    border-left: 1px solid var(--border);
}

.v3-process article + article::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -22px;
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.v3-process span {
    color: var(--soft);
    font-size: 0.75rem;
    font-weight: 760;
    letter-spacing: 0.18em;
}

.v3-process h3 {
    margin: 64px 0 12px;
    color: var(--text);
    font-size: clamp(1.7rem, 2.8vw, 3.2rem);
    letter-spacing: -0.04em;
}

.v3-process p {
    max-width: 28ch;
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.v3-cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(34px, 5vw, 72px);
    border: 1px solid var(--border);
    border-radius: 34px;
    background:
        radial-gradient(circle at 78% 20%, rgba(96, 236, 255, 0.16), transparent 26%),
        linear-gradient(135deg, var(--surface-2), var(--surface-soft));
}

.v3-cta-panel h2 {
    max-width: 12ch;
    margin: 10px 0 0;
    color: var(--text);
    font-size: clamp(2.4rem, 5vw, 5.8rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.v3-cta-panel p {
    max-width: 620px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

html.light .v3-brand-moment,
html.light .v3-process,
html.light .v3-work-card,
html.light .v3-system-panel,
html.light .v3-case-system,
html.light .v3-cta-panel {
    background:
        radial-gradient(circle at 22% 18%, rgba(37, 99, 235, 0.10), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(124, 58, 237, 0.10), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(238, 241, 246, 0.70));
}

@media (max-width: 980px) {
    .v3-hero-grid,
    .v3-work-grid,
    .v3-process,
    .v3-system-panel,
    .v3-client-work,
    .v3-contact-shell,
    .v3-case-system {
        grid-template-columns: 1fr;
    }

    .v3-service-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .v3-service-item a {
        grid-column: 2;
        justify-self: start;
    }

    .v3-process article + article {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .v3-process article + article::before {
        display: none;
    }

    .v3-cta-panel {
        display: grid;
        justify-items: start;
    }

    .v3-client-list {
        grid-template-columns: 1fr;
    }

    .v3-case-diagram {
        grid-template-columns: 1fr;
    }

    .v3-case-diagram span {
        min-height: 76px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .v3-case-diagram span:last-child {
        border-bottom: 0;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .v3-hero-grid {
        grid-template-columns: minmax(430px, 0.95fr) minmax(300px, 0.72fr);
        gap: clamp(34px, 5vw, 64px);
    }

    .v3-hero-copy h1 {
        font-size: clamp(4.6rem, 7.2vw, 5.7rem);
    }
}

@media (max-width: 720px) {
    .v3-hero {
        min-height: auto;
        padding-top: 74px;
    }

    .v3-hero-copy h1 {
        max-width: 9.4ch;
        font-size: clamp(3.15rem, 14.5vw, 4.7rem);
    }

    .v3-page-hero h1 {
        font-size: clamp(3rem, 14vw, 4.8rem);
    }

    .v3-case-points div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .v3-work-card {
        min-height: 360px;
        border-radius: 24px;
    }

    .v3-brand-moment,
    .v3-cta-panel {
        border-radius: 28px;
    }
}

.technologies-ai-hero .hero-kicker {
    color: #8fb8ff;
}

.ai-stack-advisor {
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.14), transparent 30%),
        radial-gradient(circle at 82% 82%, rgba(124, 58, 237, 0.14), transparent 32%),
        linear-gradient(145deg, var(--surface-2), var(--surface-soft));
}

.ai-stack-option,
.ai-stack-result {
    border-radius: 20px;
}

.ai-stack-option.is-active {
    border-color: rgba(96, 236, 255, 0.28);
}

.ai-stack-result h3 {
    letter-spacing: -0.035em;
}

body.craftec-blog-readable-page {
    color: #111827;
    background: #ffffff;
}

body.craftec-blog-readable-page .ambient-architecture,
body.craftec-blog-readable-page .grid-overlay,
body.craftec-blog-readable-page .vignette,
body.craftec-blog-readable-page .grain {
    display: none;
}

body.craftec-blog-readable-page .site,
body.craftec-blog-readable-page main {
    background: #ffffff;
}

body.craftec-blog-readable-page .blog-article-readable {
    color: #111827;
    background:
        linear-gradient(180deg, #f8fafc 0, #ffffff 390px),
        #ffffff;
}

body.craftec-blog-readable-page .blog-readable-container {
    max-width: 1080px;
}

body.craftec-blog-readable-page .blog-readable-hero {
    padding: 96px 0 56px;
    border-bottom: 1px solid #e5e7eb;
}

body.craftec-blog-readable-page .blog-post-taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    color: var(--blog-readable-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

body.craftec-blog-readable-page .blog-post-taxonomy a {
    text-decoration: none;
}

body.craftec-blog-readable-page .blog-post-insights {
    color: var(--blog-readable-muted);
}

body.craftec-blog-readable-page .blog-post-category {
    margin-bottom: 0;
    color: #2563eb;
}

body.craftec-blog-readable-page .blog-post-taxonomy a:hover {
    color: var(--blog-readable-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.craftec-blog-readable-page .blog-post-taxonomy a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
}

body.craftec-blog-readable-page .blog-readable-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
}

body.craftec-blog-readable-page .blog-readable-title-row h1 {
    max-width: 980px;
    margin: 0;
    color: #030712;
    font-size: clamp(3.25rem, 8vw, 7.25rem);
    font-weight: 760;
    line-height: 0.92;
    letter-spacing: -0.035em;
}

body.craftec-blog-readable-page .blog-readable-edit {
    padding-top: 10px;
}

body.craftec-blog-readable-page .blog-readable-dek {
    max-width: 760px;
    margin: 28px 0 0;
    color: #4b5563;
    font-size: clamp(1.25rem, 1.5vw, 1.58rem);
    line-height: 1.45;
}

body.craftec-blog-readable-page .blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 28px;
    color: #6b7280;
}

body.craftec-blog-readable-page .blog-post-meta > * + *::before {
    padding-right: 16px;
    color: #d1d5db;
    content: "/";
}

body.craftec-blog-readable-page .blog-readable-media {
    max-width: 1180px;
    margin-top: 44px;
    margin-bottom: 0;
}

body.craftec-blog-readable-page .blog-readable-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    background: #f3f4f6;
}

body.craftec-blog-readable-page .blog-readable-section {
    padding: 72px 0 64px;
}

body.craftec-blog-readable-page .blog-readable-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 860px) minmax(0, 190px);
    gap: 48px;
    max-width: 1180px;
    align-items: start;
}

body.craftec-blog-readable-page .blog-readable-rail {
    min-width: 0;
}

body.craftec-blog-readable-page .blog-readable-rail-inner {
    position: sticky;
    top: 112px;
}

body.craftec-blog-readable-page .blog-readable-rail .share-buttons {
    display: grid;
    gap: 10px;
    padding: 0 0 0 18px;
    border-left: 1px dashed #cbd5e1;
    list-style: none;
}

body.craftec-blog-readable-page .blog-article-shell {
    max-width: none;
    margin: 0;
}

body.craftec-blog-readable-page .blog-article-content {
    color: #1f2937;
    font-size: clamp(1.13rem, 0.45vw + 1rem, 1.28rem);
    line-height: 1.84;
}

body.craftec-blog-readable-page .blog-article-content p {
    margin-bottom: 1.35em;
}

body.craftec-blog-readable-page .blog-article-content h2,
body.craftec-blog-readable-page .blog-article-content h3,
body.craftec-blog-readable-page .blog-article-content h4 {
    color: #030712;
    font-weight: 760;
    letter-spacing: -0.02em;
}

body.craftec-blog-readable-page .blog-article-content h2 {
    font-size: clamp(2rem, 3vw, 2.9rem);
}

body.craftec-blog-readable-page .blog-article-content h3 {
    font-size: clamp(1.5rem, 2vw, 2rem);
}

body.craftec-blog-readable-page .blog-article-content a {
    color: #1d4ed8;
    text-decoration-color: rgba(37, 99, 235, 0.45);
}

body.craftec-blog-readable-page .blog-article-content blockquote {
    padding-left: 22px;
    margin: 36px 0;
    color: #374151;
    border-left: 4px solid #2563eb;
}

body.craftec-blog-readable-page .blog-article-content pre,
body.craftec-blog-readable-page .blog-article-content code {
    color: #111827;
    background: #f3f4f6;
}

body.craftec-blog-readable-page .blog-article-content pre {
    padding: 18px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

body.craftec-blog-readable-page .blog-comments {
    border-top-color: #e5e7eb;
}

body.craftec-blog-readable-page .blog-post-nav {
    max-width: 1180px;
    padding-top: 0;
    border-top: 1px solid #e5e7eb;
}

body.craftec-blog-readable-page .blog-post-nav-link {
    color: #111827;
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

@media (max-width: 991.98px) {
    body.craftec-blog-readable-page .blog-readable-body-grid {
        display: block;
        max-width: 820px;
    }

    body.craftec-blog-readable-page .blog-readable-rail {
        margin-top: 36px;
    }

    body.craftec-blog-readable-page .blog-readable-rail .share-buttons {
        padding: 18px 0 0;
        border-top: 1px dashed #cbd5e1;
        border-left: 0;
    }
}

body.craftec-blog-readable-page .blog-scroll-nav {
    position: fixed;
    z-index: 20;
    top: 50%;
    right: 28px;
    display: grid;
    gap: 8px;
    transform: translateY(-50%);
}

body.craftec-blog-readable-page .blog-scroll-nav__item {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--blog-readable-muted);
    opacity: .35;
    transition: width .2s ease, opacity .2s ease, background .2s ease;
}

body.craftec-blog-readable-page .blog-scroll-nav__item:hover,
body.craftec-blog-readable-page .blog-scroll-nav__item.is-active {
    width: 22px;
    background: var(--blog-readable-ink);
    opacity: 1;
}

@media (max-width: 767.98px) {
    body.craftec-blog-readable-page .blog-scroll-nav { display: none; }
}

@media (max-width: 767.98px) {
    body.craftec-blog-readable-page .blog-readable-hero {
        padding: 72px 0 42px;
    }

    body.craftec-blog-readable-page .blog-readable-title-row {
        display: block;
    }

    body.craftec-blog-readable-page .blog-readable-title-row h1 {
        font-size: clamp(2.65rem, 13vw, 4.4rem);
    }

    body.craftec-blog-readable-page .blog-readable-edit {
        margin-top: 18px;
        padding-top: 0;
    }

    body.craftec-blog-readable-page .blog-post-meta {
        display: block;
    }

    body.craftec-blog-readable-page .blog-post-meta > * {
        display: block;
        margin-top: 6px;
    }

    body.craftec-blog-readable-page .blog-post-meta > * + *::before {
        content: none;
    }
}

/* Readable article: keep the editorial rail visible while the article scrolls. */
body.craftec-blog-readable-page .blog-readable-rail {
    min-height: 100%;
    padding-left: 24px;
    border-left: 1px dashed var(--blog-readable-border);
}

body.craftec-blog-readable-page .blog-readable-rail-inner {
    position: sticky;
    top: 120px;
}

body.craftec-blog-readable-page .blog-readable-rail .share-buttons {
    padding-left: 0;
    border-left: 0;
}

body.craftec-blog-readable-page .blog-readable-edit .btn {
    min-height: 44px;
    padding: 10px 18px;
    color: var(--blog-readable-ink);
    background: transparent;
    border: 1px solid var(--blog-readable-ink);
    box-shadow: none;
}

body.craftec-blog-readable-page .blog-readable-edit .btn:hover {
    color: var(--blog-readable-button-text);
    background: var(--blog-readable-ink);
}

body.craftec-blog-readable-page {
    --blog-readable-bg: #ffffff;
    --blog-readable-surface: #f8fafc;
    --blog-readable-ink: #111827;
    --blog-readable-muted: #64748b;
    --blog-readable-border: #dbe2ea;
    --blog-readable-button-text: #ffffff;
    color: var(--blog-readable-ink);
    background: var(--blog-readable-bg);
}

html:not(.light) body.craftec-blog-readable-page {
    --blog-readable-bg: #0b0d11;
    --blog-readable-surface: #12161d;
    --blog-readable-ink: #f8fafc;
    --blog-readable-muted: #aab5c4;
    --blog-readable-border: #334155;
    --blog-readable-button-text: #0b0d11;
}

body.craftec-blog-readable-page .blog-article-readable,
body.craftec-blog-readable-page .site,
body.craftec-blog-readable-page main {
    color: var(--blog-readable-ink);
    background: var(--blog-readable-bg);
}

body.craftec-blog-readable-page .blog-readable-hero {
    background: var(--blog-readable-bg);
    border-bottom-color: var(--blog-readable-border);
}

body.craftec-blog-readable-page .blog-readable-title-row h1,
body.craftec-blog-readable-page .blog-article-content h2,
body.craftec-blog-readable-page .blog-article-content h3,
body.craftec-blog-readable-page .blog-article-content h4 {
    color: var(--blog-readable-ink);
}

body.craftec-blog-readable-page .blog-readable-dek,
body.craftec-blog-readable-page .blog-post-meta,
body.craftec-blog-readable-page .blog-article-content {
    color: var(--blog-readable-muted);
}

body.craftec-blog-readable-page .article-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    align-items: baseline;
    max-width: 760px;
    margin-top: 16px;
    color: var(--blog-readable-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

body.craftec-blog-readable-page .article-topics__item {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 150ms ease;
}

body.craftec-blog-readable-page .article-topics__item::before {
    color: var(--blog-readable-border);
    content: "#";
}

body.craftec-blog-readable-page .article-topics__item:hover {
    color: var(--blog-readable-ink);
    text-decoration: underline;
}

body.craftec-blog-readable-page .article-topics__item:focus-visible {
    color: var(--blog-readable-ink);
    text-decoration: underline;
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

body.craftec-blog-readable-page .blog-readable-media img {
    border-color: var(--blog-readable-border);
}

body.craftec-blog-readable-page .blog-comments,
body.craftec-blog-readable-page .blog-post-nav {
    border-color: var(--blog-readable-border);
}

body.craftec-blog-readable-page .blog-post-nav {
    gap: 0;
    padding-bottom: 88px;
}

body.craftec-blog-readable-page .blog-post-nav-link {
    position: relative;
    width: 50%;
    max-width: none;
    min-height: 126px;
    padding: 30px 8px 30px 54px;
    color: var(--blog-readable-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: background-color 160ms ease, color 160ms ease;
}

body.craftec-blog-readable-page .blog-post-nav-link::after {
    position: absolute;
    top: 50%;
    left: 18px;
    color: var(--blog-readable-muted);
    font-size: 1.35rem;
    content: "←";
    transform: translateY(-50%);
    transition: transform 160ms ease;
}

body.craftec-blog-readable-page .blog-post-nav-link-next {
    padding-right: 54px;
    padding-left: 8px;
    border-left: 1px solid var(--blog-readable-border);
    text-align: right;
}

body.craftec-blog-readable-page .blog-post-nav-link-next::after {
    right: 18px;
    left: auto;
    content: "→";
}

body.craftec-blog-readable-page .blog-post-nav-link__direction {
    color: var(--blog-readable-muted);
}

body.craftec-blog-readable-page .blog-post-nav-link strong {
    max-width: 34rem;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.35;
}

body.craftec-blog-readable-page .blog-post-nav-link:hover {
    color: var(--blog-readable-ink);
    background: var(--blog-readable-surface);
}

body.craftec-blog-readable-page .blog-post-nav-link:hover::after {
    transform: translate(-4px, -50%);
}

body.craftec-blog-readable-page .blog-post-nav-link-next:hover::after {
    transform: translate(4px, -50%);
}

body.craftec-blog-readable-page .blog-post-nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

@media (max-width: 991.98px) {
    body.craftec-blog-readable-page .blog-readable-rail {
        min-height: 0;
        padding: 24px 0 0;
        border-top: 1px dashed var(--blog-readable-border);
        border-left: 0;
    }
}

@media (max-width: 680px) {
    body.craftec-blog-readable-page .blog-post-nav {
        display: grid;
        padding-bottom: 64px;
    }

    body.craftec-blog-readable-page .blog-post-nav-link {
        width: 100%;
        min-height: 0;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    body.craftec-blog-readable-page .blog-post-nav-link-next {
        border-top: 1px solid var(--blog-readable-border);
        border-left: 0;
    }
}

/* Client needs: shared home/services cards, natural localized content height. */
.services-closing-section { padding-bottom:clamp(64px,8vw,112px); }
.services-support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 48px; margin-top:32px; }
.services-support-item { min-width:0; border-top:1px solid var(--border); padding-top:24px; }
.services-support-item h3 { font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.3; margin:0 0 12px; }
.services-support-item p,.services-closing-panel p { color:var(--muted); line-height:1.7; max-width:65ch; }
.services-closing-panel { padding:clamp(24px,4vw,56px); border:1px solid var(--border); border-radius:24px; background:var(--surface); }
.services-closing-panel h2 { font-size:clamp(1.8rem,4vw,3rem); line-height:1.15; margin:0 0 20px; }
@media(max-width:800px) { .services-support-grid { grid-template-columns:1fr; } }
.services-closing-action { margin-top:32px; }
.services-closing-section a { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.services-closing-action .btn { gap:12px; }
.capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:32px 0; }
.capability-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:clamp(22px,3vw,40px); border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.capability-card h3 { font-size:clamp(1.4rem,2.3vw,2rem); line-height:1.2; margin:16px 0; }
.capability-card p,.capability-callout p { color:var(--muted); line-height:1.7; }
.capability-links { display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:auto; padding-top:20px; }
.capability-links a,.capability-callout a,.v3-hero-actions a { white-space:normal; overflow-wrap:anywhere; }
.capability-proof { color:var(--muted); font-size:.9rem; }
.capability-callout { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:28px 0; border-top:1px solid var(--border); }
.capability-callout>div { flex:1; min-width:0; }
.capability-callout>a { flex:0 1 260px; }
.capability-callout h3 { font-size:1.4rem; line-height:1.3; }
.capability-callout p { max-width:780px; margin-bottom:0; }
.v3-hero-copy .reveal-line>span { transform:none; opacity:1; animation:none; }
.v3-hero-copy .v3-hero-text,.v3-hero-copy .v3-hero-actions { opacity:1; transform:none; }
.v3-hero-actions { display:flex; flex-wrap:wrap; gap:16px; }
.v3-work-section .v3-work-visual { aspect-ratio:16/10; }
.v3-work-section .v3-work-visual img { width:100%; height:100%; object-fit:contain; transform:none; }
.capability-card a:focus-visible,.capability-callout a:focus-visible,.v3-work-card a:focus-visible { outline:3px solid var(--accent,#38bdf8); outline-offset:5px; }
#capabilities,#integrations { scroll-margin-top:100px; }
.v3-brand-moment h2 { font-size:clamp(1.8rem,4vw,3.4rem); line-height:1.15; }
@media(max-width:800px) { .capability-grid { grid-template-columns:1fr; } .capability-callout { flex-direction:column; align-items:flex-start; gap:16px; } .capability-callout>a { flex:auto; } }
@media(max-width:400px) {
    .header .nav { gap:6px; }
    .header .brand { gap:8px; }
    .header .nav-actions { flex:0 1 auto; min-width:0; gap:6px; margin-right:0; }
    .header .nav-cta { min-width:0; white-space:normal; }
    .header .nav-cta-mobile { overflow-wrap:anywhere; }
    .header .nav-cta > [aria-hidden] { flex-shrink:0; }
}
.v3-work-body p.work-description { margin:14px 0 20px; color:var(--muted); font-size:1rem; font-weight:400; letter-spacing:normal; text-transform:none; line-height:1.65; }
.v3-work-section .v3-work-visual { position:relative; }
.v3-work-visual .work-visual-label { position:absolute; bottom:10px; left:12px; display:block; width:auto; height:auto; padding:5px 10px; border-radius:8px; font-size:.75rem; font-weight:500; letter-spacing:normal; background:var(--surface); }

/* Compact navigation: keep the brand and menu as the only mobile header actions. */
@media (max-width:1240px) {
    .header .nav-actions { display:none; }
    .header .nav-mobile-toggle { margin-left:auto; }
    .header .nav-mobile-panel { max-height:calc(100dvh - 90px); overflow-y:auto; overscroll-behavior:contain; }
    .header .nav-mobile-panel > a:not(.btn) { background:transparent; border-color:transparent; font-size:1.1rem; min-height:44px; }
    .header .nav-mobile-panel .nav-mobile-contact { background:var(--text); color:var(--bg); border-color:var(--text); white-space:normal; gap:12px; min-height:48px; }
    .nav-mobile-account { display:grid; gap:8px; border-top:1px solid var(--border); margin-top:16px; padding-top:16px; }
    .nav-mobile-account .nav-account-summary { padding:0 12px 8px; overflow-wrap:anywhere; }
    .nav-mobile-account a { min-height:44px; }
}

/* Blue-violet display capsule. Native details/forms keep language navigation usable without JS. */
.utility-dock::before,html.light .utility-dock::before {
    background:radial-gradient(ellipse at 20% 50%,rgba(46,183,255,.2),transparent 65%),radial-gradient(ellipse at 85% 50%,rgba(134,69,251,.2),transparent 65%);
    animation:none;
    opacity:.65;
}
.utility-dock .control-bundle,html.light .utility-dock .control-bundle {
    display:flex; width:auto; height:54px; padding:5px; gap:4px; overflow:visible;
    border:1px solid rgba(130,126,255,.4);
    background:linear-gradient(135deg,rgba(46,183,255,.08),rgba(134,69,251,.1)),rgba(16,18,28,.9);
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 8px 32px rgba(0,0,0,.22),0 0 22px rgba(98,71,250,.1);
    transition:border-color .2s,box-shadow .2s;
}
html.light .utility-dock .control-bundle { background:linear-gradient(135deg,rgba(46,183,255,.06),rgba(134,69,251,.09)),rgba(255,255,255,.94); box-shadow:0 8px 30px rgba(63,54,130,.14); }
.utility-dock .control-bundle:hover,.utility-dock .control-bundle:focus-within { border-color:rgba(137,102,255,.7); box-shadow:0 8px 32px rgba(65,51,130,.2),0 0 24px rgba(98,71,250,.15); }
.utility-dock .control-bundle #themeToggle { width:76px; height:44px; padding:6px; border-radius:999px; flex:none; }
.utility-dock .control-bundle #themeToggle:hover { background:rgba(129,106,255,.08); }
.theme-track { display:block; position:relative; width:64px; height:32px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(147,143,218,.18); }
.theme-track svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.theme-track-moon,.theme-track-sun { position:absolute; top:6px; color:#b4b4d3; }
.theme-track-moon { left:7px; }.theme-track-sun { right:7px; }
.theme-thumb { position:absolute; left:3px; top:3px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#2eb7ff,#6143f5 65%,#a94fff); color:#fff; box-shadow:0 2px 9px rgba(86,73,249,.4); transform:translateX(0); }
html.light .theme-thumb { transform:translateX(32px); }
.theme-thumb .theme-icon { width:16px; height:16px; }
.theme-sun { opacity:0; }.theme-moon { opacity:1; }
html.light .theme-sun { opacity:1; }html.light .theme-moon { opacity:0; }
html.light .theme-track { background:rgba(89,76,164,.07); border-color:rgba(100,87,174,.15); }
html.light .theme-track-moon,html.light .theme-track-sun { color:#69617f; }
.language-capsule { position:relative; border-left:1px solid rgba(139,129,211,.25); color:#eeeefa; }
html.light .language-capsule { color:#29223d; }
.language-capsule summary { list-style:none; display:flex; align-items:center; justify-content:center; gap:9px; min-width:70px; min-height:42px; padding:0 12px; border-radius:999px; cursor:pointer; user-select:none; }
.language-capsule summary::-webkit-details-marker { display:none; }
.language-current { font-size:.8rem; font-weight:650; letter-spacing:.05em; }
.language-chevron { transition:transform .2s; opacity:.65; }
.language-capsule[open] .language-chevron { transform:rotate(180deg); }
.language-capsule[open] summary,.language-capsule summary:hover { background:rgba(128,100,255,.1); }
.language-panel { position:absolute; bottom:calc(100% + 18px); right:-5px; width:216px; padding:8px; border:1px solid rgba(130,126,255,.4); border-radius:18px; background:rgba(19,19,32,.97); box-shadow:0 16px 48px rgba(0,0,0,.3); backdrop-filter:blur(20px); }
.language-panel form { margin:0; }
.language-option { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:48px; padding:12px 14px; border:0; border-radius:10px; background:transparent; color:inherit; font:inherit; font-size:.95rem; cursor:pointer; }
.language-option:hover { background:rgba(127,101,255,.1); }
.language-option.is-current { background:linear-gradient(100deg,rgba(46,183,255,.1),rgba(134,69,251,.15)); }
.language-option.is-current::after { content:''; position:absolute; bottom:4px; left:14px; right:14px; height:2px; border-radius:2px; background:linear-gradient(90deg,#2eb7ff,#a94fff); }
.language-option-code { font-size:.65rem; opacity:.55; letter-spacing:.08em; }
html.light .language-panel { background:rgba(253,251,255,.98); box-shadow:0 16px 40px rgba(63,54,130,.16); }
.utility-dock .control-bundle :is(button,summary):focus-visible { outline:2px solid #9a7cff; outline-offset:2px; }
.utility-dock .control-bundle .utility-top-btn { flex:none; border-radius:50%; overflow:hidden; }
.utility-dock .control-bundle .utility-top-btn:not(.is-visible) { display:none; }
.utility-dock .control-bundle .utility-top-btn.is-visible { width:40px; height:40px; border:0; }
@media(max-width:720px) { .language-panel { right:-45px; } }
@media(prefers-reduced-motion:reduce) { .language-chevron { transition:none; } }

/* Complete project images share a quiet presentation frame. */
.v3-work-section .v3-work-card { grid-template-rows:auto 1fr; }
.v3-work-section .v3-work-visual {
    display:flex; align-items:center; justify-content:center; aspect-ratio:3/2; padding:clamp(16px,2.2vw,30px);
    background:radial-gradient(ellipse at 15% 20%,rgba(46,183,255,.12),transparent 65%),radial-gradient(ellipse at 85% 80%,rgba(134,69,251,.14),transparent 65%),#0d101b;
    cursor:zoom-in;
}
.v3-work-section .v3-work-visual img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; transform:none; border-radius:6px; }
.v3-work-section .v3-work-visual:hover img { transform:none; }
.v3-work-section .v3-work-visual:focus-visible { outline:3px solid #9a7cff; outline-offset:-5px; }
.v3-work-visual .work-preview-hint { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; font-size:1.1rem; color:#f5f3ff; background:rgba(13,16,27,.85); letter-spacing:0; border:1px solid rgba(155,135,245,.4); }
html.light .v3-work-section .v3-work-visual { background:radial-gradient(ellipse at 15% 20%,rgba(46,183,255,.1),transparent 65%),radial-gradient(ellipse at 85% 80%,rgba(134,69,251,.12),transparent 65%),#eff0f8; }
body.work-preview-open { overflow:hidden; }
.work-preview-dialog { width:min(1400px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:1px solid rgba(149,127,240,.4); border-radius:20px; background:#10121c; color:#f5f3ff; box-shadow:0 24px 100px rgba(0,0,0,.5); overflow:hidden; }
.work-preview-dialog::backdrop { background:rgba(4,5,12,.88); backdrop-filter:blur(8px); }
.work-preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-bottom:1px solid rgba(149,127,240,.2); }
.work-preview-toolbar h2 { font-size:1rem; line-height:1.4; margin:0; font-weight:500; min-width:0; }
.work-preview-controls { display:flex; gap:6px; flex-shrink:0; }
.work-preview-controls button,.work-preview-controls a { display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(149,127,240,.25); border-radius:12px; background:rgba(134,69,251,.08); color:inherit; font:inherit; font-size:1.3rem; cursor:pointer; text-decoration:none; }
.work-preview-controls :is(button,a):hover { background:rgba(134,69,251,.2); }
.work-preview-dialog :focus-visible { outline:2px solid #ab8bff; outline-offset:-3px; }
.work-preview-viewport { max-height:calc(100dvh - 110px); overflow:auto; padding:16px; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; }
.work-preview-viewport img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 150px); object-fit:contain; margin:auto; }
.work-preview-viewport img.is-zoomed { max-width:none; max-height:none; margin:0; }
html.light .work-preview-dialog { background:#f4f3fa; color:#242033; }
@media(max-width:600px) {
    .work-preview-toolbar { align-items:flex-start; padding:10px; gap:8px; }
    .work-preview-toolbar h2 { font-size:.85rem; padding-top:6px; }
    .work-preview-controls { gap:4px; }
    .work-preview-viewport { padding:8px; max-height:calc(100dvh - 144px); }
    .work-preview-viewport img { max-height:calc(100dvh - 170px); }
}