:root{
    --ink:#ffffff;
    --surface:#f5f5f7;
    --line:rgba(0,0,0,0.08);
    --line-strong:rgba(0,0,0,0.14);
    --text:#1d1d1f;
    --text-muted:#6e6e73;
    --text-faint:#767676;

    --violet:#6d28d9;
    --violet-bright:#a855f7;
    --lilac:#e9d5ff;
    --blue:#d8b4fe;
    --violet-soft:rgba(109,40,217,0.08);

    --reel:#0e0b1a;
    --reel-2:#1c1433;
    --reel-text:#ffffff;
    --reel-text-faint:rgba(255,255,255,0.6);

    --font:'Inter', -apple-system, sans-serif;
    --container: 1180px;
    --pad: clamp(20px, 5vw, 64px);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }
  body{ background:var(--ink); color:var(--text); font-family:var(--font); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  /* Single continuous ambient wash for the whole page, instead of separate
     per-section glows that switched on/off from one section to the next and
     read as a seam every time a plain-white section sat next to a tinted one.
     Fixed (not absolute) so it stays put behind everything at every scroll
     position — one uninterrupted white-to-violet texture the whole page (and
     the transparent parts of the photo cutouts in hero/sito/pacchetti) sits
     on top of, instead of alternating blocks. */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(ellipse 58% 42% at 14% 4%, rgba(168,85,247,0.16), transparent 65%),
      radial-gradient(ellipse 62% 46% at 90% 14%, rgba(109,40,217,0.14), transparent 68%),
      radial-gradient(ellipse 55% 42% at 6% 44%, rgba(216,180,254,0.15), transparent 65%),
      radial-gradient(ellipse 60% 46% at 92% 52%, rgba(168,85,247,0.13), transparent 65%),
      radial-gradient(ellipse 55% 44% at 50% 30%, rgba(109,40,217,0.07), transparent 70%),
      radial-gradient(ellipse 55% 42% at 14% 82%, rgba(109,40,217,0.12), transparent 65%),
      radial-gradient(ellipse 60% 44% at 88% 90%, rgba(216,180,254,0.13), transparent 65%),
      #ffffff;
    animation:drift 48s ease-in-out infinite alternate;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }
  ::selection{ background:var(--violet); color:#fff; }
  :focus-visible{ outline:2px solid var(--violet); outline-offset:3px; }

  .wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

  h1,h2,h3{
    font-family:var(--font); letter-spacing:-0.02em; color:var(--text);
    overflow-wrap:break-word; text-wrap:balance;
  }
  p{ overflow-wrap:break-word; }

  section{
    padding: clamp(64px, 9vw, 116px) 0; position:relative;
    scroll-margin-top:52px;
  }
  /* No per-section flat tint here on purpose: any two-color fill, however
     gently it's feathered at the edges, is still a seam some scroll position
     will land on mid-fade and read as a deliberate "join" rather than a
     continuous canvas. Every section shares the same plain white ground, plus
     the single fixed ambient wash on body::before above — one continuous
     texture behind the whole scroll instead of a background color change. */
  section.on-surface{ background:none; }

  /* "Sempre attivo" banner: full-bleed, full-viewport like the hero, photo
     mirrored horizontally so the people end up on the right and the text sits
     on the left, with no frosted card behind the copy (glow instead, like hero) */
  .section-fullphoto{ height:100vh; height:100svh; min-height:520px; max-height:none; padding:0; }
  /* the source photo has the two people sitting near its own horizontal center
     (checked directly against images/section-3.webp, ~46-48% across) — pushing
     object-position past that mid-point (pre-mirror) is what moves them toward
     the right edge once the scaleX(-1) flip below puts the mirrored image on
     screen; going below that mid-point sends them left instead, which is the
     inversion that happened last round. Left unqualified (no focus-left/right
     class) so this one rule governs every breakpoint instead of being fought by
     the generic mobile focus-left/right rules tuned for a different, much less
     cropped box shape. */
  .section-fullphoto .section-bg-media img{ object-position:60% center; }
  .section-fullphoto .section-bg-media.mirror-x img{ transform:scaleX(-1); }

  /* #attivo now stacks two cutout layers instead of one full-bleed photo:
     .attivo-wave is the decorative wave (same asset as #sito), mirrored and
     kept at its own proportions so it reads as a horizontal band behind the
     subject; .attivo-people is the people cutout, mirrored, object-fit:CONTAIN
     (not cover — cover was cropping their feet at 100vh on normal screens,
     same issue the hero had) anchored to the floor. object-position is set
     pre-mirror: "left" ends up on-screen right once transform:scaleX(-1)
     flips the rendered content within its own box. Both layers need explicit
     absolute positioning — .section-bg-media img isn't positioned by default,
     so otherwise the two layers would stack in normal flow. */
  #attivo .section-bg-media{ overflow:hidden; }
  #attivo .attivo-wave{
    position:absolute; left:0; right:0; top:50%;
    width:100%; height:auto; object-fit:contain;
    transform:translateY(-50%) scaleX(-1);
    opacity:0.9;
  }
  #attivo .attivo-people{
    position:absolute; inset:0;
    object-fit:contain; object-position:left bottom;
    transform:scaleX(-1);
  }
  /* let the text column hug the true left edge of the viewport (just the normal
     side padding) instead of the left edge of the centered 1180px .wrap, which on
     wide screens sat ~300px+ in from the edge and read as "central". Dropping
     max-width alone isn't enough — .wrap is a flex item of .section-bg-overlay
     and still carries its own `margin:0 auto`, so without also killing that
     margin and forcing width:100% it just shrinks to fit its content and gets
     auto-centered as a small floating block instead, which read as even more
     "central" than before. */
  .section-fullphoto .wrap{ max-width:none; width:100%; margin:0; padding-left:calc(max(0px, (100vw - var(--container)) / 2) + var(--pad)); }
  /* narrower screens: the people sit closer to the text, so keep the card near
     the edge (and a bit narrower) instead of pushing it into them */
  @media (max-width:1100px){
  }
  /* the actual vertical lever is the overlay's own align-items:center (it wraps
     .wrap, which just shrinks to its content's height) — override that to raise
     the text toward the top third of the screen instead of dead-center */
  .section-fullphoto .section-bg-overlay{ align-items:flex-start; padding-top:clamp(40px,8.7vw,130px); }
  .section-fullphoto .claim-head{ max-width:410px; }
  /* keep the frosted white card behind the copy here (inherited from
     .section-bg .claim-head) so the text never sits unreadable directly on the
     wave/people layers — just make it block-level and width-bounded. */
  .section-fullphoto.section-bg .claim-head{ display:block; max-width:410px; }
  .section-fullphoto .claim-head h2{ text-shadow:none; }
  .section-fullphoto .claim-head p{ text-shadow:none; }

  .scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:300; pointer-events:none; }
  .scroll-progress-fill{ height:100%; width:100%; background:var(--violet); transform-origin:left; transform:scaleX(0); }

  /* ---------- INTRO SPLASH ---------- */
  .site-intro{
    position:fixed; inset:0; z-index:999; background:#ffffff;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .8s ease, visibility .8s ease;
  }
  .site-intro::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 55% at 50% 45%, rgba(168,85,247,0.12), transparent 70%);
  }
  .site-intro.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .site-intro-inner{
    position:relative; z-index:1; text-align:center;
  }
  .site-intro-name{
    font-weight:700; font-size:clamp(22px,4vw,34px); letter-spacing:0.02em; color:var(--text);
    opacity:0; transform:translateY(10px);
    animation:intro-fade-up 0.9s cubic-bezier(.2,.8,.3,1) forwards;
  }
  @keyframes intro-fade-up{ to{ opacity:1; transform:translateY(0); } }
  .site-intro-rule{
    width:0; height:2px; margin:16px auto 0;
    background:linear-gradient(90deg, var(--violet), var(--violet-bright));
    animation:intro-rule-grow 0.9s cubic-bezier(.2,.8,.3,1) 0.5s forwards;
  }
  @keyframes intro-rule-grow{ to{ width:64px; } }

  /* ---------- SCROLL REVEAL SYSTEM ---------- */
  .reveal{ opacity:0; transform:translateY(64px); transition:opacity 0.9s cubic-bezier(.16,.8,.24,1), transform 0.9s cubic-bezier(.16,.8,.24,1); }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 130ms); }

  /* directional variants for more dynamic split layouts */
  .reveal-left{ opacity:0; transform:translateX(-100px) rotate(-2deg); transition:opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1); }
  .reveal-left.is-visible{ opacity:1; transform:translateX(0) rotate(0deg); }
  .reveal-right{ opacity:0; transform:translateX(100px) rotate(2deg); transition:opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1); }
  .reveal-right.is-visible{ opacity:1; transform:translateX(0) rotate(0deg); }

  /* media gets a heavier 3D reveal (tilt + scale + rise) so photos/video feel like they're "arriving" */
  .reveal-media{
    opacity:0; transform:perspective(1200px) translateY(90px) scale(0.82) rotateX(8deg);
    transform-origin:center bottom;
    transition:opacity 1.1s cubic-bezier(.16,.8,.24,1), transform 1.2s cubic-bezier(.16,.8,.24,1);
  }
  .reveal-media.is-visible{ opacity:1; transform:perspective(1200px) translateY(0) scale(1) rotateX(0deg); }

  /* parallax drift applied via JS transform on top of reveal transform using a wrapper */
  .parallax{ will-change:transform; }

  /* extra-visible bouncy pop-in, used on cards/tiles for a livelier scroll feel */
  .reveal-pop{ opacity:0; transform:scale(0.72) translateY(36px); transition:opacity 0.7s cubic-bezier(.34,1.56,.64,1), transform 0.7s cubic-bezier(.34,1.56,.64,1); }
  .reveal-pop.is-visible{ opacity:1; transform:scale(1) translateY(0); }

  .kicker{ font-size:13px; font-weight:600; color:var(--violet); margin-bottom:10px; }
  .problem-line{ font-size:13.5px; font-weight:600; color:#c0392b; margin-bottom:12px; display:inline-flex; align-items:center; gap:8px; }
  .problem-line::before{ content:"✕"; font-size:11px; opacity:0.75; }
  .claim-split .problem-line, .claim-head .problem-line{ display:inline-flex; }
  .claim-head .problem-line{ justify-content:center; width:100%; }
  .claim-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
  /* Fluid type: clamp with a vw+rem middle term scales smoothly across phone →
     tablet → laptop instead of the steep pure-vw jumps that oversized headings
     on mid-width screens. Floors are set so the longest Italian words in each
     heading never overflow a ~320px viewport. */
  .claim-head h2{ font-size:clamp(30px, 1.8rem + 2.3vw, 55px); font-weight:700; line-height:1.1; }
  .claim-head h2 .accent{ color:var(--violet); }
  .claim-head p{ margin-top:16px; font-size:clamp(16.5px, 1rem + 0.7vw, 20px); color:var(--text-muted); line-height:1.55; max-width:560px; margin-left:auto; margin-right:auto; }
  .claim-links{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
  /* left-aligned variant for claim-text blocks that are text-align:left on
     desktop (e.g. #sito) — overridden back to centered on mobile below, where
     .claim-split .claim-text itself switches to text-align:center, so the CTA
     link doesn't stay stuck on the left while the heading above it is centered. */
  .claim-links-left{ justify-content:flex-start; }

  /* Pages with no photo/media of their own (Come lavoriamo, Contenuti AI,
     Portfolio, FAQ) lean much more on typography to fill a full-screen page, so
     bump their headline/body copy up a step from the site-wide default. */
  #problema .claim-head h2, #contenuti .claim-head h2,
  #portfolio .claim-head h2, #faq .claim-head h2{
    font-size:clamp(32px, 1.6rem + 3.5vw, 64px);
  }
  #problema .claim-head p, #contenuti .claim-head p,
  #portfolio .claim-head p, #faq .claim-head p{
    font-size:clamp(17.5px, 1.05rem + 0.9vw, 23px); max-width:620px;
  }

  .btn-black{
    display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:17px;
    color:#fff; background:var(--text); padding:15px 30px; border-radius:100px;
    transition:background .2s ease, transform .2s ease;
  }
  .btn-black:hover{ background:#000; transform:translateY(-1px); }
  .link-more{ display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:17px; color:var(--violet); }
  .link-more:hover{ color:var(--violet-bright); }

  /* ---------- FULL-BLEED SECTION BACKGROUND IMAGE ---------- */
  /* Base: any section with a full-photo background. */
  .section-bg{ position:relative; overflow:hidden; }
  .section-bg-media{ position:absolute; inset:0; z-index:0; }
  .section-bg-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
  .section-bg > .wrap{ position:relative; z-index:1; }

  /* Variant where the photo *is* the section: height follows the photo's own aspect ratio
     at whatever width the section renders at, so on most screens it scales up with the
     viewport like a real photo instead of sitting at a small fixed size — full page width,
     edge to edge, on any normal laptop/desktop screen. Only bounded by a floor (room for
     the text card on narrow phones) and a ceiling (so it doesn't become absurd on huge
     monitors) — note that `aspect-ratio` + `max-height` together already imply a max
     *width* too (height capped and multiplied by the ratio means the browser won't resolve
     the box wider than that, even with no max-width declared) so past that point it's
     centered, not full-bleed — the `max-width` below just makes that implicit cap
     explicit/documented, and margin:auto is what actually centers it (its absence is what
     made the section hug the left edge on very wide screens instead of sitting centered).
     The text sits in an absolutely-positioned overlay so it can never stretch the section
     past that height — which is what let long copy silently crop the photo more than
     intended, or land the boundary with the next section in an unpredictable place.
     Default ratio here is the hero's own photo (9:5); `.ratio-cinematic` below swaps in the
     32:9-ish ratio of the newer wide banner photos. */
  .section-bg-photo{ aspect-ratio:9/5; min-height:340px; max-height:820px; max-width:1476px; margin:0 auto; padding:0; }
  .section-bg-photo.ratio-cinematic{ aspect-ratio:3910/1088; min-height:340px; max-height:620px; max-width:2228px; }
  .section-bg-overlay{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; }

  /* on narrow phones the floor above forces a container narrower than the photo's own
     ratio, so object-fit:cover has to crop the sides quite a bit — shift the crop window
     toward whichever side actually holds the people in each photo, instead of the empty
     middle, so cover never crops out the subject */
  @media (max-width:640px){
    .section-bg-media.focus-right img{ object-position:82% center; }
    .section-bg-media.focus-left img{ object-position:18% center; }
  }

  /* Variant for a decorative full-width backdrop that sits behind normal-flow content
     (e.g. "Sito Web": the laptop + text determine the section's height, not the photo).
     Rather than stretching+cropping the photo to whatever height that content happens to
     produce, this shows it at its own natural, uncropped proportions — full width, height
     following from that, vertically centered in whatever room the section has. */
  .section-bg-media.natural{ top:50%; left:0; right:0; bottom:auto; height:auto; transform:translateY(-50%); }
  .section-bg-media.natural img{ height:auto; object-fit:unset; }

  .section-bg-text-left{ text-align:left; max-width:520px; margin:0; }
  .section-bg-text-left p{ margin-left:0; margin-right:0; }

  .section-bg .claim-text, .section-bg .claim-head{
    background:rgba(255,255,255,0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    padding:32px 36px; border-radius:24px; display:inline-block;
  }
  /* hero specifically: no card behind the headline, just the type sitting on the photo —
     a soft white glow (not a hard-edged card) keeps it legible wherever it happens to land
     on the photo, including over the team's dark clothing on the tight mobile crop */
  .hero .claim-head{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; border-radius:0; display:block; }
  .hero .claim-head h1{ text-shadow:0 2px 28px rgba(255,255,255,0.9), 0 1px 3px rgba(255,255,255,0.95); }
  .hero .claim-head .link-more{ text-shadow:0 2px 14px rgba(255,255,255,0.95); }

  /* ---------- IL PROBLEMA ---------- */
  #problema .icon-dot{ position:relative; animation:icon-pulse-ring 3.2s ease-in-out infinite; }
  #problema .problem-card:nth-child(2) .icon-dot{ animation-delay:0.35s; }
  #problema .problem-card:nth-child(3) .icon-dot{ animation-delay:0.7s; }
  @keyframes icon-pulse-ring{
    0%,100%{ box-shadow:0 0 0 0 rgba(109,40,217,0.28); }
    50%{ box-shadow:0 0 0 9px rgba(109,40,217,0); }
  }

  /* generic video/media placeholder used across every claim section */
  .media-frame{
    position:relative; margin-top:8px; border-radius:24px; overflow:hidden;
    aspect-ratio:16/9; background:linear-gradient(150deg, var(--reel-2), var(--reel) 65%, #06040d);
  }
  .media-frame::before{
    content:""; position:absolute; inset:-10%;
    background:radial-gradient(ellipse 65% 55% at 25% 25%, rgba(139,124,255,0.28), transparent 60%), radial-gradient(ellipse 75% 65% at 78% 80%, rgba(76,111,255,0.24), transparent 60%), radial-gradient(ellipse 50% 45% at 55% 90%, rgba(201,182,255,0.18), transparent 60%);
    animation:drift 22s ease-in-out infinite alternate;
  }
  @keyframes drift{ 0%{ transform:scale(1) translate(0,0);} 100%{ transform:scale(1.1) translate(-1.5%,-2%);} }
  .auto-video{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
  .auto-video.is-ready{ opacity:1; }
  /* placeholder frames (no real video/image loaded yet) get a soft diagonal
     sheen sweeping across, so they read as "content is being generated" rather
     than an empty box — drop .is-placeholder once real media is wired in */
  .media-frame.is-placeholder::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.14) 50%, transparent 58%);
    background-size:260% 260%;
    animation:shimmer-sweep 5.5s ease-in-out infinite;
  }
  @keyframes shimmer-sweep{ 0%{ background-position:130% -20%; } 100%{ background-position:-30% 120%; } }
  .media-note{
    position:absolute; bottom:14px; right:16px; z-index:2;
    font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
    color:rgba(255,255,255,0.4); pointer-events:none;
    display:inline-flex; align-items:center; gap:6px;
  }
  .gen-dot{ width:6px; height:6px; border-radius:50%; background:var(--violet-bright); animation:dot-pulse 1.6s ease-in-out infinite; }
  @keyframes dot-pulse{ 0%,100%{ opacity:0.35; transform:scale(0.85); } 50%{ opacity:1; transform:scale(1.2); } }
  .media-frame img.auto-fill{
    position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  }

  /* ---------- NAV ---------- */
  header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease; }
  header.scrolled{ border-bottom-color:var(--line); background:rgba(255,255,255,0.96); }
  /* Close to the content container so the logo doesn't stick out far to the
     left of the page body (the old 1400px nav against a 1180px body read as
     "no left padding"), but a little wider so all 9 links fit on one row
     without shrinking them to nothing. */
  nav{ max-width:1320px; margin:0 auto; padding:0 var(--pad); height:52px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:24px; }
  .logo{ flex:0 0 auto; font-weight:700; font-size:18px; color:var(--text); display:flex; align-items:center; gap:7px; white-space:nowrap; }
  .logo-mark{ width:32px; height:32px; border-radius:7px; flex:0 0 auto; }
  /* one row, never wraps: fluid gap + a compact size so all 9 links + the logo
     fit the nav down to the 960px breakpoint where they're replaced by the
     hamburger. Measured total ~1130px at the widest gap. */
  .nav-links{ display:flex; flex-wrap:nowrap; gap:clamp(13px, 1.5vw, 26px); font-size:15.5px; color:var(--text-muted); }
  .nav-links a{ white-space:nowrap; }
  .nav-links a:hover{ color:var(--text); }
  .nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; }
  .nav-toggle span{ width:20px; height:1.5px; background:var(--text); display:block; transition:transform .25s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

  /* ---------- HERO ---------- */
  /* the opener: fills the visible viewport on load for impact, everything else is reached
     by scrolling — deliberately NOT using the shared .section-bg-photo aspect-ratio sizing
     (that's tuned to make the photo itself the whole point at a modest height; here the
     photo crops to whatever the viewport's own shape is, same as any full-screen hero). */
  .hero.section-bg{ height:100vh; height:100svh; min-height:520px; max-height:none; padding:0; }
  /* Hero cutout, split into two layers on the SAME 2840x1381 canvas (transparent
     margin ~44px on the sides, ~60px top/bottom):
       .hero-cutout-left  = plant + vase + framed art
       .hero-cutout-right = the 3-person group + armchair
     object-fit:CONTAIN (not cover) so nothing is ever clipped — the framed
     picture at the top and the heels at the bottom always stay in frame,
     whatever the viewport shape. Each half is anchored to its own outer edge
     and the floor: left group to the left, right group to the right, both
     sitting at the bottom, with the empty middle left for the centred headline.
     .section-bg-media supplies position:absolute;inset:0. Both hidden on mobile. */
  .hero-cutout-layer{ position:absolute; inset:0; }
  /* specificity note: .section-bg-media img sets object-fit/position, so the
     per-side overrides must be qualified the same way to win the cascade. */
  .section-bg-media img.hero-cutout-left{ object-fit:contain; object-position:left bottom; }
  .section-bg-media img.hero-cutout-right{ object-fit:contain; object-position:right bottom; }
  /* the left group (plant + framed art) reads too high next to the people —
     push it down so it sits lower than the right group. Overflow past the hero
     bottom is clipped by .section-bg{overflow:hidden}. Tune this one value. */
  .hero-cutout-left{ transform:translateY(clamp(48px, 10vh, 130px)); }
  .hero h1{ font-size:clamp(37px, 1.7rem + 4.8vw, 84px); font-weight:800; line-height:1.08; letter-spacing:-0.03em; }
  .hero h1 .accent{ color:var(--violet); }
  .hero-actions{ margin-top:30px; display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }

  /* Layout variant: text on one side, a single media block on the other */
  .claim-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; margin-top:8px; }
  .claim-split .claim-text{ text-align:left; }
  .claim-split .claim-text .kicker{ display:block; }
  .claim-split .claim-text h2{ font-size:clamp(28px, 1.45rem + 1.9vw, 45px); font-weight:700; line-height:1.12; }
  .claim-split .claim-text p{ margin-top:14px; font-size:clamp(15.5px, 0.95rem + 0.4vw, 17.5px); color:var(--text-muted); line-height:1.6; max-width:440px; }
  .claim-split .claim-media{ position:relative; }
  .claim-split .media-frame{ aspect-ratio:16/9; border-radius:26px; }
  /* reversed variant: media first (left), text second (right) — used to break the repeating pattern */
  .claim-split.reverse-cols{ grid-template-columns:1.15fr 0.85fr; gap:96px; }

  /* Sito Web: keep the frosted card behind the copy (inherited from
     .section-bg .claim-text) so the text never overlaps the decorative wave
     unreadably; just raise the block to the top of its grid row instead of
     sitting vertically centered against the taller floating-laptop column. */
  #sito .claim-text{ display:block; align-self:flex-start; }
  @media (max-width:860px){
    .claim-split, .claim-split.reverse-cols{ grid-template-columns:1fr; gap:36px; }
    .claim-split .claim-text{ text-align:center; }
    .claim-split .claim-text p{ margin-left:auto; margin-right:auto; }
    .claim-split .claim-text .claim-links{ justify-content:center; }
    .claim-split .claim-media{ margin-top:8px; }
  }

  /* cutout product shot with no background, appears to float above the page.
     Capped and centered as ONE composition (backdrop + laptop together) so the backdrop
     always stays sized relative to the laptop — without this cap, on a wide column the
     backdrop (sized in %) grows past the laptop's own max-width and ends up reading as
     the main subject instead of what's behind it. */
  .floating-shot{ display:flex; align-items:center; justify-content:center; overflow:visible; max-width:600px; margin:0 auto; }
  .floating-img{
    width:120%; max-width:640px; margin:-8px auto;
    animation:floaty 6s ease-in-out infinite;
  }
  @keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
  @media (max-width:860px){ .floating-img{ width:82%; max-width:420px; margin:0 auto; } }

  /* Layout variant: a slide carousel, --carousel-visible tiles in view at a
     time, moved only by the side arrows + an autoplay timer (JS sets a
     transform on .claim-gallery — no native scrolling, so no scrollbar and no
     drag/wheel/swipe path). JS clones the tile set before and after the real
     tiles so it loops infinitely in both directions and adapts to however many
     .media-frame tiles the markup contains. .carousel-viewport clips the rest;
     --carousel-visible drives how many fit on screen and each tile's width,
     overridden per breakpoint below. Tiles keep the photos' own portrait ratio
     (900x1612 — every "Contenuti AI" export shares it) so nothing gets cropped. */
  /* Own wider container instead of the shared 1180px .wrap (which the
     claim-head text above stays inside) — lets the tiles run bigger, and the
     generous margin-top is a deliberate fixed gap so the fixed/blurred header
     has clear whitespace above the photos instead of sitting on them when
     this section is what's in view. */
  .carousel-wrap{ max-width:1440px; margin:0 auto; padding:0 var(--pad); }
  .carousel{ position:relative; margin-top:80px; display:flex; align-items:center; gap:10px; }
  .carousel-viewport{ overflow:hidden; flex:1 1 auto; min-width:0; touch-action:pan-y; }
  .claim-gallery{
    --carousel-visible:4;
    display:flex; gap:16px; margin:0; padding:4px 2px;
    transition:transform .5s cubic-bezier(.16,.8,.24,1);
    will-change:transform;
  }
  .claim-gallery .media-frame{
    flex:0 0 calc((100% - (var(--carousel-visible) - 1) * 16px) / var(--carousel-visible));
    aspect-ratio:900/1612; border-radius:22px; height:auto;
  }
  .carousel-arrow{
    flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
    background:#fff; color:var(--text); font-size:22px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, transform .2s ease, opacity .2s ease;
  }
  .carousel-arrow:hover{ background:var(--surface); transform:scale(1.06); }
  .carousel-arrow:disabled{ opacity:0.35; cursor:default; transform:none; }
  @media (max-width:860px){
    .claim-gallery{ --carousel-visible:3; }
  }
  /* phones: bigger tiles (one and a bit, the next one peeks out as a cue),
     no arrows — the carousel is swiped (see js/main.js) and autoplays */
  @media (max-width:560px){
    .claim-gallery{ --carousel-visible:1.35; }
    .carousel-arrow{ display:none; }
    /* full-bleed, natively scrollable with momentum (no snapping) — js/main.js
       keeps it endless by re-centring the scroll position on the clone sets */
    .carousel{ margin:48px calc(-1 * var(--pad)) 0; }
    .carousel-viewport{ overflow-x:auto; overflow-y:hidden; touch-action:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
    .carousel-viewport::-webkit-scrollbar{ display:none; }
    .claim-gallery{ transform:none !important; transition:none !important; padding-left:var(--pad); }
  }

  /* Layout variant: narrower centered inset media, lighter visual weight */
  .claim-inset{ max-width:1080px; margin:40px auto 0; }
  .claim-inset .media-frame{ aspect-ratio:16/10; border-radius:24px; }

  /* cutout with heavily feathered edges that dissolve into the page background —
     no frame, no visible crop line on the arms */
  .integrated-shot{ width:100%; display:block; margin:0 auto; }

  /* ---------- STATS ROW ---------- */
  .stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center; }
  .stat-big .num{ font-size:clamp(30px,4vw,44px); font-weight:800; color:var(--text); line-height:1; }
  .stat-big .num .unit{ font-size:0.5em; font-weight:700; color:var(--violet); }
  .stat-big .lbl{ margin-top:10px; font-size:13.5px; color:var(--text-muted); line-height:1.5; max-width:180px; margin-left:auto; margin-right:auto; }

  /* ---------- PROBLEM (compact, apple-style small triptych) ---------- */
  .problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
  .problem-card{ text-align:center; }
  .problem-card .icon-dot{ width:44px; height:44px; margin:0 auto 18px; border-radius:50%; background:var(--violet-soft); display:flex; align-items:center; justify-content:center; color:var(--violet); font-weight:700; font-size:15px; }
  .problem-card h3{ font-size:20px; font-weight:700; margin-bottom:8px; }
  .problem-card p{ font-size:15.5px; color:var(--text-muted); line-height:1.6; max-width:280px; margin:0 auto; }

  /* ---------- DEMO GRID ---------- */
  /* 4 per row on desktop, 3 on the last row centred (flex-wrap, not grid, so an
     incomplete last row stays centred instead of hugging the left edge) */
  .demo-wrap{ max-width:1400px; margin:44px auto 0; padding:0 var(--pad); }
  .demo-grid{ --gap:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); }
  .demo-card{
    flex:0 0 calc((100% - 3 * var(--gap)) / 4); display:block; position:relative;
    border-radius:20px; overflow:hidden; background:var(--reel); aspect-ratio:16/10;
    transition:opacity 1.1s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1), box-shadow .5s ease;
  }
  /* first row: three big tiles, second row: the other four */
  .demo-card:nth-child(-n+3){ flex-basis:calc((100% - 2 * var(--gap)) / 3); }
  .demo-card img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .8s cubic-bezier(.16,.8,.24,1); }
  .demo-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,4,13,0.82), transparent 55%); pointer-events:none; }
  .demo-card:hover, .demo-card:focus-visible{ transform:translateY(-6px); box-shadow:0 22px 44px -18px rgba(76,60,170,0.5); }
  .demo-card:hover img{ transform:scale(1.04); }
  .demo-meta{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; color:#fff; display:flex; flex-direction:column; gap:2px; }
  .demo-meta b{ font-size:16px; font-weight:700; }
  .demo-meta span{ font-size:12.5px; color:rgba(255,255,255,0.75); }

  /* ---------- PRICING (apple compare-tile style) ---------- */
  .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
  .price-card{ border:1px solid var(--line); border-radius:22px; padding:32px 26px; background:#fff; display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.16,.8,.24,1), box-shadow .4s ease; }
  .price-card:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -28px rgba(29,29,31,0.22); }
  .price-card.featured{ border-color:var(--violet); box-shadow:0 30px 60px -34px rgba(109,40,217,0.35); }
  .price-tier{ font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--violet); }
  .price-card h3{ font-size:22px; font-weight:700; margin:10px 0 4px; }
  .price-target{ font-size:13px; color:var(--text-faint); margin-bottom:20px; }
  .price-nums{ padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:20px; }
  .price-setup{ font-size:12.5px; color:var(--text-muted); }
  .price-setup b{ color:var(--text); font-weight:700; }
  .price-monthly{ margin-top:6px; font-size:14px; color:var(--text-muted); }
  .price-monthly b{ color:var(--violet); font-weight:800; }
  .price-features{ list-style:none; flex-grow:1; margin-bottom:24px; }
  .price-features li{ font-size:13px; color:var(--text-muted); padding:6px 0 6px 18px; position:relative; }
  .price-features li::before{ content:"—"; position:absolute; left:0; color:var(--violet); }

  /* Pacchetti: the backdrop photo now covers the section's full height (like the
     hero/section-fullphoto), so there's no more top-pinned band to be inconsistent
     with the vertically-centered content — back to the generic full-screen section
     behavior, just with a soft tint over the photo so the 3 white pricing cards
     stay legible on top of it, and tightened internal spacing so the title + cards
     still comfortably fit inside one screen. */
  #pacchetti{ padding:clamp(56px,8vw,96px) 0 clamp(48px,7vw,80px); }
  #pacchetti .claim-head{ margin-bottom:26px; }
  #pacchetti .pricing-grid{ margin-top:0; gap:16px; }
  #pacchetti .price-card{ padding:24px 22px; }
  #pacchetti .price-nums{ padding:14px 0; margin-bottom:14px; }
  #pacchetti .price-features{ margin-bottom:16px; }
  #pacchetti .price-features li{ padding:4px 0 4px 16px; font-size:12.5px; }
  #pacchetti .price-target{ margin-bottom:14px; }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width:720px; margin:0 auto; border-top:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{ width:100%; background:none; border:none; color:var(--text); text-align:left; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; font-size:17.5px; font-weight:600; }
  .faq-icon{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line-strong); position:relative; flex-shrink:0; transition:transform .3s ease, border-color .3s ease; }
  .faq-icon::before,.faq-icon::after{ content:""; position:absolute; background:var(--text-muted); top:50%; left:50%; transform:translate(-50%,-50%); }
  .faq-icon::before{ width:9px; height:1px; }
  .faq-icon::after{ width:1px; height:9px; transition:opacity .25s ease; }
  .faq-item.open .faq-icon::after{ opacity:0; }
  .faq-item.open .faq-icon{ border-color:var(--violet); transform:rotate(180deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.6,.35,1); }
  .faq-a p{ padding:0 4px 22px; font-size:15px; color:var(--text-muted); line-height:1.6; }

  /* ---------- FINAL CTA ---------- */
  .final-cta{ text-align:center; padding:clamp(90px,13vw,150px) 0; }
  .final-cta .kicker{ display:block; justify-content:center; }
  .final-cta h2{
    font-size:clamp(34px, 1.6rem + 3.9vw, 70px); font-weight:800; max-width:820px; margin:0 auto; line-height:1.07; letter-spacing:-0.03em;
  }
  .final-cta h2 .accent{ color:var(--violet); }
  .final-cta p{ margin-top:18px; font-size:17px; color:var(--text-muted); max-width:480px; margin-left:auto; margin-right:auto; line-height:1.55; }
  .final-cta .btn-black{ margin-top:34px; font-size:16px; padding:16px 32px; position:relative; animation:cta-glow 3s ease-in-out infinite; }
  @keyframes cta-glow{
    0%,100%{ box-shadow:0 0 0 0 rgba(109,40,217,0.35), 0 8px 20px -8px rgba(29,29,31,0.3); }
    50%{ box-shadow:0 0 0 10px rgba(109,40,217,0), 0 8px 20px -8px rgba(29,29,31,0.3); }
  }

  /* ---------- CONTATTI (contact form) ---------- */
  .contact-form{ max-width:640px; margin:36px auto 0; text-align:left; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .form-field{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
  .form-field label{ font-size:12.5px; font-weight:600; color:var(--text-muted); }
  .form-field .field-opt{ font-weight:500; color:var(--text-faint); }
  .form-field input, .form-field textarea, .form-field select{
    font-family:inherit; font-size:15px; color:var(--text); padding:12px 14px;
    border:1px solid var(--line-strong); border-radius:12px; background:#fff;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .form-field select{
    appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
  }
  .form-field textarea{ resize:vertical; min-height:110px; }
  .form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
  .form-field input:invalid:not(:placeholder-shown){ border-color:#c0392b; }
  .form-consent{
    display:flex; align-items:flex-start; gap:10px; margin:4px 0 20px;
    font-size:13px; line-height:1.5; color:var(--text-muted); cursor:pointer;
  }
  .form-consent input{ margin-top:3px; width:16px; height:16px; accent-color:var(--violet); flex:0 0 auto; cursor:pointer; }
  .form-consent a{ color:var(--violet); font-weight:600; }
  .form-consent a:hover{ color:var(--violet-bright); }
  .contact-form .btn-black{ margin-top:6px; }
  .contact-form .btn-black:disabled{ opacity:0.6; cursor:progress; transform:none; }
  /* honeypot: off-screen (not display:none, which some bots skip) */
  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .form-status{ margin-top:14px; font-size:13.5px; color:var(--text-muted); min-height:1.4em; }
  .form-status.is-success{ color:#16794f; }
  .form-status.is-error{ color:#c0392b; }
  @media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

  /* recapiti diretti sotto al form */
  .contact-direct{ max-width:640px; margin:28px auto 0; text-align:left; }
  .contact-direct p{ font-size:13.5px; font-weight:600; color:var(--text-muted); margin-bottom:10px; }
  .contact-direct ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 32px; }
  .contact-direct li{ font-size:15px; color:var(--text); }
  .contact-direct li span{ font-size:12.5px; font-weight:600; color:var(--text-faint); margin-right:8px; text-transform:uppercase; letter-spacing:0.04em; }
  .contact-direct a{ color:var(--violet); font-weight:600; }
  .contact-direct a:hover{ color:var(--violet-bright); }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--surface); border-top:1px solid var(--line); padding:44px 0 24px; }
  .footer-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:28px; padding-bottom:28px; border-bottom:1px solid var(--line); }
  .footer-brand .logo{ display:inline-flex; font-size:16px; color:var(--text); margin-bottom:12px; }
  .footer-brand .logo-mark{ width:28px; height:28px; }
  .footer-brand p{ font-size:12.5px; line-height:1.6; color:var(--text-muted); max-width:300px; }
  .footer-col h4{ font-size:12.5px; font-weight:700; margin-bottom:12px; }
  .footer-col a{ display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:9px; }
  .footer-col a:hover{ color:var(--text); }
  .footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:18px; }
  .footer-copy{ font-size:11.5px; color:var(--text-faint); }
  .footer-legal{ display:flex; gap:18px; flex-wrap:wrap; }
  a.footer-copy:hover{ color:var(--text); }

  /* ---------- COOKIE NOTICE (self-hosted, no third-party script) ---------- */
  .cookie-notice{
    position:fixed; left:20px; bottom:20px; z-index:400; max-width:360px;
    background:rgba(255,255,255,0.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--line-strong); border-radius:18px; padding:20px 22px;
    box-shadow:0 24px 60px -24px rgba(29,29,31,0.4);
    opacity:0; transform:translateY(16px) scale(0.98); pointer-events:none;
    transition:opacity .4s cubic-bezier(.16,.8,.24,1), transform .4s cubic-bezier(.16,.8,.24,1);
  }
  .cookie-notice.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .cookie-notice p{ font-size:12.5px; line-height:1.55; color:var(--text-muted); }
  .cookie-notice-actions{ margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .cookie-notice-actions a{ font-size:12px; font-weight:600; color:var(--violet); }
  .cookie-notice-actions a:hover{ color:var(--violet-bright); }
  .cookie-notice .btn-black{ font-size:12.5px; padding:9px 18px; }
  @media (max-width:480px){ .cookie-notice{ left:12px; right:12px; max-width:none; bottom:12px; } }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    .nav-toggle{ display:flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; margin-right:-10px; }
    /* dropdown panel under the header (absolute, not fixed: the header's
       backdrop-filter is the containing block for fixed descendants anyway) */
    .nav-links{
      display:none; position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0; padding:8px var(--pad) 16px;
      background:#fff; border-bottom:1px solid var(--line);
      font-size:17px; color:var(--text);
      max-height:calc(100vh - 52px); max-height:calc(100dvh - 52px); overflow-y:auto;
    }
    .nav-links.open{ display:flex; }
    .nav-links a{ padding:13px 0; border-bottom:1px solid var(--line); }
    .nav-links a:last-child{ border-bottom:none; }
    .stats-row{ grid-template-columns:1fr 1fr; row-gap:32px; }
    .problem-grid{ grid-template-columns:1fr; gap:28px; }
    .pricing-grid{ grid-template-columns:1fr; }
    .demo-card, .demo-card:nth-child(-n+3){ flex-basis:calc((100% - var(--gap)) / 2); }
    .footer-grid{ grid-template-columns:repeat(3,1fr); }
    .footer-brand{ grid-column:1 / -1; }
  }
  @media (max-width:560px){
    section{ padding:52px 0; }
    .demo-card, .demo-card:nth-child(-n+3){ flex-basis:100%; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .footer-col:last-child{ grid-column:1 / -1; }
  }

  /* ---------- MOBILE: drop the heavy decorative imagery ----------
     On phones the cutout photos (hero group, floating laptop, the #attivo
     people) either crop to nothing or just cost bandwidth. Hide them and keep
     only the purple-fluid wave as the section graphic — zoomed in hard so it
     still reads as a bold abstract element rather than a thin faint ribbon.
     (The images are display:none but still downloaded — to skip the fetch too,
     swap these <img> for <picture> with a mobile <source>, or lazy-swap in JS.) */
  @media (max-width:760px){
    .hero .section-bg-media{ display:none; }
    .hero.section-bg{ height:auto; min-height:0; padding:120px 0 72px; }
    .hero .section-bg-overlay{ position:static; }
    /* let the headline wrap naturally instead of at the hard-coded desktop break */
    .hero h1 br{ display:none; }

    #sito .claim-media{ display:none; }
    #sito .claim-text, #attivo .claim-head{ padding:26px 22px; }
    /* #attivo card: centred like the other sections instead of hugging the left */
    #attivo .section-bg-text-left{ text-align:center; width:100%; margin-left:auto; margin-right:auto; }
    #attivo .section-bg-text-left p{ margin-left:auto; margin-right:auto; }
    /* 16px inputs: anything smaller makes iOS Safari zoom the page on focus */
    .form-field input, .form-field textarea, .form-field select{ font-size:16px; }

    #attivo .attivo-people{ display:none; }
    #attivo.section-fullphoto{ height:auto; min-height:0; padding:96px 0; }
    #attivo.section-fullphoto .wrap{ padding-left:var(--pad); }
    #attivo .section-bg-overlay{ position:static; padding-top:0; }

    /* purple fluid: behind the white cards only a few pixels peeked out at the
       edges. On phones it becomes a full-width strip above the content that
       shows just the central fragment of the wave (object-fit:cover), cropped
       to the screen width. */
    #sito .section-bg-media, #attivo .section-bg-media, #pacchetti .section-bg-media{
      position:relative; inset:auto; top:auto; transform:none;
      height:clamp(150px, 48vw, 220px); margin:0 0 20px; overflow:hidden;
    }
    #sito .section-bg-media img, #pacchetti .section-bg-media img, #attivo .attivo-wave{
      position:static; width:100%; height:100%; max-width:none; margin:0;
      object-fit:cover; object-position:center; opacity:1;
    }
    #attivo .attivo-wave{ transform:scaleX(-1); }
    #sito .section-bg-media img{ object-position:30% center; } /* a different stretch of the wave than #attivo */
    #sito.section-bg, #pacchetti.section-bg{ padding-top:36px; }
    #attivo.section-fullphoto{ padding:36px 0 72px; }
  }

  /* ---------- TOUCH / MOBILE PERFORMANCE ----------
     On phones these continuous effects cost GPU work on every frame and made
     the first screen stutter: the full-screen fixed background re-scaling
     forever (drift), the header blurring whatever scrolls under it, box-shadow
     pulses (repainted each frame) and the drift layers hidden behind the
     carousel photos. Desktop keeps all of them. */
  @media (max-width:760px), (hover:none) and (pointer:coarse){
    body::before{ animation:none; }
    header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,0.97); }
    #problema .icon-dot, .final-cta .btn-black{ animation:none; }
    .media-frame::before{ animation:none; }
  }