* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Inter', sans-serif; background: #17141F; color: #fff; min-height: 100vh; padding-top: 88px; }

  .scroll-mask {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 14px;
    background: #1E1B26;
    z-index: 9999;
    pointer-events: none;
  }

  .nav-wrapper {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    isolation: isolate;
    z-index: 1000;
  }

  header {
    background: #3F2E5C;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 40px;
    position: relative;
  }
  .logo { font-family: 'Anton', sans-serif; font-size: 16px; }
  .logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; color: inherit; }
  .logo-mark { height: 34px; width: 34px; object-fit: contain; flex-shrink: 0; }
  nav { display: flex; gap: 30px; }

  .nav-link, .trigger {
    color: #fff; text-decoration: none; font-weight: 800; font-size: 12px; letter-spacing: 0.5px;
    padding: 8px 0; background: none; border: none; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
  }
  .caret { width: 8px; height: 8px; transition: transform 0.2s ease; }
  .trigger.active .caret { transform: rotate(180deg); }

  .buttons { display: flex; gap: 10px; }
  .pill { padding: 9px 18px; border-radius: 100px; font-weight: 800; font-size: 12px; letter-spacing: 0.5px; background: #F2B90D; color: #3F2E5C; text-decoration: none; }

  /* ---------- Full-width mega-menu sheet ---------- */
  .mega-menu {
    position: absolute; top: 100%; left: 0; width: 100%;
    display: none;
    z-index: 9;
  }
  .mega-inner {
    background: #3F2E5C;
    /* The sheet still spans the window, but the preview panel is capped: left
       to grow with the viewport it reaches 5:1 on a wide screen, and `cover`
       then crops the photo top and bottom — which is exactly where the faces
       are. Capped, the panel never gets wider than the photos are cut for, so
       only the sides can ever be trimmed. */
    display: grid; grid-template-columns: 320px minmax(0, 700px); justify-content: center; gap: 40px;
    padding: 36px 48px;
    box-shadow: 0 24px 50px rgba(0,0,0,0.5);
    transform-origin: top center;
  }
  /* The sheet slides down out of the header and fades in — one easing, no
     overshoot and no oscillation. Opening is slower than closing, which is
     what makes a menu feel unhurried on the way in and responsive on the
     way out. */
  .mega-inner.menu-in  { animation: menuIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .mega-inner.menu-out { animation: menuOut 0.2s cubic-bezier(0.4, 0, 1, 1) both; }

  @keyframes menuIn {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes menuOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
  }

  .mega-left { display: flex; flex-direction: column; gap: 3px; }
  .mega-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: 0.5; padding: 0 16px 10px; }
  .mega-link {
    padding: 14px 16px; border-radius: 10px; color: #fff; text-decoration: none;
    font-weight: 700; font-size: 15px; transition: background 0.15s;
  }
  .mega-link:hover { background: #5B2E8C; }

  .mega-right {
    border-radius: 16px; position: relative; overflow: hidden;
    /* Bottom-left, where the scrim over the photo is darkest — a centred
       caption would sit across the middle of whoever is in the frame. */
    display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column; gap: 10px;
    padding: 22px 26px;
    transition: background 0.25s ease;
    min-height: 260px;
  }
  .mega-right .icon { font-size: 56px; transition: opacity 0.15s ease, transform 0.25s ease; }
  .mega-right .caption { font-weight: 800; font-size: 13px; letter-spacing: 0.5px; opacity: 0.9; transition: opacity 0.15s ease; }

  /* ---------- Hero: type first. Each word of the headline is its own block,
     so a small tile can sit between two words the way another word would —
     the brand mark on the first line, a photo on the second. This replaced
     four corner frames that could never fit beside the copy on anything
     narrower than a wide desktop. ---------- */
  .hero {
    position: relative;
    isolation: isolate;
    z-index: 1;
    min-height: 73vh;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: #1E1B26;
    /* 92vh with 120px of padding made an 828px band before the carousel, and
       both had to come down together: at 120px the content plus padding alone
       was 708px, so lowering min-height by itself would have changed nothing.
       64vh held until the type was scaled up by a third. The content is
       centred, so growing it alone would have pulled the badge from 133px
       below the header up to ~87px — this min-height is what holds that gap,
       not what sets the band's height. Re-tune it whenever the type changes. */
    padding: 50px 24px;
  }
  .hero-content { position: relative; z-index: 2; max-width: 1180px; will-change: transform, opacity; }
  .hero-badge {
    display: inline-block; margin: 4px 0 20px; padding: 9px 20px; border-radius: 100px;
    background: #F2B90D; color: #3F2E5C; font-weight: 800; font-size: 14px;
  }

  .hero-title { display: flex; flex-direction: column; align-items: center; margin: 8px 0 0; }
  .hero-line { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.77vw, 27px); }
  .hero-word {
    font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(45px, 11vw, 160px);
    line-height: 0.96;            /* the two lines almost touch, as in the reference */
    letter-spacing: -0.5px;
    color: #F2B90D;
  }
  /* Both inserts are sized off the same clamp as the type, so they stay
     proportional to the words either side of them at every width. */
  .hero-mark { height: clamp(38px, 8.9vw, 127px); width: auto; flex-shrink: 0; overflow: visible; }
  /* The mark is inlined rather than an <img> so each square can be animated on
     its own. Each turns a quarter turn and lands — and because a square looks
     identical after 90°, the loop restarts at 0 with nothing to see, so there is
     no snap back. The base angles are the master's own 0/7/23/45; the delays
     make them land one after another rather than as a block. */
  .brand-mark .lm {
    transform-origin: 250px 250px;
    transform-box: view-box;
    animation: markSettle 5s cubic-bezier(0.22, 1, 0.3, 1) infinite;
  }
  .brand-mark .lm-1 { --base: 0deg;  animation-delay: 0s; }
  .brand-mark .lm-2 { --base: 7deg;  animation-delay: 0.16s; }
  .brand-mark .lm-3 { --base: 23deg; animation-delay: 0.32s; }
  .brand-mark .lm-4 { --base: 45deg; animation-delay: 0.48s; }
  @keyframes markSettle {
    0%   { transform: rotate(var(--base)); }
    45%  { transform: rotate(calc(var(--base) + 90deg)); }
    100% { transform: rotate(calc(var(--base) + 90deg)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand-mark .lm { animation: none; transform: rotate(var(--base)); }
  }
  .brand-mark .lm-the     { font-family: 'Allura', cursive; font-size: 40px; }
  .brand-mark .lm-fun     { font-family: 'Allura', cursive; font-size: 105px; }
  .brand-mark .lm-station { font-family: 'Anton', sans-serif; font-size: 54px; letter-spacing: 2px; }
  /* The chip types itself out like a line still loading: seven steps to open,
     a beat to look at the frame, five steps to delete, and the next of the
     three photos is swapped in while it is shut. Width is what animates, so
     the words beside it are pushed and pulled by the typing — that motion is
     the point of the effect, not a side effect of it. */
  .hero-chip {
    --chip-h: clamp(35px, 8.3vw, 119px);
    --chip-w: calc(var(--chip-h) * 16 / 9);
    --chip-min: calc(var(--chip-w) * 0.16);
    position: relative; height: var(--chip-h); width: var(--chip-w); flex-shrink: 0;
    border-radius: clamp(4px, 0.8vw, 12px); overflow: hidden;
    animation: chipType 2s infinite;
  }
  /* The caret is only ever the shut tile itself: `--chip-min` wide, the exact
     width `chipType` leaves behind, so shut it covers the frame completely.
     It is not drawn at any other moment — no yellow edge while the tile opens,
     stands open or closes — which is why it needs no width animation, only an
     opacity one on the same 2s cycle as `chipType`. */
  .hero-chip::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0;
    width: var(--chip-min); background: #F2B90D;
    animation: caretType 2s infinite;
  }
  @keyframes chipType {
    0%   { width: var(--chip-min); }
    14%  { width: var(--chip-min); animation-timing-function: steps(7, end); }
    36%  { width: var(--chip-w); }
    72%  { width: var(--chip-w); animation-timing-function: steps(5, end); }
    86%  { width: var(--chip-min); }
    100% { width: var(--chip-min); }
  }
  /* 2s of typing x 3 photos = the 6s swap cycle, so the frames always change
     during the shut beat that spans each boundary, never mid-reveal. */
  @keyframes chipSwap {
    0%, 33.333%   { opacity: 1; }
    33.334%, 100% { opacity: 0; }
  }
  /* The shut beat straddles the loop boundary — 86% → 100% → 14%, 0.56s — and
     the caret exists only inside it, blinking. The two off-beats (93→96.5%
     and 3.5→7%) sit either side of the boundary and never across it, because
     the frames swap at exactly 100%/0% and the cover has to be opaque at that
     instant; move one over and the swap shows. Off-beats read as the hero's
     own colour rather than as photo, because `chipShut` has the frames hidden
     for this whole stretch. */
  @keyframes caretType {
    0%,     3.499% { opacity: 1; }
    3.5%,   6.999% { opacity: 0; }
    7%,    13.999% { opacity: 1; }
    14%,   85.999% { opacity: 0; }
    86%,   92.999% { opacity: 1; }
    93%,   96.499% { opacity: 0; }
    96.5%,   100%  { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-chip { animation: none; width: var(--chip-w); }
    .hero-chip img, .hero-chip::after { animation: none; opacity: 0; }
    .hero-chip img:first-child { opacity: 1; }
  }
  /* Each frame is held at the chip's full width instead of the chip's current
     one, so opening uncovers the photo from the left rather than un-squashing
     it — which is what makes the growth read as typing. */
  .hero-chip img {
    position: absolute; top: 0; left: 0; display: block;
    width: var(--chip-w); max-width: none; height: 100%; object-fit: cover;
    filter: grayscale(1) contrast(1.08);
    animation: chipSwap 6s infinite, chipShut 2s infinite;
  }
  .hero-chip img:nth-of-type(2) { animation-delay: -4s, 0s; }
  .hero-chip img:nth-of-type(3) { animation-delay: -2s, 0s; }
  /* Shut, the frames are taken off the page entirely, so the caret's blink
     alternates yellow against whatever the hero is painted with at that
     scroll position — read live, never a hard-coded colour — instead of
     against the sliver of photograph that a transparent caret used to show. */
  @keyframes chipShut {
    0%,    13.999% { visibility: hidden; }
    14%,   85.999% { visibility: visible; }
    86%,     100%  { visibility: hidden; }
  }
  .hero-content h1 {
    font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(38px, 6vw, 72px);
    line-height: 1.05; color: #F2B90D;
  }
  .hero-content p { max-width: 600px; margin: 26px auto; opacity: 0.75; font-size: 18px; line-height: 1.55; }
  .hero-cta {
    display: inline-block; padding: 17px 34px; border-radius: 100px; background: #F2B90D;
    color: #3F2E5C; font-weight: 800; font-size: 16px; text-decoration: none;
  }

  /* ---------- Next section: mission statement, the color the hero fades into ---------- */
  .energie {
    position: relative;
    isolation: isolate;
    z-index: 1;
    background: #FF4D6D;
    text-align: center;
    padding: 100px 24px 90px;
    overflow: hidden;
  }
  .energie-sticky {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    transform-origin: top center;
  }
  .energie-content { position: relative; z-index: 1; }
  .energie .eyebrow-sm { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 14px; opacity: 0.85; }
  .energie h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(30px, 5vw, 50px); }
  .energie p { max-width: 600px; margin: 18px auto 0; font-weight: 600; font-size: 17px; opacity: 0.92; line-height: 1.5; }
  /* The quote stays the lead; the copy under it is lighter, so three stacked
     bold blocks do not fight each other. */
  .energie p.energie-body { font-size: 15px; font-weight: 400; opacity: 0.78; line-height: 1.65; }

  /* Carousel of video/gif placeholders below the text */
  .carousel-wrap {
    width: min(90vw, 720px);
    margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
    will-change: transform;
  }
  .carousel-arrow {
    width: 44px; height: 44px; border-radius: 100px; flex-shrink: 0;
    background: rgba(0,0,0,0.25); border: none; color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
  }
  .carousel-arrow:hover { background: rgba(0,0,0,0.4); }
  .carousel { flex: 1; overflow: hidden; border-radius: 20px; }
  .carousel-track { display: flex; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); }
  .carousel-slide {
    flex: 0 0 100%; aspect-ratio: 16/9;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 1px;
  }
  .carousel-slide .play {
    width: 56px; height: 56px; border-radius: 100px; background: rgba(255,255,255,0.9);
    color: #1E1B26; display: flex; align-items: center; justify-content: center; font-size: 20px;
  }
  .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
  .dot {
    width: 8px; height: 8px; border-radius: 100px; background: rgba(255,255,255,0.4);
    border: none; cursor: pointer; transition: width 0.2s ease, background 0.2s ease; padding: 0;
  }
  .dot.active { width: 26px; background: #fff; }

  @media (max-width: 640px) {
    /* On a phone the arrows sitting beside the frame ate a third of the row —
       104px of 337px — leaving a 16:9 slide only ~131px tall, which read as an
       icon rather than a video. Overlaid on the frame instead, the slide gets
       the full width back. The carousel also cannot grow at this size (the
       scroll effect's target width is below its base width, so the factor
       clamps to zero), which is why the base size has to be right on its own. */
    .carousel-wrap { width: min(94vw, 720px); max-width: 100%; gap: 0; position: relative; }
    .carousel-arrow {
      position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
      width: 34px; height: 34px; font-size: 15px; background: rgba(0,0,0,0.45);
    }
    .carousel-arrow.prev { left: 8px; }
    .carousel-arrow.next { right: 8px; }
  }

  /* ---------- Shared styling for Stats / WhyUs / Gallery / Process / Contact ---------- */
  .generic-section {
    position: relative;
    isolation: isolate;
    z-index: 1;
    overflow: hidden;
    padding: 100px 24px;
    background: #5B2E8C;
  }
  .generic-content { max-width: 1100px; margin: 0 auto; text-align: center; will-change: transform, opacity; }
  .generic-content.wide { max-width: 1200px; }
  .generic-content h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(30px, 5vw, 46px); margin-bottom: 8px; }
  .eyebrow-sm { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 14px; }

  .section-cta {
    display: inline-block; margin-top: 30px; padding: 14px 28px; border-radius: 100px;
    background: #F2B90D; color: #3F2E5C; font-weight: 800; font-size: 13px; letter-spacing: 0.5px; text-decoration: none;
  }
  .section-cta.dark { background: #1E1B26; color: #fff; margin-top: 0; }
  .section-cta.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }

  /* Every yellow call to action inverts into the brand purple on hover, with
     the type turning yellow — the same two colours swapped, so the contrast
     ratio is the resting state's and nothing needs re-checking.
     #42216A is a darker shade of the brand purple rather than the brand purple
     itself, because #5B2E8C is also a section background — four times on the
     homepage, six more inline across the sub-pages — and on those the button
     used to disappear into the section the moment it was hovered. Every colour
     in the palette is a section background somewhere, #FF4D6D included, so no
     flat brand fill can be safe on its own. The yellow ring is the second half
     of that guarantee and doubles as the ghost variant's outline, which is why
     that one needs no rule of its own. Yellow on #42216A is 7:1.
     The transitions sit on the buttons, not on `:hover`, so the colour eases
     back out as well as in. */
  .pill, .hero-cta, .section-cta {
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }
  .pill:hover, .hero-cta:hover, .section-cta:hover {
    background: #42216A; color: #F2B90D;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px #F2B90D, 0 8px 18px rgba(30, 12, 50, 0.45);
  }
  @media (prefers-reduced-motion: reduce) {
    .pill, .hero-cta, .section-cta { transition: background 0.18s ease, color 0.18s ease; }
    .pill:hover, .hero-cta:hover, .section-cta:hover { transform: none; }
  }

  /* Stats */
  .stats-copy { max-width: 640px; margin: 20px auto 0; font-size: 14px; line-height: 1.7; opacity: 0.85; }
  /* Cifre care se rostogolesc (model: ploy.ai, secțiunea "You slept 8 hours")
     Each digit is a 0–9 column translated by -Nem behind a 1em window, so the
     number turns over like an odometer rather than being re-typed. The columns
     move right to left — units, then tens, then hundreds — which is the whole
     read; that is a per-column `transition-delay`, not three animations. */
  .ploy-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0 6px; text-align: left; }
  /* Near-black cards, not the reference's white: on #5B2E8C an off-white card
     reads as a foreign object, and the brand accents — yellow, cyan, pink —
     go flat on a light ground and burn on a dark one. */
  .ploy-card {
    background: #17141F; color: #fff; border-radius: 18px; padding: 22px 22px 18px;
    display: flex; flex-direction: column; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.26);
  }
  .ploy-badge {
    align-self: flex-start; background: var(--acc); color: #17141F;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px;
  }
  /* the number has a partner on the right, or the card is empty on that side */
  .ploy-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 18px; }
  .ploy-num { display: flex; align-items: baseline; gap: 2px; position: relative; min-width: 0; }
  .ploy-unit { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 34px; line-height: 1; opacity: 0.5; }
  .ploy-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* one bar per step, the current one lit: the shape of the whole sequence is
     the point — otherwise only ever one step of it is visible */
  .ploy-chart {
    display: flex; align-items: flex-end; justify-content: flex-end; gap: 5px;
    height: 54px; flex: 1 1 auto; min-width: 0;
  }
  .ploy-bar {
    flex: 1 1 0; min-width: 7px; max-width: 17px;
    border-radius: 3px; background: rgba(255, 255, 255, 0.16);
    transition: background 0.32s ease, height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .ploy-bar.on { background: var(--acc); }
  /* Stress reads as pills, sleep as z's, the playlist as a live equaliser — one
     idiom per card instead of the same bar chart three times. The count is
     derived from the value, so the visual says the same thing as the number. */
  .ploy-viz-pills { gap: 5px; align-items: center; flex-wrap: nowrap; }
  .ploy-pill {
    border-radius: 100px; flex: none;
    background: linear-gradient(90deg, var(--acc) 0 50%, rgba(255, 255, 255, 0.22) 50% 100%);
    transform: rotate(-16deg);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .ploy-pill.off { opacity: 0; transform: rotate(-16deg) scale(0.3); }

  .ploy-viz-zzz { gap: 1px; }
  .ploy-z {
    font-family: 'Anton', sans-serif; font-weight: 400; line-height: 0.8; color: var(--acc);
    animation: zFloat var(--z-t) ease-in-out var(--z-d) infinite alternate;
    transition: opacity 0.4s ease;
  }
  /* the animation owns `transform`, so a hidden z has to stop it or the two fight */
  .ploy-z.off { opacity: 0; animation: none; transform: translateY(8px) scale(0.5); }
  @keyframes zFloat {
    from { transform: translateY(0) rotate(-4deg); }
    to   { transform: translateY(-5px) rotate(4deg); }
  }

  .ploy-card.eq .ploy-bar {
    transform-origin: 50% 100%;
    animation: eqPump var(--eq-t) ease-in-out var(--eq-d) infinite alternate;
  }
  .ploy-card.eq .ploy-bar.on { --eq-s: 0.42; }
  @keyframes eqPump {
    from { transform: scaleY(var(--eq-s, 0.6)); }
    to   { transform: scaleY(1); }
  }
  .ploy-cap { font-size: 13px; font-weight: 700; margin-top: 8px; }
  .ploy-note {
    background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 11px 13px; margin-top: 13px;
    font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.88);
    min-height: 4.2em; display: flex; align-items: center;
  }
  .ploy-note span { transition: opacity 0.22s ease; }
  .ploy-card.turning .ploy-note span { opacity: 0; }
  .ploy-foot {
    display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 14px;
    font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.74);
  }
  .ploy-tick { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; }
  /* without JS the sequence is simply a readable list */
  .ploy-card.js-on .ploy-seq { display: none; }
  .ploy-seq { margin: 14px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }

  .nf {
    font-family: 'Anton', sans-serif; font-weight: 400; font-size: 62px; line-height: 1;
    display: inline-flex; font-variant-numeric: tabular-nums;
  }
  .nf-d {
    display: block; overflow: hidden; height: 1em; width: var(--nf-w, 0.56em);
    transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.26s ease;
  }
  /* a leading zero collapses instead of showing "070" */
  .nf-d.is-blank { width: 0; opacity: 0; }
  .nf-col { display: block; transition: transform 0.6s cubic-bezier(0.62, 0.03, 0.26, 1); }
  .nf-col > span { display: block; height: 1em; line-height: 1; text-align: center; }

  @media (max-width: 900px) {
    .ploy-row { grid-template-columns: 1fr; gap: 14px; max-width: 520px; margin-left: auto; margin-right: auto; }
    .ploy-note { min-height: 3.1em; }
    .nf { font-size: 54px; }
    .ploy-unit { font-size: 30px; }
    .ploy-chart { height: 46px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nf-col, .nf-d, .ploy-note span, .ploy-bar { transition: none; }
    .ploy-card.eq .ploy-bar, .ploy-z { animation: none; }
  }

  /* WhyUs cards */

  /* Gallery */
  .gallery-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 16px; text-align: left; }
  .gallery-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-top: 40px; align-items: start; text-align: left; }
  .gallery-scatter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 22px; padding: 10px; }
  .photo-frame {
    aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  }
  .photo-frame:hover { transform: scale(1.08) rotate(0deg) !important; z-index: 2; box-shadow: 0 14px 26px rgba(0,0,0,0.35); }
  .photo-frame img, .gallery-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gallery-preview { overflow: hidden; }
  /* Scattered, not-quite-aligned placement — each tile gets its own small tilt
     and a modest nudge (kept well within the row gap so tiles never overlap). */
  .gs-1 { transform: rotate(-4deg) translateY(6px); }
  .gs-2 { transform: rotate(3deg) translateY(-5px); }
  .gs-3 { transform: rotate(-2deg) translateY(8px); }
  .gs-4 { transform: rotate(5deg) translateY(-8px); }
  .gs-5 { transform: rotate(-5deg) translateY(4px); }
  .gs-6 { transform: rotate(2deg) translateY(-3px); }
  .gs-7 { transform: rotate(-3deg) translateY(7px); }
  .gs-8 { transform: rotate(4deg) translateY(-6px); }
  .gs-9 { transform: rotate(-2deg) translateY(5px); }

  .gallery-preview-panel { position: sticky; top: 110px; }
  .gallery-preview {
    width: 100%; height: 500px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center; font-size: 52px;
    transition: background 0.35s ease;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  }

  @media (max-width: 900px) {
    .gallery-layout { grid-template-columns: 1fr; }
    .gallery-preview-panel { position: relative; top: 0; order: -1; }
    .gallery-preview { height: 280px; }
  }

  /* Process steps */
  .steps-row { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; justify-content: center; text-align: left; }
  .step { flex: 1; min-width: 150px; }
  .step .n { font-family: 'Anton', sans-serif; font-size: 30px; color: #F2B90D; }
  .step h4 { font-size: 13px; font-weight: 800; margin: 6px 0; }
  .step p { font-size: 12px; opacity: 0.85; line-height: 1.45; }

  /* Contact */
  /* The contact form. Two spam traps instead of a captcha, so nobody legitimate
     has to prove anything: a field only a bot can see, and a clock — a human
     cannot fill six fields in under four seconds. Both are silent on the bot's
     side; it gets no hint which one caught it. */
  .contact-form .field { display: block; background: rgba(0,0,0,0.25); border-radius: 10px; padding: 10px 14px 12px; margin-bottom: 14px; opacity: 1; }
  .contact-form .field > span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; opacity: 0.7; margin-bottom: 6px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100%; background: none; border: 0; outline: none; color: #fff;
    font-family: 'Inter', sans-serif; font-size: 14px; padding: 0;
  }
  .contact-form textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
  .contact-form select option { color: #1E1B26; }
  .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.4); }
  .contact-form .field:focus-within { box-shadow: inset 0 0 0 2px #F2B90D; }
  .contact-form .field.invalid { box-shadow: inset 0 0 0 2px #FF4D6D; }
  /* butoanele din oferta trimit la #cerere; antetul e fix si l-ar acoperi */
  #cerere { scroll-margin-top: 120px; }
  /* Off-screen rather than `display: none`: some bots skip hidden inputs. */
  .hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .contact-form button.section-cta { border: 0; cursor: pointer; font-family: inherit; margin-top: 6px; }
  /* "Inca nu am data stabilita": sta imediat sub campul cu data, in aceeasi
     celula (.camp-data), ca pe telefon sa nu ajunga sub alt camp. Nu e IN
     camp: campul e el insusi un <label>, iar doua etichete una in alta nu merg. */
  .camp-data .field { margin-bottom: 8px; }
  /* vecinul din dreapta nu se intinde cat data plus casuta de sub ea */
  .camp-data + .field { align-self: start; }
  .fara-data {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px 4px; cursor: pointer;
    font-size: 13px; line-height: 1.4;
  }
  .fara-data input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: #F2B90D; cursor: pointer; }
  .contact-form .field.e-oprit { opacity: 0.45; }
  .contact-form .field.e-oprit input { cursor: not-allowed; }
  .form-consent { font-size: 12px; line-height: 1.55; opacity: 0.72; margin-bottom: 16px; }
  .form-consent a { color: #F2B90D; }
  .form-note { margin-top: 14px; font-size: 13px; line-height: 1.5; }
  .form-note.ok { color: #A8E6B0; }
  .form-note.bad { color: #FFB3C0; }

  .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; text-align: left; }
  .field { background: rgba(0,0,0,0.25); border-radius: 10px; padding: 14px 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; opacity: 0.75; margin-bottom: 14px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .info-card {
    background: #1E1B26; border-radius: 20px; padding: 32px;
    display: flex; flex-direction: column;
  }
  .info-card .info-note { font-size: 12px; opacity: 0.7; line-height: 1.5; margin: 22px 0 0; }
  .info-photo {
    position: relative; flex: 1 1 0; min-height: 170px;
    margin: -32px -32px 26px; border-radius: 20px 20px 0 0; overflow: hidden;
  }
  .info-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .info-photo::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
    background: linear-gradient(to top, rgba(12, 10, 16, 0.85) 0%, rgba(12, 10, 16, 0.72) 35%, transparent 100%);
    pointer-events: none;
  }
  .info-photo-caption {
    position: absolute; inset: 0; z-index: 1; padding: 0 22px 2px;
    display: flex; align-items: flex-end; justify-content: center; text-align: center;
    font-family: 'Allura', cursive; font-size: clamp(32px, 3.4vw, 44px);
    line-height: 1.05; color: #F2B90D;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 18px rgba(0, 0, 0, 0.8);
  }
  @media (max-width: 760px) { .info-photo { display: none; } }
  .info-card h3 { font-family: 'Anton', sans-serif; font-size: 20px; margin-bottom: 18px; }
  .info-item { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px;
    color: inherit; text-decoration: none; transition: color 0.2s ease; }
  .info-item[href]:hover { color: #F2B90D; }
  .wa-icon { width: 15px; height: 15px; fill: #25D366; vertical-align: -2px; margin-right: 4px; }

  /* Footer — mega footer replicating the Impossible Foods layout:
     follow-us + legal microcopy on the left, 3 nav-link columns on the
     right, a secondary legal-links row, then a giant wordmark with a
     photo bleeding through the bottom of the letters. */
  .site-footer { position: relative; z-index: 1; background: #1E1B26; overflow: hidden; }

  .footer-mega { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; padding: 48px 48px 36px; flex-wrap: wrap; }
  /* The footer's first row: the socials block on the left, the brand mark on the
     right. It is a row of its own at every width — `.footer-mega` turns into a
     column below 820px, and without this wrapper the mark dropped out of the
     corner and lined up under the socials. */
  .footer-mega-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; width: 100%; }
  .footer-mega-left { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
  .footer-follow-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: 0.55; }
  .footer-socials { display: flex; gap: 10px; }
  .footer-social-icon {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center; color: #fff;
    transition: background 0.15s, color 0.15s;
  }
  .footer-social-icon:hover { background: #F2B90D; color: #3F2E5C; }
  .footer-social-icon svg { width: 16px; height: 16px; }
  .footer-legal-copy { font-size: 11px; opacity: 0.55; line-height: 1.6; }

  .footer-mega-right { display: flex; gap: 56px; flex-wrap: wrap; }
  .footer-col { display: flex; flex-direction: column; gap: 12px; min-width: 150px; }
  .footer-col-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: 0.5; margin-bottom: 2px; }
  .footer-col a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; opacity: 0.9; }
  .footer-col a:hover { opacity: 1; text-decoration: underline; }

  .footer-legal-row {
    display: flex; justify-content: center; padding: 18px 48px;
    border-top: 1px solid rgba(255,255,255,0.1); font-size: 11px; opacity: 0.55;
  }
  .footer-legal-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
  .footer-legal-group a { color: #fff; text-decoration: none; white-space: nowrap; }
  .footer-legal-group a:hover { text-decoration: underline; }

  /* The mark sits in the footer's top-right corner, opposite the socials. It is
     the same inline SVG as the hero's — same geometry, same wordmark, same
     staggered quarter-turn — and replaced a 500px glowing PNG that used to sit
     under a giant "THE FUN STATION BAND" at the very bottom of the footer. */
  .footer-giant { display: flex; text-decoration: none; color: inherit; cursor: pointer; }
  .footer-giant-stack { display: flex; }
  .footer-giant-squares {
    --mark: clamp(110px, 16vw, 190px);
    width: var(--mark); height: auto; overflow: visible; pointer-events: none;
    /* Turned 45° the square reaches only 462.5 of the 500 viewBox, so 7.5% of
       the box is empty on every side; pulled back, so what lines up with the
       label opposite is the mark's ink rather than its padding. */
    margin: calc(var(--mark) * -0.075);
  }

  @media (max-width: 820px) {
    .footer-mega { flex-direction: column; gap: 32px; }
    .footer-mega-right { gap: 32px; }
    .footer-legal-row { padding: 16px 24px; }
    .footer-legal-group { gap: 10px 18px; }
  }
  /* On a phone the 48px gutter plus a 110px mark leaves the socials column too
     little to set its copyright line in, so both come down together. */
  @media (max-width: 560px) {
    .footer-mega { padding: 32px 22px 28px; }
    .footer-mega-top { gap: 16px; }
    .footer-giant-squares { --mark: clamp(78px, 24vw, 110px); }
  }

  @media (max-width: 820px) {
    .cards-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .contact-grid, .field-row { grid-template-columns: 1fr; }
    .steps-row { flex-direction: column; }
    .cards-grid { grid-template-columns: 1fr; }
    .gallery-scatter { grid-template-columns: 1fr 1fr; }
    .gs-7, .gs-8, .gs-9 { display: none; } /* keep the mobile scroll shorter — 6 photos is plenty there */
  }

  /* ---------- Mobile: hamburger + accordion menu ---------- */
  .hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px;
  }
  .hamburger span {
    display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    display: none;
    background: #3F2E5C;
    padding: 4px 24px 24px;
  }
  .mobile-menu.open { display: block; }

  .mobile-trigger {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 16px 4px; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.12);
    color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.5px; font-family: inherit; cursor: pointer;
    text-decoration: none;
  }
  .mobile-trigger .caret { width: 8px; height: 8px; transition: transform 0.25s ease; flex-shrink: 0; }
  .mobile-trigger.expanded .caret { transform: rotate(180deg); }

  .mobile-submenu {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .mobile-submenu.expanded { max-height: 260px; }
  .mobile-submenu a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 4px 10px 14px; color: #C9BFE0; text-decoration: none; font-size: 13px; font-weight: 600;
  }
  .mobile-submenu .thumb {
    width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
  }

  .mobile-link {
    display: block; padding: 16px 4px; color: #fff; text-decoration: none;
    font-weight: 800; font-size: 13px; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .mobile-buttons { display: flex; gap: 10px; margin-top: 18px; }
  .mobile-buttons .pill { flex: 1; text-align: center; }

  @media (max-width: 959px) {
    nav { display: none; }
    header .buttons { display: none; }
    .hamburger { display: flex; }
    .mega-menu { display: none !important; }
    .mega-inner { grid-template-columns: 1fr; }
    .mega-right { display: none; }
  }
  @media (min-width: 960px) {
    .hamburger { display: none; }
    .mobile-menu { display: none !important; }
  }

  /* ---------- Extra styles for standalone sub-pages ---------- */
  .page-hero {
    min-height: 460px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    padding: 160px 24px 70px; text-align: center; background: #3F2E5C;
  }
  /* conceptul-nostru opens on a clip instead of a photograph: the stage goes
     from drawing to reality, which is the page's whole argument. Same band as
     .page-hero-photo, at the source's own 16:9 so nothing is cropped. */
  .page-hero-video { background: #3F2E5C; padding: 0 24px 72px; }
  .page-hero-video figure { margin: 0 auto; max-width: 1200px; }
  .page-hero-video video {
    display: block; width: 100%; height: auto; aspect-ratio: 1.78;
    object-fit: cover; border-radius: 20px; background: #17141F;
  }
  .page-hero-video figcaption {
    max-width: 780px; margin: 20px auto 0; text-align: center;
    font-size: 15px; line-height: 1.6; opacity: 0.88;
  }
  .page-hero-video figcaption strong {
    display: block; margin-bottom: 7px; color: #F2B90D;
    font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(20px, 2.7vw, 27px); line-height: 1.2;
  }
  @media (max-width: 760px) {
    .page-hero-video { padding: 0 16px 48px; }
    .page-hero-video video { border-radius: 14px; }
    .page-hero-video figcaption { font-size: 14px; margin-top: 16px; }
  }

  .page-hero-photo { background: #3F2E5C; padding: 0 24px 72px; }
  .page-hero-photo img {
    display: block; width: 100%; height: auto; max-width: 1200px; margin: 0 auto;
    aspect-ratio: 1.68; object-fit: cover; border-radius: 20px;
  }
  @media (max-width: 760px) {
    .page-hero-photo { padding: 0 16px 48px; }
    .page-hero-photo img { border-radius: 14px; aspect-ratio: 1.35; }
  }

  .page-hero h1 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(32px, 6vw, 54px); margin-bottom: 10px; }
  .page-hero p { max-width: 620px; margin: 0 auto; font-size: 16px; opacity: 0.9; line-height: 1.55; }
  @media (max-width: 760px) {
    .page-hero p { font-size: 15px; line-height: 1.5; }
  }

  /* Group portrait under the story on despre-noi. */
  .team-photo { margin: 34px auto 30px; max-width: 760px; }
  .team-photo img { width: 100%; border-radius: 20px; display: block; box-shadow: 0 20px 40px rgba(0,0,0,0.32); }
  .team-photo figcaption { font-size: 12px; font-weight: 800; letter-spacing: 1px; opacity: 0.6; margin-top: 12px; }

  .team-group { margin-top: 46px; }
  .team-group:first-of-type { margin-top: 36px; }
  .team-group-title {
    font-family: 'Anton', sans-serif; font-weight: 400; font-size: 15px;
    letter-spacing: 1.6px; opacity: 0.62; padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
  .team-group .team-grid { margin-top: 24px; }
  .team-grid.four { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  @media (max-width: 980px) { .team-grid.four { grid-template-columns: repeat(2, 1fr); } }
  .team-card {
    position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
    background: rgba(255, 255, 255, 0.06); text-align: left;
    display: flex; align-items: flex-end;
  }
  .team-card > img, .team-card .team-ph {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .team-card .team-ph { display: flex; align-items: center; justify-content: center; font-size: 52px; }
  .team-card::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
    background: linear-gradient(to top, rgba(10, 8, 14, 0.94) 0%, rgba(10, 8, 14, 0.7) 34%, transparent 100%);
  }
  .team-info { position: relative; z-index: 1; width: 100%; padding: 16px 16px 18px; }
  .team-card h4 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 17px; margin-bottom: 4px; }
  .team-card p {
    font-size: 12px; line-height: 1.45; opacity: 0.85;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }

  /* conceptul-nostru.html#probleme — dupa „Let's build your AI.” de pe
     cloudstudio.es: dupa ce vizitatorul a citit etapele, un singur titlu
     urias, un buton spre formularul de la capatul paginii si trei fapte
     scurte. A luat locul listei de griji (.problem-*, ramase mai jos
     nefolosite). Sectiunea e pe cyan, deci tot ce e aici e aproape negru.
     In dreapta, TREI poze cu publicul care vin una dupa alta la derulare si
     se aseaza ca niste carti de joc: scena (.im-stage) sta lipita sub antet
     cat timp derulezi prin .im-scroller (inaltimea lui e drumul de derulare,
     pusa de nav.js doar cand scriptul chiar misca pozele), iar cand a treia
     s-a asezat scena se desprinde si vine sectiunea urmatoare. Sectiunea
     trebuie sa lase overflow-ul liber, altfel ea ar fi scrollport-ul
     elementului sticky si scena nu s-ar mai lipi de nimic. */
  /* clip, nu hidden: clip nu face din sectiune un scrollport, deci scena
     lipita merge, iar cartile inclinate care ies din latimea unui telefon
     sunt taiate la marginea sectiunii in loc sa dea scroll orizontal */
  #probleme { overflow: clip; }
  .im-scroller { position: relative; }
  .im-scroller.is-viu { min-height: calc(100vh - 100px + 165vh); }
  .im-stage { position: relative; }
  .im-scroller.is-viu .im-stage { position: sticky; top: 100px; min-height: calc(100vh - 100px); display: grid; align-items: center; background: #3DD6E0; }
  .im-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(28px, 5vw, 80px); align-items: center; text-align: left;
  }
  .im-nota {
    margin: 0 0 18px; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #1E1B26;
  }
  .im-titlu {
    /* randurile stau stranse, ca la referinta, deci caciulitele de pe Ă de pe
       randul al treilea intra in literele de deasupra. Cerinta: caciulita
       ramane neagra pe fundal si e cyan DOAR acolo unde se intrepatrunde cu
       negrul randului de sus. Randul e desenat de trei ori (.rand-*): o copie
       transparenta care tine locul si textul real, una neagra taiata sub
       inaltimea majusculelor (literele fara caciulite) si una taiata deasupra
       (doar caciulitele) cu mix-blend-mode: difference intr-o culoare aleasa
       astfel incat diferenta fata de cyan sa dea aproape negrul literelor, iar
       diferenta fata de negrul literelor sa dea cyanul fundalului. Numerele
       vin din Anton, masurat pe canvas la 100px: breve-ul sta intre 0.91 si
       1.09em deasupra liniei de baza, majusculele se opresc la 0.87em, deci
       taiem la 0.89em. Scena lipita e context de stivuire, deci trebuie sa
       aiba ea insasi fundalul cyan, altfel amestecul nu vede nimic sub el. */
    margin: 0 0 24px; color: #1E1B26; line-height: 0.9; letter-spacing: -0.01em;
    font-size: clamp(44px, 7vw, 108px) !important;
  }
  .im-titlu .rand { position: relative; display: inline-block; }
  .im-titlu .rand-gol { color: transparent; }
  .im-titlu .rand-neg, .im-titlu .rand-cac {
    position: absolute; left: 0; top: -0.35em; line-height: 1.6; white-space: nowrap;
    pointer-events: none; user-select: none;
  }
  .im-titlu .rand-neg { color: #1E1B26; clip-path: inset(0.3325em 0 0 0); }
  .im-titlu .rand-cac {
    color: rgb(91, 241, 255); mix-blend-mode: difference;
    clip-path: inset(0 0 calc(100% - 0.3325em) 0);
  }
  .im-text { max-width: 520px; margin: 0 0 16px; color: #1E1B26; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; font-weight: 500; }
  .im-text em { font-style: italic; font-weight: 700; }
  /* butonul e negru pe cyan, ca la referinta, si isi pastreaza hover-ul
     galben de pe restul site-ului */
  .im-buton {
    display: inline-flex; align-items: center; gap: 12px; margin-top: 14px;
    background: #1E1B26; color: #3DD6E0; text-decoration: none;
    font-weight: 800; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: 0.02em;
    padding: 18px 34px; border-radius: 100px;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease;
  }
  .im-buton:hover { transform: translateY(-3px) scale(1.03); background: #42216A; color: #F2B90D; }
  .im-fapte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(18px, 3vw, 40px); margin-top: clamp(30px, 4vw, 48px); }
  .im-fapt { min-width: 0; }
  .im-fapt small {
    display: block; margin-bottom: 6px; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(30, 27, 38, 0.72);
  }
  .im-fapt strong { display: block; color: #1E1B26; font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; line-height: 1.35; }
  .im-fapt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  /* teancul: cele trei carti stau una peste alta in acelasi dreptunghi 4:5;
     fara script (sau sub prefers-reduced-motion) raman asezate in pozitia
     lor de odihna, --rest, deci teancul se vede oricum */
  .im-stiva { position: relative; justify-self: end; width: min(100%, 440px); aspect-ratio: 4 / 5; }
  .im-carte { position: absolute; inset: 0; margin: 0; transform: var(--rest); will-change: transform; }
  .im-carte img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    border-radius: 18px; box-shadow: 0 30px 70px rgba(14, 40, 44, 0.35);
  }
  @media (max-width: 900px) {
    .im-scroller.is-viu { min-height: 0; }
    .im-scroller.is-viu .im-stage { position: relative; top: auto; min-height: 0; display: block; }
    .im-grid { grid-template-columns: 1fr; gap: 40px; }
    .im-stiva { justify-self: center; width: min(100%, 360px); margin: 0 auto; }
  }
  @media (max-width: 560px) {
    .im-fapte { grid-template-columns: 1fr; gap: 16px; }
  }
  .problem-list { display: flex; flex-direction: column; gap: 22px; margin-top: 44px; text-align: left; max-width: 760px; margin-left: auto; margin-right: auto; }
  .problem-item { background: rgba(0,0,0,0.18); border-radius: 16px; padding: 24px 28px; }
  .problem-item .q { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 16px; color: #FFB4C2; margin-bottom: 6px; }
  .problem-item .a { font-size: 14px; opacity: 0.9; line-height: 1.55; }

  .included-grid { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
  .included-card { flex: 1; min-width: 200px; max-width: 240px; background: rgba(255,255,255,0.07); border-radius: 16px; padding: 24px; text-align: center; }
  .included-card .icon { font-size: 30px; margin-bottom: 10px; }
  .included-card h4 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 15px; margin-bottom: 6px; }
  .included-card p { font-size: 12px; opacity: 0.85; line-height: 1.4; }

  /* ---------- Valorile (despre-noi.html#valori): patru icoane desenate ----------
     In felul celor cinci de la "AVEM SOLUȚIILE…" de pe prima pagina: viewBox
     de 512, contur aproape negru si gros, umpluturi plate, o miscare simpla
     in bucla. Doua lucruri difera, amandoua din cauza fundalului: sectiunea e
     pe #1E1B26, unde conturul negru nu s-ar vedea, deci fiecare icoana sta pe
     un disc colorat. Toate bat pe aceeasi masura de 2.4s (dublul celei de
     1.2s de acolo), ca randul sa se miste impreuna.
     Transformarile sunt in unitati de viewBox, nu in pixeli de ecran. */
  .vl-icon { margin-bottom: 14px; font-size: 0; }
  .vl-svg { display: block; width: 84px; height: 84px; margin: 0 auto; overflow: visible; }
  .vl-svg * { transform-box: view-box; }
  .vl-card { transition: transform 0.2s ease, background-color 0.2s ease; }
  .vl-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.11); }

  /* ceasul: minutarul face o tura pe masura, clopoteii se scutura la capat */
  .vl-min  { transform-origin: 256px 278px; animation: vlMin 2.4s linear infinite; }
  .vl-ora  { transform-origin: 256px 278px; transform: rotate(58deg); }
  .vl-suna { transform-origin: 256px 420px; animation: vlSuna 2.4s ease-in-out infinite; }
  @keyframes vlMin { to { transform: rotate(360deg); } }
  @keyframes vlSuna {
    0%, 78%, 100% { transform: rotate(0deg); }
    82% { transform: rotate(-5deg); } 86% { transform: rotate(5deg); }
    90% { transform: rotate(-4deg); } 94% { transform: rotate(3deg); }
  }
  /* castile: barele urca si coboara din baza lor; intarzierea e NEGATIVA, ca
     decalajul sa tina la fiecare bucla, nu doar la prima */
  .vl-bara {
    transform-origin: 256px 390px;
    animation: vlBara 1.2s ease-in-out infinite;
    animation-delay: calc(var(--k) * -0.27s);
  }
  @keyframes vlBara {
    0%, 100% { transform: scaleY(0.35); }
    50% { transform: scaleY(1); }
  }
  /* sagetile: jumatate de tura si o pauza, apoi cealalta jumatate */
  .vl-roata { transform-origin: 256px 256px; animation: vlRoata 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .vl-puls  { transform-origin: 256px 256px; animation: vlPuls 1.2s ease-in-out infinite; }
  @keyframes vlRoata {
    0%, 12% { transform: rotate(0deg); }
    50%, 62% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes vlPuls {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
  }
  /* ---- icoanele de la "CE VINE INCLUS ÎN CONCEPTUL VIZUAL" (conceptul-nostru.html#inclus) ----
     Aceleasi carduri si acelasi disc ca la valori. Cele sase stripuri isi
     schimba culoarea TOATE ODATA si in trepte (steps), cum taie un ecran LED;
     o varianta decalata, cate o culoare pe strip, a fost respinsa la icoana
     scenei din #stats si nu se reia aici. */
  .in-led    { fill: #3DD6E0; animation: inLed 4.8s steps(1, end) infinite; }
  .in-cap    { animation: inCap 1.2s ease-in-out infinite alternate; }
  .in-raza   { animation: inRaza 1.2s ease-in-out infinite; animation-delay: calc(var(--k) * -0.6s); }
  .in-strob  { animation: inStrob 1.2s steps(1, end) infinite; }
  .in-ochi   { animation: inOchi 1.2s ease-in-out infinite; animation-delay: calc((var(--k) - 8) * 0.15s); }
  .in-fum    { animation: inFum 2.4s ease-out infinite; animation-delay: calc((var(--k) - 3) * 0.5s); }
  .in-ceata  { transform-origin: 256px 440px; animation: inCeata 2.4s ease-in-out infinite alternate; }
  .in-bara   { animation: inBara 1.2s ease-in-out infinite; animation-delay: calc(var(--k) * -0.27s); }
  .in-cursor { animation: inCursor 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -0.55s); }
  @keyframes inLed    { 0% { fill: #3DD6E0; } 25% { fill: #FF4D6D; } 50% { fill: #F2B90D; } 75% { fill: #fff; } }
  @keyframes inCap    { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
  @keyframes inRaza   { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.8; } }
  @keyframes inStrob  { 0%, 20%, 40% { fill: #fff; } 10%, 30%, 50% { fill: #1E1B26; } }
  @keyframes inOchi   { 0%, 60%, 100% { fill: #5A4A10; } 25% { fill: #F2B90D; } }
  @keyframes inFum    { 0% { transform: scale(0.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
  @keyframes inCeata  { from { transform: translateX(-16px) scaleY(0.92); } to { transform: translateX(16px) scaleY(1.06); } }
  @keyframes inBara   { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
  @keyframes inCursor { from { transform: translateY(0); } to { transform: translateY(96px); } }
  @media (prefers-reduced-motion: reduce) {
    .in-led, .in-cap, .in-raza, .in-strob, .in-ochi, .in-fum, .in-ceata, .in-bara, .in-cursor { animation: none; }
    .in-led { fill: #3DD6E0; }
  }

  /* bula: cele trei puncte sar pe rand, ca un mesaj care se scrie */
  .vl-punct { animation: vlPunct 1.2s ease-in-out infinite; animation-delay: calc((var(--k) - 3) * 0.16s); }
  @keyframes vlPunct {
    0%, 55%, 100% { transform: translateY(0); }
    28% { transform: translateY(-30px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .vl-min, .vl-suna, .vl-bara, .vl-roata, .vl-puls, .vl-punct { animation: none; }
    .vl-card { transition: none; }
    .vl-card:hover { transform: none; }
  }

  .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; text-align: left; }
  .project-card { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.06); }
  .project-thumb { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
  .project-body { padding: 18px 20px 22px; }
  .project-body .tag { font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: 0.7; margin-bottom: 6px; }
  .project-body h4 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 16px; margin-bottom: 8px; }
  .project-body p { font-size: 13px; opacity: 0.85; line-height: 1.5; }

  .blogpage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; text-align: left; }
  .blogpage-card { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.06); }
  .blogpage-thumb { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 34px; }
  .blogpage-body { padding: 18px 20px 22px; }
  .blogpage-body .tag { font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: 0.7; margin-bottom: 6px; }
  .blogpage-body h4 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 15px; margin-bottom: 8px; }
  .blogpage-body p { font-size: 13px; opacity: 0.85; line-height: 1.5; }

  /* despre-noi's review block is the score and its source, not a second wall of
     quotes: the homepage carousel already carries twelve. One pull quote keeps
     the menu label honest; the rest is the aggregate and a link to the real
     profile, which is proof a visitor can check and we cannot fake. */
  .rev-score { display: flex; flex-direction: column; align-items: center; margin-top: 34px; }
  .rev-stars { color: #F2B90D; font-size: 20px; letter-spacing: 4px; }
  .rev-big { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(46px, 7vw, 68px); line-height: 1.05; }
  .rev-sub { font-size: 13px; opacity: 0.8; margin-top: 2px; }
  .rev-sub strong { font-weight: 800; }
  /* Three voices, but a strip rather than a wall: the score leads, the quotes
     support it, and the link goes to all 73. The heading says "ce spun
     clienții", so one quote under it did not carry the promise. */
  .rev-voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 32px 0 6px; text-align: left; }
  .rev-voice { border-left: 2px solid #FF4D6D; padding-left: 16px; }
  /* clamped, never trimmed — a shortened quote is a misquote, so the whole
     review stays in the DOM and only the display is cut */
  .rev-voice blockquote {
    margin: 0; font-size: 13.5px; line-height: 1.6; opacity: 0.9;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .rev-voice figcaption { margin-top: 11px; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 14px; }
  .rev-voice figcaption span {
    font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; opacity: 0.6;
  }
  @media (max-width: 760px) {
    .rev-voices { grid-template-columns: 1fr; gap: 20px; }
  }
  .rev-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

  @media (max-width: 760px) {
    .project-grid, .blogpage-grid { grid-template-columns: 1fr; }
    .team-grid, .team-grid.four { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .team-info { padding: 12px 12px 14px; }
    .team-card h4 { font-size: 15px; }
    .team-card p { font-size: 11px; }
  }

  /* --- Legal pages (confidentialitate.html) ---------------------------------
     The only long-form prose on the site. Everything else is centred headline
     copy, so this block re-aligns to the left and caps the measure at 780px;
     `.generic-content` centres it. */
  .legal-block { max-width: 780px; margin: 0 auto; text-align: left; }
  .legal-block h2 {
    font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(22px, 3.6vw, 32px); line-height: 1.15; margin-bottom: 18px;
  }
  .legal-block h3 {
    font-family: 'Anton', sans-serif; font-weight: 400; font-size: 17px;
    color: #F2B90D; margin: 30px 0 8px;
  }
  .legal-block p { font-size: 15px; line-height: 1.7; opacity: 0.92; margin-bottom: 14px; }
  .legal-block ul { margin: 0 0 18px 20px; padding: 0; }
  .legal-block li { font-size: 15px; line-height: 1.7; opacity: 0.92; margin-bottom: 9px; }
  .legal-block a:not(.section-cta) { color: #F2B90D; text-decoration: underline; text-underline-offset: 2px; }
  .legal-updated { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.55 !important; }
  .legal-lead { font-size: 20px !important; font-weight: 800; opacity: 1 !important; }

  /* Yellow on near-black so an unfilled placeholder cannot be published by
     accident — it has to be read as a hole in the page, not as copy. */
  .legal-todo {
    background: #F2B90D; color: #1E1B26; font-weight: 800; font-size: 13px;
    padding: 1px 7px; border-radius: 4px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }

  .legal-note {
    border-left: 3px solid #F2B90D; background: rgba(255, 255, 255, 0.07);
    padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 0 0 20px;
    font-size: 14px; line-height: 1.65;
  }

  /* The table is the clearest shape for purpose/data/basis, but three columns
     of prose do not fit a phone — so it scrolls sideways inside its own box
     rather than squeezing the page. */
  .legal-scroll { overflow-x: auto; margin-bottom: 18px; -webkit-overflow-scrolling: touch; }
  .legal-table { width: 100%; min-width: 680px; border-collapse: collapse; }
  .legal-table code, .legal-block code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em;
    background: rgba(0, 0, 0, 0.22); padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  }
  .legal-table th, .legal-table td {
    text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 14px; line-height: 1.6;
  }
  .legal-table th {
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
    font-weight: 800; opacity: 0.6; padding-bottom: 8px;
  }
  .legal-table td { opacity: 0.92; }

  .legal-pink .legal-block h3,
  .legal-pink .legal-block a:not(.section-cta),
  .legal-pink .legal-note { color: #1E1B26; }
  .legal-pink .legal-note { border-left-color: #1E1B26; background: rgba(30, 27, 38, 0.1); }

  @media (max-width: 560px) {
    .legal-block h3 { margin-top: 24px; }
    .legal-note { padding: 12px 14px; }
  }

  /* Fonts are served from this folder, not from fonts.googleapis.com: loading
     them from Google sent every visitor's IP address to Google just to read the
     page, which the privacy policy would otherwise have to declare.
     Anton and Allura are static; Inter is a VARIABLE font, so one file per
     subset covers the whole 400-800 range and the eight static cuts Google was
     serving (396 KB) collapse into two (133 KB). Do not re-split it by weight.
     latin-ext is not optional here - a-breve, s-comma and t-comma live there,
     so without it Romanian text falls back mid-word. */
  @font-face {
    font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/anton-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/anton-400-latin.woff2') format('woff2');
    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;
  }
  @font-face {
    font-family: 'Allura'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/allura-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Allura'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/allura-400-latin.woff2') format('woff2');
    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;
  }
  @font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    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;
  }


  /* --- Echipa: acordeon cu colaj ------------------------------------------
     Modelled on cassettemusic.com. Rows collapse to a name and a role; opening
     one reveals the portrait on the left and the text on the right.
     The photographs come from a dozen different shoots and never agreed on
     colour or contrast. Rather than fight that, all of them get the same
     print-shop treatment - hard greyscale, a dot screen, one flat brand block
     and the name set huge behind the subject - which is what makes seventeen
     unrelated frames read as one series. The filter is identical on every one
     by design; do not tune it per person. */
  .tm-group-title {
    font-family: 'Anton', sans-serif; font-weight: 400; font-size: 13px;
    letter-spacing: 1.8px; opacity: 0.5; margin: 38px 0 0; text-align: left;
    padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .tm-group-title:first-child { margin-top: 26px; }

  .tm-row {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 17px 2px; background: none; border: none; cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: #fff; text-align: left;
    transition: color 0.2s ease;
  }
  .tm-row:hover, .tm-row[aria-expanded="true"] { color: #F2B90D; }
  .tm-mark {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 100px;
    border: 1px solid currentColor; display: flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1; transition: transform 0.3s ease;
  }
  .tm-row[aria-expanded="true"] .tm-mark { transform: rotate(90deg); background: #F2B90D; color: #1E1B26; border-color: #F2B90D; }
  .tm-name { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 17px; }
  .tm-role { margin-left: auto; font-size: 12.5px; opacity: 0.72; text-align: right; }

  #membri { overflow: visible; }
  #membri .generic-content { will-change: auto; }
  .tm { display: grid; grid-template-columns: 0.72fr 1fr; gap: 42px; margin-top: 34px; align-items: start; }
  .tm-stage { position: relative; }
  .tm-stage-inner { width: 100%; }
  .tm-stage-inner.is-pinned { position: fixed; z-index: 1; }
  .tm-stage-cap { margin-top: 14px; text-align: left; }
  .tm-stage-name { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 22px; color: #F2B90D; }
  .tm-stage-role { font-size: 13px; opacity: 0.8; margin-top: 3px; line-height: 1.45; }

  .tm-panel { overflow: hidden; max-height: 0; transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .tm-panel p { font-size: 14px; line-height: 1.7; opacity: 0.88; margin: 0; padding: 4px 4px 18px; text-align: left; }
  /* un link intr-un text de echipa: fara regula asta ramane albastrul browserului, ilizibil pe mov */
  .tm-panel a { color: #F2B90D; text-underline-offset: 2px; }
  .tm-panel a:hover { color: #fff; }

  .tm-collage { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #17141F; border-radius: 14px; }
  .tm-collage img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2;
    filter: contrast(1.1) saturate(1.08);
    transition: opacity 0.28s ease;
  }
  /* the name, set huge and vertical, half hidden by the photograph */
  .tm-collage .tm-big {
    position: absolute; z-index: 3; right: 4%; top: 5%;
    writing-mode: vertical-rl; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(30px, 4.4vw, 58px); line-height: 1; letter-spacing: 1px;
    color: #FF4D6D; mix-blend-mode: hard-light; text-transform: uppercase;
    pointer-events: none;
  }
  /* the dot screen, over everything */
  .tm-collage::after {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0.9px, transparent 1px);
    background-size: 4px 4px; mix-blend-mode: multiply; opacity: 0.16;
  }

  .tm-collage.swap img { opacity: 0; }
  .tm-text .tm-lead { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 20px; margin-bottom: 12px; color: #F2B90D; }
  .tm-text p { font-size: 14px; line-height: 1.7; opacity: 0.88; margin: 0 0 12px; }
  .tm-text p:last-child { margin-bottom: 0; }

  @media (max-width: 860px) {
    .tm { grid-template-columns: 1fr 1fr; gap: 20px; }
    .tm-stage {
      position: relative; display: block;
      width: 100%; max-width: none; margin: 0;
      background: none; padding: 0; box-shadow: none;
    }
    .tm-collage { width: 100%; border-radius: 12px; }
    .tm-stage-cap { margin-top: 10px; text-align: left; }
    .tm-stage-name { font-size: 17px; }
    .tm-stage-role { font-size: 11.5px; }
    .tm-list { max-height: none; overflow: visible; }
    .tm-group-title:first-child { margin-top: 0; }
    .tm-name { font-size: 15px; }
    .tm-role { font-size: 11.5px; }
    .tm-row { padding: 13px 2px; gap: 10px; }
    .tm-mark { width: 19px; height: 19px; font-size: 10px; }
  }
  /* Narrower still: the role drops under the name instead of fighting it for
     width on the same line. */
  @media (max-width: 620px) {
    .tm { grid-template-columns: 1fr 1fr; gap: 12px; }
    .tm-row { flex-wrap: wrap; gap: 7px; padding: 11px 0; }
    .tm-role { margin-left: 0; width: 100%; text-align: left; padding-left: 24px; margin-top: 3px; opacity: 0.62; font-size: 10.5px; }
    .tm-name { font-size: 13.5px; }
    .tm-mark { width: 17px; height: 17px; font-size: 9px; }
    .tm-group-title { font-size: 11px; letter-spacing: 1.2px; }
    .tm-stage-name { font-size: 16px; }
    .tm-stage-role { font-size: 11px; }
    .tm-panel p { font-size: 12px; padding: 2px 0 14px; }
  }
  @media (max-width: 520px) {
    .tm-stage-name { font-size: 19px; }
    .tm-stage-role { font-size: 12px; }
    .tm-name { font-size: 14.5px; }
    .tm-role { font-size: 11px; }
    .tm-panel p { font-size: 13px; }
  }

  /* ---- Repertoriu: dosare pe genuri (model: cassettemusic.com #services) ---- */
  /* Each band overlaps the one above it and, being later in source order, paints
     over it — so the set reads as files stacked in a drawer. The overlap is a
     negative margin, exactly the mechanism measured on the reference; no z-index
     is needed, since positioned siblings already paint in source order. The
     stack is full-bleed via -24px margins, which is the section's own padding —
     `calc(50% - 50vw)` would have counted the scrollbar. */
  /* --rep-list-h is the folder's fixed opening: three cards plus their gaps */
  .rep-stack { --rep-list-h: 240px; margin: 46px -24px 0; display: flex; flex-direction: column; text-align: left; }
  .rep-row {
    position: relative; background: var(--rep); color: #17141F;
    margin-bottom: -26px; padding-bottom: 40px;
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s ease;
  }
  /* The whole section freezes as one piece on the way out and #experiența rides
     over it. Nothing inside may pin on its own — pinning only the last band
     opened a gap above it and left the CTA behind. .rep-freeze stays in flow and
     holds the height; .rep-freeze-in is what goes fixed. No z-index is needed:
     .generic-section isolates every section at z-index 1, so the next one covers
     this one's fixed child by source order. */
  .rep-freeze-in.is-frozen { position: fixed; }
  /* full-bleed band, content still on the 1100px column the heading uses */
  .rep-head, .rep-panel-in {
    padding-left: max(24px, calc(50% - 550px));
    padding-right: max(24px, calc(50% - 550px));
  }
  .rep-h { margin: 0; font-size: inherit; font-weight: inherit; }
  .rep-head {
    display: flex; align-items: center; gap: 16px; width: 100%;
    padding-top: 20px; padding-bottom: 18px;
    background: none; border: 0; color: inherit; cursor: pointer; text-align: left; font: inherit;
  }
  .rep-ico { font-size: 22px; line-height: 1; flex: none; }
  /* ---------- Icoanele genurilor (.ri), desenate cu tools/rep-icons.py ----------
     Treisprezece, cate una pe rand, in felul celor din #stats de pe prima
     pagina. Stau direct pe banda colorata a randului, fara disc dedesubt:
     benzile sunt deschise la culoare, deci conturul negru se vede.
     Toate miscarile bat pe 1.2s sau pe un multiplu al lui. Decalajele sunt
     intarzieri NEGATIVE (tin la fiecare bucla, nu doar la prima), iar
     transformarile sunt in unitati de viewBox, nu in pixeli de ecran. */
  .rep-ico .ri { display: block; width: 54px; height: 54px; overflow: visible; }
  /* Originea se pune DOAR pe elementele animate (cele cu o clasa ri-...), nu
     pe tot ce e in desen: transform-origin din CSS se aplica si atributului
     transform din SVG, deci cu ".ri *" fiecare grup intors din desen (vioara,
     chitara) se rotea in jurul centrului icoanei in loc de punctul scris in
     atribut, si desenul aluneca afara din caseta. */
  .ri [class^="ri-"], .ri [class*=" ri-"] { transform-box: view-box; transform-origin: var(--o, 256px 256px); }
  .ri-sway   { animation: riSway 1.2s ease-in-out infinite alternate; }
  .ri-shake  { animation: riShake 0.3s ease-in-out infinite alternate; }
  .ri-pulse  { animation: riPulse 1.2s ease-in-out infinite; }
  .ri-inima  { animation: riInima 1.2s ease-in-out infinite; }
  .ri-spin   { animation: riSpin 4.8s linear infinite; }
  .ri-bow    { animation: riBow 1.2s ease-in-out infinite alternate; }
  .ri-bat-a  { animation: riBat 0.6s ease-in infinite alternate; }
  .ri-bat-b  { animation: riBat 0.6s ease-in infinite alternate; animation-delay: -0.6s; }
  /* pamporea: sirul aluneca exact cat distanta dintre doi dansatori (170) si
     o ia de la capat; liniar, altfel s-ar simti o smucitura la fiecare bucla */
  .ri-sir    { animation: riSir 2.4s linear infinite; }
  .ri-salt   { animation: riSalt 0.6s ease-in-out infinite alternate; }
  .ri-pas-a  { animation: riPas 0.6s ease-in-out infinite alternate; }
  .ri-pas-b  { animation: riPas 0.6s ease-in-out infinite alternate; animation-delay: -0.6s; }
  /* poala fustei: sta jos mai mult de jumatate din masura, apoi salta si revine */
  .ri-fusta  { animation: riFusta 2.4s ease-in-out infinite; }
  .ri-beat   { animation: riBeat 1.2s ease-in-out infinite; animation-delay: calc(var(--k) * -0.2s); }
  .ri-wave   { animation: riWave 1.2s ease-in-out infinite; animation-delay: calc(var(--k) * -0.6s); }
  .ri-blink  { animation: riBlink 1.2s ease-in-out infinite; animation-delay: calc(var(--k) * -0.4s); }
  .ri-float  { animation: riFloat 2.4s ease-out infinite; animation-delay: calc(var(--k) * -1.2s); }
  @keyframes riSway   { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
  @keyframes riShake  { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
  @keyframes riPulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
  @keyframes riInima  { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(0.98); } 32% { transform: scale(1.08); } }
  @keyframes riSpin   { to { transform: rotate(360deg); } }
  /* arcusul e in grupul rotit al viorii, deci merge pe axa lui cu un simplu X */
  @keyframes riBow    { from { transform: translateX(-54px); } to { transform: translateX(54px); } }
  @keyframes riBat    { from { transform: rotate(-16deg); } to { transform: rotate(0deg); } }
  @keyframes riSir    { to { transform: translateX(-170px); } }
  @keyframes riSalt   { from { transform: translateY(0); } to { transform: translateY(-18px); } }
  @keyframes riPas    { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
  @keyframes riFusta  { 0%, 46%, 100% { transform: rotate(0deg); } 62%, 80% { transform: rotate(34deg); } }
  @keyframes riBeat   { 0%, 40%, 100% { transform: translateY(0); } 20% { transform: translateY(-30px); } }
  @keyframes riWave   { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
  @keyframes riBlink  { 0%, 100% { transform: scale(0.45); opacity: 0.2; } 50% { transform: scale(1); opacity: 1; } }
  @keyframes riFloat  { 0% { transform: translate(0, 30px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(26px, -60px); opacity: 0; } }
  @media (max-width: 620px) { .rep-ico .ri { width: 44px; height: 44px; } }
  @media (prefers-reduced-motion: reduce) {
    .ri * { animation: none !important; }
  }
  .rep-txt { display: block; min-width: 0; }
  .rep-name {
    display: block; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(20px, 3.2vw, 30px); line-height: 1.12;
  }
  .rep-sub { display: block; font-size: 12.5px; line-height: 1.5; opacity: 0.72; margin-top: 3px; }
  .rep-count {
    margin-left: auto; flex: none; font-size: 11px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; opacity: 0.62;
  }
  .rep-arrow {
    flex: none; width: 12px; height: 12px; margin-left: 4px;
    border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg); transition: transform 0.3s ease;
  }
  .rep-row.open .rep-arrow { transform: rotate(-135deg); }

  /* 0fr → 1fr animates without JS having to measure anything, and it re-measures
     itself when the viewport or the content changes */
  .rep-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .rep-row.open .rep-panel { grid-template-rows: 1fr; }
  .rep-panel-in { position: relative; overflow: hidden; }
  /* The folder is capped at the height of three cards and scrolls past that, so
     a genre with ten colaje opens to exactly the same box as one with two. The
     scroller is inside the padding rather than being .rep-panel-in itself, or
     the scrollbar would sit at the full-bleed viewport edge, far from the cards.
     An inner scroll is safe on this page only because despre-noi.html has no
     global wheel handler — on index.html it would need `scrollableUnder`. */
  .rep-list {
    display: flex; flex-direction: column; gap: 10px;
    max-height: var(--rep-list-h); overflow-y: auto;
    padding: 4px 0 6px; scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: rgba(23, 20, 31, 0.34) transparent;
  }
  .rep-list::-webkit-scrollbar { width: 6px; }
  .rep-list::-webkit-scrollbar-thumb { background: rgba(23, 20, 31, 0.3); border-radius: 100px; }
  .rep-list::-webkit-scrollbar-track { background: transparent; }
  /* a capped list has to say that it is capped, or the rest is simply missed */
  .rep-panel-in::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
    background: linear-gradient(to top, var(--rep), rgba(0, 0, 0, 0));
    opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
  }
  .rep-row.more .rep-panel-in::after { opacity: 1; }

  /* lifting: hover raises the band out of the stack, opening raises it further */
  @media (hover: hover) {
    .rep-row:not(.open):hover { transform: translateY(-10px); }
  }
  .rep-row.open {
    transform: translateY(-16px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  }

  .rep-colaj {
    display: flex; align-items: center; gap: 14px;
    background: rgba(23, 20, 31, 0.10);
    border: 1px solid rgba(23, 20, 31, 0.16);
    border-radius: 12px; padding: 11px 14px;
  }
  .rep-play {
    flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: #17141F; color: var(--rep); cursor: pointer;
    display: grid; place-items: center; padding: 0;
    transition: transform 0.18s ease;
  }
  .rep-play:hover { transform: scale(1.08); }
  .rep-play svg { width: 19px; height: 19px; fill: currentColor; }
  .rep-play .rep-ic-pause { display: none; }
  .rep-colaj.is-playing .rep-ic-play { display: none; }
  .rep-colaj.is-playing .rep-ic-pause { display: block; }
  .rep-colaj-main { flex: 1 1 auto; min-width: 0; }
  .rep-colaj-name { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0.3px; }
  .rep-colaj-tracks { font-size: 12px; line-height: 1.5; opacity: 0.78; margin-top: 2px; }
  /* house style for an unfinished field: loud on purpose, so it cannot ship unnoticed */
  .rep-todo {
    display: inline-block; opacity: 1; background: #17141F; color: #F2B90D;
    font-size: 10px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px;
  }
  .rep-note { display: block; font-size: 11.5px; margin-top: 4px; opacity: 0.72; }
  .rep-colaj.is-err .rep-play { opacity: 0.4; cursor: not-allowed; transform: none; }

  /* the player only appears on the card that is actually loaded */
  .rep-seek, .rep-time { display: none; }
  .rep-colaj.is-active .rep-seek { display: block; }
  .rep-colaj.is-active .rep-time { display: flex; }
  .rep-seek {
    width: 100%; margin: 8px 0 1px; height: 4px; -webkit-appearance: none; appearance: none;
    background: rgba(23, 20, 31, 0.22); border-radius: 100px; cursor: pointer;
  }
  .rep-seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 13px; height: 13px;
    border-radius: 50%; background: #17141F; border: 0;
  }
  .rep-seek::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #17141F; border: 0; }
  .rep-time {
    flex: none; gap: 4px; font-size: 11px; font-variant-numeric: tabular-nums;
    letter-spacing: 0.4px; opacity: 0.7;
  }

  @media (max-width: 700px) {
    .rep-head { gap: 12px; padding-top: 16px; padding-bottom: 15px; }
    .rep-row { margin-bottom: -20px; padding-bottom: 32px; }
    .rep-sub, .rep-count { display: none; }
    .rep-stack { --rep-list-h: 228px; }
    .rep-colaj { gap: 11px; padding: 10px 12px; align-items: flex-start; }
    .rep-play { width: 34px; height: 34px; }
    .rep-time { font-size: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rep-row, .rep-panel, .rep-arrow, .rep-play { transition: none; }
    .rep-row:not(.open):hover { transform: none; }
  }

  /* ---- Etapele, ca acordeonul de pe yllw.com/en/customer-segments ---- */
  /* A row is the big title plus a +; opening it reveals a two-column panel:
     text and a small 5:4 photo on the left, a tall 2:3 photo on the right.
     Both photos are optional — a stage with none simply runs full width, which
     is what lets them be added one at a time as the band shoots them. */
  .etape { margin-top: 38px; border-top: 1px solid rgba(255, 255, 255, 0.16); text-align: left; }
  /* Intoarcerea din articol vine pe #et-<etapa>, iar antetul fix ar acoperi
     chiar titlul etapei. scroll-margin-top e ce face ca saritura PROPRIE a
     browserului sa cada unde trebuie. Corectia din JS nu e de ajuns singura:
     Chrome isi reaplica saritura la ancora la o clipa dupa load, peste ce
     pusese JS-ul, asa ca cititorul statea ~2s cu titlul ascuns sub antet si
     apoi vedea pagina sarind. Cele doua valori sunt aceleasi ca in nav.js. */
  .etapa { border-bottom: 1px solid rgba(255, 255, 255, 0.16); scroll-margin-top: 118px; }
  .etapa-h { margin: 0; font-size: inherit; font-weight: inherit; }
  .etapa-btn {
    display: flex; align-items: center; gap: 18px; width: 100%;
    padding: 22px 4px; background: none; border: 0; color: inherit; cursor: pointer;
    text-align: left; font: inherit;
  }
  .etapa-titlu {
    font-family: 'Anton', sans-serif; font-weight: 400; line-height: 1.05;
    font-size: clamp(24px, 4.4vw, 46px); transition: color 0.25s ease;
  }
  .etapa-btn:hover .etapa-titlu { color: #F2B90D; }
  /* the + becomes an x on open — two bars, one of them turned */
  .etapa-plus { position: relative; flex: none; width: 20px; height: 20px; margin-left: auto; }
  .etapa-plus::before, .etapa-plus::after {
    content: ''; position: absolute; inset: 50% 0 auto 0; height: 2px; margin-top: -1px;
    background: currentColor; transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .etapa-plus::after { transform: rotate(90deg); }
  .etapa.open .etapa-plus::before { transform: rotate(45deg); }
  .etapa.open .etapa-plus::after { transform: rotate(-45deg); }

  .etapa-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .etapa.open .etapa-panel { grid-template-rows: 1fr; }
  .etapa-in { overflow: hidden; }
  .etapa-intro { max-width: 720px; padding-top: 2px; }
  /* Subtitlul etapei e in Inter, nu in Anton. Anton are o singura grosime (400)
     dar e o litera display condensata si grea, asa ca la 22px subtitlul citea
     ca un al doilea titlu bolduit langa cel mare. Aici trebuie sa fie o linie
     de introducere, nu un cap de sectiune: litera de text, grosime normala,
     abia peste marimea paragrafului de dedesubt (14.5px). Galbenul ramane —
     el e ce il tine distinct, nu greutatea. */
  .etapa-intro h4 {
    font-family: inherit; font-weight: 400; font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.45; color: #F2B90D; margin: 0 0 10px;
  }
  .etapa-intro p { font-size: 14.5px; line-height: 1.7; opacity: 0.86; margin: 0; }
  .etapa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .etapa-actions .section-cta { margin-top: 0; }

  @media (max-width: 860px) {
    .etapa-btn { gap: 12px; padding: 17px 2px; }
    .etapa { scroll-margin-top: 100px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .etapa-panel, .etapa-plus::before, .etapa-plus::after, .etapa-titlu { transition: none; }
  }

  /* ---------- Oferta si pret (#preturi) ----------
     Modelul e pagina de pricing de pe follow.art: un cuvant urias pe toata
     latimea cu un al doilea, de mana, asezat peste el, si doua carduri
     decalate pe verticala care se aliniaza cand le atingi. Pretul final nu
     apare nicaieri, la cererea clientului — cardurile cer oferta, atat. */
  .of-titlu {
    position: relative; margin: 6px 0 0; text-align: center;
    line-height: 0.92; letter-spacing: -0.01em;
  }
  .of-mare {
    display: block; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(58px, 15.5vw, 188px); color: #fff;
  }
  /* Allura peste cuvantul mare, usor rotita si coborata spre linia de baza.
     Nu se pune overflow: hidden pe bloc — coada lui "t" din "pret" trece sub
     caseta liniei, exact ca in hero. */
  /* Galbenul pe alb e 1.8:1, deci scriptul nu poate sta peste mijlocul
     cuvantului: sta mai jos, unde trece mai mult peste fundal (galben pe
     #5B2E8C este 5.2:1), iar haloul strans il tine lizibil exact acolo unde
     mai atinge literele albe. Acelasi truc ca la subtitlul din cardul de
     contact — vezi nota de acolo despre masurarea pixelului cel mai prost. */
  .of-script {
    position: absolute; left: 50%; top: 78%;
    transform: translate(-50%, -50%) rotate(-4deg);
    font-family: 'Allura', cursive; font-weight: 400;
    font-size: clamp(38px, 8.6vw, 104px); color: #F2B90D;
    white-space: nowrap; pointer-events: none;
    /* Santul: un contur gros in culoarea sectiunii, desenat SUB umplutura
       (paint-order), taie un gol in literele albe de dedesubt — asa galbenul
       sta mereu pe mov (5.29:1) si niciodata direct pe alb (1.79:1). Culoarea
       conturului trebuie sa ramana aceeasi cu fundalul sectiunii, care e pus
       inline pe <section>; daca se schimba una, se schimba amandoua. */
    /* In em, nu in px: la 104px santul iese ~8px, cat era, dar la 38px pe
       telefon iese ~3px. Fix la 8px manca proportional de trei ori mai
       mult din litere si cuvantul mare devenea greu de citit. */
    -webkit-text-stroke: 0.078em #5B2E8C;
    paint-order: stroke fill;
  }
  .of-intro {
    max-width: 620px; margin: 22px auto 0; text-align: center;
    font-size: 15.5px; line-height: 1.7; opacity: 0.92;
  }


  /* ---------- Oferta: doua pachete, unul dupa altul, in oglinda ----------
     Modelul e eathungrytiger.com, de la WHAT'S INSIDE in jos: ecranul impartit
     in doua, text pe inchis intr-o parte si un DECUPAJ pe culoare plina cu
     model ton-pe-ton in cealalta. Acolo sunt doua panouri puse unul sub altul;
     aici cele doua sunt chiar pachetele, al doilea oglindit. Sunt amandoua in
     pagina in acelasi timp — nu taburi — tocmai ca sa poata fi comparate:
     aceeasi lista in aceeasi ordine, iar ce are Extravagant in plus e marcat.
     Au inlocuit dosarele cu file (.ofr-*), care au disparut cu totul. */
  .pk-alege {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    margin: 34px 0 0;
  }
  .pk-chip {
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline;
    min-width: min(100%, 300px); padding: 16px 22px 15px; border-radius: 14px;
    background: var(--pk); color: #17141F; text-decoration: none; text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .pk-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); }
  .pk-chip--maj { --pk: #3DD6E0; }
  .pk-chip--ext { --pk: #F2B90D; }
  .pk-chip-nr { font-family: 'Anton', sans-serif; font-size: 14px; letter-spacing: 0.06em; opacity: 0.6; }
  .pk-chip-nume { font-family: 'Anton', sans-serif; font-size: clamp(20px, 2.6vw, 28px); line-height: 1; letter-spacing: 0.02em; }
  .pk-chip-sub { grid-column: 2; margin-top: 5px; font-size: 12.5px; font-weight: 700; line-height: 1.35; }

  /* overflow-x: clip, nu hidden: hidden ar face din sectiune un container de
     scroll si decupajul lipicios (.pk-cut) nu ar mai avea de ce sa se prinda. */
  .pk { position: relative; z-index: 1; background: #17141F; color: #fff; overflow-x: clip; }
  .pk-panel {
    display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr);
    min-height: 100vh; scroll-margin-top: 0;
  }
  .pk-panel--maj { --pk: #3DD6E0; }
  .pk-panel--ext { --pk: #F2B90D; }
  .pk-panel--invers { grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); }
  .pk-panel--invers .pk-text { order: 2; }
  .pk-panel--invers .pk-foto { order: 1; }

  .pk-text {
    padding: 150px clamp(24px, 5vw, 76px) 96px; text-align: left;
    /* textul aluneca lateral la intrare; fara asta ar impinge o bara de scroll */
    overflow-x: clip;
  }
  .pk-eyebrow {
    margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--pk);
  }
  .pk-eyebrow span { opacity: 0.5; }
  .pk-nume {
    margin: 0; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(54px, 8.2vw, 124px); line-height: 0.95; letter-spacing: 0.01em;
    color: var(--pk); white-space: nowrap;
  }
  /* white-space: pre — un spatiu singur intr-un inline-block se strange la
     zero, iar numele din doua cuvinte se lipeau (MUZICĂPOPULARĂ). */
  .pk-nume .pk-l { display: inline-block; white-space: pre; will-change: transform, opacity; }
  /* linia punctata a referintei, in culoarea pachetului; iese pana in
     marginea panoului, ca acolo */
  .pk-dots {
    height: 4px; margin: 26px calc(clamp(24px, 5vw, 76px) * -1) 24px;
    background: radial-gradient(circle, var(--pk) 0 2px, transparent 2.2px) 0 50% / 12px 4px repeat-x;
  }
  .pk-desc {
    max-width: 340px; margin: 0 0 40px; font-size: 13px; font-weight: 700;
    line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pk);
  }
  .pk-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; max-width: 560px; }
  .pk-item { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: start; }
  .pk-cerc {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px solid var(--pk); color: var(--pk);
    font-family: 'Anton', sans-serif; font-size: 18px; line-height: 1;
  }
  .pk-item strong {
    display: block; padding-top: 3px; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(17px, 1.7vw, 21px); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase;
  }
  .pk-item div > span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
  /* Ce are pachetul in plus fata de celalalt: cercul plin si eticheta. E tot
     ce trebuie pentru comparatie — restul randurilor sunt identice. */
  .pk-item--plus .pk-cerc { background: var(--pk); color: #17141F; font-size: 24px; }
  .pk-item--plus strong { color: var(--pk); }
  .pk-tag {
    display: inline-block; margin-left: 8px; padding: 4px 8px 3px; border-radius: 4px;
    background: var(--pk); color: #17141F; vertical-align: 3px;
    font-family: 'Inter', sans-serif; font-style: normal; font-size: 10px; font-weight: 800;
    letter-spacing: 0.08em; white-space: nowrap;
  }
  .pk-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 44px; }
  .pk-actiuni .section-cta { margin-top: 0; }
  .pk-sari { color: var(--pk); font-size: 13px; font-weight: 700; text-decoration: none; }
  .pk-sari:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* Fundalul: culoarea pachetului si, peste ea, patratele rotite ale siglei,
     in negru foarte diluat — adica un ton mai inchis al ORICAREI culori de
     dedesubt, deci acelasi model merge pe cyan si pe galben. overflow: clip si
     aici, din acelasi motiv ca la .pk. */
  .pk-foto {
    position: relative; overflow: clip; background-color: var(--pk);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='%23000' fill-opacity='.075'%3E%3Crect x='36' y='44' width='132' height='132' transform='rotate(23 102 110)'/%3E%3Crect x='250' y='238' width='120' height='120' transform='rotate(45 310 298)'/%3E%3Crect x='70' y='290' width='74' height='74' transform='rotate(-14 107 327)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.075' stroke-width='12'%3E%3Crect x='262' y='40' width='96' height='96' transform='rotate(7 310 88)'/%3E%3Crect x='168' y='176' width='60' height='60' transform='rotate(34 198 206)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 420px 420px;
  }
  /* Decupajul ramane pe ecran cat timp lista din stanga e mai lunga decat
     ecranul; sta cu picioarele pe marginea de jos, ca borcanul din referinta. */
  .pk-cut {
    position: sticky; top: 0; height: 100vh; padding: var(--pk-cap) 4% 0;
    display: flex; align-items: flex-end; justify-content: center;
    will-change: transform;
    /* Crestetul decupajului sta la inaltimea numelui pachetului din coloana
       de text: .pk-text are 150px sus, eticheta de deasupra mai ia 25, iar
       literele incep la 178. Daca se schimba oricare din ele, se schimba si
       numarul acesta — se masoara, nu se ghiceste. */
    --pk-cap: 178px;
  }
  /* Poza tine de la numele pachetului pana in josul ecranului, aceeasi
     inaltime in ambele panouri oricat de lat ar fi fisierul. Ce iese in
     laterale e taiat de marginea panoului, ca in referinta. Apoi, pe masura
     ce se deruleaza, "cade": nav.js o coboara cu pana la 12% din inaltimea
     ei, iar ce trece de marginea de jos a panoului e taiat de overflow. */
  .pk-cut img {
    display: block; flex: none; max-width: none; width: auto;
    height: calc(100vh - var(--pk-cap)); will-change: transform;
    object-fit: contain; object-position: 50% 100%;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
  }

  .pk-zicere {
    padding: 110px clamp(24px, 5vw, 76px) 120px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .pk-zicere p { margin: 0; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; color: #F2B90D; }
  .pk-zicere-mic { font-size: clamp(22px, 3vw, 34px); line-height: 1.15; }
  /* 1.24, nu 1: e scris cu majuscule, iar  si à isi poarta semnul DEASUPRA
     literei. La inaltimea de rand 1, cand fraza se rupe pe doua randuri,
     caciulita de pe CÂNTĂM intra in literele randului de sus si nu se mai
     vede. Pe un singur rand nu se observa, de aceea a scapat pe desktop. */
  .pk-zicere-mare { margin-top: 10px !important; font-size: clamp(38px, 6.4vw, 92px); line-height: 1.24; max-width: 12em; }
  .pk-cv { display: inline-block; }

  /* ---- Extra-optiunile: acelasi tipar de text, fara fotografie ----
     Sunt tot .pk-panel, ca sa primeasca de la nav.js aceleasi miscari (litere
     si randuri care intra lateral: primul din stanga, al doilea din dreapta).
     Stau doua alaturi, despartite de o linie. Rozul le desparte de pachete,
     care sunt cyan si galben. */
  .pk-panel--roz { --pk: #FF4D6D; }
  .pk-extra { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .pk-panel--mic { display: block; min-height: 0; }
  .pk-panel--mic + .pk-panel--mic { border-left: 1px solid rgba(255, 255, 255, 0.08); }
  .pk-panel--mic .pk-text { padding-top: 76px; padding-bottom: 96px; }
  .pk-panel--mic .pk-nume { font-size: clamp(30px, 4.3vw, 66px); }
  .pk-panel--mic .pk-desc { margin-bottom: 12px; }
  .pk-nota { margin: 0; max-width: 340px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
  .pk-zicere--extra { padding-bottom: 70px; }

  @media (max-width: 860px) {
    .pk-panel, .pk-panel--invers { grid-template-columns: 1fr; min-height: 0; }
    /* pe o coloana poza vine intai la amandoua: numele pachetului sta imediat
       sub decupaj, iar oglindirea nu mai are ce oglindi */
    .pk-panel .pk-foto { order: 1; }
    .pk-panel .pk-text { order: 2; padding: 44px 22px 64px; }
    .pk-dots { margin-left: -22px; margin-right: -22px; }
    .pk-panel { scroll-margin-top: 76px; }
    .pk-cut { position: static; height: clamp(320px, 92vw, 560px); padding: 34px 6% 0; }
    .pk-cut img { height: 100%; }
    .pk-extra { grid-template-columns: 1fr; }
    .pk-panel--mic + .pk-panel--mic { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .pk-panel .pk-panel--mic .pk-text, .pk-panel--mic .pk-text { padding: 44px 22px 56px; }
    .pk-panel--mic .pk-nume { font-size: clamp(34px, 10.5vw, 72px); }
    .pk-nume { font-size: clamp(46px, 15vw, 96px); }
    .pk-zicere { padding: 70px 22px 80px; }
    .pk-tag { margin-left: 0; margin-top: 6px; vertical-align: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pk-chip { transition: none; }
    .pk-chip:hover { transform: none; }
  }

  /* nota despre transport, sub extra-optiuni; sectiunea mov de dedesubt
     (cu "pretul nu e pe site") a fost scoasa */
  .pk-subsol {
    max-width: 760px; margin: 0 auto; padding: 46px 24px 64px; text-align: center;
    font-size: 12.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.62);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }


  /* ---------- Pagina de contact (.ct) ----------
     Dupa eathungrytiger.com/contact: o singura culoare plina, titlu urias la
     stanga, linie punctata, datele in stanga si formularul in dreapta. E pe
     movul #3F2E5C, acelasi pe care sta formularul de pe prima pagina; a fost
     o runda pe galben si clientul a cerut mov, ca cele doua sa se lege. */
  .ct { position: relative; z-index: 1; background: #3F2E5C; color: #fff; text-align: left; }
  .ct-cap { padding: clamp(130px, 17vh, 190px) clamp(20px, 2.4vw, 40px) clamp(40px, 7vh, 90px); }
  .ct-mic { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: #F2B90D; }
  /* Titlul e pe doua randuri stranse, deci NU are voie sa aiba T sau S cu
     virgula pe primul rand: virgula de sub litera coboara 31% din marimea
     fontului si cade pe literele de dedesubt, unde se citeste ca un accent. */
  .ct h1, .ct-titlu {
    margin: 0; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
    font-size: clamp(52px, 10.5vw, 168px); line-height: 1.04; letter-spacing: -0.005em;
    color: #F2B90D;
  }
  .ct-dots {
    height: 4px;
    background: radial-gradient(circle, #F2B90D 0 2px, transparent 2.2px) 0 50% / 12px 4px repeat-x;
  }
  .ct-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    padding: clamp(28px, 4vh, 48px) clamp(20px, 2.4vw, 40px) clamp(70px, 10vh, 120px);
  }
  .ct-eticheta { margin: 0 0 40px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: #F2B90D; }
  .ct-linie {
    display: block; width: fit-content; color: inherit; text-decoration: none;
    font-family: 'Anton', sans-serif; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.3;
    text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: anywhere;
  }
  .ct-linie:hover { color: #F2B90D; }
  .ct-nota { max-width: 380px; margin: 34px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
  .ct-dreapta h2, .ct-subtitlu {
    margin: 0; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(40px, 5.4vw, 84px); line-height: 1.12;
  }
  .ct-sub {
    max-width: 440px; margin: 14px 0 38px; font-size: 14px; font-weight: 700;
    line-height: 1.45; letter-spacing: 0.03em; text-transform: uppercase; color: #F2B90D;
  }
  /* Formularul de oferta de la capatul paginii „Conceptul nostru”: aceeasi
     sectiune, dar nu mai deschide pagina, deci nu are nevoie de locul lasat
     sus pentru antetul fix, iar titlul e ceva mai mic. In stanga, in locul
     datelor de contact, cei trei pasi. */
  .ct--oferta .ct-cap { padding-top: clamp(70px, 10vh, 120px); }
  .ct--oferta .ct-titlu { font-size: clamp(46px, 8.4vw, 132px); }
  .ct-pas {
    display: flex; align-items: baseline; gap: 16px; max-width: 420px; margin: 0 0 18px;
    font-size: 16px; font-weight: 600; line-height: 1.45;
  }
  .ct-pas span { flex: none; font-family: 'Anton', sans-serif; font-size: 22px; color: #F2B90D; }
  .ct-nota a { color: #F2B90D; text-decoration: underline; text-underline-offset: 2px; }
  @media (max-width: 860px) {
    .ct-grid { grid-template-columns: 1fr; gap: 46px; }
    .ct-eticheta { margin-bottom: 22px; }
  }

  /* ---------- Formularul (.ct-form), acelasi pe contact.html si pe prima pagina ----------
     Eticheta deasupra, caseta doar cu contur, rotunjita cat o pastila, buton
     lat cat formularul. Culorile vin din cateva variabile, ca acelasi formular
     sa poata sta pe orice fundal: --f-text (scrisul), --f-linie (conturul)
     si --f-accent (focus, buton). Valorile de mai jos sunt pentru movul
     #3F2E5C, pe care stau amandoua formularele. */
  .ct-form {
    --f-text: #fff; --f-linie: rgba(255, 255, 255, 0.42); --f-accent: #F2B90D;
    --f-pe-accent: #17141F; --f-rau: #FF8FA3; --f-bine: #A8E6B0;
    color: var(--f-text);
  }
  .ct-form .field { display: block; background: none; border-radius: 0; padding: 0; margin-bottom: 16px; box-shadow: none !important; opacity: 1; }
  .ct-form .field > span { display: block; margin: 0 0 7px 20px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; opacity: 1; }
  .ct-form input:not([type="checkbox"]), .ct-form select, .ct-form textarea {
    width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 20px;
    border: 1px solid var(--f-linie); border-radius: 100px;
    background: transparent; color: var(--f-text); color-scheme: dark;
    font: 600 16px/1.4 'Inter', sans-serif; outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ct-form textarea { border-radius: 20px; min-height: 190px; padding: 16px 20px; resize: vertical; }
  .ct-form select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 20px center / 12px 8px no-repeat; }
  .ct-form select option { color: #1E1B26; }
  .ct-form input::placeholder, .ct-form textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
  .ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus {
    border-color: var(--f-accent); box-shadow: 0 0 0 2px var(--f-accent);
  }
  .ct-form .field.invalid input, .ct-form .field.invalid select, .ct-form .field.invalid textarea {
    border-color: var(--f-rau); box-shadow: 0 0 0 2px var(--f-rau);
  }
  .ct-form .field.e-oprit { opacity: 0.45; }
  .ct-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .ct-form .camp-data .field { margin-bottom: 8px; }
  .ct-form .camp-data + .field { align-self: start; }
  .ct-form .fara-data { display: flex; align-items: center; gap: 10px; margin: 0 0 18px 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .ct-form .fara-data input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--f-accent); cursor: pointer; }
  .ct-form .form-consent { margin: 6px 0 20px; font-size: 12.5px; font-weight: 500; line-height: 1.55; opacity: 0.85; }
  .ct-form .form-consent a { color: var(--f-accent); text-decoration: underline; text-underline-offset: 2px; }
  .ct-trimite {
    display: block; width: 100%; min-height: 56px; padding: 14px 20px; border: 0; border-radius: 100px;
    background: #F2B90D; color: #17141F; cursor: pointer;
    font: 800 14px/1 'Inter', sans-serif; letter-spacing: 0.14em;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }
  /* aceeasi inversare ca la toate butoanele galbene de pe site */
  .ct-trimite:hover { background: #42216A; color: #F2B90D; box-shadow: inset 0 0 0 2px #F2B90D; transform: translateY(-2px); }
  .ct-trimite:disabled { opacity: 0.6; cursor: wait; transform: none; }
  .ct-form .form-note { margin-top: 14px; font-size: 13px; font-weight: 700; line-height: 1.5; }
  .ct-form .form-note.ok { color: var(--f-bine); }
  .ct-form .form-note.bad { color: var(--f-rau); }
  @media (max-width: 860px) {
    .ct-form .field-row { grid-template-columns: 1fr; gap: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ct-trimite { transition: none; }
    .ct-trimite:hover { transform: none; }
  }

  /* ---------- Blogul (.bl), dupa orchid.ai/blog ----------
     Masurat acolo: grila de 3 coloane, 32px intre coloane si 64px intre
     randuri, fotografie 4:5 cu colturi de 16px, titlu de 24px la 20px sub ea,
     text la 12px sub titlu. Cardul nu are fundal si nici chenar. */
  .bl { position: relative; z-index: 1; background: #1E1B26; color: #fff; text-align: left;
        padding: clamp(130px, 17vh, 170px) clamp(20px, 8.3vw, 120px) clamp(80px, 12vh, 140px); }
  .bl-cap h1 {
    margin: 0; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(40px, 5.4vw, 72px); line-height: 1.1; letter-spacing: 0.005em;
  }
  .bl-grid {
    list-style: none; margin: clamp(48px, 7vh, 80px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 32px;
  }
  .bl-card { display: block; color: inherit; text-decoration: none; }
  .bl-foto {
    position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: 16px; background: #17141F;
  }
  /* Acelasi tratament ca pe fotografiile din "Echipa completa" (.tm-collage):
     contrast si saturatie putin ridicate si un ecran fin de puncte deasupra.
     Valorile sunt copiate de acolo; se schimba impreuna. */
  .bl-foto img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    filter: contrast(1.1) saturate(1.08);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .bl-foto::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0.9px, transparent 1px);
    background-size: 4px 4px; mix-blend-mode: multiply; opacity: 0.16;
  }
  .bl-card:hover .bl-foto img { transform: scale(1.04); }
  .bl-card h2 {
    margin: 20px 0 0; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; letter-spacing: 0.01em;
    transition: color 0.2s ease;
  }
  .bl-card:hover h2 { color: #F2B90D; }
  .bl-card p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }
  .bl-card:focus-visible { outline: 2px solid #F2B90D; outline-offset: 6px; border-radius: 16px; }
  @media (max-width: 1000px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px)  { .bl-grid { grid-template-columns: 1fr; gap: 48px; } }
  @media (prefers-reduced-motion: reduce) {
    .bl-foto img, .bl-card h2 { transition: none; }
    .bl-card:hover .bl-foto img { transform: none; }
  }

  /* a stage links out to its own article, and the article links back to it */
  .inapoi {
    display: inline-block; margin-bottom: 22px; color: rgba(255, 255, 255, 0.7);
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: color 0.2s ease;
  }
  .inapoi:hover { color: #F2B90D; }
  .articol-todo { margin: 0 0 14px; }

  /* ---- Sub-categorii ca taburi (model: yllw.com/en, blocul Subscription) ----
     Four of them down the left; each opens its own description in place, and
     the SAME frame on the right swaps to that one's photo or clip. One shared
     frame, not one per sub: that is the whole idea of the pattern, and it means
     four pictures per stage instead of four slots scattered down the panel. */
  .subetape { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; margin-top: 30px; padding-bottom: 30px; }
  .sub-list { border-top: 1px solid rgba(255, 255, 255, 0.13); counter-reset: sub; }
  /* Doua coloane: iconita in stanga, pe toata inaltimea randului, iar titlul
     si descrierea in dreapta. Iconita are loc rezervat si cand randul e
     inchis, deci deschiderea nu muta titlul. */
  .sub-tab {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) 16px; column-gap: 14px; align-items: start;
    width: 100%; padding: 12px 12px 12px 14px; text-align: left; font: inherit;
    background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    color: inherit; cursor: pointer; position: relative; counter-increment: sub;
    transition: background-color 0.25s ease;
  }
  /* Legatura dintre rand si poza: randurile sunt numerotate, cel ales e
     marcat (fond, bara galbena in stanga), iar sub poza sta o banda cu
     ACELASI numar si ACELASI titlu. Celelalte randuri poarta o sageata, ca
     sa se vada ca se pot alege. */
  .sub-tab::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: #F2B90D; transform: scaleY(0); transform-origin: 50% 0;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .sub-tab::after {
    content: "\203A"; grid-column: 3; grid-row: 1; align-self: center; justify-self: end;
    font-size: 20px; line-height: 1; opacity: 0.45;
    transition: transform 0.25s ease, opacity 0.2s ease, color 0.2s ease;
  }
  .sub-tab:hover { background: rgba(255, 255, 255, 0.045); }
  .sub-tab:hover::after { opacity: 0.9; transform: translateX(3px); }
  .sub-tab.is-on { background: rgba(242, 185, 13, 0.09); }
  .sub-tab.is-on::before { transform: scaleY(1); }
  .sub-tab.is-on::after { opacity: 1; color: #F2B90D; transform: rotate(90deg); }
  .sub-titlu::before {
    content: counter(sub, decimal-leading-zero); flex: none; margin-right: 10px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; color: #F2B90D; opacity: 0.85;
  }
  .sub-ico { grid-column: 1; grid-row: 1 / span 2; display: block; font-size: 0; }
  .sub-ico .vl-svg { width: 46px; height: 46px; margin: 0; }
  .sub-titlu { grid-column: 2; align-self: center; min-height: 46px; display: flex; align-items: center;
               font-size: 15px; font-weight: 700; transition: color 0.2s ease; }
  .sub-desc { grid-column: 2; }
  /* miscarile icoanelor din etape (tools/concept-icons.py); celelalte clase
     folosite acolo — ri-*, in-* — sunt definite la icoanele lor */
  .ci-stg    { animation: ciStg 1.2s ease-in-out infinite alternate; }
  .ci-drp    { animation: ciDrp 1.2s ease-in-out infinite alternate; }
  .ci-puls   { animation: ciPuls 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * -0.8s); }
  .ci-creste { animation: ciCreste 2.4s ease-in-out infinite alternate; }
  .ci-apasa  { animation: ciApasa 1.2s ease-in-out infinite alternate; }
  .ci-ploaie { animation: ciPloaie 1.2s linear infinite; animation-delay: calc(var(--k) * -0.3s); }
  @keyframes ciStg    { from { transform: translateX(-22px); } to { transform: translateX(6px); } }
  @keyframes ciDrp    { from { transform: translateX(22px); } to { transform: translateX(-6px); } }
  @keyframes ciPuls   { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.12); } }
  @keyframes ciCreste { from { transform: scaleY(0.62); } to { transform: scaleY(1); } }
  @keyframes ciApasa  { from { transform: translateY(-26px); } to { transform: translateY(44px); } }
  @keyframes ciPloaie { from { transform: translateY(-30px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(70px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .ci-stg, .ci-drp, .ci-puls, .ci-creste, .ci-apasa, .ci-ploaie,
    .vl-svg [class^="ri-"], .vl-svg [class*=" ri-"] { animation: none; }
  }
  .sub-tab:hover .sub-titlu, .sub-tab.is-on .sub-titlu { color: #F2B90D; }
  /* the description collapses with the same 0fr trick as everything else here */
  .sub-desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .sub-tab.is-on .sub-desc { grid-template-rows: 1fr; }
  .sub-desc > span { overflow: hidden; display: block; font-size: 13.5px; line-height: 1.65; opacity: 0.8; }
  /* Doar cat masuram cea mai inalta stare a listei — o tranzitie in desfasurare
     ar da inaltimi intermediare. Nu se vede niciodata: masurarea si revenirea
     se fac in acelasi frame. */
  .sub-list.no-anim .sub-desc { transition: none; }
  .sub-tab.is-on .sub-desc > span { padding-top: 8px; }

  .sub-media { display: grid; }
  /* Banda de sub poza (o construieste nav.js): numarul si titlul
     subcategoriei alese, intre doua sageti care trec la cea de dinainte si la
     urmatoare. E lipita de poza — colturile se rotunjesc doar in afara — ca
     sa se citeasca drept eticheta ei. Inaltime fixa: titlul se schimba la
     fiecare alegere si pagina nu are voie sa se miste. */
  .sub-media.are-cap > .media-slot { border-radius: 12px 12px 0 0; cursor: pointer; }
  .sub-cap {
    grid-area: 2 / 1; display: grid; grid-template-columns: 40px auto minmax(0, 1fr) 40px;
    align-items: center; column-gap: 10px; height: 54px; padding: 0 6px;
    background: #17141F; border: 1px solid rgba(255, 255, 255, 0.1); border-top: 0;
    border-radius: 0 0 12px 12px;
  }
  .sub-cap-nr { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; color: #F2B90D; white-space: nowrap; }
  .sub-cap-t {
    font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .sub-nav {
    width: 36px; height: 36px; border-radius: 50%; justify-self: center;
    border: 1px solid rgba(255, 255, 255, 0.22); background: none; color: #fff;
    font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 0 3px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .sub-nav:hover, .sub-nav:focus-visible { background: #F2B90D; border-color: #F2B90D; color: #17141F; }
  .sub-media > .media-slot { grid-area: 1 / 1; opacity: 0; transition: opacity 0.35s ease; }
  .sub-media > .media-slot.is-on { opacity: 1; }
  .media-slot {
    max-width: 100%; aspect-ratio: 1.78;
    border: 2px dashed rgba(255, 255, 255, 0.22); border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    display: grid; place-items: center; overflow: hidden;
  }
  /* the dashed frame drops away once a photo or clip is in, but the BOX does
     not change size — four tabs share this one frame, and a frame that resized
     per photo would make the page jump on every click */
  .media-slot:has(img), .media-slot:has(video) { border: 0; background: none; }
  .media-slot img, .media-slot video {
    display: block; width: 100%; height: 100%; object-fit: cover;
  }

  @media (max-width: 860px) {
    .subetape { grid-template-columns: 1fr; gap: 22px; }
    .sub-titlu { font-size: 14px; }
    .sub-cap-t { font-size: 13px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sub-desc, .sub-titlu, .sub-media > .media-slot,
    .sub-tab, .sub-tab::before, .sub-tab::after { transition: none; }
  }

  /* Corpul unui articol: aliniat la stanga, pe o masura citibila, in interiorul
     unui .generic-content care e centrat pentru restul paginii. */
  .articol { text-align: left; max-width: 720px; margin: 26px auto 0; }
  .articol h2 {
    font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(20px, 2.8vw, 27px);
    color: #F2B90D; margin: 34px 0 12px; line-height: 1.15;
  }
  .articol h2:first-child { margin-top: 0; }
  .articol h3 {
    margin: 26px 0 8px; font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 17px; line-height: 1.35; color: #F2B90D;
  }
  .articol h2 + h3 { margin-top: 14px; }
  .articol a { color: #F2B90D; text-decoration: underline; text-underline-offset: 2px; }
  .articol p { font-size: 15.5px; line-height: 1.75; opacity: 0.9; margin: 0 0 15px; }
  /* Aceeasi tipografie ca paragrafele — fara regula, un <ul> cade pe stilul
     implicit al browserului si se vede imediat ca nu e din aceeasi pagina. */
  .articol ul { margin: 0 0 15px; padding-left: 20px; }
  .articol li { font-size: 15.5px; line-height: 1.75; opacity: 0.9; margin-bottom: 6px; }
  .articol strong { color: #fff; font-weight: 700; }

  /* ---------- Cadranul de navigare (pe toate paginile) ----------
     In repaus e doar un punct translucid in coltul din stanga jos, care se
     plimba stanga-dreapta si lasa in urma cateva puncte ce se dizolva. Cu
     mouse-ul pe el (sau atins, pe telefon) creste intr-un cadran: inelul arata
     cat din pagina a fost parcurs si unde incepe fiecare sectiune, iar in
     mijloc e o rotita cu numarul sectiunii, ca la un selector de ora. Se
     GLISEAZA pe el in sus si in jos, exact gestul cu care se deruleaza pagina:
     in sus trece la sectiunea urmatoare, in jos la cea dinainte. Cand cursorul
     pleaca, se strange la loc. Il construieste scriptul; fara JS nu apare.
     Blocul e acelasi in index.html si in assets/styles.css. */
  .cadran {
    --d: 108px;
    position: fixed; left: 14px; bottom: 14px; z-index: 900;
    width: 62px; height: 44px;              /* doar zona punctului, ca sa nu acopere pagina */
    color: #fff; cursor: pointer; touch-action: none;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: opacity 0.25s ease;
  }
  .cadran:focus { outline: none; }
  /* in dreptul subsolului se da la o parte: acolo ar sta peste legaturi */
  .cadran.ascuns { opacity: 0; pointer-events: none; }

  .cadran-bob { position: absolute; inset: 0; transition: opacity 0.2s ease; }
  .cadran.deschis .cadran-bob { opacity: 0; }
  /* fiecare <i> e un punct pe acelasi drum; cele din urma pornesc cu o
     intarziere tot mai mare, deci se insira ca o dara la mijlocul drumului si
     se strang inapoi in punct la capete */
  .cadran-bob i {
    position: absolute; left: 13px; top: 50%; width: 0; height: 0;
    animation: cadranDrum 3.4s ease-in-out infinite;
    animation-delay: calc(var(--k) * 0.2s - 3.4s);
  }
  .cadran-bob b {
    position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    background: rgba(255, 255, 255, var(--o));
    box-shadow: 0 0 0 1px rgba(23, 20, 31, calc(var(--o) * 0.45));
  }
  .cadran-bob i:not(:first-child) b {
    animation: cadranDizolva 1.5s ease-out infinite;
    animation-delay: calc(var(--k) * -0.37s);
  }
  @keyframes cadranDrum { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(38px); } }
  @keyframes cadranDizolva {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-9px) scale(0.25); opacity: 0; }
  }

  .cadran-fata {
    position: absolute; left: 0; bottom: 0; width: var(--d); height: var(--d); border-radius: 50%;
    background: rgba(23, 20, 31, 0.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    cursor: ns-resize;
    /* creste din locul punctului */
    transform-origin: 22px calc(100% - 22px); transform: scale(0.1); opacity: 0; pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
  }
  .cadran.deschis .cadran-fata { transform: none; opacity: 1; pointer-events: auto; }
  .cadran:focus-visible .cadran-fata { outline: 2px solid #F2B90D; outline-offset: 4px; }
  .cadran svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
  .cadran-pista   { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 3; stroke-linecap: round; }
  .cadran-parcurs { fill: none; stroke: #F2B90D; stroke-width: 3; stroke-linecap: round; }
  .cadran-punct { fill: #fff; opacity: 0.7; transition: opacity 0.2s ease, fill 0.2s ease; }
  .cadran-punct.trecut { fill: #F2B90D; opacity: 1; }
  .cadran-punct.vizat { fill: #fff; opacity: 1; }
  .cadran-maner { fill: #F2B90D; stroke: #1E1B26; stroke-width: 2; }
  /* Rotita din mijloc: sectiunea dinainte sus, cea curenta la mijloc, urmatoarea
     jos; marginile se sting, ca la un selector cu role. */
  .cadran-centru {
    position: absolute; inset: 17%; border-radius: 50%; overflow: hidden; pointer-events: none;
    background: rgba(255, 255, 255, 0.06);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  }
  .cadran-rola {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px; text-align: center;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cadran.gliseaza .cadran-rola { transition: none; }
  .cadran-vecin { font-family: 'Anton', sans-serif; font-size: 11px; line-height: 1; letter-spacing: 0.5px; opacity: 0.55; min-height: 11px; }
  .cadran-acum { display: flex; flex-direction: column; align-items: center; }
  .cadran-nr { font-family: 'Anton', sans-serif; font-size: 22px; line-height: 1; letter-spacing: 0.5px; }
  .cadran-nume { font-size: 7.5px; font-weight: 800; letter-spacing: 0.7px; margin-top: 3px; opacity: 0.85; white-space: nowrap; }
  .cadran-eticheta {
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; pointer-events: none;
    max-width: calc(100vw - var(--d) - 40px); overflow: hidden; text-overflow: ellipsis;
    background: rgba(23, 20, 31, 0.86); color: #fff; border-radius: 100px; padding: 7px 13px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 700px) {
    .cadran { --d: 96px; left: 8px; bottom: 8px; }
    .cadran-eticheta { font-size: 11px; padding: 6px 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cadran, .cadran-fata, .cadran-bob, .cadran-rola { transition: none; }
    .cadran-bob i, .cadran-bob i b { animation: none; }
    .cadran-bob i:not(:first-child) { display: none; }
  }