/* Ghidurile statice (public/ghid*.html): aceeasi identitate ca pagina publica din aplicatie
   (LandingPage.jsx) — hero cu grila si stralucirea flacarii (deschis pe light, inchis pe dark, prin
   variabilele --hb-*), accentul portocaliu, Inter.
   Paginile nu trec prin React, deci culorile temei sunt copiate din theme.js (doar ce folosim);
   tema light/dark vine din boot.js (aceeasi cheie localStorage ca aplicatia). */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/inter/inter-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/inter/inter-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/fonts/inter/inter-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/fonts/inter/inter-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/fonts/inter/inter-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/fonts/inter/inter-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f9fafb; --border: #e6e7ea;
  --text: #1d1f24; --text-secondary: #4d5159; --text-muted: #868a93;
  --accent: #f24e07; --accent-strong: #d63a00; --icon-bg: #ffe2cf; --accent-text: #b83200;
  --accent-grad: linear-gradient(135deg, #ff7a18 0%, #f24e07 55%, #d63a00 100%);
  --accent-glow: 0 4px 14px rgba(242,78,7,0.28);
  --hb-bg: radial-gradient(90% 70% at 10% 110%, rgba(242,78,7,0.22) 0%, rgba(242,78,7,0.05) 45%, transparent 70%),
           radial-gradient(50% 40% at 95% 0%, rgba(255,170,40,0.14) 0%, transparent 70%),
           linear-gradient(160deg, #ffffff 0%, #f7f2ee 100%);
  --hb-grid: rgba(16,18,24,.5); --hb-text: var(--text); --hb-muted: var(--text-secondary); --hb-eyebrow: #d63a00;
  --hb-lang: rgba(16,18,24,0.6); --hb-hover: rgba(16,18,24,0.05);
  --hb-ghost-bg: rgba(255,255,255,0.6); --hb-ghost-border: rgba(16,18,24,0.18); --hb-ghost-hover-border: rgba(16,18,24,0.35);
  --hb-callout-bg: radial-gradient(120% 90% at 0% 120%, rgba(242,78,7,0.16) 0%, transparent 60%), var(--surface);
  --hb-callout-border: var(--border);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #16191f; --surface: #20242b; --surface-2: #282d36; --border: #323942;
  --text: #eaecf0; --text-secondary: #b8bec8; --text-muted: #8e96a1;
  --accent: #ff6a1f; --accent-strong: #ff8a4c; --icon-bg: #533122; --accent-text: #ffad7f;
  --accent-glow: 0 4px 16px rgba(242,78,7,0.25);
  --hb-bg: radial-gradient(90% 70% at 10% 110%, rgba(242,78,7,0.50) 0%, rgba(242,78,7,0.10) 45%, transparent 70%),
           radial-gradient(50% 40% at 95% 0%, rgba(255,170,40,0.16) 0%, transparent 70%),
           linear-gradient(160deg, #20242b 0%, #16191f 100%);
  --hb-grid: rgba(255,255,255,.6); --hb-text: #fff; --hb-muted: rgba(255,255,255,0.78); --hb-eyebrow: #ff9a5c;
  --hb-lang: rgba(255,255,255,0.75); --hb-hover: rgba(255,255,255,0.08);
  --hb-ghost-bg: rgba(255,255,255,0.06); --hb-ghost-border: rgba(255,255,255,0.22); --hb-ghost-hover-border: rgba(255,255,255,0.4);
  --hb-callout-bg: radial-gradient(120% 90% at 0% 120%, rgba(242,78,7,0.45) 0%, transparent 60%), linear-gradient(160deg, #20242b 0%, #16191f 100%);
  --hb-callout-border: transparent;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--accent-strong); }

/* Hero (ca .lp-hero) */
.g-hero, .g-band { position: relative; overflow: hidden; color: var(--hb-text); background: var(--hb-bg); }
.g-hero::after, .g-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: linear-gradient(var(--hb-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hb-grid) 1px, transparent 1px);
  background-size: 40px 40px; }
.g-nav, .g-hero-body { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.g-nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.g-mark { display: flex; align-items: center; gap: 6px; color: var(--hb-text); text-decoration: none; }
.g-logo { position: relative; width: 44px; height: 44px; }
.g-nav-right { display: flex; align-items: center; gap: 8px; }
.g-lang { padding: 11px 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: var(--hb-lang); text-decoration: none; border-radius: 10px; }
.g-lang:hover { color: var(--hb-text); background: var(--hb-hover); }
.g-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-shield-dark, [data-theme="dark"] .g-shield-light { display: none; }
[data-theme="dark"] .g-shield-dark { display: block; }
.g-word { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.8px; }
.g-fire { font-weight: 600; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.g-hero-body { padding-top: 32px; padding-bottom: 64px; max-width: 1120px; }
.g-crumbs { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hb-eyebrow); }
.g-crumbs a { color: inherit; text-decoration: none; }
.g-crumbs a:hover { text-decoration: underline; }
.g-hero h1 { margin: 0; max-width: 820px; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -1.2px; }
.g-lead { margin: 18px 0 0; max-width: 720px; font-size: 18px; line-height: 1.55; color: var(--hb-muted); }
.g-ghost { display: inline-flex; align-items: center; padding: 11px 20px; font-size: 15px; font-weight: 600; color: var(--hb-text); text-decoration: none;
  background: var(--hb-ghost-bg); border: 1px solid var(--hb-ghost-border); border-radius: 10px; transition: background .15s, border-color .15s; }
.g-ghost:hover { background: var(--hb-hover); border-color: var(--hb-ghost-hover-border); }
.g-primary { position: relative; z-index: 1; display: inline-block; padding: 13px 24px; font-size: 15px; font-weight: 700; color: #fff;
  text-decoration: none; border-radius: 10px; background: var(--accent-grad); box-shadow: var(--accent-glow); }
.g-primary:hover { filter: brightness(1.08); }

/* Articolul */
.g-main { max-width: 820px; margin: 0 auto; padding: 56px 24px 0; }
.g-article h2 { margin: 44px 0 12px; font-size: 26px; line-height: 1.25; letter-spacing: -0.5px; }
.g-article h2:first-child { margin-top: 0; }
.g-article h3 { margin: 28px 0 8px; font-size: 18px; }
.g-article p, .g-article li { color: var(--text-secondary); }
.g-article strong { color: var(--text); }
.g-article ul { padding-left: 22px; }
.g-article li { margin: 6px 0; }
.g-eq { margin: 18px 0; padding: 18px 20px; overflow-x: auto; background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 10px; color: var(--text);
  font: 19px/1.6 "Cambria Math", "Cambria", "Times New Roman", serif; white-space: nowrap; }
.g-eq small { display: block; margin-top: 4px; font: 13px/1.4 "Inter", "Segoe UI", system-ui, sans-serif; color: var(--text-muted); white-space: normal; }
.g-table { margin: 18px 0; overflow-x: auto; }
.g-table table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-size: 15px; }
.g-table th, .g-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.g-table th { background: var(--surface-2); color: var(--text-muted); font-weight: 600; font-size: 13px; }
.g-table tr:last-child td { border-bottom: none; }
.g-note { margin: 28px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 14px; color: var(--text-muted); }

/* Chenarul promotional din articol (ca .lp-sol-card de pe pagina publica) */
.g-callout { margin: 28px 0; padding: 24px; border-radius: 14px; color: var(--hb-text); display: grid; gap: 10px; justify-items: start;
  background: var(--hb-callout-bg); border: 1px solid var(--hb-callout-border); }
.g-callout b { font-size: 18px; }
.g-callout span { font-size: 15px; line-height: 1.55; color: var(--hb-muted); }
.g-callout .g-primary { margin-top: 6px; }

/* Carduri (ghidurile inrudite, pagina de ghiduri) — ca .lp-card */
.g-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.g-card { display: block; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.g-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.g-card::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--accent-grad); margin-bottom: 14px; }
.g-card b { display: block; margin-bottom: 6px; font-size: 17px; color: var(--text); }
.g-card span { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.g-related { margin-top: 64px; }
/* Grupele de pe pagina de ghiduri */
.g-group + .g-group { margin-top: 48px; }
.g-group h2 { margin: 0; font-size: 22px; }
.g-related h2 { margin: 0; font-size: 22px; }

.g-band { margin-top: 88px; padding: 56px 24px; text-align: center; }
.g-band h2 { position: relative; z-index: 1; margin: 0 0 22px; font-size: 28px; letter-spacing: -0.6px; }
.g-band-note { position: relative; z-index: 1; margin: 16px 0 0; font-size: 14px; opacity: 0.8; }
.g-footer { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; padding: 24px 16px; font-size: 13px; color: var(--text-muted); }
.g-footer a { color: var(--text-muted); }

@media (max-width: 900px) {
  .g-nav, .g-hero-body { padding-left: 16px; padding-right: 16px; }
  .g-nav { height: 64px; }
  .g-logo { width: 36px; height: 36px; }
  .g-word { font-size: 20px; }
  .g-ghost { padding: 8px 12px; font-size: 13.5px; }
  .g-lang { padding: 8px; font-size: 13px; }
  .g-nav-right { gap: 2px; }
  .g-hero-body { padding-top: 16px; padding-bottom: 44px; }
  .g-hero h1 { font-size: 32px; letter-spacing: -0.6px; }
  .g-lead { font-size: 16px; }
  .g-main { padding: 40px 16px 0; }
  .g-article h2 { font-size: 22px; }
  .g-eq { font-size: 17px; padding: 14px 16px; }
  .g-cards { grid-template-columns: 1fr; }
}

/* Capturi din aplicatie: inclinate in perspectiva (ca pe pagina de prezentare), se indreapta la hover.
   Imaginea e asezata la dublul latimii si micsorata cu scale3d(.5, .5, .5): browserul o rasterizeaza la marimea
   dubla inainte de inclinarea 3D, deci textul ramane clar (la marimea normala inclinarea il estompa).
   Toate dimensiunile sunt deci duble (raza, chenarul, umbrele), iar margin-bottom negativ anuleaza
   inaltimea in plus: --ar = inaltime / latime a capturii (implicit 500 / 788). */
.g-fig { margin: 32px 0; perspective: 1600px; }
.g-fig img { display: block; width: 200%; max-width: none; height: auto; margin-bottom: calc(-100% * var(--ar, 500 / 788));
  border-radius: 24px; border: 2px solid var(--border); transform-origin: 0 0;
  transform: scale3d(.5, .5, .5) translate(40%, 50%) rotateY(-9deg) rotateX(5deg) rotateZ(0.6deg) translate(-40%, -50%);
  box-shadow: 48px 64px 120px -36px rgba(16,18,24,.32), 12px 20px 44px -20px rgba(16,18,24,.22), 0 0 0 2px rgba(255,255,255,.04);
  transition: transform .5s ease, box-shadow .5s ease; }
.g-fig:hover img { transform: scale3d(.5, .5, .5); box-shadow: 0 36px 88px -36px rgba(16,18,24,.28); }
.g-fig figcaption { margin-top: 18px; font-size: 13px; color: var(--text-muted); text-align: center; }
@media (max-width: 600px) { .g-fig img { transform: scale3d(.5, .5, .5) translate(40%, 50%) rotateY(-5deg) rotateX(3deg) translate(-40%, -50%); } }
@media (prefers-reduced-motion: reduce) { .g-fig img { transition: none; } }
.g-fig .g-shot-dark, [data-theme="dark"] .g-fig .g-shot-light { display: none; }
[data-theme="dark"] .g-fig .g-shot-dark { display: block; }
[data-theme="dark"] .g-fig img { box-shadow: 48px 64px 120px -36px rgba(0,0,0,.7), 12px 20px 44px -20px rgba(0,0,0,.5); }