/* ============================================================
   MEDIA HOLDING — VISUAL PHYSICS (V4, "The Navy Monolith and the Gold Seal")
   One stylesheet shared by every surface of this bundle:
   the Founder page, the Media Holding entity page and 404.

   Canonical source of the rules implemented here:
   skynet_production/docs/MEDIA_HOLDING_VISUAL_IDENTITY_FINAL.md §0–§8
   (RATIFIED as the binding Visual Identity Canon, dm-20260724-42).

   The four laws it encodes: Gravity (weight at the base) · Orbit (the ring
   is the family geometry) · Field (depth behind content, never over it) ·
   Luminosity (gold = the Holding speaks, blue = engineering runs,
   silver = words that must feel engraved).

   Serif is deliberately absent: the reference set contains no serif DNA and
   the canon retires Fraunces at the navy migration (§2).
   ============================================================ */

:root {
  /* ---- Foundation (§3) ---- */
  --navy:      #0A0D12;   /* the one universe */
  --navy-deep: #0A102A;   /* depth layer for fields and gradients */
  --panel:     #121722;   /* cards, data panels */
  --hair:      #222B39;   /* 1px only: structure whispered, not drawn */

  /* ---- Three lights (§3) ---- */
  --gold:      #D4AF37;   /* the Holding's light — scarce by law */
  --gold-hi:   #E6C65B;
  --blue:      #2E6BFF;   /* the engineering light — the Founder layer */
  --blue-hi:   #57A8FF;
  --silver:    #C9CFD6;   /* the engraved voice */

  /* ---- Two texts (§3) ---- */
  --text:      #E8ECF2;
  --muted:     #8B97A8;
  --faint:     #5F6B7C;

  --maxw:    1180px;
  --measure: 34rem;
  --gutter:  clamp(24px, 5.5vw, 72px);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--navy);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(46,107,255,0.28); }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

/* ---------------- type: two voices, one temperature (§2) ---------------- */
/* Display = engraved grotesque capitals. Weight 300–400, never bold-shouting. */
h1, h2, h3 { margin: 0; font-weight: 300; }

.display {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.02;
  color: var(--silver);
  margin: 0;
}

.label {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.statement {
  font-weight: 300;
  font-size: clamp(1.5rem, 3.1vw, 2.35rem);
  line-height: 1.34;
  letter-spacing: -0.008em;
  color: var(--text);
  max-width: 40rem;
  margin: 0;
}
.statement .q { color: var(--muted); }

p { margin: 0; color: var(--muted); max-width: var(--measure); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------- rhythm: space is the monument (§5) ---------------- */
.band { padding: clamp(104px, 19vh, 208px) 0; }
.band + .band { border-top: 1px solid var(--hair); }
.sec-label { display: block; margin-bottom: clamp(40px, 6vh, 72px); }
.stack > * + * { margin-top: 1.6rem; }

/* ---------------- nav ---------------- */
header.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,13,18,0.72);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
header.nav.scrolled { border-bottom-color: var(--hair); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.mark { display: inline-flex; align-items: center; gap: 14px; }
.mark .wordmark {
  font-size: 0.78rem; font-weight: 400; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--silver); white-space: nowrap;
}
/* On narrow screens the ring mark carries the identity alone */
@media (max-width: 560px) { .mark .wordmark { display: none; } }

/* PF-ring — the Founder avatar mark. OPTION 1–7 is retired (§1): one
   geometry for the whole family, no competing personal symbol. */
.pf-ring {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(201,207,214,0.55);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem; letter-spacing: 0.1em; color: var(--silver); font-weight: 400;
  flex: none;
}
/* The Seal in a header — used only where the Holding itself speaks, and then
   never also in that surface's footer (§1 usage law). */
.seal-mark { width: 34px; height: 34px; border-radius: 50%; flex: none; display: block; }

.nav-right { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); }
.nav-connect {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); transition: color .3s;
}
.nav-connect:hover { color: var(--text); }
@media (max-width: 960px) { .nav-right { gap: 12px; } }

/* GlobalLanguageSwitcher — pre-JS trigger styling; the component injects the
   full menu styles on init (deploy/js/global-language-switcher.js). */
.mh-lang { position: relative; display: inline-flex; align-items: center; }
.mhls-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 6px 4px; margin: 0;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  line-height: 1; transition: color .3s; min-height: 32px;
}
.mhls-trigger:hover { color: var(--text); }
.mhls-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mhls-globe { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; flex: none; }
.mhls-caret { width: 8px; height: 8px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; opacity: .7; }
.mh-lang noscript a { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 4px 3px; }

/* The switcher component ships a light palette on `.mhls,.mhls-menu`. These
   selectors are deliberately more specific so the navy palette wins without
   !important, and the component file stays untouched and reusable. */
#mh-lang.mhls, .mhls-menu.mhls-menu {
  --mhls-bg: #121722;
  --mhls-ink: #E8ECF2;
  --mhls-ink-2: #8B97A8;
  --mhls-muted: #5F6B7C;
  --mhls-line: rgba(232,236,242,0.16);
  --mhls-hair: rgba(232,236,242,0.08);
  --mhls-accent: #57A8FF;
}
.mhls-menu.mhls-menu { box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9); }
.mhls-menu.mhls-menu .mhls-opt:hover,
.mhls-menu.mhls-menu .mhls-opt.mhls-active { background: rgba(46,107,255,0.12); }
.mhls-menu.mhls-menu .mhls-notice { background: rgba(46,107,255,0.08); }
.mhls-menu.mhls-menu .mhls-badge { border-color: rgba(87,168,255,0.35); }

/* ---------------- the Field (§3: one per surface, behind, static) --------- */
.hero { position: relative; padding: clamp(76px, 13vh, 150px) 0 clamp(84px, 14vh, 176px); overflow: hidden; }
.hero .wrap { z-index: 1; }

/* On the Founder page the Field is the portrait's own field — the same
   starfield and light waves, taken from the photograph's background strip and
   carried across the full width of the band, so the picture does not sit on a
   background: its background becomes the background. */
.field {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
}
.field-img {
  position: absolute; inset: -6% -4%;
  background-image: url('/assets/founder-navy.jpg');
  background-repeat: no-repeat;
  background-size: 420% 128%;
  background-position: 3% 44%;
  filter: blur(16px) saturate(1.06);
  opacity: .9;
}
.field-img.mirror {
  transform: scaleX(-1);
  background-position: 2% 56%;
  background-size: 460% 120%;
  opacity: .42;
}
/* Scrim: weight low and left, engraved capitals keep their contrast. */
.field .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,13,18,0.94) 0%, rgba(10,13,18,0.80) 32%, rgba(10,13,18,0.25) 58%, rgba(10,13,18,0) 78%),
    radial-gradient(70% 60% at 8% 88%, rgba(10,13,18,0.85) 0%, rgba(10,13,18,0) 70%);
}
/* The constellation lattice — the quiet "connected points, one system" field
   used where there is no photograph. */
.lattice {
  position: absolute; inset: 0; opacity: .13; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
}

/* ---------------- hero ---------------- */
.hero-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(40px, 5vw, 64px); align-items: center; }

/* Default hero (Media Holding entity page): the name IS the monument. */
.hero .kick { margin-bottom: 30px; }
.hero .name {
  font-weight: 300; text-transform: uppercase; line-height: 1.02;
  font-size: clamp(2.05rem, 5.6vw, 4.5rem); letter-spacing: 0.12em;
  color: var(--gold); margin-bottom: 30px;
}
.hero .cover {
  font-size: clamp(1.02rem, 1.7vw, 1.18rem); line-height: 1.62; font-weight: 300;
  color: var(--text); max-width: 30rem;
}
.hero .cover .soft { color: var(--muted); }

/* Founder hero: the hierarchy is inverted on purpose — the person names
   himself quietly, the thing he builds carries the surface. */
.hero--founder .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-bottom: 30px; }
.hero--founder .name {
  font-size: 0.78rem; letter-spacing: 0.26em; color: var(--silver);
  margin-bottom: 0; text-transform: uppercase; line-height: 1.4;
}
.hero--founder .who .sep { color: #4A5566; font-size: 0.7rem; }
.hero--founder .kick { margin-bottom: 0; line-height: 1.4; }
.hero--founder .holding {
  font-size: clamp(2.05rem, 5.6vw, 4.5rem); letter-spacing: 0.12em;
  color: var(--gold); margin-bottom: 24px;
}
.hero--founder .thesis {
  font-size: clamp(0.82rem, 1.5vw, 1.12rem); letter-spacing: 0.26em;
  color: var(--silver); margin-bottom: 32px;
  line-height: 1.6;   /* the Cyrillic and Estonian lines wrap — capitals must breathe */
}
.hero--founder .cover { max-width: 27rem; }

/* Portrait — navy silk on navy. No frame: only the outer edge is feathered,
   the subject is never cut into. */
.portrait { position: relative; }
.portrait img {
  width: 100%; display: block; position: relative; z-index: 1;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 72%, transparent 99%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 72%, transparent 99%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Placeholder shown only if the photograph fails to load */
.ph { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; color: var(--muted); }
.ph .mono { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--silver); color: var(--silver); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.ph .t { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--silver); }
.ph small { font-size: 0.74rem; max-width: 14rem; line-height: 1.5; }

/* ---------------- the formula band ---------------- */
.formula p { white-space: nowrap; max-width: none; }
.formula .f1 { font-size: clamp(1.02rem, 3.1vw, 2.5rem); letter-spacing: 0.15em; }
.formula .f2 { font-size: clamp(1.02rem, 3.1vw, 2.5rem); letter-spacing: 0.15em; color: #6E7A8B; margin-top: 0.4em; }

/* ---------------- the system spine (rings = the family geometry) --------- */
.spine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: clamp(44px, 6vh, 68px); }
.node { background: var(--navy); padding: clamp(28px, 4vw, 46px) clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.node .ring {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.58rem; letter-spacing: 0.1em; flex: none;
}
.node .ring .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; }
.node.n-pf { color: var(--silver); }
.node.n-mh { color: var(--gold); background: linear-gradient(180deg, #0C1220 0%, var(--navy) 70%); }
.node.n-pr { color: var(--blue-hi); }
.node h3 { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--silver); }
.node p { font-size: 0.95rem; max-width: none; }
@media (max-width: 860px) { .spine { grid-template-columns: 1fr; } }

/* ---------------- products ---------------- */
.products { border-top: 1px solid var(--hair); max-width: 48rem; }
.prod { display: grid; grid-template-columns: 1fr auto; gap: 14px 32px; align-items: baseline; padding: 36px 0; border-bottom: 1px solid var(--hair); }
.prod .pn {
  font-size: 1.16rem; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--silver); display: inline-flex; align-items: center; gap: 12px;
}
.prod a.pn:hover { color: var(--blue-hi); }
.prod .gi-ring { width: 18px; height: 18px; flex: none; }
.prod .ps { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.prod .ps.live { color: var(--blue-hi); }
.prod .pd { grid-column: 1 / -1; font-size: 1rem; max-width: 34rem; }
.prod .pa { grid-column: 1 / -1; margin-top: 2px; }
.prod .pline { grid-column: 1 / -1; margin-top: -4px; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }

/* ---------------- principles ---------------- */
.principle { padding: clamp(30px, 4vh, 46px) 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 3.5rem 1fr; gap: clamp(18px, 3vw, 40px); align-items: baseline; }
.principle .pnum { font-size: 0.86rem; letter-spacing: 0.18em; color: var(--blue-hi); font-weight: 400; font-variant-numeric: tabular-nums; }
.principle .pt { font-size: clamp(1.2rem, 2.5vw, 1.62rem); line-height: 1.3; color: var(--text); font-weight: 300; letter-spacing: -0.004em; }
.principle .pp { margin-top: 11px; font-size: 1rem; max-width: 32rem; }

/* ---------------- writing flow ---------------- */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.flow .f { font-size: clamp(0.78rem, 1.6vw, 0.92rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver); }
.flow .arw { color: var(--blue); font-size: 0.9rem; }

/* ---------------- links ---------------- */
.ul {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--blue-hi); font-size: 0.86rem; letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(46,107,255,0.35); padding-bottom: 3px;
  transition: gap .3s, border-color .3s;
}
.ul:hover { gap: 14px; border-color: var(--blue-hi); }
.cta-row, .insights-cta { margin-top: 46px; }
.prod .pa .ul { font-size: 0.84rem; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.legal-note { font-size: 0.95rem; color: var(--muted); max-width: 40rem; }

/* ---------------- connect chips (§4: the sanctioned exception) ----------- */
.connect-icons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); margin-top: clamp(44px, 6vh, 64px); width: 100%; align-items: center; }
.c-icon { display: flex; justify-content: center; color: #fff; }
.c-icon-btn {
  width: clamp(46px, 5.2vw, 56px); height: clamp(46px, 5.2vw, 56px); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .3s ease, filter .3s ease;
}
.c-icon-btn svg { width: clamp(19px, 2.1vw, 22px); height: clamp(19px, 2.1vw, 22px); display: block; }
.c-icon-btn svg.stroke-icon { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.c-icon-btn svg.fill-icon { fill: currentColor; }
.c-icon:hover .c-icon-btn, .c-icon:focus-visible .c-icon-btn { transform: translateY(-3px); filter: brightness(1.08); }
.c-icon:focus-visible { outline: none; }
.c-icon:focus-visible .c-icon-btn { outline: 2px solid var(--blue); outline-offset: 3px; }
.c-icon--linkedin .c-icon-btn { background: #0a66c2; }
.c-icon--facebook .c-icon-btn { background: #1877f2; }
.c-icon--gold     .c-icon-btn { background: linear-gradient(145deg, #D4AF37 0%, #9C7C22 100%); color: #0A0D12; }
.c-icon--telegram .c-icon-btn { background: linear-gradient(145deg, #2aabee 0%, #229ed9 100%); }
.c-icon--insights .c-icon-btn { background: var(--panel); color: var(--silver); border-color: var(--hair); }
.c-icon--goldfb   .c-icon-btn { background: linear-gradient(145deg, #3b7ddd 0%, #166fe5 100%); }
.c-icon--email    .c-icon-btn { background: var(--panel); color: var(--silver); border-color: var(--hair); }
.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; }
@media (max-width: 900px) { .connect-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .connect-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }

/* ---------------- footer ---------------- */
footer { padding: 64px 0 72px; border-top: 1px solid var(--hair); }
.foot { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.foot p { margin: 0; font-size: 0.76rem; color: var(--faint); max-width: none; }
.foot a:hover { color: var(--text); }

/* The Seal — small, precise, once per surface (§1). */
.seal-link { display: inline-flex; align-items: center; gap: 20px; }
.seal { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex: none; }
.seal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seal-text .st1 { display: block; font-size: 0.76rem; color: var(--muted); transition: color .3s; }
.seal-link:hover .st1 { color: var(--text); }
.seal-text .st2 { display: block; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); opacity: .72; margin-top: 7px; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .portrait { max-width: 380px; }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* ---------------- motion: confirmation, never spectacle (§6) ------------- */
.reveal { opacity: 0; transform: translateY(9px); transition: opacity .18s ease-out, transform .18s ease-out; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }