/* ==========================================================================
   NOWY CORE — shared style package for every NOWY page
   (website, lead magnets, landing pages, tools)
   --------------------------------------------------------------------------
   Contents: tokens · base · type scale · layout · components (eyebrow,
   section head, button, icon button, link, badge, chip, field, choice,
   meter, timeline, toast, mesh gradient) · brand logotype + animated mark ·
   navigation · mobile menu · footer · motion.
   Page-specific sections live in their own stylesheet (e.g. nowy.css).
   Usage guide: STYLE_GUIDE.md · live components: /styleguide.html

   Breakpoints (documented here, used literally in media queries):
     sm 640px · md 900px · lg 1200px
   ========================================================================== */
/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* --- Brand (anchored on NOWY cobalt #293A81) --- */
  --brand-50:  #F2F4FC;
  --brand-200: #C9D2F2;
  --brand-300: #A2B2EA;
  --brand-400: #6B8AFF;   /* "glow" from the original identity */
  --brand-500: #4D66D1;
  --brand-700: #2F4499;
  --brand-800: #293A81;   /* NOWY cobalt */
  --brand-950: #10173A;

  /* Gradient palette — used only inside generative backgrounds */
  --grad-cobalt: #293A81;
  --grad-blue:   #3559E0;
  --grad-violet: #4B45C8;
  --grad-cyan:   #3F86D6;
  --grad-ink:    #070812;

  /* --- Dark surfaces (default canvas of the site) --- */
  --ink-950: #06070D;
  --ink-900: #0B0D17;
  --ink-850: #10131F;
  --ink-800: #161A29;
  --ink-700: #22273A;

  /* --- Light surfaces --- */
  --paper-0:   #FFFFFF;
  --paper-50:  #F4F5F8;
  --paper-100: #ECEEF3;

  /* --- Semantic: dark theme scope (default) --- */
  --color-bg:            var(--ink-900);
  --color-surface:       var(--ink-850);
  --color-surface-2:     var(--ink-800);
  --color-fg:            #F5F6FA;
  --color-fg-2:          #C4C8D4;
  --color-fg-3:          #979DAE;   /* ≥ 6:1 on ink-900 */
  --color-border:        rgba(255,255,255,.09);
  --color-border-strong: rgba(255,255,255,.18);
  --color-accent:        var(--brand-300);
  --color-accent-soft:   rgba(107,138,255,.14);
  --color-primary:       #FFFFFF;
  --color-on-primary:    var(--ink-950);
  --color-primary-hover: var(--brand-200);
  --color-focus:         var(--brand-400);
  --color-success:       #6FDBA5;
  --color-on-success:    var(--ink-950);
  --color-danger:        #FF8A80;

  /* --- Typography --- */
  --font-sans:  "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-hero:    clamp(3rem, 1.4rem + 6.4vw, 8rem);         /* 48 → 128 */
  --text-display: clamp(2.25rem, 1.3rem + 3.8vw, 4.75rem);  /* 36 → 76  */
  --text-h1:      clamp(2rem, 1.3rem + 2.8vw, 4rem);         /* 32 → 64  */
  --text-h2:      clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem);    /* 24 → 40  */
  --text-h3:      clamp(1.25rem, 1.1rem + .5vw, 1.5rem);     /* 20 → 24  */
  --text-lead:    clamp(1.0625rem, 1rem + .35vw, 1.3125rem); /* 17 → 21  */
  --text-body:    1rem;
  --text-small:   .875rem;
  --text-caption: .8125rem;
  --text-label:   .75rem;

  --tracking-hero:    -0.05em;
  --tracking-display: -0.04em;
  --tracking-heading: -0.028em;
  --tracking-title:   -0.015em;
  --tracking-label:    0.1em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* --- Spacing (4px base) --- */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-y: clamp(var(--space-20), 8vw, 10rem);

  /* --- Radius --- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* --- Shadows --- */
  --shadow-card: 0 1px 2px rgba(10,12,24,.06), 0 24px 64px -24px rgba(10,12,24,.22);
  --shadow-float: 0 30px 80px -30px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(107,138,255,.45);

  /* --- Motion --- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-reveal: 700ms;
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* --- Layout --- */
  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 72px;

  --z-nav: 50;
  --z-menu: 80;
  --z-toast: 90;

  color-scheme: dark;
}

/* Light scope — applied to light sections (and flips every semantic token) */
.theme-light{
  --color-bg:            var(--paper-50);
  --color-surface:       var(--paper-0);
  --color-surface-2:     var(--paper-100);
  --color-fg:            #0B0D17;
  --color-fg-2:          #3A3F52;
  --color-fg-3:          #5A6074;    /* ≥ 5.9:1 on paper-50 */
  --color-border:        rgba(11,13,23,.09);
  --color-border-strong: rgba(11,13,23,.18);
  --color-accent:        var(--brand-800);
  --color-accent-soft:   var(--brand-50);
  --color-primary:       var(--brand-800);
  --color-on-primary:    #FFFFFF;
  --color-primary-hover: var(--brand-700);
  --color-focus:         var(--brand-500);
  --color-success:       #1A7F4B;
  --color-on-success:    #FFFFFF;
  --color-danger:        #B42318;
  --ring: 0 0 0 3px rgba(77,102,209,.35);
  color-scheme: light;
  background: var(--color-bg);
  color: var(--color-fg);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  background: var(--ink-900);
}
body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-locked{ overflow: hidden; }
/* The hidden attribute always wins over component display rules (grid/flex) */
[hidden]{ display: none !important; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd{ margin: 0; }
ul[role="list"], ol[role="list"]{ list-style: none; padding: 0; }
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor: pointer; background: none; border: 0; padding: 0; }

::selection{ background: var(--brand-400); color: #fff; }

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

.skip-link{
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-950);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.skip-link:focus-visible{ transform: none; }

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Type scale --- */
.t-hero{
  font-size: var(--text-hero);
  line-height: .9;
  letter-spacing: var(--tracking-hero);
  font-weight: var(--weight-medium);
}
.t-display{
  font-size: var(--text-display);
  line-height: .98;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-medium);
  text-wrap: balance;
}
.t-h1{
  font-size: var(--text-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);
  text-wrap: balance;
}
.t-h2{
  font-size: var(--text-h2);
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);
  text-wrap: balance;
}
.t-h3{
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-medium);
}
.t-lead{ font-size: var(--text-lead); line-height: 1.55; color: var(--color-fg-2); text-wrap: pretty; }
.t-body{ font-size: var(--text-body); line-height: 1.65; color: var(--color-fg-2); text-wrap: pretty; }
.t-small{ font-size: var(--text-small); line-height: 1.55; color: var(--color-fg-3); }
.t-caption{ font-size: var(--text-caption); line-height: 1.45; color: var(--color-fg-3); }
.t-label{
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: 1.3;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-3);
}
/* Two-tone emphasis (Apple-style): secondary part of a headline in a quieter tone */
.t-tone{ color: var(--color-fg-3); }
.t-dim{ color: var(--color-fg-3); }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container{
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{ position: relative; padding-block: var(--section-y); }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Eyebrow --- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-2);
}
.eyebrow::before{
  content: "";
  width: 7px; height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

/* --- Section header --- */
.section-head{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--space-6) var(--space-16);
  align-items: end;
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-20));
}
.section-head__title{ display: grid; gap: var(--space-5); }
.section-head .t-lead{ max-width: 44ch; }
@media (max-width: 899px){
  .section-head{ grid-template-columns: 1fr; }
}

/* --- Button --- */
.btn{
  --btn-h: 48px;
  --btn-px: 22px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--btn-h);
  padding-inline: var(--btn-px);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  user-select: none;
  outline: 2px solid transparent;           /* visible in forced-colors */
  outline-offset: 2px;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.btn:active{ transform: scale(.97); }
.btn:focus-visible{ box-shadow: var(--ring); border-radius: var(--radius-full); }
.btn__icon{
  width: 16px; height: 16px;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__icon{ transform: translateX(3px); }
.btn:hover .btn__icon--diag{ transform: translate(2px, -2px); }

.btn--primary{ background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover{ background: var(--color-primary-hover); }
.btn--outline{ border-color: var(--color-border-strong); color: var(--color-fg); }
.btn--outline:hover{ border-color: var(--color-fg); background: var(--color-accent-soft); }
.btn--sm{ --btn-h: 40px; --btn-px: 18px; }
.btn--lg{ --btn-h: 56px; --btn-px: 28px; font-size: var(--text-body); }
.btn.is-success{ background: var(--color-success); color: var(--color-on-success); }

/* --- Icon button --- */
.icon-btn{
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  color: var(--color-fg);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.icon-btn:hover{ background: var(--color-accent-soft); border-color: var(--color-fg-3); }
.icon-btn:focus-visible{ box-shadow: var(--ring); border-radius: var(--radius-full); }
.icon-btn svg{ width: 18px; height: 18px; }

/* --- Link --- */
.link{
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.link:hover{ background-size: 100% 1px; }

/* --- Badge / chip --- */
.badge{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-inline: 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-fg-2);
  white-space: nowrap;
}
.chips{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip{
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding-inline: 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-caption);
  color: var(--color-fg-2);
  white-space: nowrap;
}

/* --- Form fields --- */
.field{ display: grid; gap: var(--space-2); min-width: 0; }
.field__label{ font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--color-fg); }
.field__label .t-dim{ font-weight: var(--weight-regular); }
.input{
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-fg);
  font-size: var(--text-body);
  line-height: 1.4;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.input::placeholder{ color: var(--color-fg-3); }
.input:hover{ border-color: var(--color-fg-3); }
.input:focus-visible{ border-color: var(--color-focus); box-shadow: var(--ring); border-radius: var(--radius-md); }
.input:user-invalid{ border-color: var(--color-danger); }
textarea.input{ min-height: 128px; resize: vertical; }

.choice-group{ border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-group legend{ padding: 0; margin-bottom: var(--space-3); }
.choices{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice{ position: relative; }
.choice input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span{
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-small);
  color: var(--color-fg-2);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.choice:hover span{ border-color: var(--color-fg-3); color: var(--color-fg); }
.choice input:checked + span{ background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.choice input:focus-visible + span{ box-shadow: var(--ring); }

/* --- Meter & timeline (capabilities) --- */
.meter{ display: inline-flex; gap: 3px; }
.meter i{ width: 14px; height: 6px; border-radius: 2px; background: var(--color-border-strong); }
.meter i.on{ background: var(--color-primary); }
.timeline{
  position: relative;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
}
.timeline__bar{
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--from) / 36 * 100%);
  width: calc((var(--to) - var(--from)) / 36 * 100%);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--grad-blue), var(--brand-800));
  transform-origin: left center;
}

/* --- Toast --- */
.toast-region{
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: var(--z-toast);
  transform: translateX(-50%);
  display: grid;
  gap: var(--space-2);
  pointer-events: none;
}
.toast{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 18px;
  border-radius: var(--radius-full);
  background: #FFFFFF;
  color: var(--ink-950);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.toast.is-visible{ opacity: 1; transform: none; }
.toast svg{ width: 16px; height: 16px; color: #1A7F4B; }

/* --- Generative gradient (CSS-only "mesh"): used by hero, services, cases, philosophy --- */
.mesh{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.mesh__blob{
  position: absolute;
  width: var(--s, 60%);
  aspect-ratio: 1;
  left: var(--x, 0%);
  top: var(--y, 0%);
  /* Static by design: animating these large gradient layers caused dropped frames
     on high-DPI screens (measured). Motion lives in the hero video instead.
     The radial gradient is already soft: no filter:blur. */
  background: radial-gradient(closest-side, var(--c, var(--grad-blue)), transparent);
  opacity: var(--o, .9);
}
/* Mesh presets — one palette, different compositions per surface */
.mesh--hero .mesh__blob:nth-child(1){ --c: var(--grad-cobalt); --s: 85%; --x: -25%; --y: -45%; --t: 26s; --dx: 8%;  --dy: 6%; }
.mesh--hero .mesh__blob:nth-child(2){ --c: var(--grad-blue);   --s: 62%; --x: 48%;  --y: -5%;  --t: 22s; --dx: -7%; --dy: 6%; --o: .85; }
.mesh--hero .mesh__blob:nth-child(3){ --c: var(--grad-violet); --s: 55%; --x: 62%;  --y: 45%;  --t: 30s; --dx: -9%; --dy: -5%; --o: .7; }
.mesh--hero .mesh__blob:nth-child(4){ --c: var(--grad-cyan);   --s: 34%; --x: 30%;  --y: 55%;  --t: 24s; --dx: 12%; --dy: -8%; --o: .35; }

.mesh--domain-1 .mesh__blob:nth-child(1){ --c: var(--grad-blue);   --s: 70%; --x: 45%; --y: -40%; --t: 18s; }
.mesh--domain-1 .mesh__blob:nth-child(2){ --c: var(--grad-cobalt); --s: 60%; --x: -10%; --y: 10%; --t: 24s; --dx: 10%; }
.mesh--domain-1 .mesh__blob:nth-child(3){ --c: var(--grad-cyan);   --s: 30%; --x: 75%; --y: 30%; --t: 20s; --o: .5; }
.mesh--domain-2 .mesh__blob:nth-child(1){ --c: var(--grad-violet); --s: 70%; --x: 40%; --y: -40%; --t: 20s; }
.mesh--domain-2 .mesh__blob:nth-child(2){ --c: var(--grad-blue);   --s: 55%; --x: -10%; --y: 20%; --t: 26s; --dx: 12%; }
.mesh--domain-2 .mesh__blob:nth-child(3){ --c: var(--grad-cyan);   --s: 30%; --x: 80%; --y: 40%; --t: 18s; --o: .45; }
.mesh--domain-3 .mesh__blob:nth-child(1){ --c: var(--grad-cobalt); --s: 75%; --x: 35%; --y: -35%; --t: 22s; }
.mesh--domain-3 .mesh__blob:nth-child(2){ --c: var(--grad-violet); --s: 50%; --x: 70%; --y: 10%; --t: 26s; --dx: -10%; --o: .8; }
.mesh--domain-3 .mesh__blob:nth-child(3){ --c: var(--grad-blue);   --s: 40%; --x: -5%; --y: 40%; --t: 18s; --o: .6; }

.mesh--case-1 .mesh__blob:nth-child(1){ --c: var(--grad-blue);   --s: 110%; --x: -20%; --y: -50%; --t: 24s; }
.mesh--case-1 .mesh__blob:nth-child(2){ --c: var(--grad-cyan);   --s: 70%;  --x: 45%;  --y: 30%;  --t: 20s; --o: .6; }
.mesh--case-1 .mesh__blob:nth-child(3){ --c: var(--grad-cobalt); --s: 80%;  --x: 20%;  --y: 50%;  --t: 28s; }
.mesh--case-2 .mesh__blob:nth-child(1){ --c: var(--grad-violet); --s: 110%; --x: 10%;  --y: -55%; --t: 24s; }
.mesh--case-2 .mesh__blob:nth-child(2){ --c: var(--grad-blue);   --s: 80%;  --x: -30%; --y: 35%;  --t: 20s; }
.mesh--case-2 .mesh__blob:nth-child(3){ --c: var(--grad-cyan);            --s: 50%;  --x: 60%;  --y: 45%;  --t: 26s; --o: .55; }
.mesh--case-3 .mesh__blob:nth-child(1){ --c: var(--grad-cobalt); --s: 110%; --x: -10%; --y: -45%; --t: 24s; }
.mesh--case-3 .mesh__blob:nth-child(2){ --c: var(--grad-cyan);   --s: 70%;  --x: 50%;  --y: -10%; --t: 22s; --o: .7; }
.mesh--case-3 .mesh__blob:nth-child(3){ --c: var(--grad-blue);   --s: 80%;  --x: 0%;   --y: 45%;  --t: 28s; }

.mesh--philosophy .mesh__blob:nth-child(1){ --c: var(--grad-cobalt); --s: 70%; --x: 45%; --y: -40%; --t: 28s; }
.mesh--philosophy .mesh__blob:nth-child(2){ --c: var(--grad-violet); --s: 45%; --x: 75%; --y: 20%;  --t: 24s; --o: .55; }
.mesh--philosophy .mesh__blob:nth-child(3){ --c: var(--grad-blue);   --s: 50%; --x: -15%; --y: 55%; --t: 30s; --o: .6; }
.mesh--philosophy .mesh__blob:nth-child(4){ --c: var(--grad-cyan);   --s: 20%; --x: 60%; --y: 70%;  --t: 20s; --o: .25; }

.mesh--menu .mesh__blob:nth-child(1){ --c: var(--grad-cobalt); --s: 120%; --x: 0%;  --y: 40%; }
.mesh--menu .mesh__blob:nth-child(2){ --c: var(--grad-violet); --s: 80%;  --x: 40%; --y: 70%; --o: .6; }
.mesh--menu .mesh__blob:nth-child(3){ --c: var(--grad-blue);   --s: 60%;  --x: -30%; --y: 80%; --o: .7; }

.mesh--footer .mesh__blob:nth-child(1){ --c: var(--grad-cobalt); --s: 60%; --x: -10%; --y: 40%; --t: 30s; }
.mesh--footer .mesh__blob:nth-child(2){ --c: var(--grad-blue);   --s: 45%; --x: 50%;  --y: 55%; --t: 26s; --o: .6; }
.mesh--footer .mesh__blob:nth-child(3){ --c: var(--grad-violet); --s: 35%; --x: 80%;  --y: 45%; --t: 22s; --o: .45; }


/* ==========================================================================
   5. CHROME (brand, navigation, menu, footer)
   ========================================================================== */

/* --- Brand lockup --- */
/* Original NOWY logotype: mark + custom-drawn wordmark (SVG glyphs, not a font) */
.brand{ display: inline-flex; align-items: center; gap: 14px; color: var(--color-fg); border-radius: var(--radius-sm); }
.brand__mark{ width: 40px; height: 40px; flex: none; transition: transform var(--dur-slow) var(--ease-out); }
.brand__word{ height: 20px; width: calc(20px * 242 / 62); flex: none; }
.brand:hover .brand__mark{ transform: scale(1.08); }
@media (max-width: 479px){
  .brand__mark{ width: 34px; height: 34px; }
  .brand__word{ height: 17px; width: calc(17px * 242 / 62); }
}

/* Nav mark: breaks apart and rebuilds itself on a 7s loop (as in the original identity) */
.brand__mark path{ transform-box: fill-box; transform-origin: center; }
.nav .brand__mark .mark-p1{ animation: mark-loop-left  7s cubic-bezier(.2,.9,.18,1) 0s   infinite backwards; }
.nav .brand__mark .mark-p2{ animation: mark-loop-right 7s cubic-bezier(.2,.9,.18,1) .3s  infinite backwards; }
.nav .brand__mark .mark-p3{ animation: mark-loop-pop   7s cubic-bezier(.5,1.6,.4,1)  .6s  infinite backwards; }
@keyframes mark-loop-left{
  0%, 100% { opacity: 0; transform: translateX(-40%); }
  10%, 82% { opacity: 1; transform: none; }
  94%      { opacity: 0; transform: translateX(-40%); }
}
@keyframes mark-loop-right{
  0%, 100% { opacity: 0; transform: translateX(60%); }
  10%, 82% { opacity: 1; transform: none; }
  94%      { opacity: 0; transform: translateX(60%); }
}
@keyframes mark-loop-pop{
  0%, 100% { opacity: 0; transform: scale(0); }
  10%, 82% { opacity: 1; transform: none; }
  94%      { opacity: 0; transform: scale(0); }
}
/* Wordmark letters rise in once on load (CSS `translate` composes with the SVG transform attribute) */
.nav .brand__word .l{ animation: letter-in 800ms var(--ease-out) both; }
.nav .brand__word .l2{ animation-delay: 70ms; }
.nav .brand__word .l3{ animation-delay: 140ms; }
.nav .brand__word .l4{ animation-delay: 210ms; }
@keyframes letter-in{ from{ opacity: 0; translate: 0 36px; } }

/* --- Navigation (adapts to the section underneath: data-theme) --- */
.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  color: #fff;
  transition: background-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
  border-bottom: 1px solid transparent;
}
/* No backdrop-filter: blurring moving content under the nav (hero video, marquee,
   sticky cards) forced a re-blur every frame and was the measured cause of scroll jank.
   A near-opaque fill looks the same and costs nothing. */
.nav.is-scrolled{
  background: rgba(11,13,23,.92);
  border-bottom-color: rgba(255,255,255,.08);
}
.nav[data-theme="light"]{ color: var(--ink-900); }
.nav[data-theme="light"].is-scrolled{ background: rgba(244,245,248,.94); border-bottom-color: rgba(11,13,23,.08); }
.nav .brand, .nav .brand__word{ color: inherit; }
.nav__inner{
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.nav__links{ display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }
.nav__link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding-inline: 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  opacity: .78;
  transition: opacity var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.nav__link::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.25px solid currentColor;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.nav__link:hover{ opacity: 1; }
.nav__link[aria-current="true"]{ opacity: 1; }
.nav__link[aria-current="true"]::before{ background: currentColor; }
.nav__actions{ display: flex; align-items: center; gap: var(--space-3); }
.nav__cta{
  background: currentColor;
}
.nav__cta > *{ color: var(--ink-950); }
.nav[data-theme="light"] .nav__cta > *{ color: #fff; }
.nav__cta:hover{ opacity: .88; }
.nav__menu-btn{ display: none; border-color: currentColor; color: inherit; }
@media (max-width: 999px){
  .nav__links{ display: none; }
  .nav__menu-btn{ display: inline-grid; }
}
@media (max-width: 479px){
  .nav__cta{ display: none; }
}

/* --- Full-screen menu (mobile) --- */
.menu{
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink-950);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.menu[hidden]{ display: none; }
.menu.is-open{ opacity: 1; }
.menu .mesh{ opacity: .55; }
.menu__head{ height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; position: relative; }
.menu__body{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  padding-block: var(--space-10) var(--space-8);
}
.menu__links{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.menu__links a{
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: clamp(2.25rem, 1.4rem + 4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-medium);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms + 80ms);
}
.menu__links a span{ font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-fg-3); }
.menu.is-open .menu__links a{ opacity: 1; transform: none; }
.menu__foot{ display: grid; gap: var(--space-4); }
.menu__foot .btn{ justify-self: start; }

/* --- Footer --- */
.footer{
  position: relative;
  background: var(--ink-950);
  color: var(--color-fg);
  padding-top: clamp(var(--space-16), 7vw, var(--space-24));
  overflow: hidden;
  isolation: isolate;
}
.footer .mesh{ z-index: -1; top: auto; height: 70%; opacity: .7; }
.footer__top{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}
.footer__brand{ display: grid; gap: var(--space-6); align-content: start; }
.footer__brand p{ max-width: 38ch; }
.footer__col h2{ font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-3); margin-bottom: var(--space-5); }
.footer__col ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.footer__col a{ color: var(--color-fg-2); transition: color var(--dur-base) var(--ease-standard); }
.footer__col a:hover{ color: #fff; }
.footer__wordmark{ margin-top: clamp(var(--space-16), 8vw, var(--space-24)); color: #fff; }
.footer__wordmark svg{ width: 100%; height: auto; }
/* Company data (ragione sociale, sede, P.IVA, REA, capitale, PEC) */
.footer__legal{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
  font-style: normal;
  color: var(--color-fg-3);
}
.footer__legal strong{ color: var(--color-fg-2); font-weight: var(--weight-medium); }
.footer__legal a{ color: var(--color-fg-2); }
.footer__policies{ display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: 0; }
.footer__policies a{ color: var(--color-fg-2); }
.footer__policies a:hover{ color: #fff; }
.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
}
@media (max-width: 899px){
  .footer__top{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 559px){
  .footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-10); }
}

/* ==========================================================================
   6. MOTION
   ========================================================================== */
/* Reveal is progressive: visible without JS; a CSS fallback reveals content
   after 3s even if the script never runs (blocked / failed to load). */
.js .reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
  animation: reveal-fallback 1ms 3s forwards;
}
.js.js-ready .reveal{ animation: none; }
.js .reveal.is-in{ opacity: 1; transform: none; }
@keyframes reveal-fallback{ to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .mesh__blob{ animation: none !important; }
  .marquee__track{ animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee__group[aria-hidden="true"]{ display: none; }
  .js .reveal{ opacity: 1; transform: none; }
  .js .caps .timeline__bar{ transform: none; }
}

/* --- Shared refinements (from lead-magnet build) --- */
/* Number inputs: no spinner arrows (values are typed) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }
/* Chips may wrap on narrow phones instead of overflowing */
@media (max-width: 479px){ .chip{ white-space: normal; height: auto; min-height: 30px; padding-block: 4px; } }
/* Print: reveal-on-scroll content must never print blank */
@media print{ .js .reveal{ opacity: 1 !important; transform: none !important; animation: none !important; } }
/* --- Smooth scroll (Lenis, desktop mouse only; enabled by nowy.js) --- */
html.lenis, html.lenis body{ height: auto; }
html.lenis{ scroll-behavior: auto !important; }   /* Lenis animates; native smooth would fight it */
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: clip; }
.lenis.lenis-smooth iframe{ pointer-events: none; }