/* ============================================================
   LEARN — bridge.css
   peste learn.css (Bootstrap compilat + tema). Nu redefinește .btn.
   Paleta și umbrele REFERĂ variabilele din learn.css — o singură
   sursă de adevăr: schimbi _learn-variables.scss, landing-ul urmează.
   ============================================================ */

   /* Tokenuri & primitive bespoke pentru pagina de prezentare */
:root {
  --paper:        var(--bs-body-bg);
  --paper-deep:   var(--bs-secondary-bg);
  --paper-raised: var(--bs-tertiary-bg);
  --ink:          var(--bs-emphasis-color);
  --ink-soft:     var(--bs-body-color);
  --verde:        var(--bs-primary);
  --verde-bright: var(--bs-success);
  --gold:         var(--bs-warning);
  --gold-soft:    var(--bs-highlight-bg);
  --cream-on-verde: var(--learn-cream);
  --error:        var(--bs-danger);
  --hairline:     var(--bs-border-color);
  --hairline-strong: var(--learn-hairline-strong);

  --font-display: var(--bs-font-sans-serif);
  --font-ui:      var(--bs-font-sans-serif);
  --font-mono:    var(--bs-font-sans-serif);

  --h1: clamp(44px, 6.2vw, 88px);
  --h2: clamp(32px, 3.4vw, 44px);
  --h3: clamp(20px, 1.8vw, 24px);
  --eyebrow: 11px;

  --r-card: 24px;
  --r-inner: 16px;
  --r-pill: 999px;
  --mat: 8px;

  --shadow-paper: var(--bs-box-shadow);
  --shadow-paper-lg: var(--bs-box-shadow-lg);

  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-reveal: 700ms;

  --section-gap: clamp(64px, 11vw, 150px);
  --container: 1240px;

  --hero-tilt: 1;
  --grain-opacity: 0.03;
}

html { scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:root ::selection { background: var(--gold-soft); color: var(--ink); }
:root h1, :root h2, :root h3 { color: var(--ink); text-wrap: balance; }
:root p { text-wrap: pretty; }

:root .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* containerul editorial al paginii (suprascrie lățimile responsive bs) */
:root .container { max-width: var(--container); padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }

/* ---- eyebrow ---- */
:root .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-ui);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--verde);
}
:root .eyebrow--pill {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  background: var(--paper-raised);
}

/* ---- adaptor butoane Learn pe .btn Bootstrap ---- */
:root .btn .arrow-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(245, 239, 228, 0.14);
  flex: none;
  transition: transform 180ms var(--ease-settle);
}
:root .btn:hover .arrow-chip { transform: translate(2px, -2px); }
:root .btn .arrow-chip svg { width: 14px; height: 14px; }
:root .btn-primary { --bs-btn-padding-x: 1.4rem; padding-right: 0.75rem; display: inline-flex; align-items: center; gap: 8px; }
:root .btn-primary.btn-lg { padding-right: 1rem; }
:root .btn-primary.btn-lg .arrow-chip { width: 36px; height: 36px; }
:root .btn-outline-primary { display: inline-flex; align-items: center; }

/* ---- card dublu-înrămat ---- */
:root .matted {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--mat);
  box-shadow: var(--shadow-paper);
}
:root .matted > .matted-inner {
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  background: var(--paper-raised);
  height: 100%;
  overflow: hidden;
}

/* ---- pastila de verificare ---- */
:root .verify-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  white-space: nowrap;
}
:root .verify-pill .ok { color: var(--verde-bright); font-weight: 600; }

/* ---- granulație ---- */
:root .grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- reveal la scroll ---- */
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition: opacity var(--dur-reveal) var(--ease-settle),
              transform var(--dur-reveal) var(--ease-settle),
              filter var(--dur-reveal) var(--ease-settle);
  transition-delay: var(--d, 0ms);
}
html.js .reveal.in { opacity: 1; transform: none; filter: none; }
html.js .reveal.settled, html.js .reveal.settled * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transform: none; filter: none; transition: opacity 300ms ease; }
}

/* ---- corecturi de coexistență cu Bootstrap ---- */
:root .nav-wrap .nav { flex-wrap: nowrap; }                 /* .nav bs e flex-wrap:wrap */
:root .nav-wrap .nav-links { margin-bottom: 0; }
:root .footer ul { padding-left: 0; }
:root .nav .btn { --bs-btn-padding-y: 0.55rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: 14.5px; }
:root .nav .btn.btn-primary { padding-right: 9px; }
:root .nav .btn .arrow-chip { width: 26px; height: 26px; }
:root .hero-ctas .btn { --bs-btn-font-size: 16px; }
@media (max-width: 760px) {
  :root .nav .btn span.btn-label { display: none; }
  :root .nav .btn.btn-primary { padding: 9px; }
}
@media (max-width: 540px) {
  :root .hero-ctas .btn { width: 100%; justify-content: center; }
  :root .hero-ctas .btn-primary { justify-content: space-between; }
}