/* =========================================================================
   1. TOKENS
   Navy + spectral gradient come from the logo. Added a warm sand tone as the
   light surface so the page reads like paper stock rather than a UI panel —
   this is what stops it feeling clinical.
   ========================================================================= */
            /* --------------------------------------------------------
         Local names mapped onto the shared design system in
         css/main.css. No colour, font or size is defined here —
         edit the --qw-* tokens in main.css to restyle the site.
         -------------------------------------------------------- */
      :root {
        --navy: var(--qw-navy);
        --navy-2: var(--qw-navy);
        --navy-3: var(--qw-navy-2);
        --sand: var(--qw-paper);
        --sand-2: var(--qw-paper-2);
        --shell-c: var(--qw-card);
        --ink: var(--qw-ink);
        --ink-70: var(--qw-ink-70);
        --ink-45: var(--qw-ink-45);
        --rule: var(--qw-line);
        --light-70: var(--qw-on-dark-70);
        --light-20: var(--qw-line-dark);
        --g1: var(--qw-violet);
        --g2: var(--qw-blue);
        --g3: var(--qw-cyan);
        --g4: var(--qw-mint);
        --grad: var(--qw-grad);
        --d-xl: var(--qw-fs-hero);
        --d-l: var(--qw-fs-h2);
        --d-m: var(--qw-fs-h3);
        --body: var(--qw-fs-body);
        --shell: var(--qw-shell);
        --gap: var(--qw-gap);
        --r: var(--qw-r);
        --ease: var(--qw-ease);
      }

      /* =========================================================================
   2. BASE
   ========================================================================= */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--sand);
        color: var(--ink);
        overflow-x: hidden;
        font: 400 var(--body) / var(--qw-lh-body) var(--qw-font-ui);
        -webkit-font-smoothing: antialiased;
      }
      img {
        display: block;
        max-width: 100%;
      }
      a {
        color: inherit;
      }
      h1,
      h2,
      h3 {
        margin: 0;
        font-family: var(--qw-font-display);
        font-weight: 600;
        line-height: 1.04;
        letter-spacing: -0.02em;
      }
      h1 {
        font-size: var(--d-xl);
      }
      h2 {
        font-size: var(--d-l);
      }
      h3 {
        font-size: var(--d-m);
        line-height: 1.2;
      }
      p {
        margin: 0 0 1.05em;
        max-width: 66ch;
      }
      p:last-child {
        margin-bottom: 0;
      }
      :focus-visible {
        outline: 2px solid var(--g3);
        outline-offset: 3px;
        border-radius: 6px;
      }

      .shell {
        width: var(--shell);
        margin-inline: auto;
      }
      .sec {
        padding: var(--qw-pad-section) 0;
      }
      .sec--top0 {
        padding-top: 0;
      }
      .dim {
        color: var(--ink-70);
      }
      .lede {
        font-size: clamp(1.1rem, 1.35vw, 1.36rem);
        line-height: 1.55;
        color: var(--ink-70);
      }

      /* Section marker — gradient rule + word. Structural, not decorative. */
      .mark {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.87rem;
        font-weight: 500;
        color: var(--ink-45);
        margin-bottom: 1.5rem;
      }
      .mark::before {
        content: "";
        width: 40px;
        height: 2px;
        border-radius: 2px;
        background: var(--grad);
      }
      .on-dark .mark {
        color: var(--light-70);
      }

      /* =========================================================================
   3. MOTION — one reveal primitive; --i staggers siblings
   ========================================================================= */
      [data-rv] {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.8s var(--ease),
          transform 0.8s var(--ease);
        transition-delay: calc(var(--i, 0) * 95ms);
      }
      [data-rv].in {
        opacity: 1;
        transform: none;
      }
      /* Image reveal: the frame wipes open, the photo settles from a slight zoom */
      .frame {
        overflow: hidden;
        border-radius: var(--r);
        background: var(--sand-2);
      }
      .frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.12);
        transition: transform 1.4s var(--ease);
      }
      .frame.in img {
        transform: scale(1);
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        * {
          animation-duration: 0.001ms !important;
          transition-duration: 0.001ms !important;
        }
        [data-rv] {
          opacity: 1;
          transform: none;
        }
        .frame img {
          transform: none;
        }
      }

      /* =========================================================================
   5. HERO — same dark canvas-hero family as Risk Management (radar sweep)
   and Crisis and Recovery (chaotic pulse): a void backdrop, a self-drawing
   <canvas> mechanic and a pointer-reactive glow, no stock photo. This
   page's mechanic is an ascending market line over a faint ledger grid —
   echoing the "ledger register" section further down the page. Kept on
   this page's own left/bottom-anchored composition (not the other two's
   centered one) so the family reads as related, not identical.
   ========================================================================= */
      .hero {
        position: relative;
        min-height: 100svh;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        color: var(--sand);
        background: var(--navy);
      }
      #ledgerHero {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 0.9;
      }
      .hero__glow {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(
          280px 280px at var(--mx, 82%) var(--my, 28%),
          rgba(63, 238, 215, 0.16),
          transparent 70%
        );
      }
      /* Two-stop scrim: dark at the bottom where the type sits, navy tint overall */
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgba(12, 23, 48, 0.1) 0%,
          rgba(12, 23, 48, 0.3) 42%,
          rgba(12, 23, 48, 0.94) 100%
        );
      }
      .hero__in {
        position: relative;
        z-index: 2;
        width: var(--shell);
        margin-inline: auto;
        padding: clamp(8rem, 16vw, 11rem) 0 clamp(3rem, 6vw, 5rem);
      }
      .hero h1 {
        max-width: 15ch;
      }
      .hero h1 em {
        font-style: normal;
        background: var(--grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .hero__lede {
        margin-top: 1.9rem;
        max-width: 58ch;
        color: var(--light-70);
        font-size: clamp(1rem, 1.1vw, 1.15rem);
      }
      .hero__cue {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        margin-top: 2.8rem;
        font-size: 0.85rem;
        color: var(--light-70);
      }
      .hero__cue i {
        width: 1px;
        height: 36px;
        background: linear-gradient(var(--g3), transparent);
        animation: cue 2.2s var(--ease) infinite;
      }
      @keyframes cue {
        0% {
          transform: scaleY(0.2);
          transform-origin: top;
        }
        50% {
          transform: scaleY(1);
          transform-origin: top;
        }
        51% {
          transform-origin: bottom;
        }
        100% {
          transform: scaleY(0.2);
          transform-origin: bottom;
        }
      }

      /* =========================================================================
   6. OVERLAP INTRO — Z pattern with the photo breaking out of the column
   and rising into the hero. The offset is what keeps it from feeling boxy.
   ========================================================================= */
      .overlap {
        position: relative;
        margin-top: clamp(-7rem, -8vw, -4rem);
        z-index: 3;
      }
      .overlap__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.5rem, 4vw, 3.5rem);
        align-items: end;
      }
      .overlap__img {
        border-radius: var(--r);
        overflow: hidden;
        aspect-ratio: 4/5;
        box-shadow: 0 30px 70px rgba(12, 23, 48, 0.28);
      }
      .overlap__txt {
        align-self: start;
        margin-top: clamp(5.5rem, 9.5vw, 8.5rem);
        padding-bottom: clamp(1rem, 4vw, 3rem);
      }
      @media (max-width: 992px) {
        .overlap {
          margin-top: -3rem;
        }
        .overlap__grid {
          grid-template-columns: 1fr;
        }
        .overlap__img {
          aspect-ratio: 16/10;
        }
        .overlap__txt {
          margin-top: 1.5rem;
        }
      }

      /* Pull-quote style paragraph — gives the intro a change of texture */
      .pull {
        font-family: var(--qw-font-display);
        font-size: clamp(1.3rem, 2.1vw, 1.85rem);
        line-height: 1.35;
        font-weight: 400;
        max-width: 24ch;
        border-left: 3px solid transparent;
        border-image: var(--grad) 1;
        padding-left: 1.4rem;
      }

      /* =========================================================================
   7. EXPERTISE — pinned horizontal scroll, each card carrying a photo.
   Degrades to a native swipe row under 860px.
   ========================================================================= */
      .hx {
        background: var(--navy);
        color: var(--sand);
      }
      .hx__wrap {
        position: relative;
        height: 360vh;
      }
      .hx__stage {
        position: sticky;
        top: 0;
        height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
      }
      .hx__head {
        width: var(--shell);
        margin: 0 auto 2.2rem;
      }
      .hx__head h2 {
        max-width: 18ch;
        font-weight: 400;
      }
      .hx__track {
        display: flex;
        gap: var(--gap);
        will-change: transform;
        padding-inline: max(4vw, calc((100vw - var(--shell)) / 2));
      }
      .xc {
        position: relative;
        flex: 0 0 clamp(270px, 26vw, 360px);
        height: clamp(340px, 46vh, 440px);
        border-radius: var(--r);
        overflow: hidden;
        border: 1px solid var(--light-20);
        isolation: isolate;
      }
      .xc img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.6) brightness(0.55);
        transition:
          transform 0.8s var(--ease),
          filter 0.6s var(--ease);
      }
      .xc:hover img {
        transform: scale(1.07);
        filter: saturate(0.9) brightness(0.62);
      }
      .xc__body {
        position: relative;
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0.7rem;
        padding: 1.7rem;
        background: linear-gradient(
          180deg,
          transparent 30%,
          rgba(12, 23, 48, 0.9) 100%
        );
      }
      .xc__body i {
        width: 34px;
        height: 3px;
        border-radius: 3px;
        background: var(--grad);
      }
      .xc h3 {
        font-size: 1.25rem;
      }
      .xc p {
        font-size: 0.95rem;
        color: var(--light-70);
        margin: 0;
      }
      .hx__rail {
        width: var(--shell);
        margin: 2.2rem auto 0;
        height: 2px;
        border-radius: 2px;
        background: var(--light-20);
      }
      .hx__bar {
        height: 100%;
        width: 0;
        border-radius: 2px;
        background: var(--grad);
      }
      @media (max-width: 992px) {
        .hx__wrap {
          height: auto;
        }
        .hx__stage {
          position: static;
          height: auto;
          padding: 4.5rem 0;
        }
        .hx__track {
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          transform: none !important;
          padding-bottom: 1.2rem;
        }
        .xc {
          flex-basis: 76vw;
          scroll-snap-align: center;
        }
        .hx__rail {
          display: none;
        }
      }

      /* =========================================================================
   8. SPLIT — a full-width heading row, then a photo on the left with prose
   levelled beside it on the right. Both columns of the second row are
   plain static content starting at the same line, so the whole section is
   visible in one place and scrolls as a single unit — no pin, no separate
   scroll distance between the photo and the text.
   ========================================================================= */
      .split {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: clamp(1.6rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4.5rem);
        align-items: start;
      }
      .split__head {
        grid-column: 1 / -1;
      }
      .split__head h2 {
        max-width: 26ch;
        font-weight: 400;
      }
      .split__pin .frame {
        aspect-ratio: 5/4;
      }
      .blk {
        padding: clamp(1.6rem, 3vw, 2.4rem) 0;
        border-top: 1px solid var(--rule);
      }
      .blk:first-child {
        border-top: 0;
        padding-top: 0;
      }
      .blk h3 {
        margin-bottom: 0.85rem;
      }
      .blk p {
        color: var(--ink-70);
      }
      /* Mirrored variant — photo swaps to the right so a run of stacked
         split sections reads as a Z-pattern instead of everything lining
         up on the same side. */
      .split--rev {
        grid-template-columns: 1.1fr 0.9fr;
      }
      .split--rev .split__pin {
        order: 2;
      }
      @media (max-width: 992px) {
        .split {
          grid-template-columns: 1fr;
        }
      }

      /* =========================================================================
   9a. PERFORMANCE — "ledger" register: no photo frame, no sticky pin, no
   card grid — every other content section on the page leans on one of
   those three. Instead: a centered medallion + one-line heading, then
   the three paragraphs as flush-ruled statement columns, like line items
   on a financial statement.
   ========================================================================= */
      .perf__head {
        text-align: center;
        margin-bottom: clamp(2.6rem, 5vw, 4rem);
      }
      .perf__badge {
        position: relative;
        width: clamp(140px, 16vw, 200px);
        aspect-ratio: 1;
        margin: 0 auto 1.6rem;
      }
      .perf__badge::before {
        content: "";
        position: absolute;
        inset: -14px;
        border-radius: 50%;
        background: var(--grad);
        opacity: 0.35;
        filter: blur(18px);
      }
      .perf__badge-photo {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid var(--sand);
        box-shadow:
          0 0 0 1px var(--rule),
          0 18px 36px -14px rgba(12, 23, 48, 0.4);
      }
      .perf__badge img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .perf__head h2 {
        font-weight: 400;
        white-space: nowrap;
      }
      @media (max-width: 768px) {
        .perf__head h2 {
          white-space: normal;
        }
      }
      .perf__ledger {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
      .perf__col {
        padding-inline: clamp(1.2rem, 2.5vw, 2rem);
        border-left: 1px solid var(--rule);
      }
      .perf__col:first-child {
        border-left: 0;
        padding-left: 0;
      }
      .perf__col:last-child {
        padding-right: 0;
      }
      .perf__col-mark {
        display: block;
        width: 28px;
        height: 2px;
        background: var(--grad);
        margin-bottom: 1.1rem;
      }
      .perf__col p {
        color: var(--ink-70);
      }
      @media (max-width: 992px) {
        .perf__ledger {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
        .perf__col {
          border-left: 0;
          padding-inline: 0;
          border-top: 1px solid var(--rule);
          padding-top: 1.5rem;
        }
        .perf__col:first-child {
          border-top: 0;
          padding-top: 0;
        }
      }

      /* =========================================================================
   9b. RESILIENCE — dark signal band: a soft dual-tone aura behind the
   heading, then two glass cards each carrying a small pulsing "radar
   ring" motif — a graphic stand-in for monitoring/risk rather than
   another stock photo, so it reads as its own register next to the
   light Performance section above it and the photographic Transactions
   band below it.
   ========================================================================= */
      .resil {
        position: relative;
        overflow: hidden;
        background: var(--navy);
        color: var(--sand);
      }
      .resil__aura {
        position: absolute;
        inset: -20%;
        z-index: 0;
        background:
          radial-gradient(
            560px 420px at 82% 10%,
            rgba(66, 105, 253, 0.22),
            transparent 60%
          ),
          radial-gradient(
            480px 380px at 6% 92%,
            rgba(130, 62, 231, 0.18),
            transparent 60%
          );
        pointer-events: none;
      }
      .resil__in {
        position: relative;
        z-index: 1;
      }
      .resil h2 {
        max-width: 16ch;
        font-weight: 400;
        margin-bottom: 1.4rem;
      }
      .resil .lede {
        color: var(--light-70);
      }
      .resil__cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.25rem, 3vw, 2rem);
        margin-top: clamp(2rem, 4vw, 3rem);
      }
      .rcard {
        position: relative;
        overflow: hidden;
        padding: clamp(1.6rem, 2.6vw, 2.2rem);
        border-radius: var(--r);
        background: var(--navy-3);
        border: 1px solid var(--light-20);
      }
      .rcard p {
        position: relative;
        z-index: 1;
        color: var(--light-70);
        margin: 0;
        max-width: 42ch;
      }
      .rcard__ring {
        position: absolute;
        top: -34%;
        right: -28%;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        border: 1px solid var(--light-20);
        opacity: 0.7;
      }
      .rcard__ring::before,
      .rcard__ring::after {
        content: "";
        position: absolute;
        inset: 22%;
        border-radius: 50%;
        border: 1px solid var(--light-20);
      }
      .rcard__ring::after {
        inset: 42%;
        border-color: rgba(63, 187, 231, 0.55);
        animation: ringPulse 3.2s var(--ease) infinite;
      }
      @keyframes ringPulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.9;
        }
        50% {
          transform: scale(1.18);
          opacity: 0.35;
        }
      }
      @media (max-width: 992px) {
        .resil__cards {
          grid-template-columns: 1fr;
        }
      }

      /* =========================================================================
   10. TRANSACTIONS — dark full-bleed band with a fixed-attachment photo,
   so the section reads as a hinge between the two halves of the page.
   ========================================================================= */
      .band {
        position: relative;
        overflow: hidden;
        background: var(--navy-2);
        color: var(--sand);
      }
      .band__media {
        position: absolute;
        inset: -15% 0;
        z-index: 0;
        will-change: transform;
      }
      .band__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.5) brightness(0.4);
      }
      .band::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          90deg,
          rgba(12, 23, 48, 0.94),
          rgba(12, 23, 48, 0.6)
        );
      }
      .band__in {
        position: relative;
        z-index: 2;
      }
      .band h2 {
        max-width: 16ch;
        font-weight: 400;
      }
      .band__cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.5rem, 4vw, 3.5rem);
        margin-top: 2.2rem;
      }
      .band p {
        color: var(--light-70);
      }
      @media (max-width: 992px) {
        .band__cols {
          grid-template-columns: 1fr;
        }
      }

      /* =========================================================================
   11. CTA + FOOTER — same register as Risk Management's and Crisis and
   Recovery's closing CTA (spinning conic-gradient halo + ambient particle
   field), so all three service pages share one closing-CTA design.
   ========================================================================= */
      .cta {
        position: relative;
        border-radius: 26px;
        padding: clamp(3rem, 6.5vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
        text-align: center;
        overflow: hidden;
        isolation: isolate;
        color: var(--sand);
      }
      .cta__bg {
        position: absolute;
        inset: 0;
        z-index: -2;
        background: linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 72%);
      }
      .cta__net {
        position: absolute;
        inset: 0;
        z-index: -2;
        opacity: 0.5;
      }
      .cta::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -40%;
        width: 140%;
        aspect-ratio: 1;
        z-index: -1;
        transform: translateX(-50%);
        border-radius: 50%;
        background: conic-gradient(
          from 0deg,
          var(--g1),
          var(--g2),
          var(--g3),
          var(--g4),
          var(--g1)
        );
        opacity: 0.2;
        filter: blur(60px);
        animation: spin 24s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .cta::before {
          animation: none;
        }
      }
      .cta > *:not(.cta__bg):not(.cta__net) {
        position: relative;
        z-index: 1;
      }
      .cta p {
        margin: 1.2rem auto 0;
        max-width: 74ch;
        color: var(--light-70);
      }
      .cta p.hi {
        color: var(--sand);
      }
      @media (max-width: 768px) {
        .cta .btn {
          margin-top: 1.2rem;
        }
      }
      /* =========================================================================
   SUPER ULTRA MEGA MODERN SECTION (Stacking Cards)
   ========================================================================= */
      .modern-finance-section {
        position: relative;
        z-index: 10;
        padding: clamp(3rem, 8vw, 6rem) 0 clamp(5rem, 10vw, 8rem) 0;
      }

      .modern-finance-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto clamp(3rem, 6vw, 5rem) auto;
      }

      .modern-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.6rem 1.4rem;
        border-radius: 999px;
        background: var(--light-20);
        color: var(--navy);
        border: 1px solid rgba(12, 23, 48, 0.15);
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 1.5rem;
      }

      .modern-title {
        font-size: clamp(2.5rem, 5vw, 4.5rem);
        margin-bottom: 1.2rem;
        line-height: 1.1;
        background: var(--grad);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--navy);
      }

      .modern-subtitle {
        font-size: clamp(1.1rem, 2vw, 1.35rem);
        color: var(--ink-70);
        line-height: 1.6;
      }

      .modern-stack-container {
        display: flex;
        flex-direction: column;
        gap: clamp(2rem, 5vw, 5rem);
        position: relative;
      }

      /* Magia Stacking-ului */
      .modern-stack-card {
        position: sticky;
        transition: transform 0.4s var(--ease);
      }

      /* Diferența de TOP la scroll creează efectul de "pachet de cărți".
         Ținute mici deliberat: fiecare px de aici se scade direct din
         înălțimea de ecran rămasă pentru card, deci cu cât "peek"-ul e
         mai subtil, cu atât cardul încape mai ușor pe un singur ecran. */
      #card-1 {
        top: clamp(16px, 2.5vh, 28px);
        z-index: 1;
      }
      #card-2 {
        top: clamp(30px, 3.5vh, 44px);
        z-index: 2;
      }
      #card-3 {
        top: clamp(44px, 4.5vh, 60px);
        z-index: 3;
      }

      .modern-card-content {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.5rem, 3.5vw, 3rem);
        align-items: center;
        background: rgba(12, 23, 48, 0.92);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        border-radius: 28px;
        padding: clamp(1.4rem, 2.6vw, 2.4rem);
        color: var(--sand);
        box-shadow:
          0 -15px 40px rgba(0, 0, 0, 0.04),
          0 30px 60px rgba(12, 23, 48, 0.25);
        overflow: hidden;
      }

      /* Bordură gradient ultra-modernă folosind mask */
      .modern-card-content::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px; /* Grosimea bordurii */
        background: var(--grad);
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.6;
        pointer-events: none;
      }

      .modern-card-content.reverse {
        background: rgba(12, 23, 48, 0.96); /* Ușor mai închis pentru contrast pe scroll */
      }

      /* Forecasting card carries an extra paragraph, so its photo gets a
         bit more room to stay visually balanced against the taller text column. */
      .modern-card-content--wide-visual {
        grid-template-columns: 0.85fr 1.15fr;
      }

      .modern-card-text {
        position: relative;
        z-index: 2;
      }

      .modern-card-text .mark {
        color: var(--light-70);
        margin-bottom: 0.8rem;
      }

      .modern-card-text h3 {
        font-size: clamp(1.4rem, 2.1vw, 1.9rem);
        margin: 0.5rem 0 0.8rem;
        color: #fff;
        letter-spacing: -0.01em;
      }

      .modern-card-text p {
        color: var(--light-70);
        font-size: clamp(0.9rem, 0.95vw, 0.98rem);
        line-height: 1.5;
        margin-bottom: 0.65rem;
      }
      .modern-card-text p:last-child {
        margin-bottom: 0;
      }

      .modern-card-visual {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        z-index: 2;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        transform: translateZ(0); /* Force hardware acceleration */
      }

      .modern-card-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition:
          transform 1.2s var(--ease),
          filter 0.8s var(--ease);
        filter: saturate(0.85) brightness(0.85);
      }

      .modern-stack-card:hover .modern-card-visual img {
        transform: scale(1.06);
        filter: saturate(1.1) brightness(1.05);
      }

      /* Responsiveness pe Desktop / Tabletă Mare */
      @media (min-width: 993px) {
        .modern-card-content.reverse .modern-card-text {
          order: 2;
        }
        .modern-card-content.reverse .modern-card-visual {
          order: 1;
        }
        /* Fixed 4/3 ratio instead of a 1/1 square: keeps every card's
           photo the same size regardless of how long that card's own
           copy runs. Stretching the photo to match the text column
           (tried previously) backfired the other way — a card with
           long copy (e.g. "Financial Insight") stretched its photo into
           a tall, narrow strip. Centering a fixed-size photo means the
           row's height still follows the taller side (usually the text),
           but the photo itself never balloons or gets cropped oddly. */
        .modern-card-content {
          align-items: center;
        }
        .modern-card-visual {
          aspect-ratio: 4 / 3;
          height: auto;
        }
      }

      /* Responsiveness pe Mobile */
      @media (max-width: 992px) {
        .modern-card-content {
          grid-template-columns: 1fr;
          padding: 2.5rem 1.5rem;
          border-radius: 24px;
        }
        .modern-card-visual {
          order: -1 !important;
          aspect-ratio: 16 / 10;
          margin-bottom: 1rem;
        }
        .modern-title {
          background: none;
          -webkit-background-clip: border-box;
          -webkit-text-fill-color: currentcolor;
        }
        .modern-stack-container {
          gap: 3.5rem;
        }
        #card-1,
        #card-2,
        #card-3 {
          top: 70px; /* Anulăm efectul exagerat de "stack" pe mobil pentru lizibilitate maximă */
        }
      }