/* ============================================================
   Eyeronic Website v2 — pure HTML/CSS + design-system tokens
   Light + dark color modes via [data-theme]
   Hero + footer stay ink in both themes (brand rule).
   Self-contained: this is the ONLY authored stylesheet for the
   page.
   ============================================================ */

/* ---------- Brand display face (Nexa / Manrope / JetBrains Mono) ----------*/
@font-face {
    font-family: "Nexa";
    src: url("../fonts/NexaBold-wknD0UC.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Regular-o6rLsp2.ttf") format('truetype');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Medium-8GOdE-M.ttf") format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Manrope-Regular-HdJecJ8.ttf") format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Manrope-Medium-8n2pP26.ttf") format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Manrope-SemiBold-SzIR4OS.ttf") format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Manrope-Bold-ruY69A4.ttf") format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Manrope-ExtraBold-bpr3d3t.ttf") format('truetype');
}

/* ---------- Theme tokens ---------- */
:root {
    --max-w: 1240px;

    /* light (default) */
    --surface-0: #FFFFFF;
    --surface-1: #FAFBFC;
    --surface-2: #F4F6F8;
    --card: #FFFFFF;
    --line: #E8ECF0;
    --line-2: #D3D9E0;
    --text-1: #0E1620;
    --text-2: #424B57;
    --text-3: #8993A0;
    --accent: #1080E0;
    --accent-strong: #0A66B4;
    --accent-text: #0A66B4;
    --tint: #E6F2FC;
    --card-shadow: 0 2px 6px rgba(14, 22, 32, 0.05), 0 4px 12px rgba(14, 22, 32, 0.04);
    --card-shadow-hover: 0 8px 24px rgba(14, 22, 32, 0.08), 0 2px 6px rgba(14, 22, 32, 0.05);
    --cta-shadow: 0 14px 30px rgba(16, 128, 224, 0.28);

    /* hero (theme-reactive) */
    --hero-bg: radial-gradient(90% 90% at 85% 0%, rgba(16, 128, 224, 0.10), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 70%, #EFF4F9 100%);
    --hero-fg: #0E1620;
    --hero-muted: #4A5563;
    --hero-line: rgba(14, 22, 32, 0.12);
    --hero-grid: rgba(14, 22, 32, 0.045);
    --hero-diamond: rgba(16, 128, 224, 0.22);
}

[data-theme="dark"] {
    --surface-0: #0A111A;
    --surface-1: #0E1620;
    --surface-2: #131D29;
    --card: #121C28;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.16);
    --text-1: #F4F6F8;
    --text-2: #B4BDC7;
    --text-3: #7C8693;
    --accent: #1080E0;
    --accent-strong: #4FA6EA;
    --accent-text: #4FA6EA;
    --tint: rgba(16, 128, 224, 0.14);
    --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --cta-shadow: 0 14px 30px rgba(16, 128, 224, 0.2);

    /* hero (theme-reactive) */
    --hero-bg: radial-gradient(90% 90% at 85% 0%, rgba(16, 128, 224, 0.16), transparent 55%),
    linear-gradient(180deg, #0B1320 0%, #0E1620 60%, #101B27 100%);
    --hero-fg: #FFFFFF;
    --hero-muted: rgba(255, 255, 255, 0.7);
    --hero-line: rgba(255, 255, 255, 0.1);
    --hero-grid: rgba(255, 255, 255, 0.045);
    --hero-diamond: rgba(79, 166, 234, 0.16);
}

/* ---------- Base ---------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--surface-0);
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color 260ms cubic-bezier(0.16, 1, 0.3, 1), color 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

a {
    color: inherit;
    text-decoration: none;
}

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

.container-eye {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
}

::selection {
    background: rgba(16, 128, 224, 0.25);
}

/* ---------- Type primitives ---------- */
.display-eye {
    font-family: "Nexa", "Manrope", sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.eyebrow {
    font-family: "Nexa", "Manrope", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.sec-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: baseline;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 56px;
}

.sec-head .num {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    color: var(--text-3);
    white-space: nowrap;
}

.sec-head .eyebrow {
    justify-self: end;
}

.sec-title {
    font-family: "Nexa", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
}

.sec-lede {
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-2);
    max-width: 640px;
    margin: 0;
}

/* ---------- Buttons ---------- */
.btn-eye {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    padding: 13px 22px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1),
    color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 80ms ease;
    white-space: nowrap;
}

.btn-eye:active {
    transform: scale(0.98);
}

.btn-eye svg {
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-eye:hover svg {
    transform: translateX(3px);
}

.btn-eye-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--cta-shadow);
}

.btn-eye-primary:hover {
    background: #0A66B4;
    color: #fff;
}

.btn-eye-ghost-dark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.24);
}

.btn-eye-ghost-dark:hover {
    border-color: #4FA6EA;
    color: #4FA6EA;
}

.btn-eye-ghost {
    background: transparent;
    color: var(--text-1);
    border-color: var(--line-2);
}

.btn-eye-ghost:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

/* ---------- Nav ---------- */
.nav-eye {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms, border-color 240ms;
    border-bottom: 1px solid transparent;
    color: var(--text-1);
}

.nav-eye.is-scrolled {
    background: var(--surface-0);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 2px rgba(14, 22, 32, 0.06);
    color: var(--text-1);
}

.nav-eye__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-eye__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-eye__brand img {
    height: 26px;
    width: auto;
}

.nav-eye__wordmark {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.24em;
}

.nav-eye__links {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-eye__links a {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.78;
    transition: opacity 140ms, color 140ms;
}

.nav-eye__links a:hover {
    opacity: 1;
    color: var(--accent-strong);
}

.nav-eye.is-scrolled .nav-eye__links a:hover {
    color: var(--accent-text);
}

.nav-eye__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* theme toggle */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line-2);
    color: inherit;
    cursor: pointer;
    transition: border-color 200ms, background 200ms;
}

.nav-eye.is-scrolled .theme-toggle {
    border-color: var(--line-2);
}

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

.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* themed logo: original on light, recolored on dark */
[data-theme="dark"] .logo-themed {
    filter: invert(1) hue-rotate(180deg) brightness(1.15);
}

/* ---------- Hero (theme-reactive) ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--hero-bg);
    color: var(--hero-fg);
    padding: 196px 0 0;
}

.hero__grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, var(--hero-grid) 1px, transparent 1px);
    background-size: calc(100% / 6) 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    left: 0;
    right: 0;
}

.hero__diamond {
    position: absolute;
    right: -120px;
    top: 120px;
    width: 720px;
    height: auto;
    color: var(--hero-diamond);
    pointer-events: none;
    transform-origin: 62% 42%;
}

.hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
    transform-origin: 50% 38%;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 32px;
}

.hero__eyebrow::before {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--accent-text);
}

.hero__title {
    font-family: "Nexa", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(52px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    margin: 0 0 28px;
    max-width: 13ch;
}

.hero__title em {
    font-style: normal;
    color: var(--accent-text);
}

.hero__lede {
    font-size: 19px;
    line-height: 1.65;
    font-weight: 400;
    color: var(--hero-muted);
    max-width: 600px;
    margin: 0 0 40px;
}

.hero__cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 88px;
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--hero-line);
}

.hero__stats > div {
    padding: 30px 0 36px;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.hero__stats > div + div {
    border-left: 1px solid var(--hero-line);
    padding-left: 36px;
}

.hero__stats b {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--hero-fg);
}

.hero__stats span {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    line-height: 1.5;
}

/* pillar ticker divider */
.ticker {
    border-top: 1px solid var(--hero-line);
    background: transparent;
}

.ticker__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
}

.ticker__inner span i {
    font-style: normal;
    color: var(--accent-text);
    margin-right: 14px;
}

/* ---------- Sections ---------- */
.section {
    padding: 110px 0;
}

.section--flush-top {
    padding-top: 0;
}

.section--alt {
    background: var(--surface-1);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* ---------- Capabilities rail (01) — Gucci-style horizontal travel ----------
   Without html.fx the rail degrades to a vertical card stack. */
.hscroll-stage {
    position: relative;
}

.hscroll-sticky {
    padding: 110px 0;
}

/* In fx mode the section PINS: it sticks full-viewport while vertical
   scroll drives only the horizontal travel; vertical movement resumes
   when the rail reaches its end (stage height = 100vh + rail overflow). */
html.fx .hscroll-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

html.fx .rail-head {
    margin-bottom: 5vh;
}

html.fx .hscroll-stage .sec-head {
    margin-bottom: 4vh;
}

.rail-head .sec-title {
    margin-bottom: 0;
    max-width: 22ch;
}

.rail-hint {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.08em;
    white-space: nowrap;
    display: none;
}

html.fx .rail-hint {
    display: block;
}

.hscroll-track {
    display: flex;
    gap: 18px;
    padding: 0 max(32px, calc((100vw - 1240px) / 2 + 32px));
    will-change: transform;
}

html:not(.fx) .hscroll-track {
    flex-direction: column;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
}

.rail-card {
    position: relative;
    flex: 0 0 auto;
    width: min(640px, 58vw);
    min-height: min(48vh, 460px);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 38px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    transition: border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rail-card:hover {
    border-color: var(--line-2);
    box-shadow: var(--card-shadow-hover);
}

html:not(.fx) .rail-card {
    width: 100%;
    min-height: 0;
}

.rail-card__watermark {
    position: absolute;
    top: -50px;
    right: -90px;
    width: 440px;
    height: auto;
    color: var(--accent);
    opacity: 0.07;
    pointer-events: none;
}

.rail-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--tint);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rail-card__kicker {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.rail-card__title {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.rail-card__body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-2);
    margin: 0 0 20px;
    max-width: 52ch;
}

.rail-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-text);
    white-space: nowrap;
    align-self: flex-start;
}

.rail-card__more svg {
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rail-card:hover .rail-card__more svg {
    transform: translateX(4px);
}

.rail-card--stat {
    width: min(440px, 40vw);
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--cta-shadow);
    justify-content: flex-end;
}

.rail-card--stat .rail-card__watermark {
    color: #fff;
    opacity: 0.14;
}

.rail-card--stat .rail-card__kicker {
    color: rgba(255, 255, 255, 0.7);
}

.rail-stat-num {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: clamp(88px, 9vw, 132px);
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.rail-stat-label {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 10px;
}

.hscroll-progress {
    max-width: var(--max-w);
    margin: 4vh auto 0;
    width: calc(100% - 64px);
    height: 2px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
    display: none;
}

html.fx .hscroll-progress {
    display: block;
}

.hscroll-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* ---------- Approach (interplay) ---------- */
.approach {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.approach__copy .sec-title {
    max-width: 14ch;
}

.approach__points {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.approach__points li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-2);
}

.approach__points li:last-child {
    border-bottom: 1px solid var(--line);
}

.approach__points b {
    color: var(--text-1);
    font-weight: 700;
}

.approach__points .tick {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.interplay {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.interplay__tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 26px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    box-shadow: var(--card-shadow);
    transition: border-color 220ms, box-shadow 220ms;
}

.interplay__tile:hover {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}

.interplay__tile .k {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--text-3);
}

.interplay__tile h4 {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    margin: 0;
}

.interplay__tile p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2);
}

.interplay__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--surface-0);
    border: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--card-shadow-hover);
    z-index: 2;
}

.interplay__hub img {
    width: 38px;
    height: auto;
}

/* ---------- Consulting ---------- */
.pull-quote {
    font-family: "Nexa", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.14;
    letter-spacing: -0.03em;
    margin: 0 0 64px;
    max-width: 26ch;
}

.pull-quote em {
    font-style: normal;
    color: var(--accent-text);
}

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

.pillar {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 30px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-shadow: var(--card-shadow);
    transition: border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar:hover {
    border-color: var(--accent);
    box-shadow: var(--card-shadow-hover);
}

.pillar__num {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--accent-text);
}

.pillar h4 {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.pillar p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
}

.pillar__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-text);
}

.pillar__foot svg {
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar:hover .pillar__foot svg {
    transform: translateX(4px);
}

/* ---------- Contact ---------- */
.contact {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 64px;
    align-items: start;
}

.contact__rows {
    display: grid;
    gap: 0;
    margin-top: 38px;
}

.contact__row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

.contact__row:last-child {
    border-bottom: 1px solid var(--line);
}

.contact__row-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--tint);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact__row-label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 700;
    margin-bottom: 5px;
}

.contact__row-value {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-1);
}

.contact__row-value a {
    color: var(--accent-text);
    font-weight: 600;
}

.contact__form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 38px;
    box-shadow: var(--card-shadow);
}

.contact__form label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: 0.02em;
    margin-bottom: 7px;
    display: block;
}

.input-eye {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    color: var(--text-1);
    background: var(--surface-0);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    padding: 12px 14px;
    outline: none;
    width: 100%;
    transition: border-color 200ms, box-shadow 200ms;
}

.input-eye::placeholder {
    color: var(--text-3);
}

.input-eye:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(16, 128, 224, 0.16);
}

textarea.input-eye {
    resize: vertical;
    min-height: 110px;
}

/* Select — reset native appearance (Safari ignores padding on native
   selects and hugs its own chevron to the edge) and draw our own chevron
   inset from the right border. SVG chevron is theme-agnostic (uses the
   --chevron color via a data-URI swap per theme). */
select.input-eye {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346505C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px 14px;
}

[data-theme="dark"] select.input-eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A9B4C0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* keep the chevron clear of the focus ring */
select.input-eye::-ms-expand {
    display: none;
}

/* Contact form layout — native CSS grid (replaces Bootstrap row/col).
   Two columns on desktop, single column on narrow screens; __full spans both. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-grid__full {
    grid-column: 1 / -1;
}

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

.contact__small {
    font-size: 12px;
    color: var(--text-3);
    margin: 16px 0 0;
}

.contact__thanks {
    text-align: center;
    padding: 44px 16px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.contact__thanks.show {
    display: flex;
}

.contact__thanks-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact__thanks h3 {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    margin: 6px 0 0;
}

.contact__thanks p {
    margin: 0;
    font-size: 14px;
    color: var(--text-2);
    max-width: 380px;
    line-height: 1.6;
}

.contact__thanks a {
    color: var(--accent-text);
    font-weight: 700;
}

/* ---------- CTA band ---------- */
.cta-band {
    background: radial-gradient(80% 120% at 15% 0%, rgba(16, 128, 224, 0.2), transparent 55%),
    #0E1620;
    color: #fff;
    border-radius: 20px;
    padding: 72px 64px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cta-band__diamond {
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 420px;
    color: rgba(79, 166, 234, 0.18);
    pointer-events: none;
}

.cta-band h3 {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 10px;
    max-width: 18ch;
}

.cta-band p {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    max-width: 46ch;
}

/* ---------- Footer (ink both themes) ---------- */
.footer {
    background: #0A111A;
    color: rgba(255, 255, 255, 0.66);
    padding: 84px 0 30px;
}

.footer__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
}

.footer__brand img {
    height: 38px;
    width: auto;
    margin-bottom: 16px;
}

.footer__wordmark {
    font-family: "Nexa", sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.24em;
    color: #fff;
    margin-bottom: 16px;
}

.footer__brand p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    max-width: 320px;
}

.footer h5 {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    margin: 4px 0 20px;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.footer li {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    line-height: 1.55;
}

.footer li span {
    white-space: nowrap;
}

.footer a {
    transition: color 140ms;
}

.footer a:hover {
    color: #4FA6EA;
}

.footer__legal {
    max-width: var(--max-w);
    margin: 64px auto 0;
    padding: 24px 32px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

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

/* logo recolor for permanently-ink surfaces (footer) */
.logo-on-ink {
    filter: invert(1) hue-rotate(180deg) brightness(1.15);
}

/* ============================================================
   Scroll choreography (html.fx — armed by JS only when motion is
   allowed, the viewport is large enough, and rendering is live.
   Everything below degrades to static layout without .fx)
   ============================================================ */

/* -- Act I: hero zoom-through (Apple style) -- */
html.fx .zoom-stage {
    height: 170vh;
    position: relative;
    z-index: 1;
}

html.fx .zoom-stage .hero {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Act I→II handoff: the Capabilities stage is pulled up over the pinned
   hero's empty tail and given a higher z-index + opaque background, so it
   physically slides over the hero as you scroll instead of revealing blank
   space. -70vh == the zoom-stage pin tail (170vh stage − 100vh viewport). */
html.fx #services {
    position: relative;
    z-index: 2;
    margin-top: -70vh;
    background: var(--surface-0);
    will-change: transform;
}

html.fx .zoom-stage .ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

html.fx .zoom-stage .hero__inner,
html.fx .zoom-stage .hero__diamond,
html.fx .zoom-stage .ticker {
    will-change: transform, opacity;
}

html.fx .zoom-stage .hero__cta {
    margin-bottom: 56px;
}

html.fx .zoom-stage .hero__stats > div {
    padding: 24px 0 26px;
}

/* -- Act III: pull-quote word scrub -- */
.scrub-quote .w {
    display: inline-block;
}

html.fx .scrub-quote .w {
    opacity: 0.13;
    transition: opacity 260ms linear;
}

html.fx .scrub-quote .w.on {
    opacity: 1;
}

/* -- Act IV: CTA band scale-in -- */
html.fx .cta-band {
    will-change: transform, opacity;
    transform-origin: 50% 80%;
}

/* scroll progress hairline at very top of page */
.scroll-thread {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 200;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    will-change: transform;
    display: none;
}

html.fx .scroll-thread {
    display: block;
}


/* ---------- Reveal animation ----------
   Hidden state only applies under html.anim, which JS adds via
   requestAnimationFrame — so content is always visible when JS is
   off, motion is reduced, or rendering is paused. */
@media (prefers-reduced-motion: no-preference) {
    html.anim .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html.anim .reveal.in {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .nav-eye__links {
        display: none;
    }

    /* hide the nav CTA on mobile, same as the menu links — the hero CTA and
       contact section remain the paths to get in touch */
    .nav-eye__actions .btn-eye-primary {
        display: none;
    }

    .approach {
        grid-template-columns: 1fr;
        gap: 52px;
    }

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

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

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

    .hero {
        padding-top: 150px;
    }

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

    .hero__stats > div + div {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--hero-line);
    }

    .cta-band {
        padding: 48px 32px;
    }

    .section {
        padding: 80px 0;
    }

    .hscroll-sticky {
        padding: 80px 0;
    }

    .rail-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* Choreography now runs on phones/tablets too — widen the rail cards so
       each fills most of the viewport (with the next one peeking) instead of
       the cramped desktop 58vw. */
    html.fx .rail-card {
        width: min(560px, 84vw);
        min-height: min(56vh, 440px);
        padding: 30px;
    }

    html.fx .rail-card--stat {
        width: min(380px, 64vw);
    }
}