/* Somn de munte — planinski som. One stylesheet, both languages.
   Mechanics in the spirit of the reference he chose (deep header, cream page,
   one warm accent, serif display with italic accent lines, kickers, numbered
   cards, a dark stat band) — palette and type are our own. */

:root {
  --ink: #12242e;          /* deep river-slate: header, stat band */
  --ink-2: #1a3340;
  --paper: #faf6ef;        /* warm cream page ground */
  --card: #ffffff;
  --line: #e4dccd;
  --text: #26333a;
  --dim: #6b7a80;
  --accent: #b4552d;       /* burnt copper */
  --accent-ink: #8f421f;
  --ok: #3e7a5e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.serif { font-family: "Newsreader", Georgia, "Times New Roman", serif; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── header ── */
header {
  background: var(--ink);
  color: #f2ede3;
  position: sticky; top: 0; z-index: 10;
}
.nav { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: "Newsreader", Georgia, serif; font-size: 20px; color: #fff; text-decoration: none; white-space: nowrap; }
.brand svg { display: block; }
.nav a.link { color: #cfd8d3; text-decoration: none; font-size: 14px; }
.nav a.link:hover { color: #fff; }
.nav .spacer { flex: 1; }
.lang { display: flex; gap: 2px; border: 1px solid #3a5260; border-radius: 999px; padding: 2px; }
.lang a { padding: 4px 12px; border-radius: 999px; font-size: 13px; color: #cfd8d3; text-decoration: none; }
.lang a.on { background: var(--accent); color: #fff; }
.cta {
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.cta:hover { background: var(--accent-ink); }

/* ── hero ── */
.hero { position: relative; overflow: hidden; padding: 72px 0 56px; }
.hero .bg {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 90% at 30% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 90% at 30% 20%, #000 0%, transparent 75%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.kicker {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 18px;
}
.kicker::before { content: "●"; font-size: 8px; vertical-align: 2px; margin-right: 8px; }
h1 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 54px; line-height: 1.08; color: var(--ink); letter-spacing: -.01em; }
h1 em { font-style: italic; color: var(--accent); }
.lead { margin: 22px 0 30px; max-width: 46ch; color: var(--text); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 12px 22px; border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 600;
}
.btn-main {
  background: var(--accent); color: #fff; padding: 12px 22px; border-radius: 8px;
  text-decoration: none; font-size: 15px; font-weight: 600;
}
.btn-main:hover { background: var(--accent-ink); }
.hero .facts { margin-top: 30px; display: flex; gap: 28px; font-size: 12.5px; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.hero .facts b { color: var(--ink); }

/* the water panel: an honest drawing, not a stock photo */
.water {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px rgba(18,36,46,.45);
  background: var(--ink-2);
}
.water svg { display: block; width: 100%; height: auto; }
.water .cap { padding: 12px 16px; font-size: 12.5px; color: #b8c6c0; background: var(--ink); }

/* ── trust strip ── */
.trust { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust .wrap { display: flex; gap: 34px; align-items: center; padding: 18px 24px; flex-wrap: wrap; }
.trust .k { font-size: 11px; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; font-weight: 700; }
.trust span { font-size: 14.5px; color: var(--ink); font-weight: 600; }

/* ── sections ── */
section { padding: 72px 0; }
h2 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 38px; line-height: 1.15; color: var(--ink); max-width: 22ch; }
h2 em { font-style: italic; color: var(--accent); }
.sub { margin: 18px 0 40px; max-width: 62ch; color: var(--text); }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card { padding: 26px 22px; border-left: 1px solid var(--line); }
.card:first-child { border-left: 0; }
.card .no { font-size: 11px; letter-spacing: .16em; color: var(--accent); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.card h3 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 21px; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.card p { font-size: 13.5px; color: var(--text); line-height: 1.55; }

/* document rows — the credential list mechanic */
.rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.row { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .dot { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #eef2ee; display: flex; align-items: center; justify-content: center; color: var(--ok); font-weight: 700; }
.row b { color: var(--ink); font-size: 15.5px; }
.row .r { margin-left: auto; text-align: right; font-size: 12.5px; color: var(--dim); line-height: 1.5; white-space: nowrap; }

/* ── stat band ── */
.band { background: var(--ink); border-radius: 14px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.band > div { padding: 34px 26px; border-left: 1px solid #2c4552; }
.band > div:first-child { border-left: 0; }
.band .n { font-family: "Newsreader", Georgia, serif; font-size: 42px; color: #fff; line-height: 1; }
.band .n span { color: var(--accent); }
.band .t { margin-top: 10px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #a9bcb4; }

/* ── two-column blocks ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.checks { list-style: none; }
.checks li { padding: 10px 0 10px 32px; position: relative; }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 9px;
  width: 20px; height: 20px; border-radius: 50%; background: #e9efe7;
  color: var(--ok); font-size: 12px; font-weight: 700; text-align: center; line-height: 20px;
}
.checks b { color: var(--ink); display: block; }
.checks span { font-size: 14px; color: var(--text); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px; }
.panel .k { font-size: 11px; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec td { padding: 10px 4px; border-top: 1px solid var(--line); vertical-align: top; }
.spec tr:first-child td { border-top: 0; }
.spec td:first-child { color: var(--dim); width: 42%; }
.spec td:last-child { color: var(--ink); font-weight: 600; }

/* ── contact / footer ── */
.contact { background: var(--card); border-top: 1px solid var(--line); }
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 64px; padding-bottom: 64px; }
.ph { color: var(--accent-ink); background: #f6e8de; border-radius: 6px; padding: 1px 8px; font-weight: 600; white-space: nowrap; }
footer { background: var(--ink); color: #a9bcb4; font-size: 13px; }
footer .wrap { display: flex; gap: 20px; align-items: center; padding: 22px 24px; flex-wrap: wrap; }
footer .spacer { flex: 1; }
footer a { color: #cfd8d3; }

@media (max-width: 900px) {
  .hero .wrap, .split, .contact .wrap { grid-template-columns: 1fr; }
  .cards, .band { grid-template-columns: 1fr 1fr; }
  .card, .band > div { border-left: 0; border-top: 1px solid var(--line); }
  .band > div { border-color: #2c4552; }
  h1 { font-size: 40px; }
  .row .r { display: none; }
}

/* ── the Romanian trade-desk variant ─────────────────────────────────────
   His call, 2026-08-19: "the romanian version should admittedly probably be
   different, be creative." Same bones, different room: the buyer's page is
   dark like a trade desk, and the hero shows the FIȘA - the document the
   buyer actually wants - instead of the schematic. */
body.dark {
  --paper: #0f2028;
  --card: #16303c;
  --line: #2b4652;
  --text: #c9d6d1;
  --dim: #8ba39e;
  --ink: #f2ede3;
  --ink-2: #1a3340;
  background: var(--paper);
}
body.dark .hero .bg {
  background-image: linear-gradient(#1c3745 1px, transparent 1px),
                    linear-gradient(90deg, #1c3745 1px, transparent 1px);
}
body.dark .trust { background: #12242e; }
body.dark .btn-ghost { background: transparent; color: #f2ede3; border-color: #3a5260; }
body.dark .row .dot { background: #1e3a34; }
body.dark .band { border: 1px solid var(--line); }
body.dark .contact { background: #12242e; }
body.dark .ph { background: #3a2a1e; color: #e8a87c; }
body.dark .checks li::before { background: #1e3a34; }
body.dark .cap { color: #8ba39e; }

/* the fișă ticket: a light paper document floating on the dark desk */
.ticket {
  background: #faf6ef; color: #26333a; border-radius: 12px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
  overflow: hidden; border: 1px solid #e4dccd;
  transform: rotate(.6deg);
}
.ticket .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 2px solid #12242e;
}
.ticket .head b { font-family: "Newsreader", Georgia, serif; font-size: 17px; color: #12242e; }
.ticket .head span {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #b4552d; border: 1px solid #b4552d; border-radius: 4px; padding: 3px 8px; font-weight: 700;
}
.ticket table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ticket td { padding: 9px 18px; border-top: 1px dashed #e4dccd; }
.ticket tr:first-child td { border-top: 0; }
.ticket td:first-child { color: #6b7a80; width: 44%; }
.ticket td:last-child { color: #12242e; font-weight: 600; }
.ticket .foot { padding: 11px 18px; background: #f1ebdf; font-size: 12px; color: #6b7a80; }

/* dark-variant pins: surfaces that must STAY dark ink when --ink flips light
   (measured on pixels 2026-08-19: light band with white numbers, invisible
   brand, cream pitch panel with cream text, inverted footer) */
body.dark header { background: #0c1a21; }
body.dark .brand { color: #fff; }
body.dark .band { background: #16303c; }
body.dark .band .n { color: #fff; }
body.dark .band .t { color: #a9bcb4; }
body.dark footer { background: #0c1a21; }
body.dark .pitch { background: #b4552d !important; border-color: #b4552d !important; }
body.dark .pitch .k { color: #f6d9c8 !important; }
body.dark .pitch p { color: #fff !important; }
body.dark .pitch p b { color: #fff; }
body.dark .pitch .btn-main { background: #12242e; }

/* ── the sticky top stack: ribbon + header travel together ──────────────
   His correction, 2026-08-19 (with screenshot): scrolled down, the ribbon
   was gone and the only Romania pointer on screen was in Bulgarian - "if it
   doesn't help me explaining in Bulgarian about Romanian export, it's kind
   of stupid." The strip now rides sticky above the header, everywhere. */
.top { position: sticky; top: 0; z-index: 50; }
.top header { position: static; }
.ribbon {
  display: block; background: var(--accent); color: #fff; text-align: center;
  padding: 9px 16px; font-size: 14px; font-weight: 600; text-decoration: none;
  font-family: "Inter", system-ui, sans-serif; line-height: 1.35;
}
.ribbon:hover { background: var(--accent-ink); }

/* ── the phone pass: his father taps this on an iPhone ── */
@media (max-width: 760px) {
  .nav { gap: 14px; height: 56px; }
  .nav a.link { display: none; }        /* brand, language, CTA carry the phone */
  .brand { font-size: 17px; }
  .cta { padding: 8px 14px; font-size: 13px; }
  .ribbon { font-size: 12.5px; padding: 8px 12px; }
  .hero { padding: 40px 0 36px; }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .lead { font-size: 15px; }
  .hero .facts { flex-wrap: wrap; gap: 10px 22px; }
  section { padding: 48px 0; }
  .cards, .cards[style] { grid-template-columns: 1fr !important; }
  .band { grid-template-columns: 1fr 1fr; }
  .band > div { padding: 22px 18px; }
  .band .n { font-size: 30px; }
  .ticket { transform: none; }
  .trust .wrap { gap: 10px 20px; padding: 14px 20px; }
  .trust span { font-size: 13px; }
  .row { padding: 14px 16px; gap: 12px; }
  .wrap { padding: 0 16px; }
}

/* phone overflow fix (measured on the live 390px shot, 2026-08-19: the nav
   row out-measured the viewport and dragged the whole page wide, clipping
   every right edge). The row slims until it fits; clip is the backstop. */
html, body { overflow-x: clip; }
@media (max-width: 480px) {
  .nav { gap: 8px; height: 52px; }
  .brand { font-size: 14.5px; gap: 6px; }
  .brand svg { width: 20px; height: 20px; }
  .lang { padding: 1px; }
  .lang a { padding: 3px 8px; font-size: 11.5px; }
  .cta { padding: 7px 10px; font-size: 12px; border-radius: 6px; }
  .ribbon { font-size: 11.5px; padding: 7px 10px; }
  h1 { font-size: 30px; }
  .band { grid-template-columns: 1fr 1fr; }
  .band .n { font-size: 26px; }
  .band .t { font-size: 10px; letter-spacing: .08em; }
}

/* the last 40px of phantom width (measured on the 390px shot): tables keep
   min-content width, nowrap chips refuse to fold, grid children refuse to
   shrink. All three yield here. */
@media (max-width: 480px) {
  .hero .wrap > *, .split > *, .cards > *, .contact .wrap > * { min-width: 0; }
  .spec td { display: block; width: auto !important; padding: 2px 4px; }
  .spec td:first-child { padding-top: 10px; font-size: 12px; }
  .spec tr { display: block; border-top: 1px solid var(--line); }
  .spec tr:first-child { border-top: 0; }
  .spec td, .spec tr td { border-top: 0; }
  .ph { white-space: normal; }
  .row .r { display: none; }
  .ticket table td { display: table-cell; }   /* the ticket stays a ticket */
  .ticket td:first-child { width: 40%; }
}