/* =========================================================
   GAP Digital Education — Landing "Diventa creator"
   Tokens (ported from the approved design)
========================================================= */
:root{
  --black: #1A1A1A;
  --yellow: #FFD62E;
  --white: #FFFFFF;
  --cream: #F5F4EF;
  --orange: #FF842F;
  --teal: #00B8B5;
  --gray: #8A8A8A;
  --graybd: #DADADA;
  --line: rgba(26,26,26,0.1);

  --font-display: "Archivo", sans-serif;
  --font-body: "DM Sans", sans-serif;

  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 12px rgba(0,0,0,0.09);
  --shadow-md: 0 14px 34px rgba(0,0,0,0.16);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.2);

  /* premium spring-like easing, used across all micro-interactions */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --wrap: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--black);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button, input{ font-family: inherit; }
::selection{ background: var(--yellow); color: var(--black); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:12px; top:-60px; background:var(--black); color:var(--white); padding:10px 16px; border-radius:var(--radius-pill); z-index:300; transition: top .2s var(--ease); }
.skip-link:focus{ top:12px; }
:focus-visible{ outline: 3px solid var(--black); outline-offset: 3px; border-radius: 4px; }
.panel--dark :focus-visible{ outline-color: var(--yellow); }

.wrap{ max-width: var(--wrap); margin:0 auto; padding: 0 clamp(20px,5vw,32px); }
.wrap.narrow{ max-width: 800px; }
.wrap.center{ text-align:center; }

@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;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* =========================================================
   Scroll progress bar
========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  background: var(--yellow);
  transform: scaleX(0); transform-origin: left;
  z-index: 300; will-change: transform;
}

/* =========================================================
   Reveal-on-scroll
========================================================= */
[data-reveal]{
  opacity:0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--reveal-delay,0) * 1ms);
}
[data-reveal].in-view{ opacity:1; transform:none; }

/* =========================================================
   Dot field — fixed ambient background, dim by default,
   brightens in a 300px halo that eases toward the cursor
========================================================= */
.dot-field{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, rgba(26,26,26,0.07) 1.5px, transparent 0);
  background-size: 26px 26px;
}
.dot-field__spotlight{
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(26,26,26,0.42) 1.5px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(300px circle at var(--mx,-9999px) var(--my,-9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 78%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(300px circle at var(--mx,-9999px) var(--my,-9999px), rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 78%, rgba(0,0,0,0) 100%);
}
.section--white{ background: var(--white); }
.section--claim{ background: transparent; }

.section--center .eyebrow,
.section--center .section-title,
.section--center .section-lead,
.section--center .mini-label{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.section--center .kit-card--full{ margin-left:auto; margin-right:auto; }

@media (prefers-reduced-motion: reduce){
  .dot-field__spotlight{ display:none; }
}

/* =========================================================
   Type
========================================================= */
.eyebrow{ font-family: var(--font-display); font-weight:700; font-size:12px; letter-spacing:.6px; text-transform:uppercase; margin-bottom:14px; color: var(--black); opacity:.62; }
.eyebrow--onyellow{ color: var(--yellow); opacity:1; }
.eyebrow--teal{ color: var(--teal); opacity:1; }
.eyebrow--orange{ color: var(--orange); opacity:1; }
.eyebrow--muted{ opacity:.55; }

.section-title{ font-family: var(--font-display); font-weight:800; font-size: clamp(26px,3.4vw,40px); line-height:1.12; letter-spacing:-0.5px; max-width: 20ch; margin-bottom: 16px; text-wrap: balance; }
.section-title--onDark{ color: var(--white); max-width: 22ch; margin-bottom: 40px; }
.section-lead{ font-size: 15.5px; line-height:1.6; color:#3a3a3a; max-width:56ch; margin-bottom: 20px; }
.section-footnote{ font-size:13.5px; color: var(--gray); max-width:60ch; margin: 8px 0 32px; line-height:1.5; }
.mini-label{ font-weight:500; font-size:14px; color: var(--gray); margin: 0 0 20px; }

/* squiggle underline */
/* multi-line-safe highlight — a background-based mark rather than an
   SVG underline, so it wraps cleanly (and never overflows) at any width */
.hl-wrap{
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 0% 40%;
  background-position: 0 88%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .06em;
  transition: background-size .8s var(--ease) .15s;
}
.hl-wrap.in-view{ background-size: 100% 40%; }

/* =========================================================
   Buttons — shine sweep, magnetic hover, press feedback
========================================================= */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); font-weight:800; font-size:14px; letter-spacing:.3px; text-transform:uppercase;
  border:none; border-radius: var(--radius-pill); cursor:pointer; overflow:hidden;
  transition: transform .35s var(--ease-spring), box-shadow .3s var(--ease);
  isolation: isolate;
}
.btn-lg{ padding:16px 28px; }
.btn-sm{ padding:12px 20px; font-size:12.5px; }
.btn-primary{ background: var(--yellow); color: var(--black); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-primary:hover{ box-shadow: 0 10px 26px -6px rgba(255,214,46,0.6); }
.btn-dark{ background: var(--black); color: var(--yellow); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.btn-dark:hover{ box-shadow: 0 12px 28px -6px rgba(0,0,0,0.45); }
.btn:active{ transform: scale(.96) !important; transition-duration: .12s; }

.btn-shine{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  transform: translateX(-120%);
}
.btn:hover .btn-shine{ transform: translateX(120%); transition: transform .85s var(--ease); }
.btn-shine{ transition: transform 0s; }
.btn-label{ position:relative; z-index:2; }

.pulse{ animation: pulse-ring 2.6s ease-in-out infinite; }
@keyframes pulse-ring{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,214,46,0.55);} 50%{ box-shadow:0 0 0 10px rgba(255,214,46,0);} }

/* magnetic pull handled via inline transform from JS; keep it smooth */
.magnetic{ transition: transform .35s var(--ease-spring), box-shadow .3s var(--ease); }

/* nav link underline-grow */
.main-nav > a:not(.btn){
  position:relative; font-family: var(--font-body); font-size:14px; font-weight:500; color:var(--black);
  padding-bottom:3px;
  background-image: linear-gradient(var(--black), var(--black));
  background-repeat:no-repeat; background-position:left bottom; background-size:0% 2px;
  opacity:.75;
  transition: opacity .25s var(--ease), background-size .35s var(--ease);
}
.main-nav > a:not(.btn):hover{ opacity:1; background-size:100% 2px; }

/* =========================================================
   Header
========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 16px clamp(20px,5vw,32px);
  background: rgba(245,244,239,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(26,26,26,0.08);
  transition: padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{ padding: 10px clamp(20px,5vw,32px); box-shadow: 0 6px 20px -12px rgba(0,0,0,0.25); }
.header-inner{ display:contents; }
.logo-link{ display:flex; align-items:center; transition: transform .3s var(--ease-spring); }
.logo-link:hover{ transform: scale(1.05) rotate(-2deg); }
.main-nav{ display:flex; align-items:center; gap: clamp(12px,3vw,28px); flex-wrap:wrap; }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; border-radius:10px; border:none; background:transparent; cursor:pointer; }
.nav-toggle span{ height:2px; background: currentColor; border-radius:2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Logo
========================================================= */
.site-logo{ height:26px; width:auto; display:block; }
.site-logo--sm{ height:20px; }

/* =========================================================
   Hero
========================================================= */
.hero{ position:relative; padding: clamp(48px,8vw,88px) 0 clamp(56px,7vw,80px); overflow:hidden; }
.hero-inner{ display:flex; align-items:center; gap: clamp(32px,5vw,64px); flex-wrap:wrap; }
.hero-copy{ flex: 1 1 460px; min-width:300px; }

.eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--yellow); color:var(--black);
  font-family: var(--font-display); font-weight:700; font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  padding:8px 16px; border-radius: var(--radius-pill); margin-bottom:22px;
}
.hero-title{ font-family: var(--font-display); font-weight:900; font-size: clamp(34px,4.6vw,58px); line-height:1.04; letter-spacing:-1px; margin:0 0 14px; text-wrap: balance; }
.hero-strong{ font-family: var(--font-display); font-weight:700; font-size: clamp(17px,2vw,22px); line-height:1.3; color:#3a3a3a; margin: 22px 0; }
.hero-sub{ font-size: clamp(16px,1.6vw,19px); line-height:1.55; color:#3a3a3a; max-width:520px; margin:0 0 32px; }

.capture-form{ display:flex; gap:10px; flex-wrap:wrap; max-width:520px; margin-bottom:16px; }
.capture-form--center{ justify-content:center; margin: 0 auto 14px; }
.input-pill{
  flex:1 1 240px; font-size:15px; padding:16px 20px; border-radius: var(--radius-pill);
  border:1.5px solid var(--graybd); outline:none; background:#fff; color: var(--black);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.input-pill:focus{ border-color: var(--black); box-shadow: 0 0 0 4px rgba(26,26,26,0.1); transform: translateY(-1px); }
.input-pill--dark{ background:#252525; border-color:#444; color:#fff; }
.input-pill--dark:focus{ border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,214,46,0.22); }
.input-pill--dark::placeholder{ color:#8f8f8f; }
.textarea-field{
  flex:1 1 100%; font-family:inherit; font-size:15px; line-height:1.5; padding:16px 20px; min-height:110px;
  border-radius: var(--radius-md); border:1.5px solid var(--graybd); outline:none; background:#fff; color: var(--black);
  resize:vertical; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.textarea-field:focus{ border-color: var(--black); box-shadow: 0 0 0 4px rgba(26,26,26,0.1); }
.textarea-field--dark{ background:#252525; border-color:#444; color:#fff; }
.textarea-field--dark:focus{ border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,214,46,0.22); }
.textarea-field--dark::placeholder{ color:#8f8f8f; }
.hp-field{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
.input-pill.field-error{ border-color:#E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,0.15); animation: shake .4s var(--ease); }
@keyframes shake{ 20%{transform:translateX(-4px);} 40%{transform:translateX(4px);} 60%{transform:translateX(-3px);} 80%{transform:translateX(3px);} 100%{transform:translateX(0);} }

.form-success{
  font-weight:700; font-size:14px; color:var(--black); background: rgba(255,214,46,0.35);
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius: var(--radius-pill); margin:0 0 12px;
}
.form-success--onDark{ background: var(--yellow); }
.form-success[hidden]{ display:none; }
.form-success.pop-in{ animation: gap-rise .35s var(--ease) both; }
@keyframes gap-rise{ from{ transform: translateY(14px) scale(.96); opacity:0;} to{ transform:none; opacity:1;} }

.form-note{ font-size:13px; color: var(--gray); margin: 4px 0 26px; }

.trust-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.trust-pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:12.5px;
  border:1.5px solid var(--black); padding:7px 14px; border-radius: var(--radius-pill);
  transition: transform .3s var(--ease-spring), background-color .25s var(--ease);
}
.trust-pill:hover{ transform: translateY(-3px) scale(1.04); background: var(--black); color: var(--white); }
.trust-pill:hover .check path{ stroke: var(--yellow); }
.check{ width:12px; height:12px; flex-shrink:0; }
.check path{ stroke: var(--black); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; transition: stroke .25s var(--ease); }

/* ---- hero visual: floating card stack ---- */
.hero-visual{ flex:1 1 380px; min-width:300px; display:flex; justify-content:center; }
.card-stack{ position:relative; width:100%; max-width:380px; height:440px; perspective: 1000px; }

.stack-card{ position:absolute; will-change: transform; }
.stack-card--back{ top:8%; left:-6%; width:66%; z-index:1; animation: gap-float 7s ease-in-out infinite; }
.stack-card--mid{ top:-4%; right:-8%; width:60%; z-index:2; animation: gap-float 8s ease-in-out infinite .6s; }
.stack-card--front{ bottom:0; left:8%; width:84%; z-index:3; animation: gap-float 6s ease-in-out infinite .2s; }
@keyframes gap-float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }

.mini-card{
  background:#fff; border-radius:20px; box-shadow: var(--shadow-md); padding:18px;
  border:1px solid rgba(26,26,26,0.06); transition: transform .4s var(--ease);
}
.stack-card--back .mini-card{ transform: rotate(-6deg); }
.stack-card--mid .mini-card{ transform: rotate(4deg); }
.mini-card h3{ font-family: var(--font-display); font-weight:800; font-size:15px; margin:0 0 4px; }
.mini-card p{ font-size:11px; color: var(--gray); margin:0; }

.tag{ display:inline-block; font-family: var(--font-display); font-weight:700; font-size:9.5px; letter-spacing:.4px; text-transform:uppercase; padding:5px 10px; border-radius: var(--radius-pill); margin-bottom:10px; }
.tag--yellow{ background: var(--yellow); color: var(--black); }
.tag--teal{ background: var(--teal); color:#fff; }
.tag--orange{ background: var(--orange); color:#fff; }
.tag--dark{ background: var(--black); color: var(--yellow); }

.kit-card{
  position:relative; background:#fff; border-radius:24px; box-shadow: var(--shadow-lg); padding:24px;
  border:1px solid rgba(26,26,26,0.06);
  transition: transform .12s linear, box-shadow .35s var(--ease);
  transform-style: preserve-3d;
}
.kit-card--full{ max-width:640px; margin-bottom:32px; }
.kit-card:hover{ box-shadow: var(--shadow-lg); }
.kit-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.kit-card h3{ font-family: var(--font-display); font-weight:800; font-size:22px; margin:0 0 6px; letter-spacing:-.3px; }
.kit-cover{ margin:14px 0 16px; border-radius:16px; overflow:hidden; line-height:0; transition: transform .4s var(--ease); }
.kit-card:hover .kit-cover{ transform: scale(1.015); }
.kit-cover svg{ display:block; width:100%; height:auto; }
.kit-meta{ font-size:13.5px; color: var(--gray); margin:0 0 16px; text-align:left; }
.score-badge{ font-family: var(--font-display); font-weight:700; font-size:13px; background: var(--black); color: var(--yellow); padding:6px 10px; border-radius:8px; transition: transform .3s var(--ease-spring); }
.kit-card:hover .score-badge{ transform: scale(1.08); }
.progress-bars{ display:flex; gap:6px; margin-bottom:16px; }
.bar{ flex:1; height:8px; border-radius: var(--radius-pill); background:#ECECEC; transform-origin:left; }
.bar--fill{ background: var(--yellow); transform: scaleX(0); transition: transform .6s var(--ease); }
.bar--fill.in-view{ transform: scaleX(1); }
.progress-bars[data-reveal] .bar--fill:nth-child(1){ transition-delay: .05s; }
.progress-bars[data-reveal] .bar--fill:nth-child(2){ transition-delay: .18s; }
.progress-bars[data-reveal] .bar--fill:nth-child(3){ transition-delay: .31s; }
.kit-card-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid #ECECEC; font-size:12.5px; color: var(--gray); }

.badge-float{
  position:absolute; top:-16px; right:-14px; background: var(--yellow); color: var(--black);
  font-family: var(--font-display); font-weight:800; font-size:11px; letter-spacing:.3px; text-transform:uppercase;
  padding:10px 14px; border-radius:14px; box-shadow: var(--shadow-md); transform: rotate(8deg);
  animation: badge-pop .5s var(--ease-spring) .3s both;
}
@keyframes badge-pop{ 0%{ transform: scale(.7) rotate(8deg); opacity:0;} 100%{ transform: scale(1) rotate(8deg); opacity:1;} }

/* =========================================================
   Panels (dark / white elevated rounded containers)
========================================================= */
.section{ padding: clamp(24px,4vw,40px) 0; }
.panel{ border-radius: var(--radius-lg); padding: clamp(48px,7vw,88px) clamp(24px,5vw,48px); }
.panel--dark{ background: var(--black); color:#fff; }
.panel--white-elevated{ background:#fff; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: clamp(48px,7vw,80px) clamp(24px,5vw,48px); }
.panel--dark .section-title, .panel--dark .cta-title{ color:#fff; }

.pain-grid{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:36px; }
.pain-card{
  flex:1 1 300px; min-width:260px; background:#252525; border-radius:20px; padding:28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform .12s linear, background-color .3s var(--ease);
}
.pain-card:hover{ background:#2e2e2e; }
.pain-mark{ display:block; font-family: var(--font-display); font-weight:900; font-size:30px; color: var(--yellow); margin-bottom:14px; }
.pain-card p{ font-size:15.5px; line-height:1.5; color:#EDEDED; }
.panel-closing{ font-weight:500; font-size: clamp(16px,1.8vw,20px); line-height:1.5; color:#fff; max-width:760px; }

/* claim section */
.claim-quote{ font-family: var(--font-display); font-weight:900; font-size: clamp(24px,3.4vw,38px); line-height:1.25; letter-spacing:-.5px; margin:0 0 20px; text-wrap: balance; }
.claim-sub{ font-size: clamp(15px,1.6vw,17px); color:#3a3a3a; }

/* kit preview / spec */
.spec-intro{ font-size:13px; color:#3a3a3a; margin:16px 0; line-height:1.5; }
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; margin-bottom:16px; }
.spec-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.spec-row span{ color: var(--gray); }
.spec-row strong{ text-align:right; font-weight:700; }
.spec-highlight{ display:flex; align-items:center; gap:10px; background: var(--yellow); border-radius: var(--radius-pill); padding:10px 16px; margin-bottom:20px; font-family: var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.2px; }

.kit-parts-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.kit-part{
  background: var(--cream); border-radius:24px; padding:26px; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:12px;
  transition: transform .12s linear, box-shadow .3s var(--ease);
}
.kit-part:hover{ box-shadow: var(--shadow-md); }
.kit-part h3{ font-family: var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.2px; }
.kit-part p{ font-size:13.5px; line-height:1.55; color:#3a3a3a; }
.kit-part .tag{ align-self:flex-start; }

/* principles */
.principle-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:18px; margin-bottom:32px; }
.principle-card{
  background:#fff; border-radius:20px; padding:24px; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:10px; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.principle-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.principle-card h3{ font-family: var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.1px; }
.principle-card p{ font-size:13px; line-height:1.5; color:#3a3a3a; }
.principle-card hr{ border:none; height:1px; background:#ECECEC; margin:4px 0; width:100%; }
.principle-howto{ font-size:12.5px; line-height:1.5; color: var(--gray); }
.principle-howto strong{ color: var(--black); }

.highlight-row{ display:flex; gap:20px; flex-wrap:wrap; }
.highlight-box{ flex:1 1 300px; min-width:260px; display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:16px; padding:18px 20px; transition: transform .3s var(--ease-spring); }
.highlight-box:hover{ transform: translateX(4px); }
.highlight-box p{ font-size:13.5px; line-height:1.5; }
.check-dot{ flex-shrink:0; width:30px; height:30px; border-radius: var(--radius-pill); background: var(--yellow); display:flex; align-items:center; justify-content:center; transition: transform .3s var(--ease-spring); }
.highlight-box:hover .check-dot, .trust-badge:hover .check-dot{ transform: rotate(-8deg) scale(1.1); }

/* economia */
.tier-note{ font-size:14px; color: var(--gray); font-style:italic; margin: 0 0 36px; }
.tier-grid{ display:flex; gap:20px; flex-wrap:wrap; }
.tier-card{
  flex:1 1 280px; min-width:240px; background:#fff; border:1.5px solid rgba(26,26,26,0.1); border-radius:20px; padding:26px;
  display:flex; flex-direction:column; transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.tier-card:hover{ transform: translateY(-8px); border-color: var(--black); box-shadow: var(--shadow-md); }
.tier-label{ font-weight:500; font-size:13px; color: var(--gray); text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px; }
.tier-range{ font-family: var(--font-display); font-weight:900; font-size: clamp(24px,2.6vw,30px); margin-bottom:10px; letter-spacing:-.5px; }
.tier-card p{ font-size:13.5px; color:#3a3a3a; line-height:1.5; }

.divider{ height:1px; background:#ECECEC; margin:32px 0; }
.badge-grid{ display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between; }
.trust-badge{ flex:1 1 220px; min-width:200px; display:flex; gap:12px; align-items:flex-start; background: var(--cream); padding:20px; border-radius:20px; transition: transform .3s var(--ease-spring); }
.trust-badge:hover{ transform: translateY(-4px); }
.trust-badge strong{ display:block; font-family: var(--font-display); font-weight:700; font-size:14.5px; margin-bottom:4px; }
.trust-badge p{ font-size:12.5px; color: var(--gray); line-height:1.4; }

/* progetto vivo */
.lineage-row{ display:flex; align-items:stretch; flex-wrap:wrap; }
.lineage-item{ display:flex; align-items:center; flex:1 1 240px; min-width:220px; }
.lineage-card{
  flex:1; background:#fff; border-radius:20px; padding:24px; box-shadow: var(--shadow-sm);
  border:1.5px solid rgba(26,26,26,0.08); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lineage-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.lineage-card h3{ font-family: var(--font-display); font-weight:700; font-size:16.5px; margin:0 0 8px; }
.lineage-card p{ font-size:13px; color:#3a3a3a; line-height:1.5; margin:0 0 12px; }
.lineage-credit{ font-weight:500; font-size:12px; color: var(--gray); }
.lineage-arrow{ flex:0 0 44px; margin: 0 auto; }
.lineage-arrow path{ stroke: var(--black); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30; transition: stroke-dashoffset .6s var(--ease) .2s; }
.lineage-item.in-view .lineage-arrow path{ stroke-dashoffset:0; }

.coauthor-note{ display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:16px; padding:20px 22px; margin-top:24px; max-width:760px; box-shadow: var(--shadow-sm); }
.coauthor-note p{ font-size:13.5px; line-height:1.5; color:#3a3a3a; }
.coauthor-note strong{ color: var(--black); }

/* CTA finale */
.cta-title{ font-family: var(--font-display); font-weight:900; font-size: clamp(28px,4vw,46px); line-height:1.08; letter-spacing:-1px; margin:0 0 18px; text-wrap: balance; }
.cta-sub{ font-size: clamp(15px,1.6vw,17px); color:#D9D9D9; margin:0 0 32px; line-height:1.5; }
.cta-note{ font-size:12.5px; color:#8A8A8A; margin:0; }

/* =========================================================
   Footer
========================================================= */
.site-footer{ padding: 40px clamp(20px,6vw,56px); background: var(--cream); border-top:1px solid rgba(26,26,26,0.1); }
.footer-inner{ max-width: var(--wrap); margin:0 auto; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-copy{ font-size:12.5px; color: var(--gray); }
.footer-claim{ font-size:12.5px; color: var(--gray); text-align:center; max-width:480px; margin:0; }
.footer-links{ display:flex; gap:18px; }
.footer-links a{ font-size:12.5px; color: var(--gray); transition: color .2s var(--ease); }
.footer-links a:hover{ color: var(--black); }

/* =========================================================
   Tilt (mouse-reactive 3D cards)
========================================================= */
.tilt{ will-change: transform; }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 900px){
  .lineage-arrow{ transform: rotate(90deg); flex:0 0 30px; }
  .lineage-item{ flex-direction:column; }
}

@media (max-width: 560px){
  .spec-grid{ grid-template-columns: 1fr; }
  .spec-row{ flex-direction:column; gap:2px; }
  .spec-row strong{ text-align:left; }
}

@media (max-width: 720px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background: var(--cream);
    flex-direction:column; align-items:flex-start; padding:20px clamp(20px,5vw,32px); gap:16px;
    box-shadow: var(--shadow-sm); display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav .btn-sm{ align-self:flex-start; }
  .nav-toggle{ display:flex; }
  .hero-inner{ flex-direction:column; }
  .card-stack{ margin-top: 20px; }
}