/* ============================================================
   HUDDLE — bază comună: reset, header, butoane, footer.
   Orice pagină nouă încarcă tokens.css + base.css + CSS-ul ei.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: #7e9772 var(--bg-page);
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
em.serif, .serif { font-family: var(--font-serif); font-style: normal; font-weight: inherit; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed; top: -120px; left: 20px; z-index: 100;
  padding: 14px 20px;
  background: var(--bg-inverse); color: var(--text-on-dark);
}
.skip-link:focus { top: 20px; }

/* ---------- etichete tehnice (mono) ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* ---------- header comun ---------- */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  color: var(--text-primary);
  transition: color .35s;
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }
.masthead .logo { display: block; width: clamp(112px, 10vw, 147px); }
.masthead .logo img { width: 100%; height: auto; transition: filter .35s; }
.masthead.on-dark { color: var(--text-on-dark); }
.masthead.on-dark .logo img { filter: brightness(0) invert(1); }
.masthead-actions { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.masthead-link {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .06em;
  padding: 12px 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.masthead-link span { font-size: 1rem; }

/* Navigarea principală (paginile interioare) */
.masthead.with-nav { background: color-mix(in srgb, var(--bg-page) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.masthead.with-nav.on-dark { background: color-mix(in srgb, var(--green-950) 82%, transparent); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); margin-right: auto; margin-left: clamp(28px, 5vw, 72px); }
.site-nav a, .site-nav .nav-soon {
  position: relative; white-space: nowrap;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em;
  padding: 10px 0;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--green-400); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-out);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav .nav-soon { color: var(--text-secondary); cursor: default; }
.site-nav .nav-soon small {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  white-space: nowrap; opacity: 0; transition: opacity var(--dur-ui);
}
.site-nav .nav-soon:hover small, .site-nav .nav-soon:focus small { opacity: 1; }
@media (max-width: 760px) {
  .masthead.with-nav { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 6px; row-gap: 0; }
  .site-nav { order: 3; width: 100%; margin: 4px 0 0; gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .site-nav a, .site-nav .nav-soon { font-size: 14px; }
}

/* ---------- butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 12px 16px;
  font-size: var(--text-sm); font-weight: 500; line-height: 1.2;
  border: 1px solid currentColor;
  transition: transform var(--dur-ui) var(--ease-out), color var(--dur-ui);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: currentColor; opacity: 0; transition: opacity var(--dur-ui);
}
.btn:hover::before { opacity: .08; }
.btn .arrow { font-size: 1.2em; line-height: 1; }
.btn-primary {
  background: var(--accent); color: var(--green-800); border-color: var(--accent);
  padding: 19px 24px; font-size: 15px; min-width: 215px; gap: 48px;
}
.btn-primary::before { background: #f5ffe9; opacity: 1; transform: translateY(101%); transition: transform .35s var(--ease-out); }
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary:hover { transform: translateY(-3px); }

/* a doua cale, sub butonul principal: „sau programează o prezentare” */
.cta-alt { margin-top: 18px; font-size: 15px; color: inherit; }
.cta-alt a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lime-300); }

/* ---------- footer comun ---------- */
.site-footer {
  background: var(--green-950);
  color: var(--text-on-dark-muted);
  padding: clamp(56px, 8vw, 96px) var(--gutter) 32px;
  font-size: var(--text-sm);
}
.site-footer a:hover { color: var(--text-on-dark); }
.footer-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; gap: 40px 32px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
}
.footer-brand img { width: 128px; height: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer-brand p { max-width: 280px; line-height: 1.6; }
.footer-social { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; }
.footer-social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #ffffff2a; color: inherit; transition: color var(--dur-ui), border-color var(--dur-ui), background-color var(--dur-ui);
}
.footer-social a:hover, .footer-social a:focus-visible { color: var(--green-800); background: var(--lime-300); border-color: var(--lime-300); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.footer-col h2 {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime-300); margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer-col a { transition: color var(--dur-ui); }
.footer-col a, .footer-bottom a { display: inline-block; padding-block: 4px; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  max-width: var(--container); margin: clamp(48px, 6vw, 72px) auto 0;
  padding-top: 24px; border-top: 1px solid #ffffff1f;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .04em;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0 24px; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .masthead-link.optional { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- consimțământul pentru cookie-uri (consent.js) ---------- */
.ck {
  position: fixed; left: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); z-index: 90;
  width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 22px 22px 20px; border-radius: 20px;
  background: var(--green-800); color: var(--text-on-dark);
  box-shadow: 0 30px 70px -30px rgba(10, 25, 18, .7);
  opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .45s var(--ease-out);
}
.ck.is-in { opacity: 1; transform: none; }
.ck[hidden] { display: none; }
.ck-title { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.ck-text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-on-dark-muted); }
.ck-text a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lime-300); }
.ck-prefs { margin-top: 14px; display: grid; gap: 2px; }
.ck-prefs[hidden] { display: none; }
.ck-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #ffffff1f; cursor: pointer; }
.ck-opt b { display: block; font-size: 14.5px; font-weight: 600; }
.ck-opt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-on-dark-muted); }
.ck-opt input { flex: none; width: 20px; height: 20px; accent-color: var(--lime-300); }
/* Refuz și Accept toate arată la fel, unul lângă altul: niciuna dintre alegeri nu e scoasă în față */
.ck-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-btn:not(.ck-main-btn) { grid-column: 1 / -1; }
.ck-btn {
  min-height: 44px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  background: transparent; color: var(--text-on-dark); border: 1px solid #ffffff4d;
  transition: background var(--dur-ui), border-color var(--dur-ui);
}
.ck-btn:hover { border-color: var(--text-on-dark); }
.ck-btn[hidden] { display: none; }
.ck-btn.ck-main-btn { background: var(--lime-300); border-color: var(--lime-300); color: var(--green-800); }
.ck-btn.ck-main-btn:hover { background: #bff59c; }
.footer-ck { padding: 4px 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
.footer-ck:hover { color: var(--text-on-dark); }
.footer-ck[hidden] { display: none; }