/* Arabic (dir=rtl): Arabic webfont + connected-script typography. Flex/grid auto-mirror. */
  html[lang="ar"], html[lang="ar"] body{font-family:'IBM Plex Sans Arabic','Space Grotesk',system-ui,sans-serif}
  html[lang="ar"] [style*="letter-spacing"], [dir="rtl"] *{letter-spacing:0 !important}
  [dir="rtl"] .step-n{direction:ltr;unicode-bidi:isolate}
  :root{
    --bg:#000000;
    --blue:#0c15bf;
    --green:#6cff0b;
    --gray:#ffffff;
    --light:#ffffff;
    --grey-line:rgba(255,255,255,.18);
    --grey-line-strong:rgba(255,255,255,.32);
    --muted:rgba(255,255,255,.55);
    --pad-x:2.25rem;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  /* fallback metric-matching → no text reflow when Space Grotesk swaps in (kills font CLS) */
  @font-face{font-family:'Space Grotesk Fallback';src:local('Arial');ascent-override:89%;descent-override:25.5%;line-gap-override:0%;size-adjust:106%}
  html{scroll-behavior:auto}   /* NOT smooth: CSS smooth makes ScrollTrigger's internal measure-scroll animated → it measures mid-animation and computes wrong start/end (Selected Work cards stuck invisible when landing on #spw from another page). Anchor scrolling is handled precisely in JS instead. */
  html,body{background:var(--bg);color:var(--light);font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
  body{cursor:none}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,p{font-weight:400}

  /* ---------- HUD (header row) ---------- */
  /* company bar container (.page-hud / .page-hud-row / .page-hud-line) now lives in /company-bar.css, shared with the subpages */
  .brand{font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;font-weight:700;letter-spacing:.02em;font-size:1.05rem;color:var(--light);mix-blend-mode:difference}
  .brand .dot{color:var(--green)}
  .nav{display:flex;gap:2rem;align-items:center;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);mix-blend-mode:difference}
  .nav a{position:relative;padding:.15rem 0;transition:color .3s ease}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.4,0,.2,1)}
  .nav a:hover{color:var(--light)}
  .nav a:hover::after{transform:scaleX(1)}
  .cta{font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.65rem 1.05rem;border:1px solid var(--grey-line-strong);border-radius:999px;color:var(--light);background:transparent;transition:background .3s ease,color .3s ease,border-color .3s ease}
  .cta:hover{background:var(--green);color:#000;border-color:var(--green)}
  /* company bar (.page-hud-line) styled in /company-bar.css — single source */
  .scroll-hint{display:inline-flex;align-items:center;gap:.55rem}
  .scroll-hint .bar{width:1px;height:26px;background:var(--grey-line-strong);position:relative;overflow:hidden}
  .scroll-hint .bar::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:var(--green);animation:pulseBar 2.4s infinite ease-in-out}
  @keyframes pulseBar{0%{transform:translateY(-100%)}50%{transform:translateY(60%)}100%{transform:translateY(240%)}}

  /* Scroll indicator, vertical rail on the LEFT, mirroring the pagination on the right */
  .scroll-rail{
    position:fixed;left:1.25rem;top:50%;transform:translateY(-50%);
    z-index:41;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;gap:.8rem;
    mix-blend-mode:difference;
  }
  .scroll-rail .bar{width:1px;height:40px;background:var(--grey-line-strong);position:relative;overflow:hidden}
  .scroll-rail .bar::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:var(--green);animation:pulseBar 2.4s infinite ease-in-out}
  .scroll-rail .label{writing-mode:vertical-rl;text-orientation:mixed;font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--light)}
  @media(max-width:900px){.scroll-rail{display:none}}

  /* Progress rail, dots with collision pulse */
  .progress-w{position:fixed;right:1.25rem;top:50%;transform:translateY(-50%);z-index:41;pointer-events:none;display:flex;flex-direction:column;gap:1rem;align-items:center}
  .progress-w .p{
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.28);
    transition:background .35s ease,transform .35s ease,box-shadow .35s ease;
  }
  .progress-w .p.act{
    background:var(--green);
    transform:scale(1.35);
    box-shadow:0 0 0 5px rgba(108,255,11,.15);
  }
  .progress-w .p.hit{animation:dotCollision .55s ease-out}
  @keyframes dotCollision{
    0%   { transform:scale(1);   box-shadow:0 0 0 0   rgba(108,255,11,.6); }
    35%  { transform:scale(2.4); box-shadow:0 0 0 18px rgba(108,255,11,.32); }
    100% { transform:scale(1.35);box-shadow:0 0 0 5px rgba(108,255,11,.15); }
  }
  @media(max-width:900px){.progress-w{display:none}}

  /* ================ BLACK HOLE, top absorption ================
   * Layered effect:
   *   - .bh-horizon : dark band with a curved (elliptical) bottom edge
   *                   masquerading as an event horizon
   *   - .bh-disk    : pulsing coloured aura suggesting the accretion disk
   *                   (deep blue → green fringe → transparent)
   *   - .bh-lens    : subtle bright rim just below the horizon = photon ring
   *   Content near the top edge is not just fading, it is compressed,
   *   rotated and drained of colour via the .absorb animation (below).
   */

  /* ---- ABSORPTION animation (scroll-timeline based) ----
   * When an element exits the top of the viewport it is not just cropped;
   * it compresses vertically, rotates slightly, blurs, redshifts toward
   * blue/purple, and vanishes, the black hole pulls it in.
   * Requires Chrome/Edge/Safari 26+. Firefox falls back to a plain scroll-off.
   */
  /* blackHoleAbsorb (scroll-driven section absorption) removed 11 iul — perf (non-composited filter anims) + design decision. .absorb class kept on elements, now inert. */

  /* ---------- LAYOUT ---------- */
  main{position:relative;z-index:2}
  section.stage{position:relative;min-height:100vh;min-height:100svh;padding:7.5rem var(--pad-x) 5rem;display:flex;align-items:center}
  .grid{max-width:1600px;margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:1.25rem}

  /* ---------- HERO ---------- */
  .hero{min-height:100svh;padding-top:8rem}
  .hero-inner{grid-column:1 / span 12;position:relative;z-index:3;max-width:70%}
  .eyebrow{font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);margin-bottom:1.75rem;display:inline-flex;align-items:center;gap:.6rem;mix-blend-mode:difference}
  .eyebrow .marker{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 0 3px rgba(108,255,11,.15)}
  h1.headline{font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;font-weight:500;font-size:clamp(2.75rem,7.1vw,7.5rem);line-height:.98;letter-spacing:-.025em;color:var(--light);max-width:15ch;mix-blend-mode:difference}
  h1.headline .accent{color:var(--green)}
  .headline-line{display:block;overflow:hidden}
  .headline-word{display:inline-block;will-change:transform}
  @media(min-width:901px){ .hero .headline-line:first-of-type{padding-bottom:.06em} .hero .headline-line:first-of-type .headline-word{font-size:2.4em; line-height:1} }   /* desktop: "Design" +20% · line-height 1 + small padding so the "g" descender is not clipped by the line's overflow:hidden */
  @media(min-width:901px){ .hero .headline-line:nth-of-type(2) .headline-word{font-size:1.27em} }   /* desktop: "that makes" +10% then +5% then +10% */
  @media(min-width:901px){ .hero h1.headline{mix-blend-mode:normal} }   /* desktop: solid white headline, no difference-blend that made letters (the "g" tail) disappear over the background glow */
  @media(min-width:901px){ .hero-copy{display:flex; align-items:center; gap:2.75rem; margin-top:0} .hero-copy .sub{margin-top:0; margin-bottom:0; flex:0 1 auto} .hero-copy .cta-row{margin-top:0; flex:none} }   /* desktop: "Free brand audit" sits to the RIGHT of the paragraph (not below). NOTE: margin-top was -3.5rem (pulled copy up toward "premium.") but after the .hero-slogan was added between headline and copy, that negative margin pulled the copy OVER the slogan → overlap on both EN+RO. Set to 0 so slogan + copy stack cleanly. */
  @keyframes slotPop2{0%{transform:translate(-230%,-180%) scale(0);opacity:0}60%{opacity:1}100%{transform:translate(-230%,-180%) scale(2);opacity:1}}
  @keyframes orbBreathe2{0%{transform:translate(-230%,-180%) scale(2)} 5%{transform:translate(-230%,-180%) scale(2.24)} 9%{transform:translate(-230%,-180%) scale(1.96)} 13%{transform:translate(-230%,-180%) scale(2.24)} 17%{transform:translate(-230%,-180%) scale(1.96)} 21%{transform:translate(-230%,-180%) scale(2.24)} 25%{transform:translate(-230%,-180%) scale(2)} 100%{transform:translate(-230%,-180%) scale(2)}}
  @media(min-width:901px){
      background:transparent; border:0; padding:.7rem 2rem; min-height:1.7em; cursor:pointer;   /* shape (bubble + tail + outline) drawn by one continuous SVG path behind the label */
      opacity:0; transform:translateX(24px); transition:opacity .4s ease, transform .5s cubic-bezier(.2,1,.3,1)}
    .bubble-svg{position:absolute; left:0; top:0; z-index:-1; overflow:visible; pointer-events:none; filter:drop-shadow(0 16px 34px rgba(0,0,0,.5))}
    .bubble-svg path{fill:rgba(10,10,14,.82); stroke:rgba(108,255,11,.5); stroke-width:1}   /* stroke scales with the bubble transform (1px -> ~3.5px on desktop, matches the old border) */
    @keyframes svgSem{0%,48%{fill:rgba(108,255,11,.2)} 52%,100%{fill:rgba(10,10,14,.82)}}
    @keyframes scSem{0%,48%{background:rgba(108,255,11,.2)} 52%,100%{background:rgba(10,10,14,.78)}}
    @keyframes scSemTail{0%,48%{border-top-color:rgba(108,255,11,.2)} 52%,100%{border-top-color:#0a0a0e}}
  }
  @media(min-width:901px){ .hero-inner{transform:translateY(-5vh)} }   /* desktop: lift the whole hero text block up 5% (eyebrow + "Design" nudged up 3% more from -2vh) */
  @media(min-width:901px){ html[lang="de"] .hero-inner{transform:translateY(-8vh)} }   /* RO desktop: block position (unchanged from the 2-row state — do not lift further) */
  @media(min-width:901px){ html[lang="de"] .hero-slogan{max-width:none; white-space:nowrap} }   /* RO desktop: slogan on ONE line (RO text otherwise wrapped 'web!' alone) */
  @media(min-width:901px){ html[lang="de"] .hero-inner{max-width:88%} }   /* RO desktop: wider block so the 2-line description + CTA fit on ONE row */
  /* RO desktop: description on its OWN full-width row (= 2 lines), CTA stacked BELOW aligned to the right. Side-by-side capped the paragraph at ~880px → forced 3 lines, so it can't share a row with the button. */
  @media(min-width:901px){
    html[lang="de"] .hero-copy{flex-direction:column; align-items:stretch; width:100%; gap:.6rem}
    html[lang="de"] .hero-copy .sub{max-width:none; flex:0 0 auto}   /* RO: full-width paragraph (2 lines). Geo tail sentence removed from the RO copy (still shown in the bottom bar) so it stays 2 lines even on narrow windows. */
    html[lang="de"] .hero-copy .cta-row{align-self:flex-end; margin:0; transform:none}
  }
  /* EN desktop: same wide + column-copy layout as RO (description full-width on ~2-3 lines, CTA aligned right) so the copy isn't cramped in a narrow column. Game orb untouched. */
  @media(min-width:901px){ html[lang="en"] .hero-inner{max-width:100%} }
  @media(min-width:901px){ html[lang="en"] .hero-slogan{margin-top:-40px} }   /* EN desktop: pull the whole copy cluster (slogan+desc+CTA) up into the empty space left by the game control, balancing vertical rhythm (headline->slogan ~55px, desc->marquee ~52px, was 80/27 = cramped at the bottom). Safe: nothing rendered in that gap. */
  @media(min-width:901px){
    html[lang="en"] .hero-copy{flex-direction:row; align-items:center; gap:2.75rem}
    html[lang="en"] .hero-copy .sub{max-width:none; flex:1 1 auto}   /* description = 2-line row */
    html[lang="en"] .hero-copy .cta-row{margin-left:auto; align-self:center; margin-top:0; transform:none; flex:none}   /* CTA same row as the description, right side */
  }
  @media(min-width:901px){ .hero .headline-line:nth-of-type(2){margin-top:-5vh} }   /* desktop: pull "that makes / brands look / premium" + sub + CTA up 5% (eyebrow + "Design" keep their position) */
  @media(min-width:901px){ .hero .hero-inner > .eyebrow{margin-top:-48px; margin-bottom:calc(1.75rem + 48px); visibility:hidden} }   /* desktop: keep the in-flow eyebrow's SPACE (so "Design" stays put) but hide it — the fixed .hero-topbar copy below shows it aligned on the header nav line */
  .hero-topbar{display:none}
  @media(min-width:901px){
    /* desktop: tagline pinned on the header nav line AND left-aligned with "Design" by mirroring the
       grid layout (max-width:1600 centered + section --pad-x). Own class so the .eyebrow scroll-animation can't move it. */
    .hero-topbar{display:block; position:fixed; top:calc(1.4rem + 56px); left:0; right:0; transform:translateY(-50%); padding:0 var(--pad-x); margin:0; z-index:1001; pointer-events:none}
    .hero-topbar .tb-inner{max-width:1600px; margin:0 auto; display:flex; align-items:center; gap:.6rem; font-family:'JetBrains Mono'; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); mix-blend-mode:difference}
    .hero-topbar .marker{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 0 3px rgba(108,255,11,.15)}
    .hero-topbar a{color:inherit;text-decoration:none;pointer-events:auto}
  }
  @media(min-width:901px){ .hero .headline-line:first-of-type{transform:translateY(-20%)} }   /* desktop: "Design" line up ~20% (10% + another 10%) */
  /* HERO HOOK · rotating accent word — a clean crossfade (no clip/slide so it keeps the headline's
     difference blend and stays green, like the original accent). */
  .hero-rot{display:inline-block}
  .hero-rot .rw{display:inline-block; will-change:opacity}
  /* HERO SLOT · STOP control = a glass ORB (same language as the cookie banner): a spinning circular
     label around a glowing green core. Erupts via spark. */
  /* "you're addicted" nudge that replaces the button after MAX_PLAYS */
    padding:.95rem 1.2rem; border-radius:22px;   /* rounder chat bubble (X sits OUTSIDE) */
    background:rgba(10,10,14,.78); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border:1px solid rgba(108,255,11,.42); box-shadow:0 18px 50px rgba(0,0,0,.5);
    font-family:'JetBrains Mono',monospace; font-size:.82rem; line-height:1.5; letter-spacing:.01em; color:var(--green);
    opacity:0; transform:translateX(52px) scale(.86); transition:opacity .35s ease, transform .6s cubic-bezier(.2,1,.3,1)}   /* slides in from the RIGHT */
  /* clean chat tail = outline triangle (border colour) behind a fill triangle on top: connects seamlessly, no seam/corners */
  /* the message text is present but hidden during typing so the bubble is ALREADY at its final size/position (no jump) */
  /* chat "typing" indicator (3 blinking dots) overlaid on the pre-sized bubble */
  .sm-typing i{width:7px; height:7px; border-radius:50%; background:var(--green); opacity:.3; animation:smType 1.1s infinite ease-in-out}
  .sm-typing i:nth-child(2){animation-delay:.16s}
  .sm-typing i:nth-child(3){animation-delay:.32s}
  @keyframes smType{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}
  @media(prefers-reduced-motion:reduce){ .sm-typing i{animation:none; opacity:.7} }
  /* GAME OVER (final round): the orb stays but frozen - no spin, no pulse, no radar, dimmed, not clickable */
  /* game over: orb stays on the RIGHT (same spot as PLAY), message to its LEFT */
  /* re-engagement chat bubble (bottom-left, opposite the cookie orb) - appears 5 min after the game ends */
  .replay-bubble{position:fixed; left:1.1rem; bottom:1.4rem; z-index:2100; max-width:230px; text-align:left;
    background:rgba(10,10,14,.78); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border:1px solid rgba(108,255,11,.42); color:#fff;
    font-family:'JetBrains Mono',monospace; font-size:.78rem; line-height:1.4; letter-spacing:.01em;
    box-shadow:0 18px 50px rgba(0,0,0,.5); transform-origin:bottom left;
    opacity:0; transform:scale(.55) translateY(6px); transition:opacity .35s ease, transform .55s cubic-bezier(.34,1.6,.5,1)}
  .replay-bubble.in{opacity:1; transform:scale(1) translateY(0)}
    background:rgba(10,10,14,.78); border-right:1px solid rgba(108,255,11,.42); border-bottom:1px solid rgba(108,255,11,.42);
    transform:rotate(45deg)}
  .replay-bubble:hover{border-color:var(--green)}
  .replay-bubble .rb-wink{color:var(--green)}
  .replay-bubble .rb-sub{display:block; margin-top:.35rem; font-size:.66rem; color:var(--gray); line-height:1.4}
  .replay-bubble .rb-x{position:absolute; top:-20px; right:-18px; font-size:1.2rem; line-height:1; color:var(--green); cursor:pointer; padding:3px 6px; mix-blend-mode:difference}   /* OUTSIDE the bubble, green, blends via difference so it never disappears over other green */
  @media (hover:hover){.replay-bubble .rb-x:hover{opacity:.7}}
  @media(prefers-reduced-motion:reduce){ .replay-bubble{transition:opacity .3s ease} }
  @media(min-width:901px){   /* desktop: bigger, lifted clear of the footer, shape drawn by the clean SVG tail (see .bubble-svg / buildBubbleSvg) */
    .replay-bubble{max-width:360px; bottom:5.5rem; left:auto; right:1.4rem; transform-origin:bottom right; padding:1.3rem 1.6rem; font-size:1.05rem; background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
    .replay-bubble .rb-sub{font-size:.82rem}
    .replay-bubble::after{display:none}
  }
    border:1px solid rgba(255,255,255,.16);
    background:radial-gradient(circle at 50% 38%, rgba(12,21,191,.30), transparent 62%), rgba(10,10,14,.5);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 30px rgba(108,255,11,.06);
    display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease;
    animation:orbBreathe 3s cubic-bezier(.3,0,.2,1) infinite}   /* punchy triple vibration, then a longer pause - not constant */
  /* quick triple staccato burst in the first quarter, then a clear rest before the next burst */
  @keyframes orbBreathe{
    0%{transform:scale(1)} 5%{transform:scale(1.12)}
    9%{transform:scale(.98)} 13%{transform:scale(1.12)}
    17%{transform:scale(.98)} 21%{transform:scale(1.12)}
    25%{transform:scale(1)} 100%{transform:scale(1)}}
  /* pulsing radar-ping ring - invites the user to press */
    pointer-events:none; animation:orbPulse 1.9s ease-out infinite}
  @keyframes orbPulse{0%{transform:scale(.98);opacity:.7}70%{opacity:0}100%{transform:scale(1.4);opacity:0}}
    box-shadow:0 0 0 5px rgba(108,255,11,.16), 0 0 12px 1px rgba(108,255,11,.5)}
  /* PLAY AGAIN is identical to PRESS STOP - same rotation, pulse, spark - only the text differs */
  @keyframes slotPop{0%{transform:scale(0);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
  @keyframes soSpin{0%{transform:rotate(0deg)} 45%{transform:rotate(210deg)} 100%{transform:rotate(360deg)}}
  /* HERO SCROLL CUE = two full-height rails stuck to the viewport left + right edges (no padding),
     each with a green dot that descends - invites scrolling. */
  .hero-scrollcue{display:none}
  .hero{position:relative}
  .hero-edge{position:absolute; top:0; bottom:0; width:1px; z-index:2; pointer-events:none; overflow:hidden;
    background:linear-gradient(to bottom, transparent, rgba(255,255,255,.13) 12%, rgba(255,255,255,.13) 88%, transparent)}
  .hero-edge.el{left:0}
  .hero-edge.er{right:0}
  /* 27 oct (CLS): punctul se misca din transform, nu din `top` (animatia pe top era deplasare de layout la fiecare cadru, CLS 0,16 pe telefon).
     Elementul are inaltimea liniei, punctul vizibil e ::before, iar translateY(100%) = toata inaltimea liniei. Acelasi desen ca inainte. */
  .hero-edge .he-dot{position:absolute; left:50%; top:0; width:5px; height:100%; transform:translate(-50%,-2%); animation:heTravel 3.2s cubic-bezier(.55,0,.45,1) infinite}
  .hero-edge .he-dot::before{content:''; display:block; width:5px; height:5px; margin:0 auto; border-radius:50%; background:var(--green); box-shadow:0 0 10px 2px rgba(108,255,11,.6)}
  /* 3-dot comet trail: dot 1 sets the pace, the two behind follow in quick succession · both edges synchronized */
  .hero-edge .he-dot:nth-child(2){animation-delay:.3s}
  .hero-edge .he-dot:nth-child(2)::before{width:4px; height:4px}
  .hero-edge .he-dot:nth-child(3){animation-delay:.5s}
  .hero-edge .he-dot:nth-child(3)::before{width:3px; height:3px}
  @keyframes heTravel{0%{transform:translate(-50%,-2%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(-50%,100%);opacity:0}}
  @media(prefers-reduced-motion:reduce){ .hero-edge .he-dot{animation:none; transform:translate(-50%,42%)} }
  @media(min-width:901px){ .hero-edge{display:none} }   /* MOBILE ONLY - desktop keeps its original .scroll-rail */
  .cta-btns{display:flex; gap:1rem; flex-wrap:wrap; align-items:center}   /* desktop: buttons in a row (unchanged) */
  @keyframes hscTravel{0%{transform:translateY(-6px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(42px);opacity:0}}
  @media(max-width:900px){
    /* CONCISE mobile hero: only the big bold headline + buttons — no dissertation. Block lifted ~10%. */
    .hero .sub{display:none}
    .hero .eyebrow{transform:translateY(9vh)}   /* "Alkeme Design · Creative Studio..." pushed ~30% lower total (2x15%) */
    /* ~30% bigger headline. Let the words flow/wrap (no fixed lines, no clip) so the larger size
       never overflows or gets cut off. */
    .hero h1.headline{font-weight:700; font-size:clamp(3.2rem,13.78vw,4.14rem); max-width:none; line-height:1.04; transform:translateY(9vh)}   /* headline block ~30% lower total (2x15%, CTA stays) */   /* bigger overall, ratios kept (Design 2em, that makes 1.15em) - sized so the longest word fits at normal margins */
    .hero .headline-line{display:block; overflow:visible; white-space:nowrap}   /* fixed 4 lines: Design / that makes / brands look / [word]. */
    .hero .headline-word{display:inline-block}
    .hero .headline-line:first-of-type .headline-word{font-size:2em; line-height:.9}   /* "Design" - double size */
    .hero .headline-line:nth-of-type(2) .headline-word{font-size:1.15em}               /* "that makes" - +15% */
    .hero-inner{transform:translateY(-4vh)}                     /* lift the whole block up ~5% */
    .hero .cta-row{display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; transform:translateY(3.9vh)}   /* CTA: was 20% lower (6vh), now 7% higher */
    .cta-btns{flex-direction:column; align-items:flex-start; gap:.9rem}
    /* STOP orb double size (mobile only) - SVG ring text scales with the viewBox automatically */
    .hero-scrollcue{display:inline-flex; flex-direction:column; align-items:flex-start; gap:.5rem; flex:none;
      font-family:'JetBrains Mono',monospace; font-size:.55rem; letter-spacing:.18em;
      text-transform:uppercase; color:var(--gray); text-decoration:none}
    .hero-scrollcue .hsc-bar{position:relative; width:1px; height:42px; background:rgba(255,255,255,.2); overflow:hidden}
    .hero-scrollcue .hsc-dot{position:absolute; left:-1.5px; top:0; width:4px; height:4px; border-radius:50%;
      background:var(--green); box-shadow:0 0 8px 1px rgba(108,255,11,.6); animation:hscTravel 1.8s cubic-bezier(.7,0,.3,1) infinite}
  }
  @media(prefers-reduced-motion:reduce){ .hero-scrollcue .hsc-dot{animation:none; top:18px} }
  /* mobile only: pull the Instagram grids up to sit between Services and Why Us — interactive
     content sooner, so scrolling never feels flat. Desktop DOM/pins stay untouched. */
  @media(max-width:900px){
    main{display:flex; flex-direction:column}
    main > .hero{order:1}
    main > #services{order:2}
    main > #fanSection{order:3}
    main > #why{order:4}
    html[lang='de'] main > #servicii-ro{order:2}
    html[lang='de'] main > #ambalaje-ro{order:8}
    html[lang='de'] main > #sistem-ro{order:4}
    html[lang='de'] main > #fanSection{order:5}
    html[lang='de'] main > #rezultate-ro{order:6}
    html[lang='de'] main > #proiecte-ro{order:7}
    html[lang='de'] main > #dece-ro{order:9}
    html[lang='de'] main > .founder-band{order:10}
    html[lang='de'] main > #spw{order:3}
    html[lang='de'] main > #audit{order:11}
    main > .founder-band{order:5}
    main > #spw{order:6}
    main > #audit{order:7}
  }
  .sub{margin-top:2.25rem;font-size:1.05rem;line-height:1.55;color:var(--gray);max-width:52ch;mix-blend-mode:difference}
  /* positioning slogan under the headline — packaging + Instagram + web, the three "premium" touchpoints */
  .hero-slogan{margin-top:1.6rem;font-size:clamp(1.15rem,2.5vw,1.75rem);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--white);max-width:36ch}
  .sub strong{color:var(--light);font-weight:500}
  .cta-row{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
  .btn-primary{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:1.05rem 1.6rem;background:var(--green);color:#000;border:none;border-radius:999px;cursor:none;display:inline-flex;align-items:center;gap:.75rem;transition:transform .3s ease,box-shadow .3s ease}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(108,255,11,.25)}
  .btn-secondary{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:1.05rem 1.6rem;background:transparent;color:var(--light);border:1px solid var(--grey-line-strong);border-radius:999px;cursor:none;display:inline-flex;align-items:center;gap:.75rem}
  .btn-primary .arrow,.btn-secondary .arrow{transition:transform .35s cubic-bezier(.4,0,.2,1)}
  .btn-primary:hover .arrow,.btn-secondary:hover .arrow{transform:translateX(6px)}

  /* MARQUEE, full-width edge-to-edge, big legible text · shifted +10vh up */
  .marquee-w{
    position:absolute;left:0;right:0;bottom:calc(2.5rem + 1.5vh);   /* 5% lower then 1.5% back up (net ~3.5vh below original) */
    overflow:hidden;
    border-top:1px solid var(--grey-line);
    border-bottom:1px solid var(--grey-line);
    padding:1.25rem 0;
    z-index:2;
    mix-blend-mode:difference;
    /* fade out on the left & right edges, same as the footer marquees */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  /* Banda chiar se misca. Pana pe 15 oct 2026 avea `will-change:transform` si NIMIC care sa
     scrie transformul: nici animatie in CSS, nici vreun script. Statea pe loc de la inceput,
     si pe homepage-ul vechi din Astro la fel.
     Bucla: doua grupuri identice, deplasate cu exact un grup PLUS spatiul dintre ele. `-50%`
     singur cade la jumatate de spatiu si se vede saltul la fiecare ciclu, de aia `- gap/2`. */
  .marquee-track{
    --mq-gap:2.25rem;
    --mq-durata:38s;
    display:flex;gap:var(--mq-gap);
    font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;font-weight:500;
    font-size:clamp(1.12rem, 2.2vw, 2.4rem);
    line-height:1;
    color:var(--light);
    white-space:nowrap;will-change:transform;
    letter-spacing:-.01em;
    width:max-content;
    animation:mq-curge var(--mq-durata) linear infinite;
  }
  .marquee-grup{display:flex;gap:var(--mq-gap);flex:none}
  @keyframes mq-curge{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-50% - var(--mq-gap) / 2),0,0)}
  }
  /* se opreste la hover, ca sa poti citi un rand, si la cererea sistemului */
  .marquee-w:hover .marquee-track{animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }
  .marquee-track span{display:inline-flex;align-items:center;gap:2rem}
  .marquee-track .dot{width:8px;height:8px;background:var(--green);border-radius:50%;flex:none}

  /* ---------- SERVICES (pinned · 6 items · alternating sides · big header) ---------- */
  .services-wrap{position:relative;height:900vh /* 6 × 150vh, longer scroll per service so the launch has room to accelerate */}
  .services-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:stretch;padding:5.5rem var(--pad-x) 3.5rem;overflow:hidden}
  .services-inner{max-width:1600px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:2rem}
  .services-header{flex:none;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
  .services-title-big{
    font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;font-weight:600;
    font-size:clamp(180px, 14vw, 15rem);
    line-height:.9;letter-spacing:-.045em;
    transform:translateX(-5%);   /* nudge left so the trailing S clears the right edge */
    text-transform:uppercase;
    background:linear-gradient(100deg,
      #ffffff 0%,
      #ffffff 22%,
      #6cff0b 38%,
      #ffffff 52%,
      #0c15bf 68%,
      #ffffff 82%,
      #ffffff 100%);
    background-size:300% 100%;
    background-position:100% 50%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:svcTitleSwirl 9s linear infinite;
    will-change:background-position;
  }
  @keyframes svcTitleSwirl{
    0%   { background-position:  100% 50%; }
    100% { background-position: -200% 50%; }
  }
  .services-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;padding-bottom:1.4rem;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);text-align:right}
  .services-meta .marker{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-right:.5rem}
  .services-meta .count{color:var(--light);font-size:1rem}
  .service-stack{flex:1;position:relative;min-height:280px}

  /* Black-hole portal, sits BEHIND the active service card.
   *   Radial gradient: event horizon (black) → blue accretion → green fringe → transparent.
   *   JS animates opacity, scale and left/right offset per active card.               */
  .svc-portal{
    display:none;   /* dead element: blackHoleAbsorb removed 11 iul, no JS animates it, opacity:0 forever. Its %-sized absolute box reflowed on font-swap/pin → CLS 0.392 on home. Out of layout = no shift. Zero visual change. */
    position:absolute;top:50%;
    width:52%;height:110%;
    transform:translateY(-50%) scale(.4);
    background:
      radial-gradient(ellipse 60% 55% at 50% 50%,
        #000 0%,
        rgba(0,0,0,.9) 12%,
        rgba(12,21,191,.65) 30%,
        rgba(108,255,11,.25) 48%,
        rgba(12,21,191,.10) 62%,
        transparent 78%);
    filter:blur(28px);
    opacity:0;
    pointer-events:none;
    z-index:1;
    will-change:opacity,transform;
  }
  .service-item{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:transform,opacity,filter;display:flex;flex-direction:column;justify-content:center;padding-right:52% /* text on LEFT half, orb on RIGHT */;z-index:2}
  .service-item.svc-right{padding-right:0;padding-left:52% /* text on RIGHT half, orb on LEFT */}
  .service-item.act{opacity:1;pointer-events:auto}
  .service-num{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.18em;color:var(--gray);margin-bottom:1.1rem;text-transform:uppercase}
  .service-num .accent{color:var(--green)}
  .service-title{font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;font-weight:500;font-size:clamp(2.5rem,6.6vw,6.5rem);line-height:.96;letter-spacing:-.03em;
    overflow-wrap:break-word;hyphens:auto;   /* long DE compound words (Markenumgestaltung) wrap instead of overflowing */
    background:linear-gradient(100deg,
      #ffffff 0%,
      #ffffff 28%,
      #6cff0b 42%,
      #ffffff 55%,
      #0c15bf 68%,
      #ffffff 82%,
      #ffffff 100%);
    background-size:280% 100%;
    background-position:100% 50%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    will-change:background-position;
    max-width:15ch;
  }
  .services-title-big a, .spw-title h2 a{color:inherit; text-decoration:none; cursor:pointer}
  .service-title a{color:inherit; text-decoration:none; cursor:pointer; position:relative}
  @media(min-width:901px){ .service-title a{display:inline-block} }   /* desktop: proper box so the hover circle sizes/centres correctly on 2-line titles (Packaging / Ad Creative) */
  /* hover cue: a PERFECT dashed circle (aspect-ratio 1) around the word, with a green planet orbiting it — same circular language as the orb */
  .service-title a::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--svc-ring, 100%) + 0.5em);aspect-ratio:1;border:1px dashed rgba(255,255,255,.4);border-radius:50%;opacity:0;transition:opacity .4s ease;pointer-events:none}
  .service-title a::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--svc-ring, 100%) + 0.5em + 16px);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle 11px at 50% 8px, rgba(108,255,11,.22) 42%, transparent 55%), radial-gradient(circle 6px at 50% 8px, #6cff0b 62%, transparent 66%);
    transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;pointer-events:none;animation:svcSpin 9s linear infinite}
  @media (hover:hover){.service-title a:hover::before,.service-title a:hover::after{opacity:1}}
  @keyframes svcSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
  @keyframes svcPulse{0%,100%{box-shadow:0 0 0 3px rgba(108,255,11,.18)}50%{box-shadow:0 0 0 7px rgba(108,255,11,.04)}}
  /* Touch: no hover, and a word-sized orbit ring swamps the stacked mobile titles.
     Dedicated mobile cue = a small pulsing green planet after each title (tappable hint, on-brand, compositor-only anim). */
  @media (max-width:900px){
    /* iOS Safari drops background-clip:text (esp. with will-change) → titles render invisible.
       On mobile the gradient is static anyway (it's a desktop scroll effect), so paint solid white. */
    .service-title{-webkit-text-fill-color:#fff; color:#fff; background:none; will-change:auto;
      /* size so the LONGEST title ("Ad Creative Design") + the dot cue fit on ONE line —
         otherwise the inline dot wraps below and breaks the row's symmetry */
      max-width:none; font-size:clamp(1.65rem,7.8vw,2.15rem)}
    .service-title a{-webkit-text-fill-color:#fff; color:#fff}
    .service-title a::before{display:none}
    .service-title a::after{position:static; display:inline-block; vertical-align:.12em; margin-left:.42em;
      width:10px; height:10px; border-radius:50%; background:#6cff0b; box-shadow:0 0 0 4px rgba(108,255,11,.16);
      transform:none; opacity:1; animation:svcPulse 2.2s ease-in-out infinite}
  }
  .service-copy{margin-top:1.5rem;font-size:1rem;line-height:1.55;color:var(--gray);max-width:52ch}
  .service-copy strong{color:var(--light);font-weight:500}

  /* ---------- WHY US, pinned, SIDE-BY-SIDE layout: title left / galaxy right ---------- */
  .why-wrap{position:relative;height:900vh /* 7 planets · ~128vh dwell each across one full ring rotation */}
  .why-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:stretch;padding:5.5rem var(--pad-x) 3.5rem;overflow:hidden}
  .why-inner{max-width:1600px;margin:0 auto;width:100%;display:grid;grid-template-columns:minmax(320px, 1fr) minmax(420px, 1.35fr);gap:3rem;align-items:center}
  .why-header{
    grid-column:1;
    display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;
    align-self:center;
  }
  .why-title-big{
    font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;font-weight:600;
    font-size:clamp(72px, 8.5vw, 11rem);
    line-height:.9;letter-spacing:-.045em;
    text-transform:uppercase;
    white-space:nowrap;
    background:linear-gradient(100deg,
      #ffffff 0%,
      #ffffff 22%,
      #6cff0b 38%,
      #ffffff 52%,
      #0c15bf 68%,
      #ffffff 82%,
      #ffffff 100%);
    background-size:300% 100%;
    background-position:100% 50%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:svcTitleSwirl 9s linear infinite;
    will-change:background-position;
  }
  .why-meta{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);text-align:left}
  .why-meta .marker{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-right:.5rem}
  .why-meta .count{color:var(--light);font-size:1rem}
  /* Orbital field, sits in the RIGHT column, isolated from the title */
  .why-orbit{
    grid-column:2;
    position:relative;
    min-height:min(80vh, 620px);
    height:100%;
    display:flex;align-items:center;justify-content:center;
  }
  .orbit-ring-w{
    position:absolute;
    width:min(58vh, 620px);height:min(58vh, 620px);
    top:50%;left:50%;transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .orbit-ring-svg{position:absolute;inset:0;width:100%;height:100%;color:var(--grey-line-strong)}
  /* Alkeme core label, sits in the MIDDLE of the orb-sun (galaxy centre) */
  .orbit-center-mark{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.24em;color:#fff;
    text-transform:uppercase;text-align:center;
    pointer-events:none;white-space:nowrap;
    padding:.45rem .95rem;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    z-index:5;
  }
  .planet{
    position:absolute;top:50%;left:50%;
    width:min(250px, 20vw);
    height:min(250px, 20vw);
    padding:1.25rem;
    background:rgba(0,0,0,.65);
    border:1px solid var(--grey-line-strong);
    border-radius:50%;                    /* spherical */
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;
    transform:translate(-50%,-50%);
    will-change:transform,opacity,scale;
    transition:border-color .35s ease,background .35s ease;
  }
  .planet.act{border-color:rgba(108,255,11,.65);background:rgba(0,0,0,.78)}
  .planet h3{font-size:1.5rem;font-weight:500;color:var(--light);margin:0;letter-spacing:-.015em;line-height:1.1;max-width:11ch}

  /* ---------- OFFER ---------- */
  section.stage.offer{min-height:auto;align-items:flex-start;padding-top:clamp(6rem,10vw,9rem);padding-bottom:clamp(3rem,6vw,5rem)}
  .offer h2{grid-column:1 / span 12;font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;font-weight:500;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.03em;color:var(--light);mix-blend-mode:difference;max-width:20ch}
  .offer h2 .accent{color:var(--green)}
  .audit{grid-column:1 / span 12;margin-top:3.5rem;padding:2.5rem;border:1px solid var(--grey-line-strong);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:end;position:relative;z-index:3}
  .audit-copy p{color:var(--gray);line-height:1.55;font-size:1rem;max-width:48ch}
  .audit-copy strong{color:var(--light);font-weight:500}
  .audit-copy .chip{display:inline-flex;gap:.5rem;align-items:center;font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);padding:.4rem .75rem;border:1px solid rgba(108,255,11,.35);border-radius:999px;margin-bottom:1.5rem}
  .audit-cta{display:flex;justify-content:flex-end}

  @media(max-width:900px){
    :root{--pad-x:1.25rem}
    .hud{padding:1rem var(--pad-x)}
    .nav{display:none}
    .hero-inner,.why-inner{max-width:100%}
    .why-inner{display:flex !important;flex-direction:column;gap:2rem}  /* was 2-col grid, col 2 fell off-screen */
    .why-header,.why-orbit{width:100%}
    section.stage{padding:6rem var(--pad-x) 3rem}
    .meta{left:var(--pad-x);right:var(--pad-x);bottom:1.5rem;flex-wrap:wrap;gap:1rem}
    .why-highlights{grid-template-columns:1fr;gap:0}
    .audit{grid-template-columns:1fr;padding:1.75rem}
    .audit-cta{justify-content:flex-start}
    .services-wrap{height:auto}
    .services-pin{position:relative;height:auto;padding:5rem var(--pad-x);align-items:flex-start}
    .services-inner{gap:2.5rem}
    .services-header{flex-direction:column;align-items:flex-start;gap:1rem}
    .services-title-big,.why-title-big{font-size:clamp(3rem,18vw,6rem)}
    .services-title-big{transform:none}
    .services-meta,.why-meta{align-items:flex-start;padding-bottom:0;text-align:left}
    .service-item{position:relative;opacity:1;pointer-events:auto;padding:0 !important;margin-bottom:4rem}
    /* mobile-only row-by-row TRAVEL (added by JS as .svc-anim): item fades, its CONTENT slides.
       Motion is on the children so the .service-item box the observer watches never moves -> no vibration.
       Fades/slides in AND out on scroll both directions (visible at top edge AND bottom edge). */
    #svcStack.svc-anim .service-item{opacity:0; transition:opacity .5s ease}
    #svcStack.svc-anim .service-item > *{transform:translateY(38px); transition:transform .65s cubic-bezier(.16,1,.3,1); will-change:transform}
    #svcStack.svc-anim .service-item.svc-in{opacity:1}
    #svcStack.svc-anim .service-item.svc-in > *{transform:none}
    .service-item.svc-right{padding:0}
    .service-stack{height:auto;min-height:0}
    .marquee-w{position:relative;bottom:auto;margin-top:3rem}
    /* why us on mobile, stack planets vertically, no orbit */
    .why-wrap{height:auto}
    .why-pin{position:relative;height:auto;padding:5rem var(--pad-x);align-items:flex-start}
    .why-header{flex-direction:column;align-items:flex-start;gap:1rem}
    /* mobile: the orbiting spheres flatten into a clean EDITORIAL list — a green index number, the
       statement in Space Grotesk, a hairline divider. No heavy box (the full-width sphere read as a
       cheap oval). Each row collides in from an alternating side and throws a spark as it lands. */
    .why-orbit{min-height:0;flex-direction:column;gap:0;display:flex;width:100%;counter-reset:why}
    .orbit-ring-w{display:none}
    .planet{position:relative !important;top:auto !important;left:auto !important;transform:none !important;
      width:100% !important;opacity:1 !important;height:auto !important;min-height:0;
      background:none !important;border:0 !important;border-radius:0 !important;
      border-bottom:1px solid rgba(255,255,255,.1) !important;
      backdrop-filter:none;-webkit-backdrop-filter:none;will-change:auto;
      display:flex !important;flex-direction:row !important;align-items:baseline;justify-content:flex-start;
      text-align:left;gap:1rem;padding:2.35rem .2rem}
    .planet:first-of-type{border-top:1px solid rgba(255,255,255,.1) !important}
    .planet::before{counter-increment:why;content:counter(why,decimal-leading-zero);
      font-family:'JetBrains Mono',monospace;font-size:.82rem;letter-spacing:.12em;color:var(--green);
      flex:none;line-height:1;padding-top:.3rem}
    .planet h3{max-width:none;text-align:left;font-size:clamp(1.25rem,5.2vw,1.7rem);line-height:1.12;font-weight:500;white-space:nowrap}
    .planet.act{background:none !important;border-color:rgba(255,255,255,.1) !important}
    #whyOrbit.sr-ready .planet{opacity:0 !important;transform:translateX(var(--sr-x,-56px)) !important;
      transition:opacity .5s ease, transform .6s cubic-bezier(.2,1.2,.4,1) !important;will-change:transform,opacity}
    #whyOrbit.sr-ready .planet.sr-in{opacity:1 !important;transform:translateX(0) !important}
  }
  /* ---- phone/tablet: dim the fixed orb so hero text stays readable + fit the HUD ---- */
  @media(max-width:900px){
    .orb-wrap{opacity:.4}
    /* the fixed orb travels beside content on desktop, but on a single mobile column its
       dashed rings + orbiting dots float over the stacked sections = clutter. Keep the soft
       orb glow, drop the rings/dots on mobile. */
    .orbit,.orbit-dot{display:none}
    .hud-row{flex-wrap:wrap;gap:.5rem}
    .sub{mix-blend-mode:normal}
    .hero .marquee-w.absorb{display:none}   /* hero service-ticker overlaps the copy on phones */
  }

  /* ---------- ORB STAGE ---------- */
  .orb-wrap{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1;overflow:visible}
  .spark-c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
  .orb-stage{position:absolute;top:0;left:0;width:52vmin;height:52vmin;will-change:transform;transform:translate3d(50vw,50vh,0) translate(-50%,-50%)}
  @media(min-width:901px){ .orb-stage{opacity:0; transition:opacity .45s ease} }   /* orb starts from Services (desktop): hidden from FIRST PAINT so there is no flash on (hard) refresh · JS fades it in at Services */
  .orb-hit{position:absolute;inset:-6%;pointer-events:auto;border-radius:50%;cursor:none}
  .orb{position:absolute;inset:0}
  .orb canvas{width:100%!important;height:100%!important;display:block}
  .orbit{position:absolute;top:50%;left:50%;border-radius:50%;border:1px dashed var(--grey-line-strong);will-change:transform}
  .orbit.o1{width:120%;height:120%;transform:translate(-50%,-50%) rotate(0deg);border-color:rgba(255,255,255,.28)}
  .orbit.o2{width:145%;height:145%;transform:translate(-50%,-50%) rotate(0deg);border-color:rgba(255,255,255,.14)}
  .orbit-dot{position:absolute;top:50%;left:0;width:8px;height:8px;background:var(--green);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(108,255,11,.15)}
  .orbit.o2 .orbit-dot{background:var(--blue);box-shadow:0 0 0 4px rgba(12,21,191,.28)}

  /* ---------- CURSOR ---------- */
  .cursor-wrap{position:fixed;inset:0;pointer-events:none;z-index:100;mix-blend-mode:difference}
  .cursor-dot{position:absolute;top:0;left:0;width:14px;height:14px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);will-change:transform,scale;transition:scale .25s ease}
  .cursor-dot.hov{scale:.35}
  .cursor-ring{position:absolute;top:0;left:0;width:42px;height:42px;border:1px solid rgba(255,255,255,.55);border-radius:50%;transform:translate(-50%,-50%);will-change:transform,width,height,opacity;transition:width .3s ease,height .3s ease,opacity .3s ease}
  .cursor-ring.hov{width:70px;height:70px;opacity:.6}
  @media(hover:none){body{cursor:auto}.cursor-wrap{display:none}}

  /* ---------- GRAIN ---------- */
  .grain{position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.05;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>");mix-blend-mode:overlay}

  /* ── MOBIL · hero ─────────────────────────────────────────────────────────
     Blocul de sus era coborât prin `transform:translateY()` pus pe FIECARE copil
     separat, cu valori diferite: eyebrow 9vh, titlul 9vh, butoanele 3,9vh, iar
     `.hero-inner` -4vh. Transformarea mută elementul vizual dar NU si in flux,
     deci nimeni nu stie unde a ajuns vecinul.
     Regulile au fost scrise pentru heroul englezesc, unde `.sub` e ascuns si
     `.hero-slogan` nu exista. Pe romana sloganul e in plus si nu primea nicio
     deplasare: titlul cobora 76px exact peste el, ilizibile amandoua, pe primul
     ecran al site-ului.
     Deplasarea trece pe parintele comun, deci blocul coboara intreg si spatierea
     naturala ramane intacta. Masurat dupa, la 390x844:
     eyebrow→titlu 28px · titlu→slogan 26px · slogan→butoane 40px ·
     toate la x=20 · blocul se termina la 687/844 · zero suprapuneri. */
  @media(max-width:900px){
    .hero .eyebrow,
    .hero h1.headline,
    .hero .hero-slogan,
    .hero .cta-row{transform:none !important}
    .hero-inner{transform:translateY(5vh) !important}
  }

  /* Pe desktop tot heroul e centrat (masurat: eyebrow, titlu, slogan si buton,
     toate pe aceeasi axa). Pe mobil butonul era singurul scos la stanga, cu
     `align-items:flex-start`, deci iesea din ax fata de restul blocului.
     Masurat dupa: toate patru au centrul la x=193 pe un ecran de 390. */
  @media(max-width:900px){
    .hero .cta-row,
    .hero .cta-btns{align-items:center !important}
  }

    /* Blocul hero depasea containerul pe ecrane mici: 346px intr-un spatiu de 335 pe romana,
       391 pe engleza (masurat 18 oct, 390x844). Continutul centrat iesea in dreapta, cu atat
       mai mult cu cat cuvintele limbii sunt mai late. `min-width:0` NU rezolva (testat in
       browser pe ambele): elementul nu e strans de grila, ci nu avea nicio limita superioara.
       Cu `max-width:100%` intra exact in container in ambele limbi, 335/335. */
    @media(max-width:900px){
      html[lang="de"] .hero .hero-inner, html[lang="en"] .hero .hero-inner{max-width:100% !important}
    }