/* ==========================================================================
   NIMBO SRL — Design System (light)
   A white-canvas, glass, bento-driven visual language in the spirit of
   21st.dev: floating translucent surfaces, spotlight cards, a dark video
   hero band, bento feature grids, and restrained purple accents anchored
   on the brand's own hex (#b058ef, taken from the logo asset). The hero
   (video) and the highlight-band CTA stay intentionally dark/purple as
   accent zones against an otherwise white page — everything else here
   reads off the light token set below.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand violet scale — anchored on the literal logo hex #b058ef (500) */
  --violet-50:  #f7edff;
  --violet-100: #eddaff;
  --violet-200: #e0bfff;
  --violet-300: #d8b4fe;
  --violet-400: #c084fc;
  --violet-500: #b058ef;
  --violet-600: #9a3fe0;
  --violet-700: #7c3fbf;
  --violet-800: #5b2d8e;
  --violet-900: #3a1a6e;
  --violet-950: #1c0835;

  /* Surfaces — bg-0/1 are the literal white canvas; bg-2/3 are gentle
     off-white layers used only to separate cards from the page itself */
  --bg-0: #f7f6fb;
  --bg-1: #ffffff;
  --bg-2: #fbfaff;
  --bg-3: #f2f0f8;
  --surface: rgba(23,18,37,0.035);
  --surface-hover: rgba(23,18,37,0.055);
  --surface-strong: rgba(23,18,37,0.08);
  --border: rgba(23,18,37,0.10);
  --border-soft: rgba(23,18,37,0.07);
  --border-accent: rgba(176,88,239,0.45);
  --glass-bg: rgba(255,255,255,0.82);

  /* Text */
  --text-primary: #171225;
  --text-secondary: #5b5570;
  --text-tertiary: #918c9f;
  --text-on-accent: #ffffff;

  /* Accent */
  --accent: var(--violet-500);
  --accent-2: var(--violet-600);
  --accent-soft: rgba(176,88,239,0.12);
  --accent-glow: rgba(176,88,239,0.35);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  /* Shadows — soft and light, standard light-mode ink opacities */
  --shadow-sm: 0 2px 8px rgba(23,18,37,0.06);
  --shadow-md: 0 14px 34px -12px rgba(23,18,37,0.14);
  --shadow-lg: 0 30px 70px -20px rgba(23,18,37,0.18);
  --shadow-glow: 0 0 0 1px var(--border-accent), 0 0 40px -6px var(--accent-glow);

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: .18s;
  --dur: .35s;
  --dur-slow: .6s;

  /* Layout */
  --container-w: 1240px;
  --nav-h: 84px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-1);
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Ambient background mesh: fixed, barely-there wash on the white canvas */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 900px 600px at 12% -8%, rgba(176,88,239,0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 88% 12%, rgba(124,63,191,0.06), transparent 55%),
    radial-gradient(ellipse 800px 700px at 50% 100%, rgba(91,45,142,0.05), transparent 60%),
    var(--bg-1);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    linear-gradient(rgba(23,18,37,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,18,37,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 75%);
}

/* Tells mobile browsers not to hold every tap for ~300ms waiting to see
   if a second tap follows (the double-tap-to-zoom disambiguation delay) —
   without it, taps on links/buttons (e.g. the mobile dropdown accordion)
   land with a small but noticeable pause before anything visibly reacts. */
a, button { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--accent); color: var(--text-on-accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); }

p { color: var(--text-secondary); }
p + p { margin-top: 14px; }
strong { color: var(--text-primary); font-weight: 600; }

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.text-gradient, .gradient-text {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 28px; }
.section { padding: 108px 0; position: relative; }
@media (max-width: 768px) { .section { padding: 72px 0; } }

.divider {
  height: 1px;
  max-width: var(--container-w);
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.text-center { text-align: center; }
.text-right { text-align: right; }

.section-header { max-width: 640px; margin-bottom: 52px; }
.section-header.text-center { margin-left: auto; margin-right: auto; }
.section-header .mono { display: inline-block; margin-bottom: 14px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { font-size: 1.05rem; max-width: 54ch; }

/* --------------------------------------------------------------------------
   4. BUTTONS & BADGES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn svg { transition: transform var(--dur-fast) var(--ease); flex-shrink: 0; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--violet-700));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(176,88,239,0.55);
}
.btn-primary:hover { box-shadow: 0 12px 34px -8px rgba(176,88,239,0.75); transform: translateY(-2px); }

.btn-outline {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
  backdrop-filter: blur(12px);
}
.btn-outline:hover { border-color: var(--border-accent); background: var(--surface-hover); }

.btn-ghost { color: var(--text-secondary); padding-left: 4px; padding-right: 4px; }
.btn-ghost:hover { color: var(--accent-2); gap: 14px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5. NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
  /* Invisible at the very top of the page — the hero underneath (video or
     photo) shows through fully — then fades in its light glass background
     and blur gradually as --scroll-progress (set by site.js) climbs from
     0 to 1 over the first 200px of scroll. */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--glass-bg) calc(var(--scroll-progress, 0) * 100%), transparent);
  backdrop-filter: blur(calc(var(--scroll-progress, 0) * 18px));
  -webkit-backdrop-filter: blur(calc(var(--scroll-progress, 0) * 18px));
  box-shadow: 0 8px 24px -14px rgba(23,18,37, calc(var(--scroll-progress, 0) * 0.35));
  transition: background var(--dur-fast) linear;
}
/* While the mobile drawer is open, force the navbar fully opaque regardless
   of actual scroll position — otherwise a transparent navbar at the top of
   the home page left a hard seam right where the drawer's solid background
   begins underneath it. */
.navbar.menu-open {
  /* Near-opaque (not the thin-bar --glass-bg alpha) so page content behind
     the full-height drawer below it can't be read through either panel. */
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.nav-inner {
  /* 4 explicit tracks — logo, centered links, lang+socials, hamburger —
     so the middle nav-links group sits truly centered in the bar instead
     of just trailing the logo, regardless of how wide the two side groups
     are. Grid (not flex+margin-auto) is what makes true centering with
     unequal side content possible. */
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-icon img { height: 34px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-links > a {
  position: relative;
  padding: 10px 16px;
  border-radius: var(--r-full);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  border: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-links > a:hover { color: var(--text-primary); background: var(--surface); }
.nav-links > a.active { color: var(--text-primary); background: var(--surface-strong); border-color: var(--border-accent); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--r-full);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  border: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-dropdown-toggle svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active { color: var(--text-primary); background: var(--surface); }
.nav-dropdown-toggle.active { border-color: var(--border-accent); }
.nav-dropdown.open .nav-dropdown-toggle { color: var(--text-primary); background: var(--surface-strong); }
.nav-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: 50;
}
.nav-dropdown.open .dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dropdown-menu a:hover, .dropdown-menu a.active { color: var(--text-primary); background: var(--surface-hover); }

.nav-right-group { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.lang-selector { position: relative; }
.lang-selector-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang-selector:hover .lang-selector-btn, .lang-selector.open .lang-selector-btn { border-color: var(--border-accent); color: var(--text-primary); }
/* The IT/EN/FR/DE code should always read black, not fade with the
   secondary-text color the rest of the pill uses. */
#langCurrent { color: var(--text-primary); }
.lang-flag { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.lang-selector-btn svg { width: 10px; height: 10px; transition: transform var(--dur-fast) var(--ease); }
.lang-selector.open .lang-selector-btn svg { transform: rotate(180deg); }
.lang-dropdown {
  right: 0; left: auto; transform: translateY(6px); min-width: 190px;
  /* Above both the navbar (200) and the mobile drawer (150) — the lang
     selector stays reachable in the top bar with the drawer open, so its
     own dropdown must render in front of the drawer, not behind it. */
  z-index: 250;
}
.lang-selector.open .lang-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.lang-dropdown a { gap: 10px; }

.nav-socials { display: flex; align-items: center; gap: 8px; }
.nav-socials a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-socials a:hover { border-color: var(--border-accent); transform: translateY(-2px); }
.nav-socials img { width: 100%; height: 100%; object-fit: cover; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; margin: 0 auto;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 968px) {
  .nav-socials { display: none; }
  .nav-toggle { display: flex; }
  /* Desktop's 4th grid track (defined for .nav-toggle) still reserves a
     gap after .nav-right-group even though .nav-toggle now auto-places
     into the 3rd track (.nav-links is display:none, out of the grid
     entirely) — that stray trailing gap left the hamburger sitting short
     of the true right edge. 3 explicit tracks removes it. */
  .nav-inner { grid-template-columns: auto auto auto; gap: 12px; }

  /* nav-right-group (just the language selector, socials stay hidden above)
     is a sibling of #navLinks now — not nested inside it — so it stays put
     in the top bar at all times, right next to the hamburger, instead of
     disappearing into the drawer along with the rest of the menu. */
  .nav-right-group { margin-left: auto; }

  /* The drawer's layout/position is always applied at this breakpoint —
     open/closed toggles opacity only, on the same var(--dur-fast) linear
     timing the navbar uses for its transparent-to-white fade (see
     .navbar's transition above), so pressing the hamburger at the top of
     the page fades both in lockstep instead of the navbar easing in while
     the drawer just snaps open via display:none/flex. */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Base .nav-links has justify-content:center for the desktop row;
       override it here so items start at the top of the drawer instead
       of sitting vertically centered in it. */
    justify-content: flex-start;
    gap: 2px;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    height: calc(100vh - var(--nav-h));
    /* Same glass background + blur as .navbar.menu-open directly above it,
       so the two panels read as one continuous surface with no seam. */
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    padding: 20px;
    overflow-y: auto;
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) linear;
  }
  .nav-links.mobile-open { opacity: 1; pointer-events: auto; }
  .nav-links > a { padding: 16px 14px; font-size: 1.05rem; border-radius: var(--r-md); }
  .nav-links .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 16px 14px; font-size: 1.05rem; border-radius: var(--r-md); }
  .nav-links .dropdown-menu {
    position: static; visibility: visible; pointer-events: auto; transform: none;
    box-shadow: none; border: none; background: transparent; padding: 0 0 0 14px;
    max-height: 0; overflow: hidden; opacity: 0;
    /* ease-in-out, not var(--ease) — var(--ease) is an ease-out curve, so
       its slow tail always lands on the "almost fully open" end: opening,
       that tail is spent past the point content is already fully visible
       (reads as an imperceptibly-fast snap); closing, the same slow tail
       lands on the "almost fully closed" end, which IS still visible (it
       visibly lingers). Same duration, felt as two different speeds.
       ease-in-out is symmetric about its midpoint, so open and close play
       as true mirrors — and, paired with the opacity fade, reads softer
       than the flat, mechanical feel of a pure linear clip. */
    transition: max-height var(--dur-fast) ease-in-out, opacity var(--dur-fast) ease-in-out;
  }
  /* Specificity fix: the desktop rule .nav-dropdown.open .dropdown-menu
     (3 classes) sets its own transform and otherwise wins over the 2-class
     .nav-links .dropdown-menu reset above once a mobile dropdown is
     actually open, shoving the submenu off-screen via that leftover
     translateX(-50%). This 4-class rule re-wins it back to static (max-height
     itself is driven by an inline style set in site.js, which always wins
     over either class rule regardless of specificity). */
  .nav-links .nav-dropdown.open .dropdown-menu { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  /* White-washed, not dark-scrimmed: the video reads as bright factory
     footage seen through a light veil, so the hero stays part of the same
     white canvas as the rest of the page (headline/body text use the
     ordinary global light tokens — no scoped override needed here). */
  background: var(--bg-1);
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.48) 55%, rgba(255,255,255,0.55) 92%, var(--bg-1) 100%),
    radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 75%);
}
.hero .container { position: relative; z-index: 2; width: 100%; }
/* 1040px (not 780px) — with white-space:nowrap on the h1 lines below, the
   longest hero title line ("incontra la vostra Esperienza.", ~996px at the
   desktop max font-size) needs real room or it overflows one-sided past a
   narrower box, breaking the centering instead of just wrapping. */
.hero-content { max-width: 1040px; padding: 60px 0; margin: 0 auto; text-align: center; }
/* Each of the two hand-authored lines ("La nostra Conoscenza" / "incontra la
   vostra Esperienza.") must stay on its own single line — the <br> already
   separates them, nowrap stops either half from wrapping again on its own. */
.hero-content h1 { margin-bottom: 22px; white-space: nowrap; }
/* On phones the title is now 3 short nowrap lines, so it no longer needs
   the padded .hero-content column — break it out to nearly the full
   screen width and size the font off that width instead of the global h1
   clamp, so it reads noticeably bigger while still never wrapping.
   margin-left (not transform) does the breakout: the entrance animation
   above already animates `transform` on this element, and an active
   animation's transform wins over any transform set here, so a
   translateX-based centering trick would silently get overridden. The
   `2vw - 28px` cancels .container's fixed 28px padding, leaving a clean
   symmetric 2vw gutter regardless of .hero-content's own computed width. */
@media (max-width: 640px) {
  .hero-content h1 {
    width: 96vw;
    max-width: 96vw;
    margin-left: calc(2vw - 28px);
    font-size: clamp(1.5rem, 8.3vw, 3.1rem);
  }
}
.hero-desc { font-size: 1.15rem; max-width: 58ch; margin: 0 auto 36px; color: var(--text-primary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Cinematic staged entrance on load — headline, copy and actions rise in
   one after another. Plain CSS (no JS/IntersectionObserver timing to get
   wrong for content that's already on screen at first paint); the global
   prefers-reduced-motion rule already neutralizes all animation-duration
   site-wide, so this stays opt-out-safe. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-content h1 { animation: heroRise 0.7s var(--ease) both; }
.hero-content .hero-desc { animation: heroRise 0.7s var(--ease) 0.12s both; }
.hero-content .hero-actions { animation: heroRise 0.7s var(--ease) 0.24s both; }

.hero-scroll-indicator {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-primary);
  animation: bob 2.4s ease-in-out infinite;
}
.hero-scroll-indicator svg { width: 16px; height: 16px; stroke: var(--text-primary); }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* --------------------------------------------------------------------------
   7. PAGE HERO (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  /* Every inner page gets a real photo banner (same media already used
     elsewhere on that page) instead of a flat gradient — set per variant
     below via one custom property, so the blur/overlay treatment stays a
     single source of truth. prova.png is the shared fallback. Full
     viewport height, like the home hero. */
  --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902957/prova.png');
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--nav-h) 0 76px;
  overflow: hidden;
  text-align: center;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--page-hero-bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(1.5px);
  transform: scale(1.02);
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 700px 420px at 15% 0%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(ellipse 600px 400px at 100% 10%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.7) 72%, var(--bg-1) 100%);
}
.page-hero-nimbobrain { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902954/interfaccia.jpg'); }
.page-hero-nocode { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902951/no_code_1.png'); }
.page-hero-forcesensors { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902958/sensori_forza_2.jpg'); }
.page-hero-qualitycontrol { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902954/quality_control.jpg'); }
.page-hero-laser { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902943/laser_viola_2.jpg'); }
/* The laser photo's magenta tones sit close in hue to the purple accent
   text, so this page gets one extra white wash layer for AA contrast. */
.page-hero-laser::after {
  background:
    radial-gradient(ellipse 700px 420px at 15% 0%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(ellipse 600px 400px at 100% 10%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.76) 72%, var(--bg-1) 100%);
}
.page-hero-microrobot { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902945/micro_robots.jpg'); }
.page-hero-robotcollaborativi { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902951/robot_collaborativi.jpg'); }
.page-hero-robotica { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902958/robot_industriali_4.jpg'); }
.page-hero-contatti { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902941/capannone.jpg'); }
.page-hero-azienda { --page-hero-bg-image: url('https://res.cloudinary.com/d0eh5rn1/image/upload/v1787902961/studio_logo.jpg'); }

.page-hero .container { position: relative; z-index: 2; width: 100%; }
.page-hero h1 { max-width: 780px; margin: 0 auto 18px; }
.page-hero p { font-size: 1.1rem; max-width: 58ch; margin: 0 auto; color: var(--text-primary); }
.page-hero .mono { display: inline-block; margin-bottom: 14px; }
.page-hero-legal { padding-bottom: 60px; }
.page-hero-azienda p { max-width: 62ch; font-size: 1.08rem; }

/* Same staged entrance as the home hero. */
.page-hero .breadcrumb { animation: heroRise 0.7s var(--ease) both; }
.page-hero .mono { animation: heroRise 0.7s var(--ease) 0.1s both; }
.page-hero h1 { animation: heroRise 0.7s var(--ease) 0.2s both; }
.page-hero p { animation: heroRise 0.7s var(--ease) 0.3s both; }
.page-hero-azienda img { animation: heroRise 0.7s var(--ease) both; }

.breadcrumb {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease); }
.breadcrumb a:hover { color: var(--accent-2); }
.breadcrumb span:last-child { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   8. BENTO GRID (home technologies & products showcase)
   -------------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.bento-card {
  position: relative;
  grid-column: span 3;
  min-height: 300px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  isolation: isolate;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bento-card:hover { transform: translateY(-4px); border-color: var(--border-accent); box-shadow: var(--shadow-lg); }
.bento-card--wide { grid-column: span 4; }
.bento-card--narrow { grid-column: span 2; }
.bento-card-bg {
  position: absolute; inset: 0; z-index: 0;
  transition: transform var(--dur-slow) var(--ease);
}
.bento-card-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) saturate(1.05); }
.bento-card:hover .bento-card-bg { transform: scale(1.06); }
.bento-card-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(6,4,16,0.4) 55%, rgba(6,4,16,0.92) 100%);
}
/* Bento tiles sit on a real photo with a dark scrim at the bottom (kept
   dark regardless of theme, for legibility over the image) — so their own
   text is forced light here rather than following the global light-theme
   text tokens, which would otherwise render near-black-on-near-black. */
.bento-card-index { display: none; }
.bento-card-content { position: relative; z-index: 1; }
.bento-card-content h3 { font-size: 1.4rem; margin-bottom: 10px; color: #fff; }
.bento-card-content p { font-size: 0.92rem; color: rgba(255,255,255,0.82); margin-bottom: 18px; max-width: 42ch; }
.bento-card-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 600; color: #fff;
}
.bento-card-link svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.bento-card:hover .bento-card-link svg { transform: translateX(4px); }

@media (max-width: 968px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card { grid-column: span 1; }
  .bento-card--wide { grid-column: span 2; }
  .bento-card--narrow { grid-column: span 1; }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card, .bento-card--wide, .bento-card--narrow { grid-column: span 1; min-height: 260px; }
}

/* --------------------------------------------------------------------------
   9. FEATURE ROW (alternating split sections)
   -------------------------------------------------------------------------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-content .mono { display: inline-block; margin-bottom: 16px; }
.feature-content h2 { margin-bottom: 20px; }
.feature-content .btn { margin-top: 28px; }

.feature-visual {
  position: relative;
  aspect-ratio: 4 / 3.1;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.feature-visual::before {
  content: '';
  position: absolute; inset: -1px; z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-glow), transparent 40%, transparent 70%, var(--accent-glow));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (max-width: 900px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; direction: ltr; gap: 32px; }
  .feature-visual { order: -1; aspect-ratio: 16/10; }
}

/* --------------------------------------------------------------------------
   10. CARDS (grid-2 / grid-3) — spotlight + tilt
   -------------------------------------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transform: perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-md); }
.card::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(176,88,239,0.16), transparent 65%);
  transition: opacity var(--dur-fast) var(--ease);
}
.card:hover::before { opacity: 1; }
.card-accent { display: none; }
.card h3, .card p { position: relative; z-index: 1; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   11. SPEC TABLE
   -------------------------------------------------------------------------- */
.spec-table {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
}
.spec-table thead th {
  text-align: left;
  padding: 16px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.spec-table tbody td {
  padding: 17px 24px;
  font-size: 0.94rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-soft);
}
.spec-table tbody td:first-child { color: var(--text-primary); font-weight: 600; width: 32%; }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.spec-table tbody tr:hover { background: var(--surface); }
@media (max-width: 640px) { .spec-table thead { display: none; } .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; width: 100%; } .spec-table tbody tr { padding: 14px 0; } .spec-table tbody td { padding: 4px 20px; border: none; } .spec-table tbody td:first-child { padding-top: 10px; } }

/* --------------------------------------------------------------------------
   12. VIDEO EMBED
   -------------------------------------------------------------------------- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--bg-2);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   13. HIGHLIGHT BAND (CTA)
   -------------------------------------------------------------------------- */
.highlight-band {
  /* A soft lavender card, not a dark band — reads as one more surface on
     the white canvas rather than a jarring accent zone. */
  position: relative;
  text-align: center;
  padding: 72px 40px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(176,88,239,0.3);
  background: var(--violet-50);
  overflow: hidden;
}
.highlight-band > * { position: relative; z-index: 1; }
.highlight-band h2 { margin-bottom: 16px; }
.highlight-band p { max-width: 52ch; margin: 0 auto 32px; font-size: 1.05rem; color: var(--violet-800); }
.highlight-band .btn-outline { border-color: rgba(91,45,142,0.4); color: var(--violet-800); background: transparent; backdrop-filter: none; }
.highlight-band .btn-outline:hover { background: rgba(91,45,142,0.08); border-color: var(--violet-700); }
@media (max-width: 640px) { .highlight-band { padding: 52px 24px; } }

/* --------------------------------------------------------------------------
   14. TEAM GRID
   -------------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 800px) { .team-grid { grid-template-columns: 1fr; } }
.team-member {
  padding: 36px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.team-member:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-photo {
  width: 92px; height: 92px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  border: 2px solid var(--border-accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-name { color: var(--text-primary); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.team-role { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--accent-2); letter-spacing: 0.03em; margin-bottom: 16px; display: block; }
.team-bio { font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   15. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info, .contact-form {
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.contact-info h3, .contact-form h3 { margin-bottom: 28px; }

.contact-detail { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-detail-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 1.15rem;
}
.contact-detail-text { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.contact-detail-text strong { font-size: 0.92rem; }
.contact-detail-text span { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; }
.contact-detail-text a { color: var(--accent-2); }

.mt-8 { margin-top: 28px; }
.map-box {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
  background: var(--bg-3);
}
.map-box iframe { width: 100%; height: 100%; border: 0; }
.map-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 24px;
}
.map-placeholder p { font-size: 0.85rem; max-width: 26ch; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.form-group input, .form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent); background: var(--bg-0); outline: none; }
.form-group textarea { min-height: 130px; resize: vertical; }

.form-checkbox-group { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.form-checkbox-group input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.form-checkbox-group label { font-size: 0.84rem; color: var(--text-secondary); }
.form-checkbox-group a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.form-error { display: none; color: #f38ba0; font-size: 0.8rem; margin-bottom: 16px; }
.form-error.visible { display: block; }

/* --------------------------------------------------------------------------
   16. LEGAL CONTENT
   -------------------------------------------------------------------------- */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-updated {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  color: var(--text-tertiary);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  margin-bottom: 44px;
}
.legal-section { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border-soft); }
.legal-section:last-child { border-bottom: none; }
.legal-section h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.legal-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--accent-2);
  background: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 8px;
  flex-shrink: 0;
}
.legal-section p, .legal-section ul { font-size: 0.96rem; }
.legal-section ul { margin: 14px 0; padding-left: 4px; }
.legal-section li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 0.96rem; color: var(--text-secondary); }
.legal-section li::before { content: '→'; position: absolute; left: 0; color: var(--accent-2); }
.legal-section a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.legal-section code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: var(--surface); padding: 2px 6px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
footer {
  position: relative;
  padding: 72px 0 32px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-0);
}
.footer-grid {
  /* 4 grid items — brand block + Azienda/Tecnologie/Prodotti — need 4
     column tracks; with only 3 defined the 4th (Prodotti) wrapped onto
     its own row underneath the brand column. */
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr;
  gap: 24px;
  padding-bottom: 48px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }
.footer-brand p.footer-social-label { font-size: 0.86rem; margin: 18px 0 14px; color: var(--text-tertiary); }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) var(--ease);
}
.footer-socials a:hover { border-color: var(--border-accent); }
.footer-socials img { width: 100%; height: 100%; object-fit: cover; }
.footer-col h4 { font-size: 0.78rem; margin-bottom: 18px; color: var(--text-tertiary); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.92rem; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease); width: fit-content; }
.footer-col a:hover { color: var(--accent-2); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-top: 28px; border-top: 1px solid var(--border-soft);
}
.footer-bottom p { font-size: 0.82rem; color: var(--text-tertiary); }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { font-size: 0.82rem; color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease); }
.footer-legal a:hover { color: var(--accent-2); }

/* --------------------------------------------------------------------------
   18. COOKIE CONSENT (banner + modal, built by site.js)
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 20px; right: 20px;
  bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
  z-index: 500;
  max-width: 900px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 22px 28px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  /* Hide via transform, not a fixed "bottom" offset — the banner's own
     height varies a lot (short single row on desktop, tall stacked column
     on mobile), and a fixed offset wasn't enough to clear the taller mobile
     layout, leaving a sliver of it stuck poking up from the bottom edge. */
  transform: translateY(calc(100% + 40px));
  transition: transform var(--dur-slow) var(--ease);
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner-text { font-size: 0.86rem; color: var(--text-secondary); flex: 1; min-width: 240px; }
.cookie-banner-text a { color: var(--accent-2); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner-actions .btn { padding: 10px 18px; font-size: 0.86rem; }

@media (max-width: 640px) {
  .cookie-banner {
    left: 12px; right: 12px;
    /* Mobile browsers anchor fixed "bottom" against the tall layout
       viewport, not the shorter one actually visible while the address
       bar is showing — a banner this tall got its buttons pushed below
       the visible fold. Capping the height and scrolling internally
       guarantees the buttons stay reachable regardless. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 18px;
  }
  .cookie-banner-text { min-width: 0; }
  .cookie-banner-actions { flex-direction: column; gap: 8px; }
  .cookie-banner-actions .btn { width: 100%; justify-content: center; }
}

.cookie-modal-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(6,4,16,0.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.cookie-modal-overlay.visible { opacity: 1; visibility: visible; }
.cookie-modal {
  position: relative;
  width: 100%; max-width: 480px;
  padding: 36px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur) var(--ease);
}
.cookie-modal-overlay.visible .cookie-modal { transform: translateY(0) scale(1); }
.cookie-modal h3 { margin-bottom: 12px; padding-right: 24px; }
.cookie-modal > p { font-size: 0.88rem; margin-bottom: 24px; }
.cookie-modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cookie-modal-close:hover { background: var(--surface); color: var(--text-primary); }
.cookie-modal-category {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--border-soft);
}
.cookie-modal-category-text strong { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.cookie-modal-category-text p { font-size: 0.82rem; }
.cookie-modal-actions { margin-top: 24px; }
.cookie-modal-actions .btn { width: 100%; justify-content: center; }

.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: var(--r-full);
  background: var(--surface-strong); border: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease);
}
.toggle-slider::before {
  content: ''; position: absolute; left: 3px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: #fff; }
.toggle-switch input:disabled + .toggle-slider { opacity: 0.6; }

/* --------------------------------------------------------------------------
   19. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease); }
.reveal-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* --------------------------------------------------------------------------
   20. LINKEDIN / EMBED WRAPPER
   -------------------------------------------------------------------------- */
.embed-wrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }