@font-face {
  font-family: "InterVariable";
  src: url("assets/fonts/InterVariable-cz.woff2?v=20261105-4") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy-950: #050d16;
  --navy-900: #081522;
  --navy-850: #0b1b2b;
  --navy-800: #102538;
  --navy-700: #17354e;
  --gold: #f2c14e;
  --gold-light: #ffe59a;
  --gold-dark: #dca936;
  --cream: #f4f0e6;
  --white: #fffdf8;
  --muted: #aeb9c3;
  --line: rgba(255, 255, 255, .11);
  --dark-line: rgba(8, 21, 34, .14);
  --serif: "InterVariable", Inter, "Segoe UI", Arial, sans-serif;
  --sans: "InterVariable", Inter, "Segoe UI", Arial, sans-serif;
  --shell: min(1180px, calc(100% - 48px));
  --shadow: 0 28px 70px rgba(2, 8, 14, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--navy-950); color: var(--cream); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 12px 18px; background: var(--gold); color: var(--navy-950); font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, backdrop-filter .3s; }
.site-header.scrolled { background: rgba(5, 13, 22, .88); border-color: var(--line); backdrop-filter: blur(18px); }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; }
.brand img { width: 56px; height: 56px; object-fit: contain; }
.personal-brand { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.personal-brand strong { color: var(--cream); font-size: 1.03rem; font-weight: 720; letter-spacing: -.015em; }
.personal-brand span { color: var(--gold); font-size: .58rem; font-weight: 650; text-transform: uppercase; letter-spacing: .14em; }
.primary-nav { display: flex; align-items: center; gap: 32px; font-size: .87rem; font-weight: 600; letter-spacing: .04em; }
.primary-nav > a:not(.nav-cta) { color: #dce3e8; position: relative; }
.primary-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--gold); transition: right .25s; }
.primary-nav > a:hover::after, .primary-nav > a.active::after { right: 0; }
.primary-nav > a.active { color: var(--gold-light); }
.nav-cta { padding: 11px 17px; border: 1px solid rgba(215, 174, 90, .65); color: var(--gold-light); transition: .25s; }
.nav-cta:hover { background: var(--gold); color: var(--navy-950); box-shadow: 0 0 24px rgba(242, 193, 78, .28); }
.nav-toggle { display: none; width: 46px; height: 46px; padding: 12px; border: 1px solid var(--line); background: transparent; color: white; }
.nav-toggle > span:not(.sr-only) { display: block; height: 1px; background: currentColor; margin: 5px 0; transition: transform .2s, opacity .2s; }

.hero { min-height: 790px; padding-top: 88px; position: relative; overflow: hidden; background: radial-gradient(circle at 74% 39%, rgba(31, 74, 105, .58), transparent 31%), linear-gradient(135deg, var(--navy-950), var(--navy-850) 64%, #0c2133); }
.hero::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 78px 78px; mask-image: linear-gradient(to right, black, transparent 75%); }
.hero::after { content: ""; position: absolute; z-index: 0; inset: -30px; pointer-events: none; background: url("assets/tech-pattern.svg?v=20261105-4") 0 0 / 480px 480px repeat; opacity: .24; mask-image: linear-gradient(to right, transparent 2%, rgba(0,0,0,.28) 30%, #000 68%, rgba(0,0,0,.6) 100%); -webkit-mask-image: linear-gradient(to right, transparent 2%, rgba(0,0,0,.28) 30%, #000 68%, rgba(0,0,0,.6) 100%); animation: pattern-drift 28s ease-in-out infinite alternate; }
.hero-grid { min-height: 702px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; position: relative; z-index: 2; }
.hero-copy { padding: 70px 0 80px; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 12px; color: var(--gold-light); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.eyebrow > span { width: 32px; height: 1px; background: var(--gold); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 650; line-height: 1.05; letter-spacing: -.055em; }
h1 { max-width: 760px; font-size: clamp(3.5rem, 6vw, 6.5rem); }
h2 { font-size: clamp(2.55rem, 4.7vw, 4.7rem); color: var(--navy-950); }
h1 em, h2 em { color: var(--gold-light); font-style: normal; font-weight: 650; }
.hero-lead { max-width: 660px; margin: 30px 0 0; color: #c2cbd2; font-size: 1.12rem; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 13px 22px; border: 1px solid transparent; font-weight: 700; font-size: .9rem; letter-spacing: .015em; transition: transform .25s, box-shadow .25s, background .25s; }
.button-primary { background: var(--gold); color: var(--navy-950); box-shadow: 0 0 22px rgba(242, 193, 78, .2), 0 12px 34px rgba(0, 0, 0, .25); }
.button-primary:not(:disabled):hover { transform: translateY(-2px); background: var(--gold-light); box-shadow: 0 0 34px rgba(242, 193, 78, .38), 0 15px 40px rgba(0, 0, 0, .3); }
.button:disabled { cursor: not-allowed; opacity: .62; }
.text-link { display: inline-flex; gap: 10px; align-items: center; color: #e4e8eb; font-weight: 650; font-size: .89rem; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 4px; }
.text-link.gold { color: var(--gold-dark); border-color: rgba(170,129,56,.45); }
.trust-line { display: flex; flex-wrap: wrap; gap: 13px 28px; margin-top: 50px; color: #9daab4; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.trust-line span { display: flex; align-items: center; gap: 10px; }
.trust-line span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.hero-visual { align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; }
.tech-dashboard { --dashboard-scroll-y: 0px; width: min(570px, 100%); position: relative; border: 1px solid rgba(242,193,78,.23); background: linear-gradient(145deg, rgba(14,36,53,.96), rgba(5,16,26,.98)); box-shadow: 0 0 38px rgba(242,193,78,.06), 0 34px 80px rgba(0,0,0,.34); transform: perspective(1200px) rotateY(-4deg) rotateX(1deg) translate3d(0, var(--dashboard-scroll-y), 0); translate: 0 0; animation: dashboard-breathe 7s ease-in-out infinite, dashboard-float 6.4s ease-in-out infinite; will-change: transform, translate, box-shadow; }
.tech-dashboard::before { content: ""; position: absolute; z-index: -1; inset: 14% -6% 10% 12%; background: rgba(242,193,78,.13); filter: blur(54px); opacity: .72; }
.dashboard-topbar { height: 49px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 17px; border-bottom: 1px solid var(--line); color: #788b98; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.dashboard-topbar > strong { justify-self: end; display: flex; align-items: center; gap: 8px; color: #85d9ac; font-size: .56rem; }
.dashboard-topbar > strong i { width: 6px; height: 6px; border-radius: 50%; background: #66d49c; box-shadow: 0 0 10px rgba(102,212,156,.8); animation: status-pulse 2.8s ease-in-out infinite; }
.dashboard-dots { display: flex; gap: 6px; }
.dashboard-dots i { width: 6px; height: 6px; border-radius: 50%; background: #4f6574; }
.dashboard-dots i:first-child { background: var(--gold); box-shadow: 0 0 9px rgba(242,193,78,.7); }
.dashboard-grid { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 345px; }
.web-surface, .monitor-surface { min-width: 0; padding: 22px; }
.web-surface { border-right: 1px solid var(--line); }
.surface-heading { display: flex; align-items: center; margin-bottom: 18px; }
.surface-heading > span { color: var(--cream); font-size: .69rem; font-weight: 760; text-transform: uppercase; letter-spacing: .13em; }
.web-window { border: 1px solid rgba(255,255,255,.11); background: #0a1a27; box-shadow: 0 15px 28px rgba(0,0,0,.18); }
.web-window-bar { height: 29px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border-bottom: 1px solid rgba(255,255,255,.08); }
.web-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: #4e6372; }
.web-window-bar i:first-child { background: var(--gold); }
.web-window-bar span { width: 48%; height: 5px; margin-left: 6px; background: rgba(255,255,255,.06); }
.web-window-content { min-height: 190px; position: relative; overflow: hidden; padding: 28px 20px; background: linear-gradient(135deg, #102c40, #0a1c2a); }
.web-window-content::after { content: ""; position: absolute; inset: 0; width: 42%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent); transform: translateX(-140%); animation: preview-scan 6.5s ease-in-out infinite; }
.web-window-content small, .web-window-content strong, .web-window-content p, .web-window-content button { display: block; border: 0; }
.web-window-content small { width: 31px; height: 3px; margin-bottom: 13px; background: var(--gold); box-shadow: 0 0 9px rgba(242,193,78,.35); }
.web-window-content strong { width: 78%; height: 12px; margin-bottom: 12px; background: #e9edf0; }
.web-window-content p { width: 92%; height: 5px; margin: 7px 0; background: #536a79; }
.web-window-content p:nth-of-type(2) { width: 67%; }
.web-window-content button { width: 62px; height: 21px; margin-top: 20px; background: var(--gold); box-shadow: 0 0 13px rgba(242,193,78,.22); animation: gold-breathe 3.8s ease-in-out infinite; }
.surface-status { display: flex; align-items: center; margin-top: 14px; color: #a8b5bd; font-size: .56rem; text-transform: uppercase; letter-spacing: .08em; }
.surface-status span { display: flex; align-items: center; gap: 7px; }
.surface-status i { width: 5px; height: 5px; border-radius: 50%; background: #66d49c; box-shadow: 0 0 8px rgba(102,212,156,.65); animation: status-pulse 2.8s .4s ease-in-out infinite; }
.monitor-surface { display: flex; flex-direction: column; }
.chart-wrap { height: 190px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(21,54,73,.42), rgba(6,18,28,.52)); }
.chart-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 100% 38px, 52px 100%; }
.chart-wrap svg { position: absolute; inset: 24px 13px 15px; width: calc(100% - 26px); height: calc(100% - 39px); overflow: visible; }
.chart-area { fill: url(#chartFill); animation: chart-area-breathe 5s ease-in-out infinite; }
.chart-line-base, .chart-line-pulse { fill: none; vector-effect: non-scaling-stroke; }
.chart-line-base { stroke: rgba(242,193,78,.42); stroke-width: 1.5; }
.chart-line-pulse { stroke: var(--gold-light); stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(242,193,78,.8)); stroke-dasharray: 52 468; animation: chart-scan 5.8s linear infinite; }
.monitor-metrics { display: flex; margin-top: auto; border-top: 1px solid var(--line); }
.monitor-metrics > div { width: 100%; padding: 14px 0 0; display: flex; justify-content: space-between; align-items: flex-end; }
.monitor-metrics span, .monitor-metrics strong { display: block; }
.monitor-metrics span { color: #728591; font-size: .52rem; text-transform: uppercase; letter-spacing: .1em; }
.monitor-metrics strong { margin-top: 4px; color: #cbd4da; font-size: .65rem; font-weight: 680; text-transform: uppercase; letter-spacing: .06em; }
.dashboard-flow { height: 52px; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 24%; border-top: 1px solid var(--line); }
.dashboard-flow::before { content: ""; position: absolute; left: 24%; right: 24%; top: 50%; height: 1px; background: rgba(255,255,255,.11); }
.dashboard-flow span { z-index: 1; width: 7px; height: 7px; border: 1px solid #617684; background: #0a1a27; transform: rotate(45deg); }
.dashboard-flow span:nth-child(2) { border-color: rgba(242,193,78,.55); }
.dashboard-flow i { position: absolute; z-index: 2; left: 24%; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 12px rgba(242,193,78,.85); animation: flow-signal 5.2s ease-in-out infinite; }
@keyframes dashboard-breathe { 0%, 100% { box-shadow: 0 0 34px rgba(242,193,78,.05), 0 34px 80px rgba(0,0,0,.34); } 50% { box-shadow: 0 0 52px rgba(242,193,78,.11), 0 38px 88px rgba(0,0,0,.38); } }
@keyframes dashboard-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes status-pulse { 0%, 100% { opacity: .7; box-shadow: 0 0 5px rgba(102,212,156,.45); } 50% { opacity: 1; box-shadow: 0 0 13px rgba(102,212,156,.9); } }
@keyframes preview-scan { 0%, 16% { transform: translateX(-140%); } 72%, 100% { transform: translateX(340%); } }
@keyframes gold-breathe { 0%, 100% { box-shadow: 0 0 9px rgba(242,193,78,.16); } 50% { box-shadow: 0 0 20px rgba(242,193,78,.38); } }
@keyframes chart-scan { to { stroke-dashoffset: -520; } }
@keyframes chart-area-breathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes flow-signal { 0%, 8% { left: 24%; opacity: 0; } 18%, 82% { opacity: 1; } 92%, 100% { left: calc(76% - 6px); opacity: 0; } }
@keyframes pattern-drift { from { background-position: 0 0; } to { background-position: 38px 22px; } }

.section { padding: 120px 0; }
.services { background: var(--navy-900); color: var(--cream); border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: end; margin-bottom: 66px; }
.section-heading > p { margin: 0 0 7px; max-width: 450px; color: var(--muted); }
.section-heading h2 { color: var(--cream); }
.services .eyebrow, .references .eyebrow, .detail-section .eyebrow { color: var(--gold); }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-card { min-height: 560px; padding: 48px; position: relative; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.service-card::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -150px; top: -150px; background: rgba(242,193,78,.08); filter: blur(10px); pointer-events: none; }
.service-web { background: #0d2030; }
.service-monitoring { background: #07131f; color: var(--cream); }
.service-number { position: absolute; right: 30px; top: 15px; font-family: var(--serif); font-size: 7rem; color: rgba(255,255,255,.04); }
.service-monitoring .service-number { color: rgba(255,255,255,.045); }
.service-icon { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 35px; border: 1px solid rgba(170,129,56,.35); color: var(--gold-dark); }
.service-icon svg { width: 42px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.card-kicker { margin: 0 0 12px; color: var(--gold-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.service-card h3 { max-width: 420px; margin: 0 0 18px; font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.1; font-weight: 620; letter-spacing: -.035em; }
.service-card > p:not(.card-kicker) { max-width: 440px; margin: 0; color: #aebac3; }
.service-monitoring > p:not(.card-kicker) { color: #aebac3; }
.feature-list, .check-list { list-style: none; padding: 0; margin: 27px 0 35px; }
.feature-list li, .check-list li { display: flex; gap: 12px; align-items: center; padding: 7px 0; font-size: .9rem; }
.feature-list li::before, .check-list li::before { content: ""; width: 14px; height: 7px; border-left: 1px solid var(--gold-dark); border-bottom: 1px solid var(--gold-dark); transform: rotate(-45deg) translateY(-2px); }
.card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 25px; padding-bottom: 5px; border-bottom: 1px solid rgba(170,129,56,.5); color: var(--gold-dark); font-weight: 750; font-size: .87rem; }
.service-monitoring .card-kicker, .service-monitoring .card-link { color: var(--gold-light); }

.approach { background: #0b1a28; color: var(--cream); border-top: 1px solid var(--line); }
.approach-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: center; }
.approach .eyebrow, .about .eyebrow { color: var(--gold); }
.approach h2 { font-size: clamp(2.6rem,4vw,4rem); }
.approach h2, .about h2 { color: var(--cream); }
.approach h2 em, .about h2 em { color: var(--gold-light); text-shadow: 0 0 28px rgba(242,193,78,.12); }
.approach-copy > p:not(.eyebrow) { color: var(--muted); margin: 25px 0 30px; max-width: 500px; }
.process-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 62px 1fr; gap: 26px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.process-list li > span { color: var(--gold-dark); font-family: var(--serif); font-size: 1.15rem; }
.process-list h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 1.45rem; font-weight: 620; letter-spacing: -.025em; }
.process-list p { margin: 0; color: #91a0ab; font-size: .92rem; }

.references { background: #07131f; color: var(--cream); border-top: 1px solid var(--line); }
.reference-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.reference-card { background: #0d2030; padding: 14px 14px 30px; border: 1px solid var(--line); }
.reference-visual { height: 220px; margin-bottom: 24px; display: grid; place-items: center; overflow: hidden; position: relative; background-color: var(--navy-850); }
.reference-visual::before, .reference-visual::after { content: ""; position: absolute; border: 1px solid rgba(215,174,90,.28); border-radius: 50%; }
.reference-visual::before { width: 180px; height: 180px; }
.reference-visual::after { width: 270px; height: 270px; }
.reference-visual span { color: var(--gold); font: 4rem var(--serif); z-index: 1; opacity: .85; }
.reference-visual-image::before { inset: 0; width: auto; height: auto; z-index: 1; border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(5,13,22,.04) 35%, rgba(5,13,22,.62) 100%); }
.reference-visual-image::after { inset: auto 18px 0; width: auto; height: 2px; z-index: 2; border: 0; border-radius: 0; background: linear-gradient(90deg, var(--gold), rgba(242,193,78,.08)); box-shadow: 0 0 14px rgba(242,193,78,.28); }
.reference-visual-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .6s ease, filter .6s ease; }
.reference-visual-image:hover img { transform: scale(1.035); filter: brightness(1.06); }
.reference-visual-image .reference-number { position: absolute; z-index: 3; left: 16px; bottom: 15px; padding: 5px 8px; border: 1px solid rgba(242,193,78,.35); background: rgba(5,13,22,.78); color: var(--gold-light); font: 750 .63rem/1 var(--sans); letter-spacing: .12em; opacity: 1; backdrop-filter: blur(8px); }
.ref-two { background: linear-gradient(145deg,#0b2234,#112f42); }
.ref-three { background: linear-gradient(145deg,#102435,#071019); }
.reference-card > :not(.reference-visual) { margin-left: 14px; margin-right: 14px; }
.reference-card h3 { margin-top: 0; margin-bottom: 8px; font: 620 1.45rem/1.2 var(--serif); letter-spacing: -.025em; }
.reference-card h3 a { color: inherit; transition: color .25s; }
.reference-card h3 a:hover { color: var(--gold-light); }
.reference-card > p:not(.card-kicker) { color: #9aa8b2; font-size: .9rem; }
.placeholder-label { display: inline-block; margin-top: 10px; padding: 4px 9px; border: 1px solid rgba(170,129,56,.4); color: var(--gold-dark); text-transform: uppercase; letter-spacing: .12em; font-size: .61rem; font-weight: 700; }

.about { background: var(--navy-900); color: var(--cream); overflow: hidden; border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 100px; align-items: center; }
.about h2 { font-size: clamp(2.5rem,4.3vw,4.3rem); }
.about-lead { margin: 30px 0 15px; color: #c5ced5; font-size: 1.08rem; }
.about-copy > p:last-of-type { color: #94a3ae; }
.about-portrait { min-height: 510px; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border: 1px solid rgba(242,193,78,.18); background: linear-gradient(145deg, #102536 0%, #081722 100%); }
.about-portrait::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(transparent, var(--gold) 28%, var(--gold) 72%, transparent); box-shadow: 0 0 20px rgba(242,193,78,.28); }
.about-portrait::after { content: none; display: none; }
.about-portrait img { position: relative; z-index: 2; max-height: 485px; width: auto; object-fit: contain; filter: drop-shadow(0 26px 40px rgba(0,0,0,.34)); }
.about-badge { position: absolute; z-index: 4; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 13px; padding: 14px 17px; border: 1px solid rgba(242,193,78,.22); background: rgba(5,13,22,.82); backdrop-filter: blur(12px); }
.about-badge > span { width: 2px; height: 28px; background: var(--gold); box-shadow: 0 0 12px rgba(242,193,78,.5); }
.about-badge small, .about-badge strong { display: block; }
.about-badge small { color: #8495a1; font-size: .61rem; text-transform: uppercase; letter-spacing: .1em; }
.about-badge strong { color: var(--cream); font: 1.05rem var(--serif); }
.signature { margin-top: 30px; color: var(--gold); font: 650 1.1rem var(--serif); letter-spacing: -.01em; }

.contact { background: var(--navy-850); position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; width: 600px; height: 600px; border: 1px solid rgba(215,174,90,.08); border-radius: 50%; left: -280px; bottom: -260px; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; position: relative; }
.contact h2 { color: var(--cream); }
.contact-copy > p:not(.eyebrow) { max-width: 480px; color: #aeb9c3; }
.contact-details { display: grid; gap: 18px; margin-top: 40px; }
.contact-details a, .contact-details > div { display: flex; flex-direction: column; }
.contact-details small { color: #83929e; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }
.contact-details strong { color: var(--cream); font-size: 1.05rem; }
.email-copy-row { display: flex; align-items: center; gap: 9px; }
.email-copy-row > a { display: inline-flex; flex-direction: row; }
.copy-email { width: 30px; height: 30px; position: relative; display: grid; place-items: center; padding: 0; border: 1px solid rgba(242,193,78,.22); background: rgba(242,193,78,.04); color: var(--gold-light); cursor: pointer; opacity: 0; visibility: hidden; transform: translateX(-5px); transition: opacity .2s, visibility .2s, transform .2s, border-color .2s, background .2s; }
.contact-detail-email:hover .copy-email, .contact-detail-email:focus-within .copy-email { opacity: 1; visibility: visible; transform: none; }
.copy-email:hover, .copy-email:focus-visible { border-color: rgba(242,193,78,.65); background: rgba(242,193,78,.1); outline: none; box-shadow: 0 0 14px rgba(242,193,78,.12); }
.copy-email svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.copy-email-feedback { position: absolute; z-index: 2; left: calc(100% + 9px); top: 50%; padding: 5px 8px; border: 1px solid rgba(242,193,78,.18); background: rgba(5,13,22,.94); color: var(--cream); font-size: .67rem; font-weight: 650; letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(3px, -50%); transition: opacity .2s, transform .2s; }
.copy-email.copied .copy-email-feedback, .copy-email.copy-error .copy-email-feedback { opacity: 1; transform: translate(0, -50%); }
.copy-email.copied { color: #7ee0ab; border-color: rgba(126,224,171,.38); }
.copy-email.copy-error { color: #e8aa78; border-color: rgba(232,170,120,.38); }
.contact-panel { position: relative; overflow: hidden; padding: 38px; background: linear-gradient(145deg, #0d2131, #091824); color: var(--cream); border: 1px solid rgba(242,193,78,.18); box-shadow: 0 0 38px rgba(242,193,78,.06), var(--shadow); }
.contact-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 18px rgba(242,193,78,.4); opacity: .72; }
.contact-panel-heading { margin-bottom: 24px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.contact-panel-heading h3 { margin: 0 0 8px; color: var(--cream); font-size: 1.75rem; font-weight: 650; letter-spacing: -.035em; }
.contact-panel-heading > p:last-child { max-width: 460px; margin: 0; color: #93a3ae; font-size: .86rem; }
.contact-channels { display: grid; gap: 12px; }
.contact-channel { min-height: 76px; display: grid; grid-template-columns: 46px 1fr auto; gap: 16px; align-items: center; padding: 12px 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; }
.contact-channel:hover { transform: translateX(4px); border-color: rgba(242,193,78,.42); background: rgba(242,193,78,.055); box-shadow: 0 0 24px rgba(242,193,78,.07); }
.contact-channel-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(242,193,78,.2); color: var(--gold-light); background: rgba(242,193,78,.04); }
.contact-channel-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.contact-channel > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.contact-channel small { color: #82939f; font-size: .65rem; font-weight: 720; text-transform: uppercase; letter-spacing: .11em; }
.contact-channel strong { color: #edf1f3; font-size: .94rem; font-weight: 630; overflow-wrap: anywhere; }
.contact-channel-arrow { color: var(--gold); font-size: 1rem; transition: transform .25s; }
.contact-channel:hover .contact-channel-arrow { transform: translate(2px, -2px); }
.contact-panel-note { display: flex; align-items: center; gap: 9px; margin: 19px 0 0; color: #7d8e9a; font-size: .75rem; }
.contact-panel-note span { width: 6px; height: 6px; border-radius: 50%; background: #67d59d; box-shadow: 0 0 10px rgba(103,213,157,.65); }

.site-footer { background: var(--navy-950); color: #aab5be; border-top: 1px solid var(--line); }
.footer-main { min-height: 190px; display: grid; grid-template-columns: .65fr .8fr 1fr; gap: 50px; align-items: center; }
.footer-domain { gap: 12px; }
.footer-domain span { color: #d2d9de; font-size: .86rem; font-weight: 650; letter-spacing: .04em; }
.footer-main > p { color: #7f8d98; font-size: .88rem; }
.footer-main nav { display: flex; justify-content: flex-end; gap: 26px; color: #d8dfe4; font-size: .82rem; }
.footer-bottom { min-height: 68px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: #8f9ca6; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; }

.subhero { min-height: 720px; padding-top: 88px; position: relative; overflow: hidden; background: radial-gradient(circle at 80% 45%, rgba(24,67,94,.55),transparent 30%), linear-gradient(135deg,var(--navy-950),var(--navy-850)); }
.subhero::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:74px 74px; }
.subhero-grid { min-height: 632px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; position: relative; }
.subhero h1 { font-size: clamp(3.5rem,5.6vw,5.8rem); }
.subhero-art, .monitor-art { min-height: 480px; position: relative; display: grid; place-items: center; }
.browser-frame { width: 440px; height: 310px; transform: perspective(1000px) rotateY(-8deg) rotateX(4deg); border: 1px solid rgba(255,255,255,.18); background: rgba(12,34,50,.86); box-shadow: 35px 45px 70px rgba(0,0,0,.3); }
.browser-top { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.browser-top i { width: 7px; height: 7px; border-radius: 50%; background: #577083; }
.browser-top i:first-child { background: var(--gold); }
.browser-content { padding: 40px; }
.browser-content span { display:block; width:48px; height:4px; background:var(--gold); margin-bottom:22px; }
.browser-content strong { display:block; width:78%; height:20px; background:#dfe5e8; margin-bottom:13px; }
.browser-content p { width:90%; height:7px; background:#506677; margin:8px 0; }
.browser-content p:nth-child(4) { width:65%; }
.browser-content div { width:110px; height:34px; background:var(--gold); margin-top:28px; }
.floating-code, .floating-check { position:absolute; padding:14px 18px; border:1px solid var(--line); background:rgba(8,21,34,.86); box-shadow:var(--shadow); color:var(--gold-light); font-weight:700; }
.floating-code { left:0; bottom:80px; font:1.4rem var(--serif); }
.floating-check { right:0; top:80px; color:#7ddda9; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
.detail-section { background:var(--navy-900); color:var(--cream); border-top:1px solid var(--line); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.detail-card { min-height:250px; padding:40px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.detail-card > span { color:var(--gold-dark); font:.9rem var(--serif); }
.detail-card h3 { margin:22px 0 10px; font:620 1.7rem/1.2 var(--serif); letter-spacing:-.03em; }
.detail-card p { max-width:470px; margin:0; color:#96a5af; }
.value-section { background:#0b1a28; color:var(--cream); border-top:1px solid var(--line); }
.value-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.value-section .eyebrow { color:var(--gold); }
.value-section h2 { font-size:clamp(2.5rem,4vw,4rem); }
.value-section h2 { color:var(--cream); }
.value-section h2 em { color:var(--gold-light); }
.value-section p { color:#9eacb6; }
.value-visual { padding:45px; min-height:420px; display:flex; flex-direction:column; justify-content:center; gap:16px; background:var(--navy-850); position:relative; overflow:hidden; }
.value-visual::before { content:""; position:absolute; width:320px; height:320px; border:1px solid rgba(215,174,90,.12); border-radius:50%; right:-140px; top:-100px; }
.metric { padding:20px 24px; border:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.025); position:relative; }
.metric strong { color:var(--cream); font:620 1.2rem var(--serif); }
.metric span { color:#8fa0ac; font-size:.78rem; }
.check-list { color:#c0c9d0; columns:2; column-gap:24px; }
.page-cta { text-align:center; background:var(--navy-850); }
.page-cta .shell { max-width:850px; }
.eyebrow.centered { justify-content:center; }
.page-cta h2 { color:var(--cream); }
.page-cta p:not(.eyebrow) { max-width:590px; margin:25px auto 30px; color:#9fadb7; }
.monitor-art { min-height:500px; }
.pulse-ring { position:absolute; border-radius:50%; border:1px solid rgba(215,174,90,.18); }
.ring-a { width:390px; height:390px; }
.ring-b { width:520px; height:520px; border-color:rgba(255,255,255,.07); }
.monitor-center { z-index:2; width:220px; height:220px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(8,25,39,.92); border:1px solid rgba(215,174,90,.35); box-shadow:0 0 70px rgba(34,104,86,.16); }
.monitor-center > span { width:13px; height:13px; border-radius:50%; background:#67d59d; box-shadow:0 0 0 8px rgba(103,213,157,.1),0 0 24px #67d59d; margin-bottom:20px; }
.monitor-center strong { font:620 1.25rem var(--serif); }
.monitor-center small { color:#80919e; }
.monitor-stat { position:absolute; z-index:3; min-width:160px; padding:14px 18px; display:grid; grid-template-columns:10px 1fr; column-gap:10px; border:1px solid var(--line); background:rgba(8,21,34,.9); box-shadow:var(--shadow); }
.monitor-stat i { grid-row:1/3; width:7px; height:7px; margin-top:8px; border-radius:50%; background:#67d59d; }
.monitor-stat span { color:#81909c; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; }
.monitor-stat strong { font-size:.78rem; color:#dce5e8; }
.stat-a { left:0; top:90px; }.stat-b { right:0; bottom:90px; }
.flow-visual { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:8px; align-items:center; padding:35px 25px; background:var(--navy-850); }
.flow-visual > div { min-height:210px; padding:20px 12px; display:flex; flex-direction:column; justify-content:center; text-align:center; border:1px solid var(--line); }
.flow-visual > i { color:var(--gold); font-style:normal; }
.flow-visual span { color:var(--gold); font:.85rem var(--serif); }
.flow-visual strong { margin:10px 0; color:var(--cream); font:620 1.05rem var(--serif); }
.flow-visual small { color:#81919d; font-size:.7rem; line-height:1.45; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.reveal-delay { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  :root { --shell: min(100% - 36px, 760px); }
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .primary-nav { position: absolute; z-index: 1; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: center; gap: 27px; padding: 92px 24px 40px; background: rgba(5,13,22,.98); font-size: 1.2rem; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .primary-nav.open { opacity: 1; visibility: visible; }
  .hero-grid, .subhero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-grid { padding-top: 45px; }
  .hero-copy { padding-bottom: 10px; }
  .hero-visual { min-height: 570px; }
  .tech-dashboard { width: min(620px, 100%); transform: translate3d(0, var(--dashboard-scroll-y), 0); }
  .section-heading, .approach-grid, .about-grid, .contact-grid, .value-grid { grid-template-columns: 1fr; gap: 55px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 510px; }
  .reference-grid { grid-template-columns: 1fr 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; padding: 50px 0; }
  .footer-main nav { grid-column: 1/-1; justify-content: flex-start; }
  .subhero { padding-top: 120px; }
  .subhero-grid { padding-bottom: 70px; }
  .subhero-art, .monitor-art { order: -1; min-height: 400px; }
  .browser-frame { width: min(440px, 84vw); }
  .value-visual, .flow-visual { order: 2; }
}

@media (max-width: 640px) {
  :root { --shell: calc(100% - 28px); }
  .header-inner { min-height: 74px; }
  .brand img { width: 50px; height: 50px; }
  h1 { font-size: clamp(2.75rem, 15vw, 4.2rem); }
  h2 { font-size: clamp(2.2rem, 11vw, 3.3rem); }
  .hero { padding-top: 74px; }
  .hero-copy { padding-top: 65px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .button { width: 100%; }
  .trust-line { display: grid; gap: 10px; }
  .hero-visual { min-height: 455px; }
  .tech-dashboard { width: 100%; }
  .dashboard-topbar { height: 42px; grid-template-columns: 1fr 1fr; padding: 0 11px; }
  .dashboard-grid { min-height: 300px; grid-template-columns: .88fr 1.12fr; }
  .web-surface, .monitor-surface { padding: 13px 10px; }
  .web-window-content { min-height: 164px; padding: 23px 12px; }
  .web-window-content strong { width: 88%; }
  .chart-wrap { height: 164px; }
  .dashboard-flow { height: 45px; padding-inline: 20%; }
  .dashboard-flow::before { left: 20%; right: 20%; }
  .dashboard-flow i { width: 6px; }
  @keyframes flow-signal { 0%, 8% { left: 20%; opacity: 0; } 18%, 82% { opacity: 1; } 92%, 100% { left: calc(80% - 6px); opacity: 0; } }
  .section { padding: 82px 0; }
  .section-heading { margin-bottom: 42px; gap: 25px; }
  .service-card { min-height: auto; padding: 32px 25px; }
  .service-card .card-link { margin-top: 12px; }
  .service-number { font-size: 5rem; }
  .reference-grid { grid-template-columns: 1fr; }
  .approach-grid, .about-grid, .contact-grid { gap: 45px; }
  .about-portrait { min-height: 420px; }
  .about-portrait img { max-height: 400px; }
  .contact-panel { padding: 25px 18px; }
  .contact-channel { grid-template-columns: 42px 1fr auto; gap: 12px; padding: 11px 12px; }
  .contact-channel-icon { width: 42px; height: 42px; }
  .footer-main { grid-template-columns: 1fr; gap: 24px; }
  .footer-main nav { grid-column: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 25px; }
  .footer-bottom { padding: 22px 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .subhero { padding-top: 74px; }
  .subhero h1 { font-size:clamp(2.7rem,14vw,4rem); }
  .subhero-grid { gap: 25px; }
  .subhero-art, .monitor-art { min-height:330px; }
  .browser-frame { height:245px; }
  .browser-content { padding:28px; }
  .floating-code { bottom:35px; }
  .floating-check { top:35px; }
  .detail-grid { grid-template-columns:1fr; }
  .detail-card { min-height:auto; padding:32px 25px; }
  .value-grid { gap:45px; }
  .value-visual { min-height:auto; padding:25px 18px; }
  .metric { flex-direction:column; align-items:flex-start; gap:3px; }
  .check-list { columns:1; }
  .ring-a { width:270px; height:270px; }.ring-b { width:350px; height:350px; }
  .monitor-center { width:170px; height:170px; }
  .monitor-stat { min-width:130px; padding:10px; }
  .stat-a { top:35px; }.stat-b { bottom:35px; }
  .flow-visual { grid-template-columns:1fr; }
  .flow-visual > div { min-height:130px; }
  .flow-visual > i { transform:rotate(90deg); text-align:center; }
}

@media (hover: none) {
  .copy-email { opacity: .78; visibility: visible; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tech-dashboard { --dashboard-scroll-y: 0px; translate: none; }
}