/* ============================================================
 * G&D Crafting — Company site
 * Design system: "БИМЕТАЛ" v1 (gd-design-system.html)
 * Every value below is measured from the logo — do not eyeball.
 * Two metals (Au from the G, Fe from the D), one seam, a 45° grid,
 * 76.6% true black. Zero border-radius anywhere — octagonal cuts.
 * Type: Sofia Sans Condensed (display) + Inter (body), self-hosted.
 * ============================================================ */

/* ---------- Tokens (copied verbatim from the styleguide) ---------- */
:root {
  /* ПРАЗНОТА — знакът е 76.6% чисто черно */
  --void: #000000; --forge: #0A0B0D; --plate: #131519;
  --edge: #23262B; --edge-hi: #33373D;

  /* ЗЛАТО (Au) — от буквата G. --au-400 = основен акцент */
  --au-900: #3A2102; --au-800: #6A3D05; --au-700: #8A5A10; --au-600: #AB7017;
  --au-500: #C9902A; --au-400: #E3B24D; --au-300: #ECCB67; --au-200: #FFE9A7;

  /* СТОМАНА (Fe) — от буквата D. НЕУТРАЛНА. Не я тонирай в синьо. */
  --fe-800: #4A4A4A; --fe-700: #6E6E6E; --fe-600: #7D7C7C;
  --fe-500: #ABABAA; --fe-400: #D0D0D0; --fe-300: #FAFCFC;

  /* РИМ СВЕТЛИНА — светлина, не материал. Никога fill. */
  --warm-core: #855009; --warm-mid: #BE8426; --warm-hot: #F6CF65;
  --cool-core: #173554; --cool-mid: #456F94; --cool-hot: #B9E7FF;

  /* МАСТИЛО */
  --ink-hi: #F2F3F5; --ink: #9AA0A8; --ink-low: #5C626A;
  /* Site-side производна (не от стайлгайда): най-тъмното мастило за реален
     текст върху черно — --ink-low е 3.4:1 (под WCAG AA), това е 4.7:1. */
  --ink-mid: #767D86;

  /* СРЯЗВАНЕ — не радиус */
  --cut-1: 6px; --cut-2: 12px; --cut-3: 22px;

  /* ШРИФТ — self-host, без Google CDN (GDPR) */
  --f-disp: "Sofia Sans Condensed", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Placeholder marker (работен маркер, не бранд цвят) */
  --ph-ink: #E08A2E; --ph-line: #7A4A12;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  background-color: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--f-disp); font-weight: 800; margin: 0;
  line-height: 1.05; text-transform: uppercase; color: var(--ink-hi);
}
p { margin: 0; }
strong { color: var(--ink-hi); font-weight: 600; }
a { color: var(--au-400); text-decoration: none; }
a:hover { color: var(--au-300); }
img, svg { display: block; max-width: 100%; }
::selection { background: rgba(227, 178, 77, 0.28); color: var(--ink-hi); }
:focus-visible { outline: 2px solid var(--au-300); outline-offset: 3px; }
/* Върху срязани (clip-path) контроли външният ринг се отрязва — вътрешен ринг */
.btn:focus-visible, .lang-toggle button:focus-visible { outline-offset: -4px; }

/* ---------- Примитиви ---------- */

/* СРЯЗВАНЕ — октагон. Никога border-radius. */
.btn, .gem, .chip, .lang-toggle { clip-path: polygon(var(--cut-1) 0, calc(100% - var(--cut-1)) 0, 100% var(--cut-1), 100% calc(100% - var(--cut-1)), calc(100% - var(--cut-1)) 100%, var(--cut-1) 100%, 0 calc(100% - var(--cut-1)), 0 var(--cut-1)); }
.card { clip-path: polygon(var(--cut-2) 0, calc(100% - var(--cut-2)) 0, 100% var(--cut-2), 100% calc(100% - var(--cut-2)), calc(100% - var(--cut-2)) 100%, var(--cut-2) 100%, 0 calc(100% - var(--cut-2)), 0 var(--cut-2)); }
.card--hero { clip-path: polygon(var(--cut-3) 0, calc(100% - var(--cut-3)) 0, 100% var(--cut-3), 100% calc(100% - var(--cut-3)), calc(100% - var(--cut-3)) 100%, var(--cut-3) 100%, 0 calc(100% - var(--cut-3)), 0 var(--cut-3)); }

/* ШЕВЪТ — подписът. Черен канал, златен ръб отляво, стоманен отдясно.
   Логото, сплескано в линия. Разделител на секции. */
.seam {
  height: 1px; width: 100%; position: relative;
  background: linear-gradient(90deg, transparent 0, var(--au-800) 8%, var(--au-400) 40%,
    #000 48%, #000 52%, var(--fe-400) 60%, var(--fe-700) 92%, transparent 100%);
  animation: seam-draw 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.seam::after {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 19px;
  filter: blur(7px); opacity: 0.4; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--warm-core) 25%, transparent 48%,
    transparent 52%, var(--cool-core) 75%, transparent);
}

/* ХАЛФТОН — точковата сфера. Максимум два пъти на страница (hero + contact). */
.halftone { position: absolute; inset: 0; pointer-events: none; z-index: 0; animation: bloom 1.6s ease 0.25s both; }
.halftone::before, .halftone::after { content: ""; position: absolute; inset: 0; background-size: 11px 11px; }
.halftone::before {
  background-image: radial-gradient(circle, var(--au-300) 0 2px, transparent 2.5px);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 4%, transparent 56%);
          mask-image: radial-gradient(circle at 30% 40%, #000 4%, transparent 56%);
  opacity: 0.22;
}
.halftone::after {
  background-image: radial-gradient(circle, var(--fe-400) 0 2px, transparent 2.5px);
  -webkit-mask-image: radial-gradient(circle at 72% 42%, #000 4%, transparent 56%);
          mask-image: radial-gradient(circle at 72% 42%, #000 4%, transparent 56%);
  opacity: 0.16;
}

@keyframes seam-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes bloom { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Layout ---------- */
/* overflow-x: clip, НЕ hidden — hidden прави .site scroll container и
   sticky хедърът тихо спира да лепне за viewport-а */
.site { position: relative; isolation: isolate; min-height: 100dvh; overflow-x: hidden; overflow-x: clip; background: var(--void); }
.container { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; position: relative; }
.section > .container { position: relative; z-index: 1; }
.seam-row { padding: 0 24px; max-width: 1060px; margin: 0 auto; width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid var(--edge);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand__mark {
  width: 44px; height: auto; flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(190, 132, 38, 0.28)) drop-shadow(0 0 10px rgba(69, 111, 148, 0.2));
}
.brand__name {
  font-family: var(--f-disp); font-weight: 800; font-size: 17px;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--ink-hi);
}
.brand__name .amp { color: var(--au-400); }
.header-tools { display: inline-flex; align-items: center; gap: 8px; }

/* Language toggle — фаска + срязване */
.lang-toggle {
  display: inline-flex; padding: 1px;
  background: linear-gradient(160deg, var(--edge-hi), var(--edge) 40%, #000 100%);
}
.lang-toggle button {
  appearance: none; border: 0; cursor: pointer; margin: 0;
  padding: 8px 13px; font-family: var(--f-disp); font-weight: 800;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fe-500); background: var(--forge);
  transition: color 180ms ease, background 180ms ease;
}
.lang-toggle button[aria-pressed="true"] {
  color: #1A1000;
  background-color: var(--au-500);
  background-image: linear-gradient(180deg, var(--au-400), var(--au-600));
  text-shadow: 0 1px 0 rgba(255, 233, 167, 0.35);
}

/* ---------- Биметален текст (hero h1) ---------- */
.gold-clip {
  background: linear-gradient(94deg, var(--au-200) 0%, var(--au-400) 22%, var(--au-600) 44%,
    var(--fe-700) 52%, var(--fe-400) 70%, var(--fe-300) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Без background-clip:text текстът не бива да изчезва */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .gold-clip { color: var(--au-400); background: none; }
}

/* ---------- Hero ---------- */
.hero { padding: 76px 0 64px; position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero__inner { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.hero__copy { flex: 1; min-width: 300px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-disp); font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fe-600);
}
.hero__eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--au-500); flex: 0 0 22px; }
.hero h1 {
  margin: 18px 0 0; font-weight: 900;
  font-size: clamp(46px, 7.4vw, 84px); line-height: 0.9; letter-spacing: -0.015em;
}
.hero__sub { max-width: 56ch; margin-top: 20px; font-size: 17.5px; color: var(--ink); line-height: 1.65; }
.hero__actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
/* Без drop-shadow: JPEG-ът е непрозрачен и сянката очертава правоъгълника,
   не глобуса. Знакът си свети сам върху чистото черно. */
.hero__globe { flex: 0 0 300px; width: 300px; height: auto; }

/* Данни-лента под hero */
.hero-strip { margin-top: 56px; display: flex; flex-wrap: wrap; border: 1px solid var(--edge); background: rgba(10, 11, 13, 0.72); }
.hero-strip > div { flex: 1 1 25%; min-width: 190px; padding: 17px 22px; border-right: 1px solid #16181B; border-top: 1px solid #16181B; margin-top: -1px; }
.hero-strip > div:last-child { border-right: 0; }
.hs-k {
  display: block; font-family: var(--f-disp); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fe-600); margin-bottom: 5px;
}
.hs-v { font-size: 13.5px; color: var(--fe-400); font-variant-numeric: tabular-nums; }
.hs-v.ph {
  display: inline; padding: 0 0 1px; border: 0; border-bottom: 1px dashed var(--ph-line);
  background: none; color: var(--ph-ink); font-family: var(--f-body); font-weight: 500; font-size: 13.5px;
}
.hs-v.ph::before { content: none; }

/* ---------- Buttons — кован метал, фаска, срязване ---------- */
.btn {
  display: inline-block; padding: 1px; cursor: pointer; border: 0;
  font-family: var(--f-disp); font-weight: 800; font-size: 13.5px;
  letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none;
  transition: filter 180ms ease, transform 180ms ease;
}
/* само прекият наследник е тялото на бутона — иначе вложените
   only-bg/only-en спанове хващат падинга втори път */
.btn > span { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; white-space: nowrap; }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:hover { filter: brightness(1.14); transform: translateY(-1px); color: inherit; }
.btn:active { transform: translateY(0); }
.btn--gold { background: linear-gradient(180deg, var(--au-200), var(--au-600) 55%, var(--au-900)); }
.btn--gold span {
  background-color: var(--au-500);
  background-image: linear-gradient(180deg, var(--au-400), var(--au-600));
  color: #1A1000; text-shadow: 0 1px 0 rgba(255, 233, 167, 0.35);
}
.btn--gold:hover { color: #1A1000; }
.btn--outline { background: linear-gradient(180deg, var(--edge-hi), var(--edge)); }
.btn--outline span { background: var(--forge); color: var(--fe-400); }
.btn--outline:hover { color: var(--fe-300); }

/* ---------- Section header ---------- */
.section-head { margin-bottom: 30px; }
.section-head__eyebrow {
  font-family: var(--f-disp); font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fe-600);
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.section-head__eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--au-500); flex: 0 0 22px; }
.section-head h2 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.02; letter-spacing: -0.005em; }
.section-head p { margin-top: 14px; max-width: 66ch; color: var(--ink); font-size: 16.5px; }

/* ---------- Плочи (карти): метал + фаска + мини-шев на горния ръб ----------
 * Външният фон = 1px ръбът (clip-path реже всичко), ::before (inset 1px) = тялото,
 * ::after = шевът в миниатюр. Без box-shadow — clip-path го реже. */
.card { position: relative; padding: 29px; isolation: isolate; background: linear-gradient(160deg, var(--edge-hi), var(--edge) 38%, #000 100%); }
.card::before { content: ""; position: absolute; inset: 1px; z-index: 0; background: linear-gradient(180deg, #15181C, var(--forge)); }
.card::after {
  content: ""; position: absolute; top: 1px; left: 22px; right: 22px; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--au-400) 30%, #000 48%, #000 52%, var(--fe-400) 70%, transparent);
}
.card > * { position: relative; z-index: 1; }
.card { transition: filter 350ms ease, transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.card--hover:hover { filter: brightness(1.08); transform: translateY(-2px); }
.card--hero { padding: 35px; }
.card--hero p.lead { font-size: 16.5px; line-height: 1.7; color: var(--ink-hi); }
.card--hero p:not(.lead) { font-size: 16.5px; line-height: 1.7; color: var(--ink); margin-top: 16px; }

/* Знак-плочка за икона (бивш gem) — сега метал: злато върху фаска */
.gem {
  flex-shrink: 0; width: 46px; height: 46px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--edge-hi), var(--edge) 40%, #000 100%);
}
.gem::before { content: ""; position: absolute; inset: 1px; background: linear-gradient(180deg, var(--plate), var(--forge)); }
.gem svg { width: 22px; height: 22px; position: relative; z-index: 1; color: var(--au-400); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Feature card body */
.feature__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.feature__tag {
  font-family: var(--f-disp); font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--au-600);
}
.feature h3 { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; }
.feature p { margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }

/* ---------- Магазин (Google Play) ----------
 * Съзнателно НЕ ползваме официалния App Store / Google Play badge:
 * (1) те са заоблени — против най-твърдото правило на системата;
 * (2) Apple допуска своя badge само за приложение, което вече е в App Store.
 * Името на магазина като текст + собствена иконка е и безопасно, и наше. */
.store { display: flex; flex-direction: column; align-items: stretch; gap: 9px; flex-shrink: 0; }
.store__note { font-size: 12px; color: var(--ink-mid); text-align: center; }

/* ---------- Crop / quality spec rows ---------- */
.spec { display: flex; flex-direction: column; }
.spec__row { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid #16181B; }
.spec__row:last-child { border-bottom: none; padding-bottom: 4px; }
.spec__crop {
  font-family: var(--f-disp); font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-hi); flex: 0 0 138px;
  display: inline-flex; align-items: center; gap: 9px;
}
.spec__crop svg { width: 17px; height: 17px; }
.spec__params { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; display: inline-flex; padding: 1px;
  background: linear-gradient(160deg, var(--edge-hi), var(--edge) 40%, #000 100%);
  font-size: 12px; font-weight: 500; color: var(--fe-400); white-space: nowrap;
}
.chip > span { position: relative; z-index: 1; padding: 4px 11px; }
.chip::before { content: ""; position: absolute; inset: 1px; background: var(--forge); }

/* ---------- Company / contact detail list ---------- */
.details { display: grid; grid-template-columns: 200px 1fr; gap: 2px 24px; }
.details dt {
  font-family: var(--f-disp); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fe-600);
  padding: 14px 0 4px; align-self: start;
}
.details dd { margin: 0; padding: 0 0 14px; color: var(--ink-hi); font-size: 15.5px; border-bottom: 1px solid #14161A; }
.details dd .muted { color: var(--ink-mid); font-size: 13.5px; }
.details dd .muted strong { color: var(--ink); }

/* ---------- Placeholder маркери ----------
 * Работен инструмент, не бранд: оранжево + dashed. Падат преди go-live. */
.ph {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border: 1px dashed var(--ph-line);
  background: rgba(224, 138, 46, 0.07);
  color: var(--ph-ink); font-family: var(--f-body); font-weight: 500; font-size: 13.5px;
  letter-spacing: 0.01em;
}
.ph::before { content: "\26A0"; font-size: 12px; line-height: 1; }
.ph__note { font-size: 11px; color: rgba(224, 138, 46, 0.8); letter-spacing: 0.02em; }
.ph-banner {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px dashed var(--ph-line); background: rgba(224, 138, 46, 0.05);
  font-size: 13.5px; color: #D9A05B; line-height: 1.6;
}
.ph-banner svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--ph-ink); }
.ph-banner strong { color: var(--ph-ink); }

/* ---------- Footer ---------- */
.site-footer { padding: 44px 0 60px; margin-top: 8px; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-brand__mark { width: 40px; height: auto; }
.footer-legal { font-size: 13px; color: var(--ink-mid); line-height: 1.7; max-width: 460px; }
.footer-legal strong { color: var(--fe-500); font-weight: 600; }
.footer-contact { font-size: 13.5px; color: var(--ink); line-height: 1.9; }

/* ---------- Language visibility ----------
 * Toggle `.en` on <html>. Inactive language is display:none; the active
 * one keeps its natural display (no fragile `revert`). Default = Bulgarian. */
html:not(.en) .only-en { display: none; }
html.en .only-bg { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .details { grid-template-columns: 1fr; gap: 0; }
  .details dt { padding-bottom: 2px; }
  .details dd { padding-bottom: 12px; margin-bottom: 4px; }
  .spec__crop { flex-basis: auto; }
  .section { padding: 56px 0; }
  .hero { padding: 56px 0 48px; }
  .hero__inner { gap: 36px; }
  .hero__globe { flex: 1 1 100%; width: 240px; max-width: 240px; margin: 0 auto; }
  .hero-strip { margin-top: 44px; }
  .hero-strip > div { flex: 1 1 50%; min-width: 150px; }
  .hero-strip > div:nth-child(even) { border-right: 0; }
}
@media (max-width: 480px) {
  .hero-strip > div { flex: 1 1 100%; border-right: 0; }
  .brand__name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Print: браузърът маха черния фон — текстът да оцелее ---------- */
@media print {
  body, .site { background: #fff; }
  body, h1, h2, h3, p, dd, dt, strong, a, .hs-v, .hs-k, .footer-legal, .footer-contact,
  .feature p, .section-head p, .details dd, .details dd .muted, .chip, .spec__crop { color: #000 !important; }
  .gold-clip { background: none; color: #000; -webkit-text-fill-color: #000; }
  .halftone, .seam, .hero__globe, .brand__mark, .footer-brand__mark { display: none; }
  .card, .card::before, .gem::before, .chip::before, .btn span, .lang-toggle button { background: #fff !important; }
  .card { clip-path: none; border: 1px solid #999; }
}