:root{--accent:#DC8564}
html{scroll-behavior:smooth}
body{margin:0;background:#E6E9F0;font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;color:#FFFFFF;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.01em}
a{color:#DC8564;text-decoration:none}
a:hover{color:#EDA98C}
::selection{background:rgba(220,133,100,.4)}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ====== FOCUS ====== */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ====== PANEL CARD + SECTION HEADING (shared containers, all sections) ====== */
.pcard{position:relative;max-width:1280px;margin:0 auto;background:rgba(10,20,46,.82);border:1px solid rgba(255,255,255,.08);border-radius:26px;padding:clamp(40px,6vw,76px) clamp(26px,4.2vw,58px);box-sizing:border-box}
.kcard{max-width:820px;text-align:center;padding:clamp(48px,7vw,90px) clamp(26px,4.2vw,58px)}
.shead{max-width:760px;margin-bottom:clamp(36px,4.6vw,56px)}
#metod .shead{margin-bottom:clamp(40px,5vw,60px)}
.shead-kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.3em;color:var(--accent)}
.shead h2{margin:18px 0 0;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(38px,4.8vw,62px);font-weight:900;line-height:1.05;letter-spacing:-.01em;color:#FFFFFF;text-wrap:balance}
.shead p{margin:18px 0 0;max-width:620px;font-size:17px;line-height:1.6;color:#A7B2CE}

/* ====== HERO: stronger scrim under the text on narrow screens ====== */
.hero-scrim-m{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(7,11,28,.55) 0%,rgba(7,11,28,.32) 34%,rgba(7,11,28,.42) 62%,rgba(10,20,46,.72) 100%)}
@media(max-width:720px){.hero-scrim-m{opacity:1}}

/* ====== FIXED BACKGROUND (fixed layer + media crop + readability scrim) ====== */
.bgfixed{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0A142E}
.bgfixed-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* Background video: hidden until JS confirms desktop + no reduced-motion, then adds .on.
   Default display:none lives here (not inline) so .bgvideo.on wins on specificity — no !important. */
.bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:none}
.bgvideo.on{display:block}
.bgfixed-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 105% at 50% 50%,transparent 52%,rgba(6,12,30,.46) 100%),linear-gradient(180deg,rgba(6,12,30,.62) 0%,rgba(6,12,30,.14) 22%,rgba(6,12,30,0) 45%,rgba(6,12,30,0) 56%,rgba(6,12,30,.30) 78%,rgba(6,12,30,.66) 100%)}
.svg-sprite{position:absolute;width:0;height:0}
.contentwrap{position:relative;z-index:1;background:transparent}

/* ====== NAV PILL (shared component — hero + sticky) ====== */
.navpill{display:inline-flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px)}
.navpill a{display:inline-flex;align-items:center;height:34px;padding:0 18px;border-radius:999px;color:rgba(255,255,255,.82);font-size:14px;font-weight:600;white-space:nowrap;transition:color .18s,background .18s}
.navpill a:hover{color:#FFFFFF}
.navpill a.active{background:var(--accent);color:#0A142E}
@media(max-width:720px){.hero-nav-pill{display:none}}

/* ====== STICKY NAV (appears after the hero) ====== */
.snav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px clamp(16px,4vw,44px);background:rgba(10,20,46,.85);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid rgba(255,255,255,.09);transform:translateY(-101%);transition:transform .32s cubic-bezier(.22,1,.36,1);pointer-events:none}
.snav.show{transform:none;pointer-events:auto}
.snav a{color:rgba(255,255,255,.82);font-size:14px;font-weight:600;transition:color .15s}
.snav a:hover{color:#FFFFFF}
@media(max-width:560px){.snav .navpill{display:none}}

/* ====== METHOD: "three axes" as a shape — a constellation fan above the cards ====== */
.axis-node{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(28px,4vw,44px)}
.axis-star{display:flex;color:var(--accent);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 45%,transparent))}
.axis-fan{display:none}
@media(min-width:820px){.axis-fan{display:block;width:100%;max-width:900px;height:70px;margin-top:4px}}

/* ====== METHOD: trusted-by row + three axis cards ====== */
.m-trust{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:clamp(64px,8vw,96px)}
.m-trust-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;color:#7E8AAB}
.m-trust-list{display:flex;gap:30px;flex-wrap:wrap;align-items:center}
.m-trust-list a{font-size:15px;font-weight:600;color:#B9C3DC;transition:color .15s}
.m-trust-list a:hover{color:#FFFFFF}
.m-agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.m-acard{background:#101C40;border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:34px 32px 38px;transition:transform .25s,border-color .25s}
.m-acard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.m-acard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.m-acard-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.m-acard-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:#7E8AAB}
.m-acard h3{margin:26px 0 0;font-size:21px;font-weight:800;letter-spacing:-.01em;color:#FFFFFF}
.m-acard p{margin:12px 0 0;font-size:15px;line-height:1.65;color:#A7B2CE}

/* ====== TEAM (#komanda) — two co-founder cards + portrait crops ====== */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.team-card{background:#101C40;border:1px solid rgba(255,255,255,.07);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.team-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.team-photo{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#0C1736}
/* Named portrait classes (not nth-child) so DOM reordering can't swap the face crops. */
.team-portrait{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.team-photo-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,46,.05) 0%,transparent 40%,rgba(10,20,46,.72) 100%)}
.team-body{padding:30px 32px 34px}
.team-body h3{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:800;letter-spacing:-.01em;color:#FFFFFF}
.team-role{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-top:8px}
.team-body p{margin:16px 0 0;font-size:15px;line-height:1.65;color:#A7B2CE}

/* ====== FX MODE — slide-deck stage (desktop >=961px, no reduced-motion; JS adds html.fx) ======
   Without html.fx none of these rules apply: the wrapper divs stay layout-neutral and every
   section keeps today's normal document flow. The .panel base rule only sets position:relative,
   which the sections already had inline — so the non-fx render is byte-for-byte identical. */
.panel{position:relative}
html.fx #stageTrack{position:relative}            /* total scroll track; pixel height set by JS */
html.fx #stage{position:sticky;top:0;height:100vh;overflow:hidden}
html.fx #stage>.panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,filter,transform}
/* When JS drives a panel past opacity 0.02 it also sets visibility:visible + pointer-events:auto inline. */
/* Exactly one nav in fx mode: the in-hero nav would dissolve with the hero panel, so hide it and
   keep the sticky nav permanently shown and clickable instead. The hero nav's display lives in a
   base rule (not an inline style) so this html.fx override can win — inline display would beat it. */
#hero>nav{display:flex}
html.fx #hero>nav{display:none}
html.fx #snav{transform:none;pointer-events:auto}
/* In fx the nav is permanently visible over the fixed video and panels keep top clearance
   below it, so the full-width bar itself goes transparent — the video reads as continuous
   through the top of the frame. The frost/blur and the bottom hairline go too: both would
   redraw the strip we are removing. The .navpill group and .snav-cta keep their own
   backgrounds (untouched). Non-fx (mobile / reduced-motion) keeps the opaque frosted bar:
   there the nav slides over normally-flowing content and needs to occlude it. */
html.fx #snav{background:transparent;backdrop-filter:none;border-bottom-color:transparent}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .snav{transition:none}
}

/* ====== CASES LAYOUT (#keisy) — vertical flow: flagship full-width, then a
   two-column grid of the remaining case cards. Single column on phones. The card
   itself scrolls internally in fx mode (see .pcard-scroll rules below). ====== */
.kcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
@media(max-width:720px){.kcase-grid{grid-template-columns:1fr}}

/* ====== CASES (#keisy) — card components (hover lift folded into the classes) ====== */
.kcase-card{background:#101C40;border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:30px;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.kcase-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.kcase-flag{background:linear-gradient(135deg,#13224E 0%,#101C40 60%);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:24px;padding:34px;transition:transform .25s,border-color .25s}
.kcase-flag:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.kcase-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#8D99B8;text-transform:uppercase}
.kcase-head{margin:20px 0 0;font-size:20px;font-weight:800;letter-spacing:-.01em;color:#FFFFFF;line-height:1.3}
.kcase-desc{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:#A7B2CE;flex:1}
.icon-tile{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.kcase-card .icon-tile{margin-top:22px}
.icon-tile-sm{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent)}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.tag{font-family:'JetBrains Mono',monospace;font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:#A7B2CE}

/* ====== PRINCIPLES (statement + pillar cards — own slide #printsipy) ====== */
.m-stmt{max-width:880px;margin:0 auto;text-align:center;position:relative}
.m-stmt-title{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(32px,4.4vw,54px);font-weight:900;line-height:1.14;letter-spacing:-.01em;color:#FFFFFF;text-wrap:balance;position:relative;z-index:1}
.m-stmt-lead{margin:22px auto 0;max-width:680px;font-size:17px;line-height:1.65;color:#A7B2CE;position:relative;z-index:1}
.m-pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px;margin-top:clamp(48px,6vw,68px)}
.m-pcard{background:#101C40;border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:32px 30px}
.m-pcard-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.28em;color:var(--accent)}
.m-pcard-head{margin:16px 0 0;font-size:20px;font-weight:800;color:#FFFFFF}
.m-pcard-sub{margin:8px 0 0;font-size:14px;line-height:1.5;color:#8D99B8}
.check-list{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.check-row{display:flex;gap:12px}
.check-mark{flex:none;color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.55}
.check-mark.is-muted{color:#8D99B8}
.check-text{font-size:15px;line-height:1.55;color:#C6CFE6}

/* ====== FX FIT PASS — compact every deck panel down to one viewport ======
   All rules are gated on html.fx, so on mobile / reduced-motion (normal document
   flow) today's roomier spacing is untouched. !important remains only where a rule
   targets an element still styled INLINE (the section <section> padding); every rule
   whose base is now a component class (.pcard/.kcard/.shead + the metod/team classes)
   wins on specificity alone and dropped its !important. */
/* Slim the always-on sticky nav in fx and reserve clearance at the top of every
   panel, so centered content never rides up under the translucent nav bar.
   Section padding now lives in the .panel-pad class (specificity 1), so these
   higher-specificity fx rules win outright — no !important needed. */
html.fx #snav{padding-top:8px;padding-bottom:8px}
html.fx #stage>.panel:not(#hero){padding-top:58px}
html.fx .panel{padding-bottom:16px}
html.fx .pcard{padding-top:24px;padding-bottom:24px}
/* Panels are flex columns with align-items:stretch, but .pcard has margin:0 auto
   (auto cross-axis margins suppress the stretch), so it shrinks to content width.
   Content-width differs RU vs EN, dropping the auto-fit card grid to fewer columns.
   Give it a definite width so the max-width cap — not the content — decides the grid. */
html.fx .panel .pcard{width:100%}
html.fx .shead{margin-bottom:18px}

/* INNER-SCROLL CARDS (.pcard-scroll) — used by #keisy (8 cases). The card holds more
   than fits one viewport, so in fx it keeps a FIXED visual height
   (~today's card box, capped so it always clears the sticky nav) and scrolls INTERNALLY.
   overscroll-behavior stays `auto` so reaching an inner edge chains the wheel to the deck
   (native, no JS interception). Every rule is gated on html.fx, so mobile / reduced-motion
   / no-JS keep the full content in normal flow with no height cap and no inner scroll.
   `html.fx .pcard-scroll` (0,2,1) ties `html.fx .pcard` (0,2,1) on specificity and wins by
   source order (it comes later). */
html.fx .pcard-scroll{
  padding-top:34px;padding-bottom:34px;
  height:min(620px,calc(100vh - 120px));
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:auto;
  scrollbar-width:thin;scrollbar-color:rgba(220,133,100,.55) rgba(255,255,255,.05);
}
/* Inner-scroll lock: while the panel is mid-dissolve (entry/exit) the card must not consume
   the wheel — it falls through to the deck. pointer-events:none makes the card transparent to
   hit-testing (wheel scrolls the page/deck) while keeping overflow:auto, so (a) the scrollbar
   stays painted → no layout shift when the lock toggles, and (b) scrollTop is never clamped or
   reset (the reading position is preserved across transient lock/unlock). Toggled from JS
   (fxRenderAt) whenever the smoothed rendered opacity drops below 1. */
html.fx .pcard-scroll.inner-lock{pointer-events:none}
/* Slim custom scrollbar (WebKit) — accent thumb, transparent track. */
html.fx .pcard-scroll::-webkit-scrollbar{width:6px}
html.fx .pcard-scroll::-webkit-scrollbar-thumb{background:rgba(220,133,100,.5);border-radius:999px}
html.fx .pcard-scroll::-webkit-scrollbar-thumb:hover{background:rgba(220,133,100,.72)}
html.fx .pcard-scroll::-webkit-scrollbar-track{background:transparent}

/* Bottom fade hint: a sticky child pinned to the card's lower edge (bottom:-34px cancels
   the card's bottom padding so the gradient meets the border; the negative side margins
   span it full-bleed, clipped to the rounded corners by overflow-x:hidden). It fades out
   (is-end, toggled from JS) once the content is scrolled to the end. Rendered only in fx. */
.pcard-fade{display:none}
html.fx .pcard-scroll .pcard-fade{
  display:block;position:sticky;bottom:-34px;z-index:2;
  height:72px;margin:-72px calc(-1 * clamp(26px,4.2vw,58px)) 0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,20,46,0) 0%,rgba(10,20,46,.55) 55%,rgba(10,20,46,.92) 100%);
  opacity:1;transition:opacity .3s ease;
}
html.fx .pcard-scroll.is-end .pcard-fade{opacity:0}

/* --- Content compaction: #metod (three axes) and #printsipy (manifesto + pillars),
   each a plain fit card sized to one viewport (no inner scroll). --- */
html.fx .m-trust{margin-bottom:26px;gap:14px 24px}
html.fx #metod .shead{margin-bottom:26px}
html.fx #metod .shead h2{font-size:44px;margin-top:14px;line-height:1.04}
html.fx #metod .shead p{margin-top:14px;font-size:16px;line-height:1.55}
html.fx .axis-node{margin-bottom:16px}
html.fx .axis-star svg{width:50px;height:50px}
html.fx .axis-fan{display:none}
html.fx .m-agrid{gap:18px}
html.fx .m-acard{padding:26px 28px 30px}
html.fx .m-acard h3{margin-top:20px;font-size:20px}
html.fx .m-acard p{margin-top:12px;font-size:14.5px;line-height:1.55}
html.fx .m-acard-icon{width:52px;height:52px;border-radius:15px}
html.fx .m-stmt-title{font-size:40px;line-height:1.1}
html.fx .m-stmt-lead{margin-top:18px;font-size:16px;line-height:1.55}
html.fx .m-pgrid{gap:18px;margin-top:36px}
html.fx .m-pcard{padding:26px 28px}
html.fx .m-pcard-head{margin-top:14px;font-size:19px}
html.fx .m-pcard-sub{margin-top:8px;font-size:13.5px;line-height:1.45}
html.fx .check-list{gap:10px;margin-top:18px}
html.fx .check-mark,html.fx .check-text{font-size:14px;line-height:1.45}

/* KONTURY — tighten the four service rows (base .svc-row padding is a plain class now,
   so html.fx .svc-row wins on specificity — no !important). */
html.fx .svc-row{padding-top:16px;padding-bottom:16px}

/* KEISY — tighten case-card padding for the denser in-card scroll layout
   (base padding is now on .kcase-card/.kcase-flag classes, so no !important). */
html.fx .kcase-card,html.fx .kcase-flag{padding:22px}

/* KOMANDA — cap the tall 4/5 portraits and compact the bios (base is now class, no !important).
   Wide-short fx crop needs object-position tuned to the face band (faces sit ~25-41% down
   the source frame); default 'center 20%' showed only the top of each head. Named portrait
   classes (not nth-child) keep each crop bound to its own person if the DOM is reordered. */
html.fx .team-photo{aspect-ratio:auto;height:260px}
html.fx .team-portrait--vitaly{object-position:center 33%}
html.fx .team-portrait--evgeny{object-position:center 31%}
html.fx .team-body{padding:20px 24px 22px}
html.fx .team-body h3{font-size:21px}
html.fx .team-body p{margin-top:10px;font-size:14px;line-height:1.5}

/* KONTAKT — already fits; give the deep pad card extra headroom.
   .kcard is a component class now; it wins over html.fx .pcard by source order
   (this rule comes later) at equal specificity — no !important needed. */
html.fx .kcard{padding-top:34px;padding-bottom:34px}

/* ================================================================
   DE-INLINED COMPONENTS (markup is class-only; all styling lives here)
   ================================================================ */

/* ---- Section padding (all content panels; hero uses .hero instead) ---- */
.panel-pad{padding:clamp(24px,4.4vw,52px) clamp(16px,4.2vw,58px);scroll-margin-top:20px}
#kontakt{overflow:hidden}

/* ---- Brand lockup (hero nav + sticky nav logos; footer mark reuses .brand-mark) ---- */
.brand{display:flex;align-items:center;gap:11px;color:#FFFFFF}
.brand:hover{color:#FFFFFF}
.brand-mark{display:flex;color:var(--accent)}
.brand-name{font-family:'Source Serif 4',Georgia,serif;font-size:22px;font-weight:800;letter-spacing:-.01em}
.snav .brand{gap:9px}
.snav .brand-name{font-size:18px}

/* ---- Buttons (shared accent / ghost CTAs + nav-scoped variants) ---- */
.btn-primary{display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 32px;border-radius:999px;background:var(--accent);color:#0A142E;font-size:16px;font-weight:700;box-shadow:0 14px 36px color-mix(in srgb,var(--accent) 32%,transparent);transition:transform .2s,filter .2s}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07);color:#0A142E}
.btn-ghost{display:inline-flex;align-items:center;height:58px;padding:0 30px;border-radius:999px;border:1.5px solid rgba(255,255,255,.32);color:#FFFFFF;font-size:16px;font-weight:600}
.btn-ghost:hover{border-color:rgba(255,255,255,.7);color:#FFFFFF}
.btn-ghost--glass{background:rgba(9,15,36,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.nav-cta{display:inline-flex;align-items:center;height:46px;padding:0 26px;border-radius:999px;background:var(--accent);color:#0A142E;font-size:15px;font-weight:700;box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .2s,filter .2s}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08);color:#0A142E}
/* Snav's `.snav a` base rule (color/font-size/font-weight/transition, specificity 0,1,1)
   is more specific than a plain component class, so the snav switcher + CTA are scoped
   under `.snav` (0,2,0) here to win cleanly — no !important. */
.snav-cta{display:inline-flex;align-items:center;height:38px;padding:0 20px;border-radius:999px;background:var(--accent)}
.snav .snav-cta{color:#0A142E;font-weight:700}

/* ---- Language switcher pill (hero nav uses base; sticky nav is the smaller snav variant) ---- */
.lang-pill{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.85);font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;transition:border-color .2s,color .2s}
.lang-pill:hover{border-color:rgba(255,255,255,.7);color:#FFFFFF}
.snav .lang-pill{height:32px;padding:0 13px;font-size:12px;color:rgba(255,255,255,.85);transition:border-color .2s,color .2s}

/* ---- Hero layout ---- */
.hero{display:flex;flex-direction:column;min-height:clamp(620px,96vh,1020px);overflow:hidden}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(7,12,30,.62) 0%,rgba(7,12,30,.3) 42%,rgba(7,12,30,0) 68%)}
.hero-nav{position:relative;z-index:2;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(20px,3vw,32px) clamp(24px,4.2vw,58px)}
.hero-nav-actions{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap}
.hero-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px clamp(24px,4.2vw,58px) 9vh}
.hero-inner{max-width:860px;animation:heroRise .9s ease both}
.hero-title{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(46px,6.2vw,92px);font-weight:900;line-height:1;letter-spacing:-.01em;color:#FFFFFF;text-shadow:0 4px 40px rgba(7,12,30,.45);text-wrap:balance}
.hero-lead{margin:28px 0 0;max-width:470px;font-size:17px;line-height:1.65;color:rgba(233,238,250,.92);text-shadow:0 1px 16px rgba(7,12,30,.65)}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
/* Desktop hero headline scale-up (small/tablet floor kept identical below 820) */
@media(min-width:820px){.hero-title{font-size:clamp(46px,7.6vw,114px);line-height:.98}}

/* ---- Services (#kontury) — four rows (row hover folded into the class) ---- */
.svc-list{border-top:1px solid rgba(255,255,255,.1)}
.svc-row{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:14px 56px;padding:36px 0;border-bottom:1px solid rgba(255,255,255,.1);transition:background .2s}
.svc-row:hover{background:rgba(255,255,255,.02)}
.svc-head{display:flex;gap:18px;align-items:baseline}
.svc-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);flex:none}
.svc-name{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;color:#FFFFFF;line-height:1.3}
.svc-desc{margin:0;align-self:center;max-width:640px;font-size:16px;line-height:1.65;color:#A7B2CE}
/* Stack the rows on phones (after the base rule, so it wins on source order — no !important). */
@media(max-width:720px){.svc-row{grid-template-columns:1fr;gap:6px}}

/* ---- Cases (#keisy) — flagship (LENKON) card internals ---- */
.kflag-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.kflag-badge{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:5px 12px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px}
.kflag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px;margin-top:22px}
.kflag-head{margin:20px 0 0;font-family:'Source Serif 4',Georgia,serif;font-size:26px;font-weight:800;letter-spacing:-.01em;color:#FFFFFF;line-height:1.2}
.kflag-desc{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#A7B2CE}
.kflag-side{display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.ksub{display:flex;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.ksub-title{font-size:14px;font-weight:700;color:#FFFFFF}
.ksub-desc{font-size:13px;line-height:1.5;color:#A7B2CE;margin-top:2px}

/* ---- Contact (#kontakt) — heading, subtitle, contact tiles (tile hover folded in) ---- */
.kcontact-title{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(42px,6vw,78px);font-weight:900;line-height:1.02;letter-spacing:-.01em;color:#FFFFFF;text-wrap:balance}
.kcontact-sub{margin:22px auto 0;max-width:560px;font-size:18px;line-height:1.55;color:#A7B2CE}
.kcontact-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.kcontact-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin-top:clamp(48px,6vw,72px);text-align:left}
.kcontact-tile{padding:24px;border-radius:18px;background:#101C40;border:1px solid rgba(255,255,255,.07)}
/* Only the two <a> tiles are interactive; the city <div> tile keeps no hover/transition. */
a.kcontact-tile{transition:border-color .2s}
a.kcontact-tile:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.kcontact-tile-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8D99B8}
.kcontact-tile-val{font-size:16px;font-weight:700;color:#FFFFFF;margin-top:10px}

/* ---- Footer ---- */
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:30px clamp(24px,4.2vw,58px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px;color:#8D99B8;font-size:13px}
.footer-city{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:#8D99B8}

/* ---- Sticky-nav action cluster ---- */
.snav-actions{display:flex;align-items:center;gap:14px}