/* ── Self-hosted Montserrat (variable font with full weight range 200-900)
   Loaded as two unicode-range subsets so the browser only downloads the
   bigger latin-ext file (70KB, covers ăâîșțĂÂÎȘȚ) when Romanian glyphs
   appear on the page. Default latin subset is 38KB. Total: ~108KB,
   cached permanently after first paint. GDPR-compliant (no Google
   tracking), faster LCP (no DNS lookup), no FOUT thanks to font-display:
   swap fallback to system-ui. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ── */
:root {
  /* Brand dark palette */
  --bg-0: #07012d;
  --bg-1: #120334;
  --bg-2: #1f0550;

  /* Purple accent (from BETA family) */
  --p-900: #5d0a48;
  --p-700: #911771;
  --p-500: #c339a0;
  --p-400: #c94bad;
  --p-300: #d14db0;
  --p-200: #ec6ac5;
  --p-100: #f08ad4;
  --p-50:  #ff9ee0;

  /* Text */
  --text:       #f0eaf8;
  --text-white: #fff;
  --text-soft:  rgba(220, 210, 240, 0.85);
  --text-mute:  rgba(220, 210, 240, 0.72);
  --text-lavender: #d4b8ff;

  /* Containers & radii */
  --w-max: 1280px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 9999px;

  /* Motion */
  --t-fast: 0.3s ease;
  --t-base: 0.4s ease;
  --t-soft: 0.5s cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* Background gradient angle - registered as <angle> so it can be
   transitioned smoothly. Default 30° matches the contabil view; the
   antreprenor view rotates it slightly to give a subtle visual cue
   that the page context has shifted. */
@property --bg-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 30deg;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Skip-to-content link — keyboard / screen reader accessibility.
   Hidden visually until focused (via :focus-visible), then animates
   into the top-left corner as a pink-accent pill so the user knows
   they've reached it. WCAG 2.1 compliant — every page has it as the
   first focusable element. */
.skip-to-content {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;                          /* above mobile-nav (120), toggle (121), app-launch (100) */
  padding: 12px 20px;
  background: var(--p-700);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-200%);
  transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--p-100);
  outline-offset: 2px;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background:
    linear-gradient(var(--bg-angle),
      var(--bg-0) 0%,
      #150130 25%,
      #2a0038 50%,
      #480042 75%,
      #650049 100%
    );
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Smoothly rotate the gradient when the role switch flips. All knockout
     gradients on the page also use var(--bg-angle), so they re-align with
     the new background as the angle interpolates. */
  transition: --bg-angle 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* When the role switch is set to antreprenor, rotate the background
   gradient slightly so the page context feels different without being
   jarring. */
body:has(.role-switch[data-active="antreprenor"]) {
  --bg-angle: 60deg;
}

/* ── App launch - fixed top-right pill. Top edge glued to the screen
   edge. Default: logo visible centered. Hover: pill descends (height
   grows downward), logo travels DOWN with the bottom edge, and the
   "Lansează aplicația" label appears above the logo. ── */
.app-launch {
  position: fixed;
  top: 0;
  right: 32px;
  z-index: 100;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;           /* logo sits at the BOTTOM */

  width: 200px;
  height: 80px;                        /* default - full logo (crown+wordmark) + 20px bottom + ~16px top */
  padding: 0 20px 20px;
  border-radius: 0 0 28px 28px;        /* flat top, rounded bottom */
  background: #fff;
  color: #07012d;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);

  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  transition:
    height 0.4s ease,
    box-shadow 0.4s ease;
}

/* The SVG now has a tight viewBox (no whitespace), so no cropping
   tricks are needed - render at natural aspect ratio. */
.app-launch-logo-wrap {
  display: block;
  width: 160px;                        /* 80% of pill width */
}

.app-launch-logo {
  display: block;
  width: 160px;
  height: auto;
}

/* Text is absolutely positioned so it doesn't push the logo around.
   Logo always sits at the bottom of the pill (justify-content: flex-end). */
.app-launch-text {
  position: absolute;
  top: 22px;
  left: 20px;
  right: 20px;
  text-align: center;
  color: var(--p-700);                 /* purple accent */
  font-weight: 900;
  text-decoration: none;
  letter-spacing: inherit;
  text-transform: inherit;
  font-size: inherit;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;                /* not clickable while hidden */
  transition:
    opacity 0.25s ease 0.1s,
    transform 0.3s ease 0.1s;
}

.app-launch-logo-wrap {
  text-decoration: none;
}

/* Hover: pill descends. Logo travels down with the bottom edge.
   Text fades in at the top in the newly exposed space. */
.app-launch:hover {
  height: 130px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.app-launch:hover .app-launch-text {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;                /* clickable when visible on hover */
}

/* ── Hero ── */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 120px 48px 80px;
  gap: 64px;
}

.hero-content {
  flex: 1.7;
  max-width: 760px;
}

.hero-visual {
  flex: 1;
  max-width: 560px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero brand image — fills the .hero-visual column on the right side of the
   hero. Sized to the column's max-width, preserves its aspect ratio. Kept
   static (no float animation) so the eye doesn't compete with the hero copy
   and the page reads as stable. */
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(7, 1, 45, 0.45));
}

/* Brand logo - absolutely positioned top-left of hero so the rest of
   the hero content stays in the exact pixel position it had before.
   Left edge aligns with hero padding (48px) for visual rhythm. */
.hero-logo {
  position: absolute;
  top: 16px;
  left: 48px;
  width: 210px;
  height: auto;
}

/* ── Eyebrow ── */
.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 200;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-lavender);
  margin-bottom: 24px;
}

/* ── Headline ── */
.hero-headline {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-white);
  margin-bottom: 28px;
}

/* ── Subtext ── */
.hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(220, 210, 240, 0.92);
  max-width: 720px;
  text-align: justify;
  hyphens: auto;
}

/* ── Role switch (Contabil / Antreprenor) ── */
.role-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, 230px);
  align-items: center;
  margin-top: 64px;
  margin-left: -6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  background: rgba(7, 1, 45, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Mouse-follow border ring glow */
.role-switch::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--mx, -100px) var(--my, -100px),
    var(--p-50) 0%,
    var(--p-200) 20%,
    var(--p-400) 40%,
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
}

.role-switch:hover::after {
  opacity: 1;
}

.role-btn {
  position: relative;
  padding: 14px 20px;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: color var(--t-fast), transform var(--t-soft), background-color var(--t-base);
  white-space: nowrap;
}

.role-btn:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Active button: BETA purple fill */
.role-switch[data-active="contabil"]  .role-btn[data-role="contabil"],
.role-switch[data-active="antreprenor"] .role-btn[data-role="antreprenor"] {
  background: var(--p-700);
  color: var(--text-white);
}

/* Swap physical positions when "antreprenor" is active */
.role-switch[data-active="antreprenor"] .role-btn[data-role="contabil"] {
  transform: translateX(100%);
}
.role-switch[data-active="antreprenor"] .role-btn[data-role="antreprenor"] {
  transform: translateX(-100%);
}

/* ── Bottom tagline ── */
.hero-bottom {
  position: absolute;
  bottom: 40px;
  left: 48px;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(210, 180, 255, 0.6);
}

/* ── Intro Section (between hero & mechanisms) ── */
.intro {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 80px 48px 40px;
}

.intro-lead {
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-white);
  letter-spacing: -0.005em;
  max-width: 60ch;
  margin: 0 auto 100px;
  text-align: center;
}

.intro-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 80px;
  align-items: center;
}

/* Reveal card: vector → color wipe + 3D tilt on hover */
.flip-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  cursor: pointer;
  border-radius: var(--r-lg);
  perspective: 1400px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.flip-card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.flip-card-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Color version (back) reveals bottom→top with a soft gradient edge */
@property --reveal {
  syntax: '<percentage>';
  initial-value: -30%;
  inherits: false;
}

.flip-card-back {
  -webkit-mask-image: linear-gradient(
    to top,
    #000 var(--reveal),
    transparent calc(var(--reveal) + 30%)
  );
          mask-image: linear-gradient(
    to top,
    #000 var(--reveal),
    transparent calc(var(--reveal) + 30%)
  );
  transition: --reveal 1.1s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: --reveal;
}

.flip-card:hover .flip-card-back,
.flip-card:focus-visible .flip-card-back {
  --reveal: 100%;
}

/* Intro right column */
.intro-text {
  max-width: 62ch;
}

.intro-title {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin-bottom: 18px;
}

.intro-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-lavender);
  margin-bottom: 28px;
}

.intro-body p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(220, 210, 240, 0.88);
  text-align: justify;
  hyphens: auto;
}

.intro-body p + p {
  margin-top: 16px;
}

/* ── Mechanisms Section ── */
.mechanisms {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 140px 48px 40px;
}

.mechanisms-header {
  display: inline-block;
  margin-bottom: 100px;
}

.mechanisms-titles {
  width: 100%;
}

.mechanisms-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text-white);
  line-height: 1.1;
  margin-bottom: 10px;
}

.mechanisms-subtitle {
  font-size: 0.85rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(220, 210, 240, 0.7);
}

.mechanism {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 80px;
  align-items: start;
  padding: 48px 0;
}

.mechanism-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mechanism-index {
  display: none;
}

/* Mechanism illustration image — fills the 35% left column. Lets its own
   intrinsic aspect ratio dictate height so the dashboard / chat / opencall /
   map shots don't get cropped or distorted. Subtle drop-shadow ties them
   into the dark gradient page surface. */
.mechanism-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  filter: drop-shadow(0 16px 48px rgba(7, 1, 45, 0.45));
}

.mechanism-content {
  max-width: 56ch;
  margin-left: auto;
  text-align: right;
}

.mechanism-heading {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 24px;
  position: relative;
}

.tag-beta {
  color: #911771;
  margin-right: 4px;
}

.mechanism-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-white);
  padding: 8px 22px 8px;
  background: rgba(7, 1, 45, 0.38);
  border-radius: 18px 18px 0 0;
  margin-right: 43px;
}

.mechanism-name {
  display: inline-block;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text-white);
  line-height: 1;
  padding: 18px 32px;
  min-width: 340px;
  text-align: center;
  border-radius: var(--r-pill);
  background: rgba(7, 1, 45, 0.38);
}

/* Rotating conic gradient on "AI" */
@property --ai-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ai-glow {
  background: conic-gradient(
    from var(--ai-angle),
    #5d0a48,
    #911771,
    #c339a0,
    #911771,
    #5d0a48
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: aiSpin 7s linear infinite;
}

@keyframes aiSpin {
  to { --ai-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-glow {
    animation: none;
  }
}

.mechanism-desc {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(220, 210, 240, 0.92);
  text-align: justify;
  text-indent: 2.4em;
  hyphens: auto;
}

.mechanism-desc + .mechanism-desc {
  margin-top: 18px;
}

.mechanism-tags {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.mechanism-tags li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  background: rgba(7, 1, 45, 0.32);
  color: var(--text-white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  flex-shrink: 0;
}

/* "Află mai multe" discreet link at the bottom-right of each mechanism.
   Quiet text-only style - no pill, no border, no background. Just a tiny
   tracked label + arrow that the eye can find without competing with the
   mechanism name pill above. URL updates via JS to match the current role. */
.mechanism-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-mute);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-fast);
}

.mechanism-cta::after {
  content: "→";
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0;
  transition: transform var(--t-fast);
}

.mechanism-cta:hover {
  color: var(--text-white);
}

.mechanism-cta:hover::after {
  transform: translateX(4px);
}

/* Mechanism name as a link - wraps the <h3 class="mechanism-name"> pill so
   the entire pill is clickable. Transparent wrapper, inherits color, no
   underline; the pill keeps its own styling untouched. */
.mechanism-name-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: filter var(--t-fast);
}

.mechanism-name-link:hover .mechanism-name {
  background: rgba(24, 6, 60, 0.55);
}

.mechanism-name-link:focus-visible {
  outline: 2px solid var(--p-300);
  outline-offset: 4px;
  border-radius: var(--r-pill);
}

/* ── Audience Section ── */
.audience {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 120px 48px 140px;
}

/* ── CTA row ── */
/* Equal 50/50 split: both buttons get the same width regardless of label
   length. min-width: 0 + width: 100% on buttons inside lets the tracks
   honor the ratio strictly even when content would overflow. */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 28px;
}

.cta-row .cta-btn {
  min-width: 0;
  width: 100%;
}

.cta-btn {
  position: relative;
  display: inline-flex;             /* uniform layout for both <button> and <a> */
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  width: 100%;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.18);
  outline: none;
  border-radius: 0;
  background: rgba(7, 1, 45, 0.3);
  color: var(--text-white);
  text-decoration: none;            /* anchors used as buttons stay underline-free */
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background-color var(--t-base);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cta-btn:hover {
  background: rgba(24, 6, 60, 0.45);
}

/* Mouse-follow border ring glow */
.cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: radial-gradient(
    160px circle at var(--mx, -100px) var(--my, -100px),
    var(--p-50) 0%,
    var(--p-200) 25%,
    var(--p-400) 50%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
}

.cta-btn:hover::after {
  opacity: 1;
}

/* ── Cards + panels grid ── */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.audience-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: 560px;
  padding: 64px 64px 56px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  border-radius: var(--r-lg);
  /* Inactive: 80% transparency = 20% opacity, with glossy highlight */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 60%),
    rgba(7, 1, 45, 0.2);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* Mouse-follow halo behind the card (visible only beyond card edges thanks to opaque card body) */
.audience-card::before {
  content: "";
  position: absolute;
  inset: -60px;
  background: radial-gradient(
    280px circle at calc(var(--mx, -200px) + 60px) calc(var(--my, -200px) + 60px),
    rgba(236, 106, 197, 0.8),
    rgba(201, 75, 173, 0.4) 30%,
    transparent 60%
  );
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.audience-card:hover::before {
  opacity: 1;
}


/* Mouse-follow border glow (ring + soft halo behind) */
.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--mx, -100px) var(--my, -100px),
    #ff9ee0 0%,
    #ec6ac5 20%,
    #c94bad 40%,
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.audience-card:hover::after {
  opacity: 1;
}

.audience-card.is-active {
  background: var(--bg-1);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card-pretitle {
  font-size: 0.75rem;
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 14px;
}

.card-title {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text-white);
  line-height: 1;
  margin-bottom: 28px;
}

.card-desc {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(220, 210, 240, 0.82);
  max-width: 42ch;
}

.card-cta {
  margin-top: auto;
  padding-top: 48px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(210, 180, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s ease;
}

.card-cta::after {
  content: "→";
  transition: transform 0.3s ease;
}

.audience-card:hover .card-cta,
.audience-card.is-active .card-cta {
  color: var(--text-white);
}

.audience-card:hover .card-cta::after {
  transform: translateX(5px);
}

/* ── "Primești" eyebrow above the body text. Its auto-top margin pushes
   the whole text+button block toward the bottom. ── */
.card-text-eyebrow {
  display: block;
  margin: auto 0 8px;              /* auto top → push assembly down */
  font-size: 0.7rem;
  font-weight: 200;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--p-100);
}

/* ── Card body text - bold but soft. ── */
.card-text {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--text-soft);
  max-width: 40ch;
  margin: 0 0 22px;
}

/* ── Card button (CTA pill stylat ca aplicația, mouse-follow border ring).
   Variants: <span> for the contabili card (visual only, doesn't navigate) and
   <a> for the antreprenori card (real link to app.contaville.ro). Both share
   this styling. ── */
.card-button {
  display: block;
  position: relative;
  align-self: stretch;
  margin-bottom: 24px;             /* lift the button slightly from card bottom */
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  background: rgba(7, 1, 45, 0.3);
  color: var(--text-white);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}

/* Hover: fill with the brand accent + a subtle glow halo. */
.card-button:hover {
  background: var(--p-700);
  border-color: transparent;
  box-shadow: 0 6px 28px rgba(201, 75, 173, 0.35);
}

/* ── Details Panel ── */
.detail-panel {
  display: none;
}

.detail-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: detailFade 0.5s cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* Stagger drop-in animation when panel becomes active */
@keyframes detailGroupDrop {
  from { transform: translateY(-24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.detail-panel.is-active .detail-group {
  animation: detailGroupDrop 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
}

.detail-panel.is-active .detail-group:nth-child(1) { animation-delay: 0.05s; }
.detail-panel.is-active .detail-group:nth-child(2) { animation-delay: 0.13s; }
.detail-panel.is-active .detail-group:nth-child(3) { animation-delay: 0.21s; }
.detail-panel.is-active .detail-group:nth-child(4) { animation-delay: 0.29s; }

@keyframes detailFade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.detail-group {
  width: 100%;
}

.detail-group {
  /* Accordion item: only summary visible by default; bullets hidden */
}

.detail-group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: var(--bg-1);
  padding: 24px 22px 24px 32px;
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border: none;
  border-radius: 10px;
  text-align: left;
  color: var(--text-white);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t-fast);
}

.detail-group-title::-webkit-details-marker { display: none; }
.detail-group-title::marker { content: ''; }

.detail-group-title span {
  color: var(--text-white);
}

/* Chevron indicator on the right */
.detail-group-title::after {
  content: '';
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--p-300);
  border-bottom: 2px solid var(--p-300);
  transform: rotate(45deg);
  margin-bottom: 4px;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), border-color var(--t-fast);
  flex-shrink: 0;
}

.detail-group[open] > .detail-group-title::after {
  transform: rotate(-135deg);
  margin-top: 4px;
  margin-bottom: 0;
  border-color: var(--text-white);
}

.detail-group:hover > .detail-group-title {
  background: #1a0648;
}

/* Smooth height animation in supporting browsers */
.detail-group::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.4s ease, content-visibility 0.4s allow-discrete;
}

.detail-group[open]::details-content {
  height: auto;
}

.detail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-list li {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-white);
  padding-left: 22px;
  position: relative;
}

.detail-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-white);
}

/* Paragraph variant inside a .detail-group - editorial body copy. */
.detail-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--text);
  text-align: justify;
  padding: 14px 24px;
}

/* Gap between consecutive paragraphs in the same detail-group. */
.detail-text + .detail-text {
  padding-top: 0;                  /* avoid double padding */
  margin-top: 18px;
}

/* Pill-shaped "Află mai multe" CTA - discreet outline style on the next
   visual line right after the paragraph (no extra gap), anchored to the
   right via auto margin. */
.detail-cta {
  display: block;
  width: fit-content;
  margin: 0 24px 0 auto;          /* match .detail-text right padding */
  padding: 2px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

/* When the pill follows a detail-text paragraph, drop the paragraph's
   bottom padding so the pill sits where the next text line would be. */
.detail-text:has(+ .detail-cta) {
  padding-bottom: 0;
}

.detail-cta::after {
  content: " →";
  margin-left: 4px;
}

.detail-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Stat Section ── */
.stat {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 140px 48px 160px;
}

.stat-eyebrow {
  font-size: 0.78rem;
  font-weight: 200;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(220, 210, 240, 0.65);
  margin-bottom: 18px;
}

.stat-subtitle {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-white);
  margin-bottom: 32px;
  line-height: 1.1;
}

/* Two-column layout below the eyebrow/subtitle: stat number on the left,
   description on the right. Description top-aligns with the stat number. */
.stat-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 20px;
}

.stat-block {
  display: inline-block;
}

.stat-description {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-soft);
  text-align: justify;
  max-width: 60ch;
  margin: 0;
  padding-top: 16px;               /* nudge text down so it sits with the cap height of the big number */
}

.stat-description p {
  margin: 0;
}

.stat-description p + p {
  margin-top: 1em;                 /* gap between the two paragraphs */
}

.stat-number {
  font-size: clamp(4.5rem, 12.5vw, 10.55rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text-white);
  line-height: 0.9;
  margin-bottom: 0;
}

.stat-label {
  display: block;
  width: 60.8%;
  margin-left: auto;
  margin-top: 14px;
  padding: 14px 24px;
  background: var(--text-white);
  border-radius: var(--r-pill);
  text-align: center;
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  /* Cut-out effect: text shows the page gradient behind the pill */
  background-clip: padding-box;
}

.stat-label span {
  background:
    linear-gradient(var(--bg-angle),
      var(--bg-0) 0%,
      #150130 25%,
      #2a0038 50%,
      #480042 75%,
      #650049 100%
    );
  background-attachment: fixed;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ── Marquee Carousel ── */
.marquee-section {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 40px 48px 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.marquee {
  overflow: hidden;
  width: 100%;
  padding: 4px 0;                  /* breathing room for the hover translateY(-2px) so the card top doesn't clip against overflow:hidden */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: m-scroll 45s linear infinite;
  will-change: transform;
}

.marquee--reverse .marquee-track {
  animation-name: m-scroll-rev;
  animation-duration: 50s;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.m-item {
  flex: 0 0 144px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  text-align: center;
  text-decoration: none;
  color: var(--text-white);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

/* First word is rendered thin (Montserrat 200) so the service category
   reads quietly; the following word(s) are slammed in Black 900, creating
   a sharp visual contrast on each card. */
.m-item-w-light {
  font-weight: 200;
}

.m-item-w-emph {
  font-weight: 900;
}

/* Tiny gap between word spans so they read as separate words even when
   uppercase + tight weights bring them close together. */
.m-item-w-light + .m-item-w-emph,
.m-item-w-emph + .m-item-w-emph {
  margin-left: 0.32em;
}

.m-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

@keyframes m-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes m-scroll-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ── Trust Section (closing) ── */
.trust {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 40px 48px 160px;
}

.trust-header {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}

.trust-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin-bottom: 20px;
}

.trust-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
}

.trust-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 64px;
  max-width: 980px;
  margin: 0 auto;
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-num {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--p-500);
  padding-top: 4px;
}

.trust-item-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trust-item-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text-white);
  margin: 0;
}

.trust-item-text {
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-soft);
  text-align: justify;
  margin: 0;
}

/* ── FAQ Section ── */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

.faq {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 40px 48px 160px;
}

.faq-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: 48px;
  align-items: start;
}

.faq-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin-bottom: 16px;
}

.faq-subtitle {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-mute);
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 0;
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 24px 4px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 700;
  color: var(--text-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color var(--t-fast);
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::marker {
  display: none;
  content: '';
}

.faq-q::after {
  content: '?';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--p-300);
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--p-300);
  background: transparent;
  flex-shrink: 0;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.faq-item[open] .faq-q::after {
  background: var(--p-300);
  color: var(--bg-0);
  border-color: var(--p-300);
}

.faq-q:hover {
  color: var(--p-100);
}

.faq-a {
  padding: 0 4px 24px;
  max-width: 70ch;
}

.faq-a p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
}

/* Smooth open/close animation in supporting browsers */
.faq-item::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.4s ease, content-visibility 0.4s allow-discrete;
}

.faq-item[open]::details-content {
  height: auto;
}

/* Highlight cards (always visible, right column) */
.faq-highlights {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 32px;
}

.faq-highlight {
  padding: 32px 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  background: rgba(7, 1, 45, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.faq-highlight-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 14px;
}

.faq-highlight-text {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-soft);
}

.faq-highlight-text strong {
  font-weight: 700;
  color: var(--text-white);
}

/* Code list inside the Operator card - CUI + DUNS as tight label/value rows. */
.faq-highlight-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 18px;
}

.faq-highlight-code {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.faq-highlight-code dt {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.faq-highlight-code dd {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-white);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Contact pair inside the Contact card - small label + clickable email. */
.faq-highlight-contact {
  margin-top: 16px;
}

.faq-highlight-contact:first-of-type {
  margin-top: 12px;
}

.faq-highlight-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}

.faq-highlight-link {
  display: inline-block;
  font-size: 0.98rem;
  font-weight: 300;
  color: var(--p-200);
  text-decoration: none;
  transition: color var(--t-fast);
}

.faq-highlight-link:hover {
  color: var(--p-50);
}

/* ── Hero CTA single button (used on /pentru-contabili) ── */
.hero-cta {
  margin-top: 40px;
  margin-left: -6px;
}

/* Two-button hero CTA reuses the global .cta-row 30/70 layout.
   No additional overrides needed here. */

.cta-btn--solid {
  background: var(--p-700);
  color: var(--text-white);
  border-color: transparent;
}

.cta-btn--solid:hover {
  background: var(--p-500);
}

/* ── Benefits section (/pentru-contabili) ── */
.benefits {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 160px 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.benefit {
  display: grid;
  grid-template-columns: minmax(180px, 22%) 1fr;
  gap: 56px;
  padding: 60px 0;
}

.benefit:first-child {
  padding-top: 40px;
}

.benefit-meta {
  position: sticky;
  top: 32px;
  align-self: start;
}

.benefit-num {
  display: block;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(201, 75, 173, 0.55);
  line-height: 1;
  margin-bottom: 18px;
  font-feature-settings: "tnum";
}

.benefit-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-100);
  line-height: 1.4;
  max-width: 22ch;
}

.benefit-content {
  min-width: 0;
}

.benefit-title {
  display: flex;
  width: 100%;
  background: var(--text-white);
  padding: 18px 28px;
  margin-bottom: 40px;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0;
}

.benefit-title span {
  background:
    linear-gradient(var(--bg-angle),
      var(--bg-0) 0%,
      #150130 25%,
      #2a0038 50%,
      #480042 75%,
      #650049 100%
    );
  background-attachment: fixed;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.benefit-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.benefit-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
  gap: 48px;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: start;
}

.benefit-row:first-child {
  border-top: none;
  padding-top: 0;
}

.benefit-bullet {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-white);
  letter-spacing: -0.005em;
}

.benefit-desc {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
  text-align: justify;
  hyphens: auto;
}

/* ── CTA Cards (/pentru-contabili - bottom of page) ── */
.cta-cards {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 80px 48px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 52px 48px 48px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(7, 1, 45, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* Mouse-follow border ring (no halo / no glow) */
.cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--mx, -100px) var(--my, -100px),
    var(--p-50) 0%,
    var(--p-200) 25%,
    var(--p-400) 50%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
}

.cta-card:hover::after {
  opacity: 1;
}

.cta-card-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 18px;
}

.cta-card-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin-bottom: 24px;
}

.cta-card-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 36px;
  text-align: justify;
  hyphens: auto;
}

.cta-card-btn {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  outline: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-white);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.cta-card-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
}

.cta-card-btn--solid {
  background: var(--p-700);
  border-color: transparent;
}

.cta-card-btn--solid:hover {
  background: var(--p-500);
  border-color: transparent;
}

/* Multi-button row inside a .cta-card (e.g. 3 equal nav buttons) */
.cta-card-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: auto;
  width: 100%;
}

.cta-card-btn--multi {
  margin-top: 0;
  padding: 14px 16px;
  justify-content: center;
  text-align: center;
}

/* ── Brand Credit (Antrepremame Fundația - recreated logo) ── */
.brand-credit {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 60px 48px 80px;          /* extra top padding pushes the section away from .cta-cards above */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;                         /* between attribution group and the logo (visual separation) */
}

.brand-credit-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-100);
  text-align: center;
}

.brand-credit-attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                         /* tight gap - the two eyebrows form one group */
}

/* Parent sizes to widest child (the name); pill stretches to match it.
   Whole logo is a link to the foundation site - strip default <a> styling.
   Copy newline between flex items is normalized in JS (see script.js). */
.logo-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.logo-mark:hover {
  opacity: 0.85;
}

.logo-mark-name {
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: clamp(0.9rem, 1.92vw, 1.68rem);   /* 60% of original logo size */
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-white);
  line-height: 1;
  white-space: nowrap;
}

.logo-mark-pill {
  /* Pill is a flex box: its OWN font-size matches the name so its
     height equals the name height; the inner <span> carries FUNDAȚIA
     at a smaller font-size (centered inside the pill). */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1em;                                /* = name font-size = name height */
  font-size: clamp(0.9rem, 1.92vw, 1.68rem);  /* same as name (60% of original) */
  background: var(--text-white);
  border-radius: 0;
  background-clip: padding-box;
}

.logo-mark-pill span {
  /* FUNDAȚIA - smaller than the name (ratio inspired by Divi reference
     where ANTREPREMAME ≈ default size and FUNDAȚIA ≈ 6vh). */
  font-size: 0.792em;       /* relative to pill font-size = ratio vs name */
  font-weight: 900;
  letter-spacing: 0;
  /* line-height ≥ Montserrat's typo total (≈1.12) so the Ț cedilla stays
     inside the span's line-box and background-clip: text paints it. */
  line-height: 1.3;
  text-transform: uppercase;
  /* Knockout: text reveals the page gradient through the white pill */
  background:
    linear-gradient(var(--bg-angle),
      var(--bg-0) 0%,
      #150130 25%,
      #2a0038 50%,
      #480042 75%,
      #650049 100%
    );
  background-attachment: fixed;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ────────────────────────────────────────────────────────────────────────
   LEGAL PAGE (Termene și condiții)
   Tipografie editorial premium pentru un document juridic care trebuie să
   se simtă diferit, dar coerent cu restul site-ului.
   ──────────────────────────────────────────────────────────────────────── */

/* HERO */
.legal-hero {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 140px 48px 100px;
  position: relative;
}

.legal-hero-content {
  max-width: 820px;
}

.legal-hero-title {
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-white);
  margin: 18px 0 32px;
}

.legal-hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 60ch;
  margin-bottom: 56px;
}

.legal-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.legal-meta-label {
  font-size: 0.7rem;
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p-100);
}

.legal-meta-value {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-white);
}

/* MAIN - grid: TOC sticky stânga + body */
.legal {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 48px 140px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

/* TOC sticky */
.legal-toc {
  position: sticky;
  top: 56px;
  align-self: start;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-toc-title {
  font-size: 0.7rem;
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 18px;
}

.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-toc-list li {
  counter-increment: toc;
  position: relative;
  padding-left: 32px;
}

.legal-toc-list li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(220, 210, 240, 0.45);
  padding-top: 3px;
}

.legal-toc-list a {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--t-fast);
  display: block;
}

.legal-toc-list a:hover {
  color: var(--text-white);
}

/* BODY - articolul principal */
.legal-body {
  max-width: 760px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-intro {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-soft);
  margin-bottom: 80px;
  text-align: justify;
  hyphens: auto;
}

.legal-intro strong,
.legal-intro em {
  color: var(--text-white);
  font-style: normal;
}

.legal-intro em {
  font-weight: 700;
}

/* Secțiune juridică */
.legal-section {
  scroll-margin-top: 32px;          /* offset pentru anchor links */
  padding: 56px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-section:first-of-type {
  border-top: none;
  padding-top: 24px;
}

.legal-section-num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--p-200);
  margin: 0 0 12px;
}

.legal-section-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin: 0 0 28px;
}

.legal-section p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-soft);
  margin-bottom: 18px;
  text-align: justify;
  hyphens: auto;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section strong {
  color: var(--text-white);
  font-weight: 700;
}

/* Liste */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-list li {
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
}

.legal-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--p-200);
}

/* Definiții - DL stilizat ca block-uri elegante */
.legal-defs {
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px 32px;
  padding: 24px 28px;
  border-left: 2px solid var(--p-700);
  background: rgba(145, 23, 113, 0.06);
  border-radius: 0 8px 8px 0;
}

.legal-defs dt {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-white);
  padding-top: 2px;
}

.legal-defs dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-soft);
  text-align: justify;
  hyphens: auto;
}

/* Bloc de contact */
.legal-contact {
  margin: 24px 0 0;
  padding: 28px 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.legal-contact p {
  margin-bottom: 8px;
  text-align: left;
  hyphens: none;
}

.legal-contact p:last-child {
  margin-top: 14px;
  color: var(--text-mute);
  font-size: 0.92rem;
}

/* Link in-text */
.legal-link {
  color: var(--p-100);
  text-decoration: underline;
  text-decoration-color: rgba(240, 138, 212, 0.35);
  text-underline-offset: 3px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

.legal-link:hover {
  color: var(--p-50);
  text-decoration-color: currentColor;
}

/* Outro */
.legal-outro {
  margin: 80px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.95rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.75;
  color: var(--text-mute);
  text-align: center;
}

/* Responsive - TOC devine inline pe ≤900px */
@media (max-width: 900px) {
  .legal-hero {
    padding: 100px 28px 60px;
  }

  .legal-hero-meta {
    gap: 24px 32px;
  }

  .legal {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 28px 100px;
  }

  .legal-toc {
    position: static;
  }

  .legal-defs {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 20px 22px;
  }

  .legal-defs dt {
    margin-top: 10px;
  }

  .legal-defs dt:first-child {
    margin-top: 0;
  }

  .legal-section {
    padding: 40px 0;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   PILLAR PAGE (mecanism page - ex: /gaseste-firma-contabilitate)
   Editorial layout: hero + giant stat banner + alternating sections
   (problem / solution / criteria grid / steps / pull-quote / outcome).
   ──────────────────────────────────────────────────────────────────────── */

/* Hero variant - reuses .hero structure, no changes needed beyond the
   class hook for future tweaks. */
.pillar-hero { /* keeps inherited .hero styles */ }

/* GIANT STAT BANNER - full-width memorable focal point right after hero */
.pillar-stat {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 60px 48px 80px;
  text-align: center;
}

.pillar-stat-eyebrow {
  font-size: 0.78rem;
  font-weight: 200;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 28px;
}

.pillar-stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Headline wrapper: inline-flex column so DIRECT sets the intrinsic width
   and the subline below stretches to that exact same width. */
.pillar-stat-headline {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.pillar-stat-number {
  display: block;
  text-align: center;
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  background: linear-gradient(180deg, var(--text-white) 0%, var(--p-100) 70%, var(--p-300) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Subline under DIRECT - same gradient style + uppercase, scaled by JS
   to occupy the exact width of the DIRECT headline above it. Letter
   spacing matches DIRECT (-0.045em) so glyph kerning scales identically
   and the visual extents line up edge-to-edge. The negative margin
   pulls it tight against DIRECT's descender baseline. */
.pillar-stat-subline {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin-top: -6px;
  white-space: nowrap;
  /* Initial size - JS will override with the auto-fit value */
  font-size: clamp(1rem, 2.6vw, 2.2rem);
  background: linear-gradient(180deg, var(--text-white) 0%, var(--p-100) 70%, var(--p-300) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.pillar-stat-label {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 56ch;
}

/* MAIN SECTIONS WRAPPER */
.pillar {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 40px 48px 120px;
}

/* Each pillar-section is a self-contained editorial block with side meta
   on desktop (label + title) and body content alongside. */
.pillar-section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pillar-section:first-of-type {
  border-top: none;
  padding-top: 40px;
}

.pillar-section-meta {
  position: sticky;
  top: 40px;
  align-self: start;
}

.pillar-section-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 18px;
}

.pillar-section-tag--accent {
  color: var(--p-100);
}

.pillar-section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-white);
  margin: 0;
}

.pillar-section-body p {
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-soft);
  margin-bottom: 20px;
  text-align: justify;
  hyphens: auto;
}

.pillar-section-body p:last-child {
  margin-bottom: 0;
}

.pillar-section-body strong {
  color: var(--text-white);
  font-weight: 700;
}

/* PROBLEM SECTION - pain points list with big numbers */
.pillar-pain-list {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pillar-pain-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
}

.pillar-pain-num {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(220, 210, 240, 0.25);
  font-feature-settings: "tnum";
}

.pillar-pain-list p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* CRITERIA GRID */
.pillar-criteria {
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pillar-criteria-header {
  max-width: 760px;
  margin: 0 0 56px;
}

.pillar-criteria-header .pillar-section-title {
  margin: 14px 0 20px;
}

.pillar-criteria-intro {
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0;
}

.pillar-criteria-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);    /* shows through as hairline grid lines */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
}

.pillar-criterion {
  padding: 32px 28px;
  background: rgba(7, 1, 45, 0.6);
  transition: background-color var(--t-base);
}

.pillar-criterion:hover {
  background: rgba(145, 23, 113, 0.12);
}

.pillar-criterion-num {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--p-200);
  margin-bottom: 14px;
}

.pillar-criterion-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin: 0 0 12px;
}

.pillar-criterion-desc {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

/* STEPS - 3 steps with massive background numbers */
.pillar-steps {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  counter-reset: pillar-step;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.pillar-step {
  position: relative;
  padding: 36px 36px 36px 140px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.pillar-step-num {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  font-feature-settings: "tnum";
}

.pillar-step-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin: 0 0 10px;
}

.pillar-step-desc {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0;
}

/* PULL QUOTE - large editorial pull-quote between sections */
.pillar-quote-section {
  display: block;            /* override grid layout from .pillar-section */
  padding: 100px 0 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pillar-quote {
  margin: 0 auto;
  max-width: 880px;
  text-align: center;
  position: relative;
  padding: 0 40px;
}

.pillar-quote::before {
  content: "\201C";
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6rem;
  line-height: 1;
  color: var(--p-200);
  opacity: 0.4;
  font-family: 'Montserrat', serif;
  font-weight: 900;
}

.pillar-quote p {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-white);
  margin: 0;
  font-style: italic;
}

/* RESPONSIVE - pillar page stacks on tablet/mobile */
@media (max-width: 900px) {
  .pillar-stat {
    padding: 40px 28px 60px;
  }

  .pillar {
    padding: 20px 28px 80px;
  }

  .pillar-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 0;
  }

  .pillar-section-meta {
    position: static;
  }

  .pillar-criteria {
    padding: 56px 0;
  }

  .pillar-criteria-grid {
    grid-template-columns: 1fr;
  }

  .pillar-pain-list li {
    grid-template-columns: 60px 1fr;
    gap: 16px;
  }

  .pillar-pain-num {
    font-size: 1.8rem;
  }

  .pillar-step {
    padding: 28px 28px 28px 100px;
  }

  .pillar-step-num {
    left: 18px;
    font-size: 3.6rem;
  }

  .pillar-quote-section {
    padding: 60px 0 40px;
  }

  .pillar-quote {
    padding: 0 20px;
  }
}

/* ── Footer ── */
.footer {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 80px 48px 40px;
}

/* Contaville primary brand logo - top of the footer, centered. */
.footer-contopia {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 48px;
}

/* Contact email - centered between the links grid and the Arcadi mark. */
.footer-contact {
  text-align: center;
  margin: 16px 0 24px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

.footer-contact a:hover {
  color: var(--text-white);
}

/* Arcadi parent-brand mark - small, centered, sits between the links
   grid and the bottom separator. */
.footer-arcadi {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 24px;
  opacity: 0.85;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding-bottom: 24px;
  align-items: start;
}

.footer-col--right {
  text-align: right;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links--right {
  align-items: flex-end;
}

.footer-link {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--text-soft);          /* same body-text color as .faq-highlight-text */
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--t-fast);
}

.footer-link:hover {
  color: var(--p-100);
}

/* Contaville footer logo - now wrapped in an anchor that links to the app.
   The link is the centering element so the img inside no longer needs
   margin auto. */
.footer-contopia-link {
  display: block;
  width: fit-content;
  margin: 0 auto 32px;
  text-decoration: none;
}

.footer-contopia-link .footer-contopia {
  margin: 0;                          /* anchor handles the centering */
}

/* Footer site nav - top-level pages laid horizontally in a centered
   row that sits ABOVE the legal/ecosystem columns. Mecanisme and Beneficii
   reveal drop-up dropdowns on hover/focus. */
.footer-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0 auto 40px;
}

.footer-nav-item {
  position: relative;
}

.footer-nav-link,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  text-decoration: none;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--t-fast);
}

.footer-nav-link:hover,
.footer-nav-link:focus-visible,
.footer-nav-item--has-dropdown:hover > .footer-nav-link,
.footer-nav-item--has-dropdown:focus-within > .footer-nav-link,
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--p-100);
  outline: none;
}

/* Caret pointing UP because the dropdown opens upward. */
.footer-nav-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg) translate(-1px, -1px);
  transition: transform 0.3s ease;
}

.footer-nav-item--has-dropdown:hover .footer-nav-caret,
.footer-nav-item--has-dropdown:focus-within .footer-nav-caret {
  transform: rotate(45deg) translate(1px, 1px);
}

/* Drop-up dropdown panel - opens upward above the trigger. Same dark
   translucent surface as the top nav dropdown. */
.footer-nav-dropdown {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  min-width: 480px;
  padding: 24px;
  background: rgba(12, 3, 50, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  z-index: 50;
}

.footer-nav-item--has-dropdown:hover .footer-nav-dropdown,
.footer-nav-item--has-dropdown:focus-within .footer-nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.footer-nav-dropdown--single {
  grid-template-columns: 1fr;
  min-width: 260px;
  padding: 14px;
}

.footer-nav-dropdown-header {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 12px;
  padding: 0 10px;
}

.footer-nav-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-nav-dropdown-list a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.footer-nav-dropdown-list a:hover,
.footer-nav-dropdown-list a:focus-visible {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.footer-nav-dropdown-list--primary a {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 14px;
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom {
  position: relative;
  padding-top: 32px;
}

/* Narrow centered separator line */
.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(70%, 560px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 100%
  );
}

/* Discrete purple glow centered below the separator */
.footer-bottom::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 80px;
  background: radial-gradient(
    ellipse at top,
    rgba(201, 75, 173, 0.18),
    transparent 70%
  );
  filter: blur(8px);
  pointer-events: none;
}

.footer-bottom p {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
}

/* ── Responsive: Tablet (≤ 900px) ── */
@media (max-width: 900px) {
  /* Lock the page to viewport width on mobile: both html AND body need
     overflow-x: hidden because body alone leaves the document scrollable
     at the root level. Anchor decorations like .audience-card::before
     (inset: -60px halo) and any other negative-inset pseudo-elements
     no longer pull the page width past the visible viewport. */
  html,
  body {
    overflow-x: hidden;
  }

  /* Belt-and-suspenders: clip the audience section so its decorative
     halo pseudo-elements cannot push the document scroll-width. */
  .audience {
    overflow-x: clip;
  }

  .hero {
    flex-direction: column;
    min-height: auto;
    padding: 100px 28px 140px;
    text-align: left;
    gap: 32px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-sub {
    max-width: 100%;
  }

  /* Hide visual placeholder on mobile until an image is added */
  .hero-visual {
    display: none;
  }

  .hero-bottom {
    left: 28px;
    right: 28px;
  }

  .intro {
    padding: 60px 28px 20px;
  }

  .intro-lead {
    margin-bottom: 60px;
    text-align: left;
  }

  .intro-showcase {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .intro-text { order: 1; }
  .flip-card  { order: 2; }

  .flip-card {
    aspect-ratio: 3 / 4;
    max-width: 320px;
    margin: 0 auto;
  }

  .mechanisms {
    padding: 90px 28px 30px;
  }

  .mechanisms-header {
    /* Block-centered on mobile: header uses full content width and
       all children (title, subtitle, buttons) align on the same axis. */
    display: block;
    margin: 0 auto 48px;
    text-align: center;
    max-width: 600px;
  }

  .mechanisms-titles {
    margin-bottom: 28px;             /* equal gap above the cta-row */
  }

  .mechanisms-title {
    margin-bottom: 14px;             /* equal-feeling rhythm with subtitle */
  }

  .cta-row {
    width: 100%;
    grid-template-columns: 1fr;      /* buttons stack vertically */
    margin-top: 0;                    /* the .mechanisms-titles handles the gap */
  }

  .mechanisms-subtitle {
    white-space: normal;
    letter-spacing: 0.15em;
    line-height: 1.5;
  }

  .detail-text {
    padding: 14px 0;            /* drop horizontal padding on mobile */
  }

  .detail-cta {
    margin-right: 0;            /* match the mobile detail-text padding */
  }

  .mechanism {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 0;
  }

  /* Hide image placeholders on mobile */
  .mechanism-visual {
    display: none;
  }

  /* Reset right-alignment for mobile */
  .mechanism-content {
    margin-left: 0;
    max-width: 100%;
    text-align: left;
  }

  /* Block-level flex so the heading takes the full mechanism-content
     width on mobile - the name pill below stretches edge-to-edge. */
  .mechanism-heading {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  /* Anchor wrapper goes block so its child (mechanism-name pill) can
     take 100% of the heading width. */
  .mechanism-name-link {
    display: block;
    width: 100%;
  }

  .mechanism-tag {
    margin-right: 0;
    margin-left: 24px;
  }

  .mechanism-name {
    min-width: 0;
    width: 100%;
    padding: 16px 24px;
    font-size: clamp(1.4rem, 6vw, 2rem);
    text-align: left;
  }

  /* Allow the criterion tags to wrap onto multiple lines instead of
     forcing the parent to overflow the viewport horizontally. */
  .mechanism-tags {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .audience {
    padding: 70px 28px 90px;
  }

  .audience-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 24px;
  }

  /* On mobile, stack everything in a single column */
  .audience-card[data-side="left"]  { grid-column: 1; grid-row: 1; }
  .audience-card[data-side="right"] { grid-column: 1; grid-row: 2; }

  .audience-grid[data-active="contabili"] .audience-bullets[data-panel="contabili"],
  .audience-grid[data-active="antreprenori"] .audience-bullets[data-panel="antreprenori"] {
    grid-column: 1;
    grid-row: 3;
  }

  .audience-grid[data-active="contabili"] .audience-desc,
  .audience-grid[data-active="antreprenori"] .audience-desc {
    grid-column: 1;
    grid-row: 4;
    position: static;
  }

  .audience-card {
    min-height: 420px;
    padding: 44px 32px 36px;
  }

  .card-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .detail-panel.is-active {
    gap: 36px;
  }

  .stat {
    padding: 90px 28px 110px;
  }

  .stat-content {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }

  .stat-description {
    padding-bottom: 0;
    max-width: 100%;
  }

  .marquee-section {
    padding: 20px 28px 90px;
    gap: 16px;
  }

  .m-item {
    flex: 0 0 120px;
    height: 80px;
  }

  .trust {
    padding: 30px 28px 80px;
  }

  .trust-header {
    margin-bottom: 56px;
    text-align: left;
  }

  .trust-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .faq {
    padding: 30px 28px 100px;
  }

  .faq-header {
    margin-bottom: 40px;
    text-align: left;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .faq-highlights {
    position: static;
    order: -1;
  }

  .benefits {
    padding: 40px 28px 80px;
    gap: 24px;
  }

  .benefit {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 56px 0;
  }

  .benefit-meta {
    position: static;
  }

  .benefit-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }

  .cta-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 60px 28px 60px;
  }

  .cta-card {
    padding: 40px 32px 36px;
  }

  .brand-credit {
    padding: 40px 28px 60px;
  }

  .footer {
    padding: 60px 28px 32px;
  }

  /* PYRAMID MODE - columns stay side-by-side but their alignments flip
     inward so items lean toward an imaginary central line, forming an
     A-shape (top: short items close to center; bottom: long items
     fanning out). Echoes the triangular Arcadi mark above. */
  .footer-grid {
    gap: 40px;                          /* tighter than the 80px desktop gap */
  }

  .footer-links {
    align-items: flex-end;              /* left col items lean toward center */
  }

  .footer-links--right {
    align-items: flex-start;            /* right col items lean toward center */
  }
}

/* ── Responsive: Narrow mobile (≤ 600px) ── */
/* Below this width several desktop-sized UI components (app-launch pill,
   role-switch toggle, footer dropdowns) start to overflow the viewport.
   We shrink them and let the footer columns stack vertically. */
@media (max-width: 600px) {
  /* App-launch pill on mobile - centered horizontally so it reads as the
     site's brand pill rather than a corner button. Width, padding and
     hover-expand height all scale down. */
  .app-launch {
    width: 132px;
    height: 60px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 0 14px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    border-radius: 0 0 22px 22px;
  }

  .app-launch-logo-wrap,
  .app-launch-logo {
    width: 104px;
  }

  .app-launch-text {
    top: 14px;
    left: 14px;
    right: 14px;
  }

  /* Hover-expand still works (touch devices stay tap-to-open via :focus) */
  .app-launch:hover {
    height: 100px;
  }

  /* Role-switch - was 460px of fixed columns. Switch to fluid 1fr/1fr
     so the toggle always fits its container. */
  .role-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }

  .role-btn {
    padding: 14px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  /* Footer nav dropdowns on mobile: the absolute-positioned drop-up
     panels are hard to keep inside the viewport when the parent flex
     wraps off-center. Hide them on narrow screens - the hamburger nav
     (top-left) is the primary navigation tool here, so Mecanisme and
     Beneficii from the footer are redundant on mobile. Acasă and
     Contact remain as quick footer links. */
  .footer-nav-item--has-dropdown {
    display: none;
  }

  /* Tighten the gap between the remaining footer nav items */
  .footer-nav {
    gap: 24px;
  }

  /* CTA-card "see other 3 mechanisms" buttons - stack vertically on
     mobile so each label is fully readable instead of getting truncated
     by 3 narrow columns. */
  .cta-card-buttons {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Hide the hero-bottom tagline on narrow mobile so it doesn't crowd
     the role-switch on small screens */
  .hero-bottom {
    font-size: 0.72rem;
  }

  /* Footer stack - long left + right items would touch with <50px gap,
     so stack vertically. Resets pyramid alignment back to single column. */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 40px;
  }

  .footer-links,
  .footer-links--right {
    align-items: flex-start;
  }
}

/* ── Responsive: Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .hero {
    padding: 80px 20px 120px;
  }

  .hero-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
  }

  .hero-bottom {
    left: 20px;
    right: 20px;
    bottom: 32px;
    font-size: 0.78rem;
  }

  .mechanisms {
    padding: 70px 20px 20px;
  }

  .mechanism-tag {
    margin-left: 16px;
  }

  /* Smaller mechanism name on narrow mobile so titles like "Filtrare
     avansată AI" and "Conta Map România" stay on a single line inside
     the pill instead of wrapping to two. */
  .mechanism-name {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
    padding: 14px 16px;
    line-height: 1.1;
  }

  .audience {
    padding: 60px 20px 80px;
  }

  /* Force the grid columns to honour 1fr without expanding to min-content
     of the children (default behaviour with `1fr` is min-width: auto,
     which can push the column past the grid container when card text
     has long words). */
  .audience-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .audience-col,
  .audience-card {
    min-width: 0;
  }

  .audience-card {
    min-height: 380px;
    padding: 36px 24px 28px;
    border-radius: 16px;
  }

  /* Shorter card-title clamp so "ANTREPRENORI" never overflows */
  .card-title {
    font-size: clamp(1.7rem, 7.6vw, 2.4rem);
  }

  /* Card body text/button tighten so nothing pushes the column past
     the grid edge */
  .card-text {
    max-width: 100%;
    font-size: 1rem;
  }

  .card-button {
    padding: 14px 18px;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
  }

  .stat {
    padding: 70px 20px 90px;
  }

  /* Role-switch on very narrow mobile: tighter padding + smaller font
     so "SUNT ANTREPRENOR" stops clipping its last letters inside the
     pill. The two columns stay equal (set on the 600px breakpoint). */
  .role-btn {
    padding: 13px 8px;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
  }

  /* Stat section reformat - number takes the full width, the white
     "Contabili" pill centers below it instead of right-aligning. */
  .stat-block {
    display: block;
    width: 100%;
    text-align: center;
  }

  .stat-number {
    display: block;
    font-size: clamp(3.5rem, 20vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: center;
    white-space: nowrap;        /* keep "16 000" on one line */
  }

  .stat-label {
    width: fit-content;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 12px 26px;
    font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  }
}

/* Utility: hide a span of inline copy below the mobile breakpoint.
   Used to drop connector words like "prin" from long headlines on
   narrow screens (e.g. "Vizibilitate optimizată prin AI" → "...AI"). */
@media (max-width: 600px) {
  .hide-on-mobile {
    display: none;
  }
}

/* ── Responsive: ultra-narrow mobile (≤ 360px, iPhone SE 1st gen) ── */
@media (max-width: 360px) {
  .role-btn {
    padding: 13px 6px;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }

  .mechanism-name {
    font-size: clamp(0.95rem, 4.2vw, 1.2rem);
    padding: 13px 14px;
  }

  .card-title {
    font-size: clamp(1.55rem, 7.2vw, 2.1rem);
  }

  .card-button {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    padding: 13px 14px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   SITE NAV — fixed top-right, flows visually into the .app-launch pill.
   Right edge at 232px (= pill width 200px + pill right 32px) so the nav
   ends exactly where the pill begins. Items are uppercase tracking-heavy
   labels matching the .cta-btn typographic style. Dropdowns reveal on
   hover/focus with a soft translucent panel.
   ────────────────────────────────────────────────────────────────── */

.site-nav {
  position: absolute;
  top: 30px;
  right: 232px;
  z-index: 99;
  display: flex;
  align-items: center;
}

.site-nav-list {
  list-style: none;
  margin: 0;
  padding: 0 16px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Stagger reveal on first paint - the items fade-and-rise into place one
   after another, giving the nav a subtle but memorable entrance. */
@keyframes siteNavItemReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-nav-item {
  position: relative;
  animation: siteNavItemReveal 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
}

.site-nav-item:nth-child(1) { animation-delay: 0.12s; }
.site-nav-item:nth-child(2) { animation-delay: 0.20s; }
.site-nav-item:nth-child(3) { animation-delay: 0.28s; }
.site-nav-item:nth-child(4) { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .site-nav-item { animation: none; }
}

/* All clickable nav items share this style - both <a> and <button>. */
.site-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-white);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--t-fast),
    text-shadow 0.4s ease,
    letter-spacing 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* Center-out gradient underline that draws in on hover/focus. Fades at
   both ends so it feels like a hairline aurora rather than a hard rule.
   Insets match the link's horizontal padding minus 4px so the underline
   extends a touch beyond the text on each side. */
.site-nav-link::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--p-300) 25%,
    var(--p-100) 50%,
    var(--p-300) 75%,
    transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.3, 1);
  pointer-events: none;
}

.site-nav-link:hover,
.site-nav-link:focus-visible,
.site-nav-item--has-dropdown:hover > .site-nav-link,
.site-nav-item--has-dropdown:focus-within > .site-nav-link {
  color: var(--text-white);
  letter-spacing: 0.20em;
  text-shadow: 0 0 14px rgba(240, 138, 212, 0.45);
  outline: none;
}

.site-nav-link:hover::after,
.site-nav-link:focus-visible::after,
.site-nav-item--has-dropdown:hover > .site-nav-link::after,
.site-nav-item--has-dropdown:focus-within > .site-nav-link::after {
  transform: scaleX(1);
}

/* Caret triangle indicator next to the dropdown trigger labels. */
.site-nav-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.3, 1), border-color 0.35s ease;
}

.site-nav-item--has-dropdown:hover .site-nav-caret,
.site-nav-item--has-dropdown:focus-within .site-nav-caret {
  transform: rotate(-135deg) translateY(2px);
  border-color: var(--p-100);
}

/* The dropdown panel - two columns, dignified translucent surface. */
.site-nav-dropdown {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  min-width: 520px;
  padding: 28px;
  background: rgba(12, 3, 50, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.site-nav-item--has-dropdown:hover .site-nav-dropdown,
.site-nav-item--has-dropdown:focus-within .site-nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-nav-dropdown-header {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 14px;
  padding: 0 10px;
}

.site-nav-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-nav-dropdown-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.site-nav-dropdown-list a:hover,
.site-nav-dropdown-list a:focus-visible {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* Simplified single-column dropdown (Beneficii) - two category links,
   styled like primary nav labels rather than as a list of sub-items. */
.site-nav-dropdown--single {
  grid-template-columns: 1fr;
  min-width: 280px;
  padding: 16px;
  gap: 0;
}

.site-nav-dropdown-list--primary a {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.85);
}

.site-nav-dropdown-list--primary a:hover,
.site-nav-dropdown-list--primary a:focus-visible {
  color: var(--text-white);
}

/* Below 1100px the desktop nav is hidden - the mobile hamburger nav
   below takes over. */
@media (max-width: 1100px) {
  .site-nav {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE NAV — hamburger button (top-left) + full-screen overlay
   menu that replaces the desktop .site-nav at ≤ 1100px.

   The toggle button sits opposite to the .app-launch pill (which is
   top-right at all sizes) so both stay visible together. The overlay
   slides in from above when the button is tapped, covering the page
   with a layered dark surface that carries the brand gradient. All
   nav routes - Mecanisme (both perspectives), Beneficii, Contact -
   plus the two primary app CTAs are reachable from this menu, so the
   user never has to scroll to the footer to navigate.
   ────────────────────────────────────────────────────────────────── */

/* Hamburger button - hidden by default on desktop, shown ≤ 1100px.
   z-index 121 sits above the mobile-nav overlay (120) which sits above
   the app-launch pill (100) - so opening the menu covers the pill. */
.mobile-nav-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 121;
  width: 44px;
  height: 44px;
  padding: 0;
  display: none;                            /* shown via media query below */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(7, 1, 45, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-appearance: none;
          appearance: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

@media (max-width: 1100px) {
  .mobile-nav-toggle {
    display: flex;
  }
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible {
  background: rgba(24, 6, 60, 0.65);
  border-color: rgba(255, 255, 255, 0.32);
  outline: none;
}

.mobile-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-white);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1),
              opacity 0.2s ease;
}

/* When the overlay is open, the three bars morph into an X */
body.is-mobile-nav-open .mobile-nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.is-mobile-nav-open .mobile-nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
body.is-mobile-nav-open .mobile-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Full-screen overlay menu - locked to viewport width via explicit
   100vw + left:0/right:0 so it can never spill past the device edge,
   regardless of how the layout viewport reports itself. z-index 120
   sits above the .app-launch pill (z-index 100) so the menu covers it
   when open. */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100%;
  z-index: 120;
  padding: 76px 28px 32px;                   /* leaves room for the toggle button + app-launch pill */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.32s ease,
              transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1),
              visibility 0s linear 0.4s;
  background:
    radial-gradient(circle at 50% -10%, rgba(145, 23, 113, 0.28) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 60%);
}

body.is-mobile-nav-open .mobile-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.32s ease,
              transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1),
              visibility 0s linear 0s;
}

/* Desktop: never show the overlay even if class is toggled (safety) */
@media (min-width: 1101px) {
  .mobile-nav,
  .mobile-nav-toggle {
    display: none !important;
  }
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Top-level nav items (Acasă, Contact) - big, prominent */
.mobile-nav-list > li > a {
  display: block;
  padding: 16px 12px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color var(--t-fast), background var(--t-fast);
}

.mobile-nav-list > li > a:hover,
.mobile-nav-list > li > a:focus-visible {
  color: var(--p-100);
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}

/* Grouped sections (Mecanisme · contabili / firme, Beneficii) */
.mobile-nav-group {
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav-group-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p-100);
  margin: 0 0 8px;
  padding: 0 12px;
}

.mobile-nav-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav-group ul li a {
  display: block;
  padding: 11px 12px;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.mobile-nav-group ul li a:hover,
.mobile-nav-group ul li a:focus-visible {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}

/* CTA stack at bottom - "Intră în app" (outline) + "Înregistrează cont" (solid) */
.mobile-nav-cta {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-cta-btn {
  display: block;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-white);
  text-decoration: none;
  background: rgba(7, 1, 45, 0.3);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.mobile-nav-cta-btn:hover,
.mobile-nav-cta-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
  outline: none;
}

.mobile-nav-cta-btn--primary {
  background: var(--p-700);
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(145, 23, 113, 0.4);
}

.mobile-nav-cta-btn--primary:hover,
.mobile-nav-cta-btn--primary:focus-visible {
  background: var(--p-500);
  border-color: transparent;
}

/* When the overlay is open, lock body scroll - applied via JS too. */
body.is-mobile-nav-open {
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────
   CONTACT PAGE — pillar-template form, email cards, legal block.
   Uses the same hero + pillar-stat + pillar-section editorial layout
   as the mecanism pages. Only the body content of each section is
   contact-specific (form, email cards, legal info).
   ────────────────────────────────────────────────────────────────── */

/* Form column — wraps both the form and the post-submit success state.
   Position relative so the success state can layer on top during the
   transition without shifting the rest of the page. Width capped so the
   form doesn't sprawl across the full pillar-section-body width. */
.contact-form-wrapper {
  max-width: 640px;
  position: relative;
  min-height: 480px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 36px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.contact-field {
  display: flex;
  flex-direction: column;
}

.contact-field label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  background: rgba(7, 1, 45, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.contact-field textarea {
  resize: vertical;
  min-height: 160px;
  font-family: inherit;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(220, 210, 240, 0.4);
}

.contact-field input:hover,
.contact-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--p-300);
  background: rgba(7, 1, 45, 0.55);
  box-shadow: 0 0 0 4px rgba(195, 57, 160, 0.16);
}

/* Submit — gradient pill with confident weight. Hover lifts subtly. */
.contact-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px 18px 36px;
  border: none;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--p-500) 0%, var(--p-700) 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
  box-shadow: 0 6px 20px rgba(145, 23, 113, 0.4);
}

.contact-submit svg {
  transition: transform var(--t-fast);
}

.contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(145, 23, 113, 0.55);
  filter: brightness(1.08);
}

.contact-submit:hover svg {
  transform: translateX(3px);
}

.contact-submit:active {
  transform: translateY(0);
}

/* Submitted state — form fades up out, success fades in over it. */
.contact-form-wrapper.is-submitted .contact-form {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 40px;
  border: 1px solid rgba(195, 57, 160, 0.32);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(195, 57, 160, 0.18) 0%, transparent 60%),
    rgba(7, 1, 45, 0.5);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease 0.18s, transform 0.35s ease 0.18s;
}

.contact-form-wrapper.is-submitted .contact-success {
  opacity: 1;
  transform: translateY(0);
}

.contact-success[hidden] {
  display: none;
}

.contact-success-mark {
  margin-bottom: 24px;
  color: var(--p-100);
}

.contact-success-mark svg {
  filter: drop-shadow(0 0 12px rgba(240, 138, 212, 0.4));
}

.contact-success-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin-bottom: 12px;
}

.contact-success-text {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Hero email cards - sit under the hero-sub paragraph as a vertical stack.
   Each card has a small uppercase label, the email address, then a note
   describing what the address is for. Compact and scannable, sized so two
   sit comfortably below the hero copy without crowding the form. */
.contact-hero-emails {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 36px;
  max-width: 540px;
}

.contact-hero-email {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  background: rgba(7, 1, 45, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.contact-hero-email:hover {
  border-color: var(--p-300);
  background: rgba(7, 1, 45, 0.55);
  transform: translateY(-2px);
}

.contact-hero-email-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 4px;
}

.contact-hero-email-addr {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: -0.005em;
}

.contact-hero-email-note {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-mute);
  line-height: 1.5;
  margin-top: 4px;
}

/* Credits section - single-column document layout, dignified-prose feel.
   Antrepremame logo at top as a quiet seal, then two stacked text blocks:
   one for the operator (foundation legal block), one for the FairTech
   initiative. Each block is just a small uppercase label + a flowing
   paragraph - reads like an institutional colophon, not a marketing splash. */
.contact-credits {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 80px 48px 60px;
}

.contact-credits-doc {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.contact-credits-logo {
  align-self: flex-start;
  margin-bottom: 36px;
}

/* Two-column grid for the foundation + initiative blocks. Same typographic
   style as before (labels + paragraphs, no gradients, no wordmarks) - just
   placed side by side. */
.contact-credits-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-credits-block {
  display: flex;
  flex-direction: column;
}

/* Left block (foundation) - framed as a discrete bordered card, content
   centered horizontally inside the card. */
.contact-credits-blocks > .contact-credits-block:first-child {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 36px 32px 32px;
  align-items: center;
  text-align: center;
}

.contact-credits-blocks > .contact-credits-block:first-child .contact-credits-logo {
  align-self: center;
}

/* Right block - push the "Inițiativă digitalizare" eyebrow down so it sits
   at the same vertical level as "Operator platformă" on the left (whose
   eyebrow is below the card's top padding + the Antrepremame logo + its
   bottom margin). */
.contact-credits-blocks > .contact-credits-block:nth-child(2) {
  padding-top: 132px;
}

.contact-credits-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 20px;
}

.contact-credits-text {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.75;
  margin-bottom: 16px;
}

.contact-credits-text strong {
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: -0.005em;
}

.contact-credits-text:last-child {
  margin-bottom: 0;
}

.contact-credits-text--justify {
  text-align: justify;
  hyphens: auto;
}

/* Foundation name - standalone line under the label. Sized to read at the
   logo's visual width below the Antrepremame mark above. */
.contact-credits-name {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.contact-credits-name strong {
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: -0.005em;
}

/* Standalone address - two lines via <br>. Width tuned to sit under the
   logo's column without being narrower. */
.contact-credits-address {
  font-style: normal;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.55;
  margin-bottom: 22px;
}

/* Registry codes block - CIF, DUNS, and Registrul cultelor all share the
   same label/value treatment. Layout: CIF + DUNS in a tight 2-column row
   on top, Registrul cultelor spanning the row below them. Small row gap
   so all three read as one logical section. */
.contact-credits-codes {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 36px;
  row-gap: 12px;
  width: fit-content;
  margin-bottom: 28px;
}

.contact-credits-code-item {
  display: flex;
  flex-direction: column;
}

.contact-credits-code-item:nth-child(3) {
  grid-column: 1 / -1;
}

.contact-credits-code-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}

.contact-credits-code-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.06em;
}

/* Quiet text links - website + foundation email. Thin weight, accent
   purple so they read as links without underlines or pills. */
.contact-credits-link {
  font-size: 1.05rem;
  font-weight: 300;
  margin-bottom: 2px;
}

.contact-credits-link a {
  color: var(--p-200);
  font-weight: 300;
  text-decoration: none;
  transition: color var(--t-fast);
}

.contact-credits-link a:hover {
  color: var(--p-50);
}

.contact-credits-link + .contact-credits-link {
  margin-top: 0;
}

.contact-credits-arcadi {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-white);
  margin-top: 28px;
}

/* Form section meta - tagline beneath the "Scrie-ne." title in the
   sticky meta column. Quiet, body-text scale. */
.contact-form-tagline {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.65;
  margin-top: 18px;
  max-width: 240px;
}

@media (max-width: 900px) {
  .contact-form-wrapper {
    min-height: auto;
  }

  .contact-credits {
    padding: 50px 24px 40px;
  }

  .contact-credits-doc {
    gap: 40px;
  }

  .contact-credits-blocks {
    grid-template-columns: minmax(0, 1fr);     /* prevent column expansion to min-content */
    gap: 40px;
  }

  /* Constrain grid items so long unbreakable strings (CIF / DUNS /
     INTERNT-... code, ANTREPREMAME wordmark) don't push the column
     wider than its container. */
  .contact-credits-block {
    min-width: 0;
    max-width: 100%;
  }

  /* Tighten the framed card's padding so its inner content area gets
     more room on narrow phones and the address line "Camera 1" no
     longer wraps awkwardly. */
  .contact-credits-blocks > .contact-credits-block:first-child {
    padding: 28px 22px 24px;
  }

  /* Address: smaller font + balanced wrap so each line breaks where it
     reads naturally. nbsp in the HTML keeps "Nr. 14", "Camera 1" and
     "Sector 1" glued together. */
  .contact-credits-address {
    font-size: 0.98rem;
    line-height: 1.5;
    text-wrap: pretty;
  }

  /* Foundation name and registry codes stay legible at narrow widths */
  .contact-credits-name {
    font-size: 1.05rem;
  }

  .contact-credits-codes {
    column-gap: 24px;
    row-gap: 10px;
  }

  .contact-credits-code-value {
    font-size: 0.95rem;
    word-break: break-word;       /* allow long codes to wrap cleanly */
  }

  .contact-credits-blocks > .contact-credits-block:nth-child(2) {
    padding-top: 0;
  }

  .contact-form-tagline {
    max-width: none;
  }

  .contact-hero-emails {
    gap: 10px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   STAT LABEL AS LINK — the "Contabili" pill in the homepage stat block
   links to the /firme directory but stays VISUALLY IDENTICAL to the
   original static pill: only the default anchor underline is removed.
   No hover lift, no arrow, no shadow, no focus restyle.
   ────────────────────────────────────────────────────────────────── */
.stat-label--link {
  text-decoration: none;
}

/* ──────────────────────────────────────────────────────────────────
   FIRME DIRECTORY — /firme (county index) + /firme/{judet} (firm list).
   Editorial directory styled in the brand language: dark gradient
   surface, purple accents, mouse-follow glow on cards.
   ────────────────────────────────────────────────────────────────── */

/* Directory hero - reuses pillar-stat spacing for a confident header */
.firme-hero {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 140px 48px 40px;
  text-align: left;
}

.firme-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 200;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--p-100);
  margin-bottom: 22px;
}

.firme-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-white);
  margin: 0 0 20px;
  max-width: 22ch;
}

.firme-hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 64ch;
  margin: 0;
}

/* Big total-count line under the subtitle */
.firme-hero-count {
  margin-top: 28px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-lavender);
}

.firme-hero-count strong {
  color: var(--text-white);
}

/* ── County index grid ── */
.firme-grid-section {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 40px 48px 120px;
}

.firme-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* fixed columns → every card identical; last row aligns left */
  gap: 16px;
}

@media (max-width: 1100px) {
  .firme-grid { grid-template-columns: repeat(3, 1fr); }
}

.firme-county {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(7, 1, 45, 0.3);
  overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.firme-county:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 60%),
    rgba(24, 6, 60, 0.45);
}

.firme-county a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px;
  text-decoration: none;
}

.firme-county-name {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-white);
}

.firme-county-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mute);
  font-feature-settings: "tnum" 1;
  flex-shrink: 0;
}

/* ── CTA under the county grid → app map ── */
.firme-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.firme-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 38px;
  border-radius: var(--r-pill);
  background: var(--p-700);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(145, 23, 113, 0.4);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.firme-cta::after {
  content: "→";
  transition: transform var(--t-fast);
}

.firme-cta:hover {
  background: var(--p-500);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(145, 23, 113, 0.5);
}

.firme-cta:hover::after {
  transform: translateX(4px);
}

/* ── County page: firm list grouped by city ── */
.firme-list-section {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 20px 48px 120px;
}

.firme-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color var(--t-fast);
}

.firme-back::before { content: "←"; }
.firme-back:hover { color: var(--p-100); }

/* A-Z jump bar — sticky row of letter anchors for big counties */
.firme-az {
  position: sticky;
  top: 8px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill);
  background: rgba(7, 1, 45, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.firme-az a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.firme-az a:hover,
.firme-az a:focus-visible {
  color: var(--text-white);
  background: var(--p-700);
  outline: none;
}

/* Offset anchored letter sections so the sticky bar doesn't cover them */
.firme-city-group {
  scroll-margin-top: 60px;
}

.firme-city-group {
  margin-bottom: 48px;
}

.firme-city-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--p-100);
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.firme-firms {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 24px;
}

.firme-firms li a {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}

.firme-firms li a:hover {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 900px) {
  .firme-hero { padding: 100px 28px 30px; }
  .firme-grid-section { padding: 30px 28px 90px; }
  .firme-list-section { padding: 20px 28px 90px; }
}

@media (max-width: 480px) {
  .firme-hero { padding: 90px 20px 24px; }
  .firme-grid-section { padding: 24px 20px 80px; }
  .firme-list-section { padding: 16px 20px 80px; }
  .firme-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .firme-county a { padding: 18px 16px; }
  .firme-county-name { font-size: 0.95rem; }
}