/* ==========================================================================
   Fitness Business Romania Magazine — styles.css
   Hand-written CSS, no build step. Tokens in :root, components grouped by
   section. Light theme plus a dark purple one.
   ========================================================================== */

/* ---------- Fonts (Poppins self-host, subset latin+latin-ext) -------------
   No weight 300: it was used nowhere, and an unused @font-face is a dead
   promise. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/vendor/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/vendor/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/vendor/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/vendor/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/vendor/fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/vendor/fonts/poppins-900.woff2") format("woff2"); }

/* ---------- Design tokens ------------------------------------------------- */
:root {
  /* Paleta FBR */
  --fbr-cyan: #50daff;
  --fbr-sky: #139be8;
  --fbr-blue: #006bc9;
  --fbr-yellow: #ffbf29;
  --fbr-orange: #ff8a0d;
  --fbr-pink: #ff2b66;
  --fbr-light-purple: #9953c4;
  --fbr-purple: #681da3;
  --fbr-deep-purple: #493dbd;
  /* Dark theme */
  --fbr-dark-bkg: #1f033b;
  /* Cards must be LIGHTER than the page background. Four rules repeat this colour
     as rgba for transparency and must change with it. */
  --fbr-dark-card: #2a0a4e;
  --fbr-border-purple: #3b165c;
  /* Form control border. WCAG 1.4.11 wants 3:1 for UI boundaries; this gives 3.38:1. */
  --fbr-input-border: #8a48bd;
  /* Variants for small text ON LIGHT BACKGROUNDS. The brand colours are calibrated
     for the dark theme and fall under 4.5:1 here. Do NOT use these on dark. */
  --fbr-pink-on-light: #d6003c;
  --fbr-orange-on-light: #a8480a;
  /* Slate (Tailwind) */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --green-400: #4ade80;
  --green-500: #22c55e;

  --header-h: 90px;
  --gradient-brand: linear-gradient(to right, var(--fbr-blue), var(--fbr-cyan), var(--fbr-purple));
  --gradient-cta: linear-gradient(to right, var(--fbr-pink), var(--fbr-purple));
  --gradient-divider: linear-gradient(to right, var(--fbr-cyan), var(--fbr-pink));
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* No scroll-behavior: smooth — the script already animates with a header offset,
   and both together would double it. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fbr-dark-bkg);
  color: var(--slate-100);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }
::selection { background: var(--fbr-pink); color: #fff; }
:focus-visible { outline: 2px solid var(--fbr-cyan); outline-offset: 2px; }

/* ---------- Layout helpers ------------------------------------------------ */
.container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
.container--6xl { max-width: 72rem; }
.container--5xl { max-width: 64rem; }
.container--4xl { max-width: 56rem; }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem; } }

.section { padding-block: 6rem; }
.section--light { background: var(--slate-50); }
.section--white { background: #fff; }
.section--dark { background: var(--fbr-dark-bkg); }

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-divider {
  width: 6rem; height: 4px; border-radius: 9999px; background: var(--gradient-divider);
}
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; border-radius: 9999px; padding: .875rem 2rem; font-size: 1rem;
  text-align: center; transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, border-color .3s;
  border: 1px solid transparent;
}
.btn i { font-size: .95em; }
.btn--primary { background: var(--gradient-cta); color: #fff; box-shadow: 0 10px 15px -3px rgba(255,43,102,.2); }
.btn--primary:hover { box-shadow: 0 12px 28px -6px rgba(255,43,102,.45); transform: scale(1.03); }
.btn--light { background: #fff; border-color: var(--slate-200); color: var(--slate-700); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.btn--light:hover { border-color: var(--slate-400); color: var(--slate-900); box-shadow: 0 6px 14px -6px rgba(0,0,0,.15); }
.btn--dark-outline { background: transparent; border-color: var(--fbr-border-purple); color: #fff; }
.btn--dark-outline:hover { border-color: #fff; background: rgba(255,255,255,.05); }
.btn--dark-solid { background: var(--fbr-dark-bkg); border-color: var(--fbr-border-purple); color: #fff; }
.btn--dark-solid:hover { background: var(--slate-900); }
.btn--slate { background: var(--slate-900); color: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.2); }
.btn--slate:hover { background: var(--fbr-blue); box-shadow: 0 12px 24px -6px rgba(0,107,201,.3); }
.btn--white { background: #fff; color: var(--slate-900); }
.btn--white:hover { background: var(--slate-100); transform: scale(1.05); }
.btn--sm { padding: .625rem 1.25rem; font-size: .875rem; }
.btn--lg { padding: 1rem 2.5rem; }
.btn--block { width: 100%; }
@media (min-width: 640px) { .btn--auto { width: auto; } }

.btn .arrow { transition: transform .3s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Scroll reveal (progressive enhancement: hidden only when JS is on) */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--left { transform: translateX(-40px); }
.js .reveal--left.is-visible { transform: none; }
.js .reveal--scale { transform: scale(.96); }
.js .reveal--scale.is-visible { transform: none; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; padding-block: .75rem;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--slate-100); box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px -8px rgba(15,23,42,.18); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; }
.site-header__logo img { height: 45px; width: auto; }
@media (min-width: 768px) { .site-header__logo img { height: 60px; } }

/* Nav appears at 900px, not 768px: six entries plus the CTA need the room. */
.nav { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 900px) { .nav { display: flex; } }
@media (min-width: 1100px) { .nav { gap: 2rem; } }
/* nowrap so an overflow becomes visible instead of silently wrapping. */
.nav .btn { white-space: nowrap; }
.nav__link { white-space: nowrap; position: relative; font-size: .875rem; font-weight: 600; color: var(--slate-700); transition: color .2s; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--gradient-divider); transition: width .3s;
}
.nav__link:hover { color: var(--fbr-blue); }
.nav__link:hover::after { width: 100%; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; padding: .5rem;
  color: var(--slate-900); font-size: 1.5rem; position: relative; z-index: 60;
}
.nav-toggle:hover { color: var(--fbr-pink); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--slate-950);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  padding-top: 5rem; opacity: 0; transform: translateX(100%);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); pointer-events: none;
}
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu__link { font-size: 1.5rem; font-weight: 600; color: #fff; transition: color .2s; }
.mobile-menu__link:hover { color: var(--fbr-cyan); }
@media (min-width: 768px) { .mobile-menu { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 8rem 0 5rem; overflow: hidden; background: #fff; text-align: center;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__grid {
  position: absolute; inset: 0;
  /* Darker than --slate-100 on purpose: hero__radial washes the lines out over #fff. */
  background-image: linear-gradient(to right, #eaeaea 1px, transparent 1px), linear-gradient(to bottom, #eaeaea 1px, transparent 1px);
  background-size: 3rem 3rem;
}
.hero__radial { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0%, #fff 100%); }
.blob { position: absolute; border-radius: 9999px; filter: blur(64px); mix-blend-mode: multiply; animation: pulse 4s ease-in-out infinite; }
.blob--1 { top: -10%; left: -5%; width: 500px; height: 500px; background: rgba(104,29,163,.10); opacity: .4; }
.blob--2 { bottom: -10%; right: -5%; width: 500px; height: 500px; background: rgba(80,218,255,.10); opacity: .4; animation-delay: 2s; }
.blob--3 { top: 20%; right: 10%; width: 300px; height: 300px; background: rgba(255,43,102,.10); opacity: .3; animation-delay: 4s; }
.hero__inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem; margin-bottom: 1.5rem;
  border-radius: 9999px; border: 1px solid var(--slate-200); background: rgba(255,255,255,.8); backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.hero__badge .dot-ping { position: relative; display: inline-flex; height: 6px; width: 6px; }
.hero__badge .dot-ping span:first-child { position: absolute; inset: 0; border-radius: 9999px; background: var(--fbr-pink); opacity: .75; animation: ping 1.2s cubic-bezier(0,0,.2,1) infinite; }
.hero__badge .dot-ping span:last-child { position: relative; height: 6px; width: 6px; border-radius: 9999px; background: var(--fbr-pink); }
.hero__badge span.label { color: var(--slate-600); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 640px) { .hero__badge { margin-bottom: 2rem; } .hero__badge span.label { font-size: .75rem; } }

.hero__title {
  font-size: 2.25rem; font-weight: 700; color: var(--slate-900); letter-spacing: -.02em;
  line-height: 1.1; margin-bottom: 1rem; max-width: 72rem;
}
@media (min-width: 640px) { .hero__title { margin-bottom: 1.5rem; } }
@media (min-width: 768px) { .hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 4.5rem; } }
.hero__title .accent { position: relative; display: inline-block; padding-inline: .5rem; }
.hero__title .accent > span:first-child { position: relative; z-index: 10; }
.hero__title .accent > .underline {
  position: absolute; left: 0; bottom: .5rem; width: 100%; height: .75rem;
  background: rgba(80,218,255,.10); transform: rotate(-1deg); border-radius: 9999px; z-index: 1;
}
.br-lg { display: none; } @media (min-width: 1024px) { .br-lg { display: inline; } }
.br-mobile { display: inline; } @media (min-width: 1024px) { .br-mobile { display: none; } }

.hero__lead {
  max-width: 56rem; margin: 0 auto 2rem; font-size: 1rem; color: var(--slate-600);
  line-height: 1.7; font-weight: 500;
}
@media (min-width: 768px) { .hero__lead { font-size: 1.125rem; } }
.hero__lead strong { color: var(--slate-900); font-weight: 700; }

.hero__benefits { display: grid; gap: 1.5rem; max-width: 64rem; width: 100%; margin: 0 auto 3rem; text-align: left; }
@media (min-width: 768px) { .hero__benefits { grid-template-columns: repeat(3,1fr); text-align: center; } }
.benefit {
  display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: 1rem;
  background: rgba(255,255,255,.5); backdrop-filter: blur(4px); border: 1px solid var(--slate-100);
  border-radius: .75rem; transition: box-shadow .3s;
}
@media (min-width: 768px) { .benefit { flex-direction: column; text-align: center; } }
.benefit:hover { box-shadow: 0 8px 18px -8px rgba(0,0,0,.12); }
.benefit__icon { flex-shrink: 0; padding: .75rem; border-radius: .5rem; font-size: 1.25rem; display: inline-flex; }
.benefit__icon--blue { background: rgba(0,107,201,.1); color: var(--fbr-blue); }
.benefit__icon--pink { background: rgba(255,43,102,.1); color: var(--fbr-pink); }
.benefit__icon--purple { background: rgba(104,29,163,.1); color: var(--fbr-purple); }
.benefit p { font-size: .875rem; color: var(--slate-700); font-weight: 500; line-height: 1.3; }

.hero__cta { display: flex; flex-direction: column; gap: 1rem; width: 100%; justify-content: center; align-items: center; }
@media (min-width: 640px) { .hero__cta { flex-direction: row; } }

/* Video mockup card */
.video-card-wrap { position: relative; width: 100%; max-width: 56rem; margin: 0 auto; }
.video-card {
  position: relative; aspect-ratio: 16/9; border-radius: 1rem; overflow: hidden;
  background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); cursor: pointer;
}
.video-card__chrome {
  position: absolute; inset: 0 0 auto 0; height: 2.5rem; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; padding-inline: 1rem;
  background: rgba(255,255,255,.05); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.1);
}
.video-card__dots { display: flex; gap: .5rem; }
.video-card__dots i { width: 12px; height: 12px; border-radius: 9999px; display: block; }
.dot-red { background: rgba(239,68,68,.8); } .dot-yellow { background: rgba(234,179,8,.8); } .dot-green { background: rgba(34,197,94,.8); }
.video-card__label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .625rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .1em; }
.video-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* rgba of --fbr-dark-card: transparency needs components, not the token. */
.video-card__overlay { position: absolute; inset: 0; z-index: 10; background: rgba(42,10,78,.5); backdrop-filter: blur(1px); transition: background .3s; }
.video-card:hover .video-card__overlay { background: rgba(42,10,78,.3); }
.video-card__content { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 2rem; }
.video-card__play {
  width: 4rem; height: 4rem; border-radius: 9999px; background: rgba(255,255,255,.2); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; color: #fff; font-size: 1.5rem; box-shadow: 0 10px 20px -6px rgba(0,107,201,.2); transition: transform .3s;
}
@media (min-width: 768px) { .video-card__play { width: 5rem; height: 5rem; } }
.video-card:hover .video-card__play { transform: scale(1.1); }
.video-card__content h3 { color: #fff; font-size: 1.125rem; margin-bottom: .25rem; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
@media (min-width: 768px) { .video-card__content h3 { font-size: 1.25rem; } }
.video-card__content p { color: rgba(255,255,255,.9); font-size: .75rem; }
.video-reflection { position: absolute; bottom: -2rem; left: 2.5rem; right: 2.5rem; height: 2rem; background: rgba(104,29,163,.2); filter: blur(32px); border-radius: 50%; z-index: -1; }

.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: var(--slate-300); font-size: 1.5rem; animation: bounce-y 2s infinite; }

/* Video modal */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.9); backdrop-filter: blur(4px); }
.modal.is-open { display: flex; }
.modal__dialog { position: relative; width: 100%; max-width: 72rem; aspect-ratio: 16/9; background: #000; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.1); }
.modal__dialog iframe { width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 50; padding: .5rem; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(0,0,0,.5); color: #fff; font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; }
.modal__close:hover { background: rgba(0,0,0,.8); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1fr 1fr; } }
.about__title { font-size: 1.875rem; font-weight: 800; color: var(--slate-950); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .about__title { font-size: 3rem; } }
.about__divider { margin: 0 0 2rem; }
.about__body { display: flex; flex-direction: column; gap: 1.5rem; color: var(--slate-700); font-size: 1.125rem; font-weight: 500; line-height: 1.7; }
.about__quote { padding: 1rem; border-left: 4px solid var(--fbr-pink); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); border-radius: 0 .5rem .5rem 0; }
.about__quote p { color: var(--fbr-pink-on-light); font-weight: 700; font-style: italic; }
.pillars { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar { padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid var(--slate-200); box-shadow: 0 4px 6px -1px rgba(0,0,0,.08); transition: transform .3s, box-shadow .3s; }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 12px 20px -8px rgba(0,0,0,.15); }
.pillar__icon { display: inline-flex; margin-bottom: 1rem; padding: .75rem; background: var(--slate-50); border: 1px solid var(--slate-100); border-radius: .5rem; font-size: 1.5rem; }
.pillar__icon.i-blue { color: var(--fbr-blue); } .pillar__icon.i-pink { color: var(--fbr-pink); } .pillar__icon.i-yellow { color: var(--fbr-yellow); } .pillar__icon.i-purple { color: var(--fbr-purple); }
.pillar h3 { font-size: 1.25rem; color: var(--slate-900); margin-bottom: .5rem; }
.pillar p { color: var(--slate-700); font-size: .875rem; line-height: 1.6; }

/* ==========================================================================
   ISSUES (dark)
   ========================================================================== */
.issues__head { text-align: center; margin-bottom: 4rem; }
.issues__head h2 { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .issues__head h2 { font-size: 3rem; } }
.issues__head .section-divider { margin: 0 auto 1.5rem; }
.issues__head p { color: var(--slate-400); font-size: 1.125rem; max-width: 42rem; margin: 0 auto; }
.issues__list { display: flex; flex-direction: column; gap: 3rem; }

.issue {
  position: relative; display: flex; flex-direction: column; gap: 2rem; padding: 2rem;
  /* rgba of --fbr-dark-card. Changes together with the token: .issue--latest below
     uses it directly, and a divergence shows two card shades in one grid. */
  border-radius: 1.5rem; border: 1px solid var(--fbr-border-purple); background: rgba(42,10,78,.5);
}
@media (min-width: 1024px) { .issue { flex-direction: row; gap: 3rem; padding: 3rem; } }
.issue--latest { background: var(--fbr-dark-card); border-color: rgba(104,29,163,.4); box-shadow: 0 20px 40px -12px rgba(104,29,163,.2); }
.issue__ribbon {
  position: absolute; top: 0; right: 1rem; transform: translateY(-50%);
  background: var(--gradient-cta); color: #fff; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: .5rem 1.5rem; border-radius: 9999px; box-shadow: 0 8px 16px -6px rgba(0,0,0,.4);
}
@media (min-width: 1024px) { .issue__ribbon { right: 3rem; } }
.issue__cover { width: 100%; flex-shrink: 0; display: flex; justify-content: center; }
@media (min-width: 1024px) { .issue__cover { width: 33.333%; justify-content: flex-start; } }
.issue__cover img { width: 100%; max-width: 24rem; border-radius: .5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); object-fit: cover; aspect-ratio: 1/1.4; transition: transform .5s; }
.issue__cover img:hover { transform: translateY(-8px); }
.issue__content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.issue__meta { display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 500; color: var(--slate-400); margin-bottom: 1rem; flex-wrap: wrap; }
.issue__badge { color: #fff; padding: .25rem .75rem; background: var(--fbr-dark-bkg); border: 1px solid var(--fbr-border-purple); border-radius: .375rem; }
.issue__meta .sep { width: 4px; height: 4px; background: var(--slate-400); border-radius: 9999px; }
.issue__title { font-size: 1.5rem; color: #fff; margin-bottom: 1rem; line-height: 1.25; }
@media (min-width: 768px) { .issue__title { font-size: 1.875rem; } }
.issue__desc { color: var(--slate-300); margin-bottom: 2rem; line-height: 1.7; }
.issue__list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.issue__list li { display: flex; align-items: flex-start; gap: .75rem; color: var(--slate-300); font-size: .875rem; }
.issue__list i { color: var(--fbr-cyan); flex-shrink: 0; margin-top: .15rem; }
.issue__title a { transition: color .2s; }
.issue__title a:hover { color: var(--fbr-cyan); }
.issue__actions { margin-top: auto; }
.issue__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; min-height: 24px; color: var(--fbr-cyan); font-size: .8125rem; font-weight: 700; transition: color .2s, gap .2s; }
.issue__more:hover { color: #fff; gap: .75rem; }
@media (max-width: 639px) { .issue__more { width: 100%; justify-content: center; } }

/* Announced issue: dashed border distinguishes it without looking broken. The
   ribbon uses cyan rather than the CTA gradient, because it is not an action. */
.issue--upcoming { border-style: dashed; background: rgba(42,10,78,.28); }
.issue__ribbon--soon { background: var(--fbr-dark-card); border: 1px dashed var(--fbr-light-purple); color: var(--fbr-cyan); }
.issue__cover-soon {
  width: 100%; max-width: 24rem; aspect-ratio: 1/1.4; border-radius: .5rem;
  border: 2px dashed var(--fbr-border-purple); background: linear-gradient(to bottom right, var(--fbr-dark-card), var(--fbr-dark-bkg));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
}
.issue__cover-soon-num { font-size: 2.25rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.issue__cover-soon-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fbr-cyan); }
.issue__soon { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 700; color: var(--fbr-cyan); }
.issue__soon i { flex-shrink: 0; }
@media (max-width: 639px) { .issue__soon { width: 100%; justify-content: center; } }

.how-to { margin-top: 5rem; max-width: 56rem; margin-inline: auto; }
.how-to__box { position: relative; overflow: hidden; text-align: center; padding: 2rem; border-radius: 1.5rem; border: 1px solid var(--fbr-border-purple); background: linear-gradient(to bottom right, var(--fbr-dark-card), var(--fbr-dark-bkg)); box-shadow: 0 20px 40px -12px rgba(0,0,0,.4); }
@media (min-width: 768px) { .how-to__box { padding: 3rem; } }
.how-to__bar { position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(to right, var(--fbr-pink), var(--fbr-purple), var(--fbr-cyan)); }
.how-to__box h3 { font-size: 1.875rem; color: #fff; margin-bottom: 1rem; }
.how-to__box p { color: var(--slate-300); margin: 0 auto 2rem; max-width: 48rem; font-size: 1.125rem; line-height: 1.7; }
.how-to__box p strong { color: #fff; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__head { text-align: center; margin-bottom: 4rem; }
/* FAQ sits on a light section, so the light-background variant applies. */
.faq__eyebrow { color: var(--fbr-pink-on-light); display: block; margin-bottom: .5rem; }
.faq__head h2 { font-size: 1.875rem; color: var(--slate-900); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .faq__head h2 { font-size: 3rem; } }
.faq__head .section-divider { margin: 0 auto 1.5rem; }
.faq__head p { color: var(--slate-600); font-size: 1.125rem; max-width: 48rem; margin: 0 auto; }
.faq__list { background: #fff; border-radius: 1.5rem; padding: 1.5rem; border: 1px solid var(--slate-200); box-shadow: 0 20px 40px -20px rgba(148,163,184,.5); max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .faq__list { padding: 2.5rem; } }
.faq__item { border-bottom: 1px solid var(--slate-100); }
.faq__item:last-child { border-bottom: 0; }
/* The question sits in an h3; reset so it looks the same as without a heading. */
.faq__heading { margin: 0; font-weight: inherit; line-height: inherit; font-size: inherit; }
.faq__q { width: 100%; padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 1rem; }
.faq__q .q-text { font-size: 1.125rem; font-weight: 500; color: var(--slate-800); transition: color .2s; padding-right: 2rem; }
@media (min-width: 768px) { .faq__q .q-text { font-size: 1.25rem; } }
.faq__q:hover .q-text { color: var(--fbr-blue); }
.faq__toggle { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--slate-100); color: var(--slate-500); transition: background .2s, color .2s; }
.faq__q:hover .faq__toggle { background: rgba(0,107,201,.1); color: var(--fbr-blue); }
.faq__toggle .fa-minus { display: none; }
.faq__item.is-open .q-text { color: var(--fbr-blue); }
.faq__item.is-open .faq__toggle { background: rgba(0,107,201,.1); color: var(--fbr-blue); }
.faq__item.is-open .faq__toggle .fa-plus { display: none; }
.faq__item.is-open .faq__toggle .fa-minus { display: inline-block; }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.faq__a-inner { padding-bottom: 1.5rem; color: var(--slate-600); line-height: 1.7; font-size: 1.125rem; }
/* An answer followed by a source link gives up its own bottom padding to it. */
.faq__a-inner:not(:last-child) { padding-bottom: .75rem; }
.faq__a-link { padding-bottom: 1.5rem; }
.faq__a-link a { display: inline-flex; align-items: center; gap: .5rem; min-height: 24px; color: var(--fbr-blue); font-size: .9375rem; font-weight: 700; transition: color .2s, gap .2s; }
.faq__a-link a:hover { color: var(--fbr-purple); gap: .75rem; }

/* ==========================================================================
   COLLABORATE (dark card bg)
   ========================================================================== */
.collab { position: relative; overflow: hidden; background: var(--fbr-dark-card); }
.collab__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom right, rgba(73,61,189,.1), transparent, rgba(11,2,20,.5)); pointer-events: none; }
.collab__glow { position: absolute; top: 0; right: 0; width: 50%; height: 50%; background: rgba(104,29,163,.05); filter: blur(64px); border-radius: 9999px; pointer-events: none; }
.collab__inner { position: relative; z-index: 10; text-align: center; }
.collab h2 { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .collab h2 { font-size: 3rem; } }
.collab .section-divider { margin: 0 auto 2rem; }
.collab__body { color: var(--slate-300); font-size: 1.125rem; margin-bottom: 2.5rem; line-height: 1.7; font-weight: 500; display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }
@media (min-width: 768px) { .collab__body { text-align: center; } }
.collab__card { position: relative; overflow: hidden; display: inline-block; text-align: left; max-width: 42rem; width: 100%; padding: 2rem; background: var(--fbr-dark-bkg); border: 1px solid var(--fbr-border-purple); border-radius: 1rem; box-shadow: 0 20px 40px -12px rgba(11,2,20,.5); transition: border-color .3s; }
.collab__card:hover { border-color: rgba(80,218,255,.3); }
.collab__card .shine { position: absolute; inset: 0; background: linear-gradient(to right, transparent, rgba(255,255,255,.03), transparent); transform: translateX(-100%); transition: transform 1s; pointer-events: none; }
.collab__card:hover .shine { transform: translateX(100%); }
.collab__card h3 { color: #fff; font-size: 1.125rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; position: relative; }
.collab__card h3 i { color: var(--fbr-cyan); }
.collab__card .muted { color: var(--slate-400); margin-bottom: 1rem; font-size: .875rem; position: relative; }
.collab__card .email { color: var(--fbr-cyan); font-size: 1.25rem; font-weight: 700; position: relative; word-break: break-all; }
.collab__card .email:hover { text-decoration: underline; }
.collab__card .hint { color: var(--slate-400); font-size: .75rem; margin-top: .5rem; position: relative; }

/* ==========================================================================
   RESOURCES / CROSSPROMO (dark)
   ========================================================================== */
.gymprofit { position: relative; overflow: hidden; background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1.5rem; margin-bottom: 3rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.gymprofit__pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; }
.gymprofit__grid { position: relative; z-index: 10; display: grid; }
@media (min-width: 1024px) { .gymprofit__grid { grid-template-columns: 3fr 2fr; } }
.gp-left { padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 1024px) { .gp-left { padding: 4rem; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.1); } }
.gp-left h3 { font-size: 2.25rem; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .gp-left h3 { font-size: 3rem; } }
@media (min-width: 1024px) { .gp-left h3 { font-size: 3.75rem; } }
.gp-left h3 .cyan { color: var(--fbr-cyan); }
.gp-left__desc { color: var(--slate-300); font-size: 1rem; line-height: 1.7; max-width: 42rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .gp-left__desc { font-size: 1.125rem; } }
.gp-left__desc strong { color: #fff; }
.gp-features { display: grid; gap: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); }
@media (min-width: 640px) { .gp-features { grid-template-columns: 1fr 1fr; } }
.gp-feature { display: flex; gap: 1rem; }
.gp-feature__icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(30,41,59,.5); border: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gp-feature__icon.i-blue { color: var(--fbr-blue); } .gp-feature__icon.i-orange { color: var(--fbr-orange); }
.gp-feature h4 { color: #fff; font-size: .875rem; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .03em; }
.gp-feature p { color: var(--slate-400); font-size: .75rem; line-height: 1.4; }
.gp-right { padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--fbr-dark-bkg); position: relative; overflow: hidden; }
@media (min-width: 1024px) { .gp-right { padding: 4rem; } }
.gp-cards { position: relative; width: 8rem; height: 8rem; margin-bottom: 2rem; }
.gp-cards .card-a { position: absolute; top: 0; left: 0; width: 5rem; height: 5rem; background: #fff; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.3); z-index: 10; display: flex; align-items: center; justify-content: center; transform: rotate(-12deg) translateY(.5rem); color: var(--slate-900); font-size: 2.5rem; }
.gp-cards .card-b { position: absolute; bottom: .5rem; right: 0; width: 5rem; height: 5rem; background: var(--fbr-blue); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); z-index: 20; display: flex; align-items: center; justify-content: center; transform: rotate(6deg); color: #fff; font-size: 2.5rem; }
.gp-right .btn { width: 100%; max-width: 20rem; margin-bottom: 1.5rem; box-shadow: 0 0 0 rgba(255,255,255,0); }
.gp-right .btn--white:hover { box-shadow: 0 0 20px rgba(255,255,255,.3); }
.gp-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; font-size: .625rem; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: .1em; }
/* Separator only from 1040px up, the first width where the row provably fits on
   one line. It is TEXT, so it counts in the contrast sweep. */
@media (min-width: 1040px) {
  .gp-keywords { gap: 1rem; letter-spacing: .15em; }
  .gp-keywords span:not(:last-child)::after { content: "\2022"; margin-left: 1rem; }
}

.promo-grid { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .promo-grid { grid-template-columns: 1fr 1fr; } }
.promo-card { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; transition: transform .3s; }
.promo-card:hover { transform: translateY(-5px); }
.promo-card--ebooks { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); }
.promo-card--newsletter { background: linear-gradient(to bottom right, rgba(104,29,163,.2), var(--fbr-dark-card)); border: 1px solid rgba(104,29,163,.3); }
.promo-card__icon { display: inline-flex; padding: .75rem; border-radius: .75rem; background: var(--fbr-dark-bkg); font-size: 1.5rem; margin-bottom: 1.5rem; }
.promo-card__icon.i-purple { color: var(--fbr-purple); } .promo-card__icon.i-cyan { color: var(--fbr-cyan); }
.promo-card h3 { color: #fff; font-size: 1.25rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .promo-card h3 { font-size: 1.5rem; } }
.promo-card p { color: var(--slate-300); margin-bottom: 2rem; line-height: 1.7; }
.promo-card__link { display: inline-flex; align-items: center; min-height: 24px; gap: .25rem; font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fbr-cyan); transition: color .2s; }
.promo-card:hover .promo-card__link { color: #fff; }

/* Podcast — Antrenamente de Business (box de promo)
   The signature orange to magenta to blue gradient is the only borrowed palette
   element; everything else stays on the dark theme. No extra font: the
   typographic accent is Poppins 900 uppercase with tight tracking. */
.podcast { position: relative; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.1); border-radius: 2rem; margin-bottom: 3rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.podcast__pattern { position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: radial-gradient(#333 1px, transparent 1px); background-size: 24px 24px; }
.podcast__grid { position: relative; z-index: 10; display: grid; gap: 2.5rem; padding: 2rem; align-items: start; }
@media (min-width: 1024px) { .podcast__grid { grid-template-columns: 1fr 22rem; gap: 3.5rem; padding: 3.5rem; } }

.podcast__content { display: flex; flex-direction: column; }
.podcast__toptag { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 1rem; border-radius: 9999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); width: fit-content; margin-bottom: 1.75rem; backdrop-filter: blur(4px); }
.podcast__toptag .dot { width: 8px; height: 8px; border-radius: 9999px; background: #FF7A19; flex-shrink: 0; }
.podcast__toptag span:last-child { color: #FFA45E; font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; }

.podcast__wordmark { font-size: 2.25rem; font-weight: 900; color: #fff; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .podcast__wordmark { font-size: 3rem; } }
@media (min-width: 1024px) { .podcast__wordmark { font-size: 3.5rem; } }
/* Gradientul exact al ADB, nu aproximarea de dinainte. */
.podcast__wordmark .grad { background: linear-gradient(90deg, #FF7A19 0%, #ED34D5 45%, #1E7AEF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.podcast__tagline { color: #fff; font-size: 1.25rem; font-weight: 600; font-style: italic; line-height: 1.5; margin-bottom: 1rem; border-left: 3px solid #ED34D5; padding-left: 1.25rem; }
@media (min-width: 768px) { .podcast__tagline { font-size: 1.5rem; } }
.podcast__pitch { color: var(--slate-300); font-size: 1rem; line-height: 1.7; max-width: 34rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .podcast__pitch { font-size: 1.0625rem; } }

.podcast__buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }
.podcast__buttons .btn--white i { color: #ED34D5; }

.podcast__foot { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12); }
.podcast__platforms { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.podcast__platforms-label { color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.podcast__platforms a { display: inline-flex; align-items: center; min-height: 24px; gap: .4375rem; color: var(--slate-200); font-size: .875rem; font-weight: 600; transition: color .2s; }
.podcast__platforms a:hover { color: #fff; }
.podcast__platforms i { font-size: 1rem; color: var(--slate-400); transition: color .2s; }
.podcast__platforms a:hover i { color: #FF7A19; }
.podcast__host { display: flex; align-items: center; gap: .625rem; color: var(--slate-400); font-size: .875rem; }
.podcast__host i { color: #ED34D5; }
.podcast__host strong { color: #fff; font-weight: 600; }

/* Real episodes rather than decorative icons. */
.podcast__episodes { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 1.25rem; padding: 1.25rem; }
.podcast__episodes-head { color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: .25rem .5rem 1rem; }
.podcast__episodes ul { display: flex; flex-direction: column; }
.podcast__episodes li + li { border-top: 1px solid rgba(255,255,255,.08); }
.podcast__episodes a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "nr title play" "nr meta play"; gap: .25rem .875rem; align-items: center; padding: .875rem .5rem; border-radius: .75rem; transition: background .2s; }
.podcast__episodes a:hover { background: rgba(255,255,255,.06); }
.ep__nr { grid-area: nr; font-size: .625rem; font-weight: 800; letter-spacing: .06em; color: #FF7A19; white-space: nowrap; }
.ep__title { grid-area: title; color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.ep__meta { grid-area: meta; display: flex; align-items: center; gap: .5rem; }
.ep__topic { color: var(--slate-300); font-size: .6875rem; font-weight: 600; padding: .125rem .5rem; border-radius: 9999px; background: rgba(237,52,213,.15); border: 1px solid rgba(237,52,213,.35); }
.ep__min { color: var(--slate-400); font-size: .6875rem; }
.ep__play { grid-area: play; width: 2rem; height: 2rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.2); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .625rem; flex-shrink: 0; transition: background .2s, color .2s, border-color .2s; }
.podcast__episodes a:hover .ep__play { background: #fff; color: #000; border-color: #fff; }

.upfitplus { position: relative; border-radius: 1.5rem; padding: 1px; background: linear-gradient(to right, var(--fbr-dark-card), var(--fbr-border-purple), var(--fbr-dark-card)); }
.upfitplus__inner { background: #0b0214; border-radius: calc(1.5rem - 1px); padding: 4rem 1.5rem; position: relative; overflow: hidden; }
@media (min-width: 768px) { .upfitplus__inner { padding: 5rem; } }
.upfitplus__gridbg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 3rem 3rem; -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%); }
.upfitplus__content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; }
.upfitplus h3 { font-size: 1.875rem; font-weight: 900; color: #fff; margin-bottom: 1.5rem; line-height: 1.25; max-width: 56rem; }
@media (min-width: 768px) { .upfitplus h3 { font-size: 3rem; } }
.upfitplus h3 .grad { background: linear-gradient(to right, var(--fbr-cyan), var(--fbr-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.upfitplus__desc { color: var(--slate-400); font-size: 1.125rem; margin-bottom: 4rem; max-width: 48rem; line-height: 1.7; }
.upfitplus__desc strong { color: #fff; }
.upfitplus__features { display: grid; gap: 2rem; width: 100%; max-width: 56rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .upfitplus__features { grid-template-columns: 1fr 1fr; } }
.feature-card { padding: 2rem; border-radius: 1rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); text-align: left; transition: background .3s, border-color .3s; }
.feature-card:hover { background: rgba(255,255,255,.07); }
.feature-card--cyan:hover { border-color: rgba(80,218,255,.3); }
.feature-card--green:hover { border-color: rgba(34,197,94,.3); }
.feature-card__icon { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.5rem; transition: transform .3s; }
.feature-card:hover .feature-card__icon { transform: scale(1.1); }
.feature-card--cyan .feature-card__icon { background: rgba(80,218,255,.1); color: var(--fbr-cyan); }
.feature-card--green .feature-card__icon { background: rgba(34,197,94,.1); color: var(--green-400); }
.feature-card h4 { font-size: 1.25rem; color: #fff; margin-bottom: .75rem; }
.feature-card p { color: var(--slate-400); font-size: .875rem; margin-bottom: 1.5rem; line-height: 1.6; }
.feature-card__link { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; min-height: 24px; gap: .25rem; }
.feature-card--cyan .feature-card__link { color: var(--fbr-cyan); }
.feature-card--green .feature-card__link { color: var(--green-400); }
.feature-card__link:hover { text-decoration: underline; }
.upfitplus__cta { display: inline-flex; align-items: center; gap: .5rem; padding: 1.25rem 2.5rem; background: #050a14; border: 1px solid var(--fbr-blue); color: #fff; font-weight: 700; border-radius: .75rem; transition: transform .3s, background .3s; box-shadow: 0 0 20px rgba(0,107,201,.2); margin-bottom: 3rem; }
.upfitplus__cta:hover { background: var(--fbr-blue); transform: scale(1.05); }
.upfitplus__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; font-size: .625rem; font-weight: 700; letter-spacing: .2em; color: var(--slate-400); text-transform: uppercase; }
.upfitplus__foot span { display: inline-flex; align-items: center; gap: .5rem; }
.upfitplus__foot span::before { content: ""; width: 4px; height: 4px; border-radius: 9999px; background: var(--slate-400); }

/* ==========================================================================
   LEAD CAPTURE (white)
   ========================================================================== */
.lead { border-top: 1px solid var(--slate-100); text-align: center; }
.lead__inner { max-width: 56rem; margin: 0 auto; }
.lead h2 { font-size: 1.875rem; font-weight: 800; color: var(--slate-900); margin-bottom: 1.5rem; letter-spacing: -.02em; }
@media (min-width: 768px) { .lead h2 { font-size: 3rem; } }
.lead__desc { color: var(--slate-600); font-size: 1.125rem; margin-bottom: 2.5rem; line-height: 1.7; font-weight: 500; }
@media (min-width: 768px) { .lead__desc { font-size: 1.25rem; } }
.lead__cards { display: grid; gap: 1.5rem; margin-bottom: 3rem; text-align: left; }
@media (min-width: 768px) { .lead__cards { grid-template-columns: repeat(3,1fr); } }
.lead-card { padding: 1.5rem; background: var(--slate-50); border-radius: 1rem; border: 1px solid var(--slate-100); transition: box-shadow .3s; }
.lead-card:hover { box-shadow: 0 12px 20px -8px rgba(0,0,0,.12); }
.lead-card h3 { font-weight: 700; color: var(--slate-900); margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.lead-card h3 i { font-size: 1.1rem; } .lead-card .i-blue { color: var(--fbr-blue); } .lead-card .i-purple { color: var(--fbr-purple); } .lead-card .i-pink { color: var(--fbr-pink); }
.lead-card p { color: var(--slate-600); font-size: .875rem; line-height: 1.6; }
.lead__actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
@media (min-width: 640px) { .lead__actions { flex-direction: row; } }
.lead__note { margin-top: 2rem; font-size: .875rem; color: var(--slate-600); font-weight: 500; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--slate-50); border-top: 1px solid var(--slate-200); padding: 5rem 0 2.5rem; }
.footer__grid { display: grid; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: repeat(4,1fr); } }
.footer__brand img.logo { height: 60px; width: auto; margin-bottom: 1.5rem; }
.footer__brand p { color: var(--slate-600); font-size: .875rem; line-height: 1.7; margin-bottom: 1.5rem; }
.footer__brand .support { color: var(--slate-600); font-size: .875rem; }
.footer__brand .support p { margin-bottom: .5rem; font-weight: 500; }
.footer__brand .support img { height: 32px; width: auto; }
.footer__col h3 { color: var(--slate-900); font-size: 1rem; font-weight: 700; margin-bottom: 1.5rem; }
.footer__col ul { display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
.footer__col a { color: var(--slate-600); transition: color .2s; display: inline-flex; align-items: center; min-height: 24px; }
.footer__col a:hover { color: var(--fbr-blue); }
.footer__promo { background: #fff; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--slate-200); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .3s; }
.footer__promo:hover { box-shadow: 0 8px 18px -8px rgba(0,0,0,.12); }
.footer__promo img { height: 24px; width: auto; margin-bottom: 1rem; }
.footer__promo p { font-size: .75rem; color: var(--slate-600); margin-bottom: 1rem; line-height: 1.5; }
.footer__promo a { font-size: .75rem; font-weight: 700; color: #fff; background: var(--fbr-blue); padding: .5rem 1rem; border-radius: .5rem; display: inline-block; transition: background .2s; }
.footer__promo a:hover { background: var(--fbr-cyan); }
.footer__legal { border-top: 1px solid var(--slate-200); padding-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: .75rem; color: var(--slate-600); }
@media (min-width: 768px) { .footer__legal { flex-direction: row; justify-content: space-between; } }
.footer__legal .links { display: flex; gap: 1.5rem; }
.footer__legal .links a { display: inline-flex; align-items: center; min-height: 24px; }
.footer__legal a:hover { color: var(--fbr-blue); }

/* ==========================================================================
   COOKIE BANNER
   ========================================================================== */
.cookie { position: fixed; inset: auto 0 0 0; z-index: 100; padding: 1rem; display: flex; justify-content: center; align-items: flex-end; transform: translateY(120%); opacity: 0; transition: transform .4s ease, opacity .4s ease; pointer-events: none; }
@media (min-width: 768px) { .cookie { padding: 1.5rem; align-items: center; } }
.cookie.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.cookie__inner { background: #fff; border-radius: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,.12); max-width: 56rem; width: 100%; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; border: 1px solid var(--slate-100); }
@media (min-width: 768px) { .cookie__inner { padding: 2rem; } }
.cookie__row { display: flex; gap: 1rem; align-items: flex-start; }
@media (min-width: 768px) { .cookie__row { gap: 1.5rem; } }
.cookie__icon { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 9999px; background: rgba(80,218,255,.2); color: var(--fbr-blue); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
@media (min-width: 768px) { .cookie__icon { width: 3.5rem; height: 3.5rem; } }
.cookie__text h3 { font-size: 1.25rem; color: var(--slate-900); margin-bottom: .5rem; }
.cookie__text p { color: var(--slate-500); font-size: .875rem; line-height: 1.6; }
.cookie__actions { display: flex; flex-direction: column; gap: .75rem; justify-content: flex-end; }
@media (min-width: 640px) { .cookie__actions { flex-direction: row; } }
.cookie__btn { padding: .875rem 1.5rem; border-radius: 9999px; font-weight: 700; font-size: .875rem; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: all .2s; }
.cookie__btn--basic { border: 1px solid var(--slate-300); color: var(--slate-700); }
.cookie__btn--basic:hover { background: var(--slate-50); }
.cookie__btn--accept { background: var(--gradient-cta); color: #fff; box-shadow: 0 4px 10px -2px rgba(255,43,102,.3); }
.cookie__btn--accept:hover { transform: scale(1.05); box-shadow: 0 8px 18px -4px rgba(255,43,102,.4); }

/* ==========================================================================
   Issue page (/numere/<slug>/)
   ========================================================================== */
.breadcrumb { margin-bottom: 2.5rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; color: var(--slate-400); }
.breadcrumb li + li::before { content: "/"; color: var(--slate-600); }
.breadcrumb a { color: var(--slate-400); transition: color .2s; display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb a:hover { color: var(--fbr-cyan); }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }

/* The header is fixed; without its offset the breadcrumb slides under it. */
.issue-hero { padding-block: calc(var(--header-h) + 2rem) 6rem; }
.issue-hero__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .issue-hero__grid { grid-template-columns: 320px 1fr; gap: 4rem; } }
.issue-hero__cover img { width: 100%; max-width: 320px; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); border: 1px solid var(--fbr-border-purple); }
.issue-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.issue-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--slate-400); font-weight: 500; }
.issue-hero__meta .sep { width: 4px; height: 4px; border-radius: 9999px; background: var(--slate-400); }
.issue-hero__flag { padding: .25rem .75rem; border-radius: 9999px; background: var(--gradient-cta); color: #fff; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.issue-hero__title { font-size: 1.875rem; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -.02em; }
@media (min-width: 768px) { .issue-hero__title { font-size: 2.75rem; } }
.issue-hero__intro { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 44rem; }
.issue-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; }
@media (min-width: 640px) { .issue-hero__actions { width: auto; } }
/* slate-400, not slate-500, which is under AA at 13px on dark. */
.issue-hero__note { color: var(--slate-400); font-size: .8125rem; }
.issue-hero__note i { color: var(--fbr-cyan); margin-right: .35rem; }
.issue-hero__flag--soon { background: var(--fbr-dark-card); border: 1px dashed var(--fbr-light-purple); color: var(--fbr-cyan); }
/* The cover placeholder is smaller in the issue hero than in the card. */
.issue-hero__cover .issue__cover-soon { max-width: 320px; border-radius: 1rem; }

.issue-toc h2, .issue-more h2 { font-size: 1.75rem; font-weight: 800; color: var(--slate-900); margin-bottom: 1rem; }
@media (min-width: 768px) { .issue-toc h2, .issue-more h2 { font-size: 2.25rem; } }
.issue-toc .section-divider, .issue-more .section-divider { margin-bottom: 1.75rem; }
.issue-toc__lead { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; max-width: 46rem; margin-bottom: 2.5rem; }
/* Pending contents, on a light background, so slate-600 for AA. */
.issue-toc__pending {
  color: var(--slate-600); font-size: 1rem; line-height: 1.75; max-width: 46rem;
  padding: 1.25rem 1.5rem; border-radius: .75rem; border: 1px dashed var(--slate-300); background: var(--slate-50);
}
.issue-toc__pending a { color: var(--fbr-blue); font-weight: 700; text-decoration: underline; }
.issue-toc__list { display: grid; gap: 1rem; }
@media (min-width: 768px) { .issue-toc__list { grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; } }
.issue-toc__list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--slate-700); line-height: 1.6; }
.issue-toc__list i { color: var(--fbr-sky); margin-top: .3rem; flex-shrink: 0; }

/* The guests column is wider: some issues list 10+ names. */
.issue-facts__grid { display: grid; gap: 3rem; }
@media (min-width: 800px) { .issue-facts__grid { grid-template-columns: 1fr 1.7fr; gap: 3.5rem; } }
.issue-facts h2 { font-size: 1.375rem; font-weight: 800; color: #fff; margin-bottom: 1rem; }
.issue-facts .section-divider { margin-bottom: 1.75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .625rem; }
.chips li { padding: .5rem 1rem; border-radius: 9999px; background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); color: var(--slate-200); font-size: .8125rem; font-weight: 500; }
.issue-facts__people { display: grid; gap: 1rem; }
@media (min-width: 560px) { .issue-facts__people { grid-template-columns: 1fr 1fr; gap: 1rem 2rem; } }
.issue-facts__people li { display: flex; align-items: flex-start; gap: .75rem; }
.issue-facts__people i { color: var(--fbr-cyan); margin-top: .3rem; flex-shrink: 0; }
.issue-facts__people strong { display: block; color: #fff; font-weight: 600; line-height: 1.35; }
.issue-facts__people em { display: block; color: var(--slate-400); font-style: normal; font-size: .8125rem; margin-top: .125rem; }
.issue-facts__clubs { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--fbr-border-purple); color: var(--slate-300); font-size: .875rem; }
.issue-facts__clubs span { color: var(--slate-400); text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; font-weight: 700; display: block; margin-bottom: .375rem; }

.issue-more__grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .issue-more__grid { grid-template-columns: 1fr 1fr; } }
.issue-more__card { display: flex; gap: 1.25rem; padding: 1.25rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--slate-200); transition: transform .3s, box-shadow .3s, border-color .3s; }
.issue-more__card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -14px rgba(0,0,0,.18); border-color: var(--slate-300); }
.issue-more__card img { width: 84px; flex-shrink: 0; border-radius: .5rem; box-shadow: 0 8px 16px -8px rgba(0,0,0,.3); }
.issue-more__body { display: flex; flex-direction: column; gap: .5rem; }
.issue-more__num { color: var(--slate-500); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.issue-more__card h3 { font-size: 1rem; color: var(--slate-900); line-height: 1.4; }
.issue-more__link { margin-top: auto; color: var(--fbr-blue); font-size: .8125rem; font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; gap: .375rem; }
.issue-more__card:hover .issue-more__link { color: var(--fbr-pink); }

/* ==========================================================================
   Hero — linia cu cuvinte-cheie + reasigurare sub CTA
   ========================================================================== */
.hero__title-kicker {
  display: block; font-size: .875rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fbr-blue); margin-bottom: 1.25rem; line-height: 1.5;
}
@media (min-width: 768px) { .hero__title-kicker { font-size: 1rem; } }
.hero__reassure {
  display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  margin-top: 1.25rem; margin-bottom: 3rem; color: var(--slate-500); font-size: .8125rem; text-align: center;
}
.hero__reassure i { color: var(--green-500); }
.video-card__title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: #fff; }

/* ==========================================================================
   What is in the magazine (#continut)
   ========================================================================== */
.inside__head { max-width: 46rem; margin-bottom: 3rem; }
.inside__head h2 { font-size: 1.875rem; color: #fff; margin-bottom: 1rem; }
@media (min-width: 768px) { .inside__head h2 { font-size: 2.5rem; } }
.inside__head .section-divider { margin-bottom: 1.5rem; }
.inside__head p { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; }

.inside__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--fbr-border-purple); border: 1px solid var(--fbr-border-purple); border-radius: 1.25rem; overflow: hidden; margin-bottom: 3rem; }
@media (min-width: 700px) { .inside__stats { grid-template-columns: repeat(4, 1fr); } }
.inside__stats > div { background: var(--fbr-dark-card); padding: 1.5rem 1.25rem; text-align: center; }
.inside__stats dt { color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.inside__stats dd { color: #fff; font-size: 1.75rem; font-weight: 900; line-height: 1; }
@media (min-width: 768px) { .inside__stats dd { font-size: 2.25rem; } }

.inside__grid { display: grid; gap: 1.25rem; margin-bottom: 3rem; }
@media (min-width: 640px) { .inside__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .inside__grid { grid-template-columns: repeat(3, 1fr); } }
.rubrica { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1.25rem; padding: 1.75rem; transition: transform .3s, border-color .3s; }
.rubrica:hover { transform: translateY(-4px); border-color: var(--fbr-light-purple); }
.rubrica__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--fbr-dark-bkg); color: var(--fbr-cyan); font-size: 1.125rem; margin-bottom: 1.25rem; }
.rubrica h3 { color: #fff; font-size: 1.0625rem; margin-bottom: .625rem; line-height: 1.35; }
.rubrica p { color: var(--slate-400); font-size: .875rem; line-height: 1.65; }

.inside__names { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--fbr-border-purple); }
.inside__names-row { color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.6; }
.inside__names-row span { display: block; color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .375rem; }

/* ==========================================================================
   Formularul din landing (#descarca)
   ========================================================================== */
.getform__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 950px) { .getform__grid { grid-template-columns: 1fr 460px; gap: 4rem; } }
.getform__eyebrow { color: var(--fbr-pink-on-light); display: block; margin-bottom: 1rem; }
.getform__pitch h2 { font-size: 1.875rem; color: var(--slate-900); margin-bottom: 1rem; }
@media (min-width: 768px) { .getform__pitch h2 { font-size: 2.5rem; } }
.getform__pitch .section-divider { margin-bottom: 1.5rem; }
.getform__lead { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 2rem; }
.getform__benefits { display: flex; flex-direction: column; gap: .75rem; }
.getform__benefits li { display: flex; gap: .75rem; align-items: center; color: var(--slate-700); font-weight: 500; }
.getform__benefits i { color: var(--green-500); }
.getform__box { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1.5rem; padding: 1.75rem; }
@media (min-width: 640px) { .getform__box { padding: 2.5rem; } }

/* ==========================================================================
   Cine face revista (#editor)
   ========================================================================== */
.editor__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 800px) { .editor__grid { grid-template-columns: 280px 1fr; gap: 3.5rem; } }
.editor__portrait { position: relative; }
.editor__portrait img { width: 100%; max-width: 280px; border-radius: 1.5rem; border: 1px solid var(--fbr-border-purple); box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); }
.editor__initials { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; aspect-ratio: 1; border-radius: 1.5rem; background: var(--gradient-cta); color: #fff; font-size: 5rem; font-weight: 900; letter-spacing: -.03em; box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); }
.editor__eyebrow { color: var(--fbr-cyan); display: block; margin-bottom: .75rem; }
.editor__body h2 { font-size: 1.875rem; color: #fff; }
@media (min-width: 768px) { .editor__body h2 { font-size: 2.25rem; } }
/* Lightened until it clears 4.5:1 on the dark background. */
.editor__role { color: #b177dc; font-weight: 600; margin-top: .25rem; }
.editor__body .section-divider { margin-block: 1.25rem; }
.editor__bio { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 42rem; }
.editor__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem; }
.editor__links a { display: inline-flex; align-items: center; min-height: 24px; gap: .5rem; color: var(--fbr-cyan); font-size: .875rem; font-weight: 700; transition: color .2s; }
.editor__links a:hover { color: #fff; }

/* ==========================================================================
   Resources — section header
   ========================================================================== */
.resurse__head { max-width: 46rem; margin-bottom: 3rem; }
.resurse__head h2 { font-size: 1.875rem; color: #fff; margin-bottom: 1rem; }
@media (min-width: 768px) { .resurse__head h2 { font-size: 2.5rem; } }
.resurse__head .section-divider { margin-bottom: 1.5rem; }
.resurse__head p { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; }

/* ==========================================================================
   Closing download band
   ========================================================================== */
.closing { padding-block: 5rem; border-top: 1px solid var(--fbr-border-purple); }
.closing__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.closing h2 { font-size: 1.625rem; color: #fff; line-height: 1.25; }
@media (min-width: 768px) { .closing h2 { font-size: 2.25rem; } }
.closing p { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.7; max-width: 36rem; }
.closing .btn { margin-top: .75rem; }
.closing__note { color: var(--slate-400); font-size: .8125rem; }

/* ==========================================================================
   Sticky CTA bar — at EVERY width
     mobile   -> full-width band at the bottom
     desktop  -> compact pill at bottom right, so it does not cut the content
   ========================================================================== */
.sticky-cta {
  position: fixed; inset: auto .75rem .75rem .75rem; z-index: 90;
  display: flex; align-items: center; gap: .5rem;
  transform: translateY(150%); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
@media (min-width: 768px) {
  /* left: auto takes the bar off full width, anchoring it bottom right. */
  .sticky-cta { inset: auto 1.5rem 1.5rem auto; gap: .625rem; }
}
.sticky-cta.is-visible { transform: none; opacity: 1; }
.sticky-cta.is-hidden-by-form { transform: translateY(150%); opacity: 0; pointer-events: none; }
.sticky-cta__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9375rem 1.25rem; border-radius: 9999px; background: var(--gradient-cta);
  color: #fff; font-weight: 700; font-size: .9375rem;
  box-shadow: 0 12px 28px -6px rgba(255,43,102,.5);
}
@media (min-width: 768px) {
  /* flex: 0 shrinks the button to its text width on desktop. */
  .sticky-cta__btn { flex: 0 0 auto; padding: .875rem 1.5rem; }
}
.sticky-cta__close {
  flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  background: var(--fbr-dark-card); border: 1px solid var(--fbr-input-border);
  color: var(--slate-200); display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) { .sticky-cta__close { width: 2.375rem; height: 2.375rem; } }

/* ==========================================================================
   Download page (/descarca/) and form
   ========================================================================== */
.dlpage { padding-block: calc(var(--header-h) + 2rem) 6rem; }
/* Mobile: one column in DOM order. Desktop: the form takes the right column. */
.dlpage__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 950px) {
  .dlpage__grid {
    grid-template-columns: 1fr 460px;
    grid-template-areas: "head form" "rest form";
    column-gap: 4rem;
    row-gap: 2rem;
  }
  .dlpage__head { grid-area: head; }
  .dlpage__form { grid-area: form; }
  .dlpage__rest { grid-area: rest; }
}
.dlpage__eyebrow { color: var(--fbr-cyan); display: block; margin-bottom: 1rem; }
.dlpage h1 { font-size: 1.875rem; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -.02em; }
@media (min-width: 768px) { .dlpage h1 { font-size: 2.5rem; } }
.dlpage .section-divider { margin-block: 1.5rem; }
.dlpage__lead { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 40rem; }
.dlpage__benefits { display: flex; flex-direction: column; gap: .875rem; }
.dlpage__benefits li { display: flex; gap: .75rem; align-items: flex-start; color: var(--slate-200); line-height: 1.6; }
.dlpage__benefits i { color: var(--green-400); margin-top: .3rem; flex-shrink: 0; }
.dlpage__cover { display: flex; gap: 1.25rem; align-items: center; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--fbr-border-purple); }
.dlpage__cover img { width: 96px; flex-shrink: 0; border-radius: .5rem; box-shadow: 0 12px 24px -12px rgba(0,0,0,.6); }
.dlpage__cover-num { color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .375rem; }
.dlpage__cover-title { color: #fff; font-weight: 600; line-height: 1.4; margin-bottom: .5rem; }
.dlpage__cover-link { color: var(--fbr-cyan); font-size: .8125rem; font-weight: 700; display: inline-flex; align-items: center; min-height: 24px; gap: .375rem; }
.dlpage__cover-link:hover { color: #fff; }

.dlpage__form { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1.5rem; padding: 1.75rem; }
@media (min-width: 640px) { .dlpage__form { padding: 2.5rem; } }
.dlpage__form h2 { font-size: 1.375rem; color: #fff; margin-bottom: .5rem; }
.dlpage__form-note { color: var(--slate-400); font-size: .875rem; margin-bottom: 2rem; }

.dlform { display: flex; flex-direction: column; gap: 1.25rem; }
.dlform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dlform__row { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .dlform__row { grid-template-columns: 1fr 1fr; } }
.dlform__field { display: flex; flex-direction: column; gap: .5rem; }
.dlform label { color: var(--slate-200); font-size: .875rem; font-weight: 600; }
.dlform .req { color: var(--fbr-pink); }

/* The list of types is explicit, so a new input type must be added here too. */
.dlform input[type="text"], .dlform input[type="email"], .dlform input[type="tel"], .dlform select, .dlform textarea {
  width: 100%; padding: .8125rem 1rem; border-radius: .75rem; font: inherit; font-size: 1rem;
  background: var(--fbr-dark-bkg); border: 1px solid var(--fbr-input-border); color: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.dlform textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.dlform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--slate-400) 50%), linear-gradient(135deg, var(--slate-400) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 14px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.dlform input::placeholder { color: var(--slate-500); }
.dlform input:focus, .dlform select:focus, .dlform textarea:focus { outline: none; border-color: var(--fbr-cyan); box-shadow: 0 0 0 3px rgba(80,218,255,.18); }
/* Invalid-field marking covers input, select AND textarea. 2px plus a ring: on a
   dark background 1px does not read as different from the normal border. */
.dlform input[aria-invalid="true"],
.dlform select[aria-invalid="true"],
.dlform textarea[aria-invalid="true"] {
  border-color: var(--fbr-pink); border-width: 2px;
  box-shadow: 0 0 0 3px rgba(255,43,102,.16);
}
.dlform input[aria-invalid="true"]:focus,
.dlform select[aria-invalid="true"]:focus,
.dlform textarea[aria-invalid="true"]:focus {
  border-color: var(--fbr-pink); box-shadow: 0 0 0 3px rgba(255,43,102,.32);
}

/* Optional fieldset, revealed by its checkbox. If :has() is unsupported the rule
   is dropped and the fields stay visible. */
.dlform__print {
  display: grid; gap: 1rem; margin: 0; padding: 1.125rem 1.25rem;
  border: 1px dashed var(--fbr-border-purple); border-radius: .875rem;
  background: rgba(31,3,59,.45);
}
.dlform__print legend {
  padding: 0 .5rem; color: var(--fbr-cyan); font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.dlform:has(#dl-print:not(:checked)) .dlform__print { display: none; }
.dlform__hint { color: var(--slate-400); font-size: .75rem; line-height: 1.5; }
.dlform__allreq { color: var(--slate-400); font-size: .8125rem; }

/* Error summary above the form, each entry linking to its field. */
.dlform-errors {
  margin-bottom: 1.75rem; padding: 1.125rem 1.25rem; border-radius: .875rem;
  background: #4a0d20; border: 1px solid #96203f; border-left: 4px solid var(--fbr-pink);
  color: #ffd7e0;
}
.dlform-errors:focus { outline: 2px solid var(--fbr-pink); outline-offset: 2px; }
.dlform-errors__title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem;
  color: #fff; font-size: 1rem; font-weight: 800;
}
.dlform-errors__title i { color: var(--fbr-pink); }
.dlform-errors ul { display: flex; flex-direction: column; gap: .375rem; margin: 0; padding-left: 1.125rem; }
.dlform-errors li { font-size: .875rem; line-height: 1.55; }
.dlform-errors a { color: #fff; font-weight: 700; text-decoration: underline; }
.dlform-errors a:hover { color: var(--fbr-yellow); }
.dlform__check { display: flex; gap: .75rem; align-items: flex-start; color: var(--slate-300); font-size: .875rem; font-weight: 400; line-height: 1.6; cursor: pointer; }
.dlform__check input { width: 1.5rem; height: 1.5rem; margin-top: 0; flex-shrink: 0; accent-color: var(--fbr-pink); cursor: pointer; }
.dlform__check a { color: var(--fbr-cyan); text-decoration: underline; }
.dlform__check.has-error span { color: #ffb3c6; }

.dlform__submit { margin-top: .5rem; }
.dlform__note { color: var(--slate-400); font-size: .8125rem; line-height: 1.6; text-align: center; }

/* ==========================================================================
   Confirmation page (/multumim/)
   ========================================================================== */
.thanks { padding-block: calc(var(--header-h) + 3rem) 6rem; }
.thanks__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.thanks__icon { font-size: 3rem; color: var(--green-400); line-height: 1; }
.thanks__eyebrow { color: var(--fbr-cyan); }
.thanks__eyebrow--warn { color: var(--fbr-yellow); }
.thanks h1 { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -.02em; }
@media (min-width: 768px) { .thanks h1 { font-size: 2.75rem; } }
.thanks__lead { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 40rem; }
.thanks__cta { margin-top: .5rem; }
.thanks__next { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--fbr-border-purple); width: 100%; }
.thanks__next h2 { font-size: 1.125rem; color: #fff; margin-bottom: 1.25rem; }
.thanks__next ul { display: flex; flex-direction: column; gap: .875rem; }
.thanks__next li { display: flex; gap: .875rem; align-items: flex-start; color: var(--slate-300); line-height: 1.6; }
.thanks__next i { color: var(--fbr-cyan); margin-top: .25rem; flex-shrink: 0; }
.thanks__more { margin-top: 2rem; width: 100%; }
.thanks__more p { color: var(--slate-400); font-size: .875rem; margin-bottom: .875rem; }
.thanks__links { display: flex; flex-wrap: wrap; gap: .625rem; }
.thanks__links a { padding: .5rem 1rem; border-radius: 9999px; background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); color: var(--slate-200); font-size: .8125rem; font-weight: 500; transition: border-color .2s, color .2s; }
.thanks__links a:hover { border-color: var(--fbr-cyan); color: #fff; }

/* ==========================================================================
   Teaser „Devino partener" din landing (#parteneri)
   ========================================================================== */
.bepartner__inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .bepartner__inner { grid-template-columns: 1fr 20rem; gap: 4rem; } }
.bepartner__eyebrow { color: var(--fbr-orange-on-light); display: block; margin-bottom: 1rem; }
.bepartner h2 { font-size: 1.625rem; font-weight: 800; color: var(--slate-900); line-height: 1.2; }
@media (min-width: 768px) { .bepartner h2 { font-size: 2.25rem; } }
.bepartner .section-divider { margin-block: 1rem 1.5rem; }
.bepartner p { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; max-width: 40rem; margin-bottom: 2rem; }
.bepartner__formats { display: flex; flex-direction: column; gap: .625rem; }
.bepartner__formats li { display: flex; align-items: center; gap: .875rem; padding: .875rem 1.125rem; background: #fff; border: 1px solid var(--slate-200); border-radius: .875rem; color: var(--slate-700); font-size: .9375rem; font-weight: 600; }
.bepartner__formats i { color: var(--fbr-orange); flex-shrink: 0; }

/* ==========================================================================
   Devino partener (/devino-partener/)
   ========================================================================== */
.partner-hero { padding-block: calc(var(--header-h) + 2rem) 5rem; }
/* Two columns from 1000px. Below that the figures card goes horizontal. */
.partner-hero__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .partner-hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 4rem; } }
.partner-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
/* No 704px cap needed: the grid gives the text its width. */
@media (min-width: 1000px) { .partner-hero h1, .partner-hero__lead { max-width: none; } }

.partner-hero__proof {
  background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple);
  border-radius: 1.25rem; padding: 1.5rem;
}
@media (min-width: 1000px) { .partner-hero__proof { padding: 1.75rem; } }
/* On mobile, one ROW per figure, with value and label side by side: three columns
   at 390px wrapped the longest label over four lines. */
.partner-hero__proof dl { display: grid; grid-template-columns: 1fr; gap: .875rem; }
.partner-hero__proof dl > div { display: flex; align-items: baseline; gap: .75rem; }
@media (min-width: 1000px) {
  .partner-hero__proof dl { gap: 1.375rem; }
  .partner-hero__proof dl > div { display: block; }
}
.partner-hero__proof dd {
  margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.1; flex-shrink: 0;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 1000px) { .partner-hero__proof dd { font-size: 1.875rem; margin-bottom: .25rem; } }
.partner-hero__proof dt { color: var(--slate-200); font-size: .8125rem; font-weight: 600; line-height: 1.4; }
/* Divider only in the vertical layout, where reading runs top to bottom. */
@media (min-width: 1000px) {
  .partner-hero__proof dl > div + div { padding-top: 1.375rem; border-top: 1px solid var(--fbr-border-purple); }
}
.partner-hero__proof-note {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--fbr-border-purple);
  color: var(--slate-400); font-size: .75rem;
}
.partner-hero__proof-note a { color: var(--fbr-cyan); font-weight: 700; }
.partner-hero__proof-note a:hover { color: #fff; }
.partner-hero__eyebrow { color: var(--fbr-yellow); display: block; }
.partner-hero h1 { font-size: 1.875rem; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -.02em; max-width: 44rem; }
@media (min-width: 768px) { .partner-hero h1 { font-size: 2.75rem; } }
.partner-hero__lead { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 44rem; }
.partner-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; margin-top: .5rem; }
@media (min-width: 640px) { .partner-hero__actions { width: auto; } }

/* Section headings. The page alternates light/white/dark backgrounds. */
.partner-about h2, .partner-figures h2, .partner-paths h2, .partner-channel h2,
.partner-why h2, .partner-list h2, .partner-steps h2, .partner-cta h2 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
@media (min-width: 768px) {
  .partner-about h2, .partner-figures h2, .partner-paths h2, .partner-channel h2,
  .partner-why h2, .partner-list h2, .partner-steps h2, .partner-cta h2 { font-size: 2.25rem; }
}
.partner-about h2, .partner-paths h2, .partner-channel h2, .partner-why h2, .partner-steps h2 { color: var(--slate-900); }
.partner-figures h2, .partner-list h2, .partner-cta h2 { color: #fff; }
.partner-about .section-divider, .partner-figures .section-divider, .partner-paths .section-divider,
.partner-channel .section-divider, .partner-why .section-divider, .partner-list .section-divider,
.partner-steps .section-divider, .partner-cta .section-divider { margin-block: 1rem 1.75rem; }
.partner-hero__note { color: var(--slate-400); font-size: .875rem; display: flex; align-items: center; gap: .5rem; }
.partner-hero__note i { color: var(--fbr-cyan); }

/* ---- 2. Who we are ---- */
.partner-about__lead { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; max-width: 48rem; margin-bottom: 2.5rem; }
.partner-about__grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .partner-about__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .partner-about__grid { grid-template-columns: repeat(4, 1fr); } }
.pabout { background: #fff; border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.75rem; }
.pabout__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--slate-100); color: var(--fbr-blue); font-size: 1.125rem; margin-bottom: 1.25rem; }
.pabout h3 { color: var(--slate-900); font-size: 1.0625rem; margin-bottom: .625rem; }
.pabout p { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; }

/* ---- 3. Strength figures (on dark) ---- */
.partner-figures__lead { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 46rem; margin-bottom: 2.5rem; }
/* Six figures: fixed 3 columns from 700px, giving two even rows. */
.partner-figures__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 700px) { .partner-figures__grid { grid-template-columns: repeat(3, 1fr); } }
.pfigure { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1rem; padding: 1.5rem 1.25rem; }
.pfigure__value { font-size: 1.75rem; font-weight: 900; line-height: 1.1; margin-bottom: .5rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 768px) { .pfigure__value { font-size: 2rem; } }
.pfigure__label { color: var(--slate-200); font-size: .8125rem; font-weight: 600; line-height: 1.45; }
/* slate-400, not slate-500: 13px on dark needs at least 4.5:1. */
.pfigure__period { color: var(--slate-400); font-size: .75rem; line-height: 1.5; margin-top: .5rem; }

/* ---- 4. Three routes in ---- */
.partner-paths__lead { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; max-width: 46rem; margin-bottom: 2.5rem; }
.partner-paths__grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .partner-paths__grid { grid-template-columns: repeat(3, 1fr); } }
.ppath {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.75rem;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.ppath:hover { border-color: var(--fbr-blue); transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(0,107,201,.25); }
.ppath__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .875rem; background: #fff; border: 1px solid var(--slate-200); color: var(--fbr-blue); font-size: 1.25rem; margin-bottom: 1.25rem; }
.ppath h3 { color: var(--slate-900); font-size: 1.25rem; margin-bottom: .375rem; }
.ppath__title { color: var(--slate-700); font-size: .875rem; font-weight: 600; margin-bottom: .75rem; }
.ppath__tagline { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.25rem; }
.ppath__link { margin-top: auto; display: inline-flex; align-items: center; min-height: 24px; gap: .5rem; color: var(--fbr-blue); font-size: .875rem; font-weight: 700; transition: gap .2s; }
.ppath:hover .ppath__link { gap: .75rem; }

/* ---- 5/6/7. One section per channel ---- */
.pchannel__head { max-width: 48rem; margin-bottom: 2.5rem; }
.pchannel__eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--fbr-blue); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.pchannel__tagline { color: var(--slate-800); font-size: 1.125rem; font-weight: 600; line-height: 1.6; margin-bottom: 1rem; }
.pchannel__desc { color: var(--slate-600); font-size: 1.0625rem; line-height: 1.75; }
.pchannel__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.pchannel__facts li { background: #fff; border: 1px solid var(--slate-200); border-radius: 1rem; padding: 1.25rem; }
.pchannel__facts strong { display: block; color: var(--slate-900); font-size: 1.5rem; font-weight: 900; line-height: 1.1; margin-bottom: .375rem; }
.pchannel__facts span { color: var(--slate-600); font-size: .8125rem; line-height: 1.45; }
/* auto-fit: channels have 3 or 4 formats, so a fixed 4-column grid would gap. */
.pchannel__formats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pchannel__cta { margin-top: 2.5rem; }

/* Themed for light backgrounds, since the channel sections are light. */
.pformat { background: #fff; border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.5rem; transition: border-color .3s, transform .3s; }
.pformat:hover { border-color: var(--fbr-blue); transform: translateY(-4px); }
.pformat h3 { color: var(--slate-900); font-size: 1.0625rem; margin-bottom: .625rem; }
.pformat p { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.125rem; }
.pformat ul { display: flex; flex-direction: column; gap: .5rem; }
.pformat li { display: flex; gap: .625rem; align-items: flex-start; color: var(--slate-700); font-size: .875rem; line-height: 1.5; }
/* green-500, not green-400, which is invisible on white. */
.pformat li i { color: var(--green-500); margin-top: .25rem; flex-shrink: 0; font-size: .75rem; }

/* ---- 7b. Timeline-ul seriilor de evenimente ---- */
.pevents { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--slate-200); }
.pevents__head { color: var(--slate-900); font-size: 1.375rem; font-weight: 800; margin-bottom: 2rem; }
.pevents__grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .pevents__grid { grid-template-columns: repeat(3, 1fr); } }
.pseries { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.75rem; }
.pseries__head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .875rem; }
.pseries__head h4 { color: var(--slate-900); font-size: 1.125rem; font-weight: 800; }
.pseries__role { align-self: flex-start; background: var(--slate-100); color: var(--slate-700); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .625rem; border-radius: 9999px; }
.pseries__desc { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.5rem; }
.pseries__timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.25rem; }
.pseries__timeline li { display: flex; gap: 1rem; padding-bottom: 1rem; position: relative; }
/* Timeline rule stops at the last item. */
.pseries__timeline li::before {
  content: ''; position: absolute; left: 1.5625rem; top: 1.75rem; bottom: 0; width: 2px; background: var(--slate-200);
}
.pseries__timeline li:last-child { padding-bottom: 0; }
.pseries__timeline li:last-child::before { display: none; }
.pseries__year {
  flex-shrink: 0; width: 3.25rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--fbr-blue); color: #fff; font-size: .75rem; font-weight: 800; border-radius: 9999px;
}
.pseries__timeline li.is-upcoming .pseries__year { background: var(--slate-100); color: var(--slate-600); border: 1px dashed var(--slate-400); }
.pseries__body { display: flex; flex-direction: column; gap: .125rem; padding-top: .1875rem; }
.pseries__where { color: var(--slate-900); font-size: .875rem; font-weight: 600; }
.pseries__count { color: var(--slate-600); font-size: .8125rem; }
.pseries__count--soon { color: var(--slate-600); font-style: italic; }
.pseries__total { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--slate-200); color: var(--fbr-blue); font-size: .875rem; font-weight: 800; }

/* ---- 8. Partner brands ---- */
/* Six slots: two columns on mobile, four on desktop. */
.partner-list__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: center; }
@media (min-width: 700px) { .partner-list__grid { grid-template-columns: repeat(4, 1fr); } }
.partner-list__grid li { display: flex; align-items: center; justify-content: center; min-height: 5rem; padding: 1rem; background: #fff; border: 1px solid var(--slate-200); border-radius: .875rem; }
.partner-list__grid img { max-height: 3rem; width: auto; height: auto; object-fit: contain; }
.partner-list__grid span { color: var(--slate-700); font-weight: 700; font-size: .875rem; text-align: center; }

/* ---- 9. Why it is worth it now ---- */
.partner-why__grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .partner-why__grid { grid-template-columns: repeat(3, 1fr); } }
.partner-why__card { background: #fff; border: 1px solid var(--slate-200); border-radius: 1.25rem; padding: 1.75rem; }
.partner-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--slate-100); color: var(--fbr-blue); font-size: 1.125rem; margin-bottom: 1.25rem; }
.partner-why__card h3 { color: var(--slate-900); font-size: 1.0625rem; margin-bottom: .625rem; }
.partner-why__card p { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; }

.partner-steps__list { display: flex; flex-direction: column; gap: 1.75rem; }
.partner-steps__list li { display: flex; gap: 1.25rem; align-items: flex-start; }
.partner-steps__num { flex-shrink: 0; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; background: var(--gradient-cta); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 2.5rem; }
.partner-steps__list h3 { color: var(--slate-900); font-size: 1.0625rem; margin-bottom: .375rem; }
.partner-steps__list p { color: var(--slate-600); font-size: .9375rem; line-height: 1.7; }

/* The form column is the dominant one: two-column fields need the width, and
   the pitch beside it is short. */
.partner-cta__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 950px) { .partner-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 3.5rem; } }
@media (min-width: 1280px) { .partner-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4rem; } }
.partner-cta__pitch p { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.75; max-width: 34rem; }
.partner-cta__contact { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--fbr-border-purple); }
.partner-cta__contact-label { color: var(--slate-400); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .875rem; }
.partner-cta__contact-person { display: flex; flex-direction: column; margin-bottom: .5rem; }
.partner-cta__contact-person strong { color: #fff; font-weight: 600; }
.partner-cta__contact-person span { color: var(--slate-400); font-size: .875rem; }
.partner-cta__email { color: var(--fbr-cyan); font-weight: 600; word-break: break-all; display: inline-flex; align-items: center; min-height: 24px; }
.partner-cta__email:hover { color: #fff; }
/* General brochure, free download. The block renders only if the PDF exists. */
.partner-cta__brochure { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--fbr-border-purple); }
.partner-cta__brochure-title { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.partner-cta__brochure p { color: var(--slate-300); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.25rem; }
.partner-cta__box { background: var(--fbr-dark-card); border: 1px solid var(--fbr-border-purple); border-radius: 1.5rem; padding: 1.75rem; }
@media (min-width: 640px) { .partner-cta__box { padding: 2.5rem; } }
.partner-cta__form-title { color: #fff; font-size: 1.25rem; margin-bottom: 1.75rem; }

.partner-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.partner-sent__icon { font-size: 2.5rem; color: var(--green-400); line-height: 1; }
.partner-sent h3 { color: #fff; font-size: 1.375rem; }
.partner-sent p { color: var(--slate-300); line-height: 1.7; }

.dlform__fieldset { border: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.dlform__fieldset legend { color: var(--slate-200); font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.dlform textarea {
  width: 100%; padding: .8125rem 1rem; border-radius: .75rem; font: inherit; font-size: 1rem;
  background: var(--fbr-dark-bkg); border: 1px solid var(--fbr-input-border); color: #fff;
  resize: vertical; min-height: 6rem; transition: border-color .2s, box-shadow .2s;
}
.dlform textarea:focus { outline: none; border-color: var(--fbr-cyan); box-shadow: 0 0 0 3px rgba(80,218,255,.18); }
.dlform textarea::placeholder { color: var(--slate-500); }

/* ==========================================================================
   404
   ========================================================================== */
.notfound { padding-block: 8rem; min-height: 70vh; display: flex; align-items: center; }
.notfound__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.notfound__code { color: var(--fbr-pink); }
.notfound__title { font-size: 2.25rem; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.02em; }
@media (min-width: 768px) { .notfound__title { font-size: 3.25rem; } }
.notfound__lead { color: var(--slate-300); font-size: 1.0625rem; line-height: 1.7; max-width: 38rem; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; }
@media (min-width: 640px) { .notfound__actions { width: auto; } }
.notfound__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: 1.5rem; margin-top: .5rem; border-top: 1px solid var(--fbr-border-purple); width: 100%; }
.notfound__links a { color: var(--slate-400); font-size: .875rem; font-weight: 500; transition: color .2s; display: inline-flex; align-items: center; min-height: 24px; }
.notfound__links a:hover { color: var(--fbr-cyan); }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: .15; } }
@keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }
@keyframes bounce-y { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}