/* ==========================================================================
   FHED — Design System
   Palette: 216 68% 47% | 217 76% 80% | 338 58% 93% | 44 97% 98%
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* brand hues */
  --h-blue: 216; --s-blue: 68%;
  --h-blue-l: 217; --s-blue-l: 76%;
  --h-pink: 338; --s-pink: 58%;
  --h-cream: 44; --s-cream: 97%;

  --primary:        hsl(var(--h-blue) var(--s-blue) 47%);
  --primary-600:     hsl(var(--h-blue) var(--s-blue) 40%);
  --primary-800:     hsl(var(--h-blue) var(--s-blue) 22%);
  --primary-light:   hsl(var(--h-blue-l) var(--s-blue-l) 80%);
  --primary-lighter: hsl(var(--h-blue-l) var(--s-blue-l) 92%);
  --pink:            hsl(var(--h-pink) var(--s-pink) 93%);
  --pink-deep:       hsl(var(--h-pink) var(--s-pink) 78%);
  --pink-strong:     hsl(var(--h-pink) 62% 62%);
  --cream:           hsl(var(--h-cream) var(--s-cream) 98%);
  --accent:          hsl(var(--h-cream) 96% 55%);
  --accent-600:      hsl(var(--h-cream) 96% 48%);
  --white: #ffffff;
  --ink:   hsl(var(--h-blue) 32% 13%);
  --ink-soft: hsl(var(--h-blue) 18% 38%);
  --line:  hsl(var(--h-blue) 30% 90%);

  --grad-primary: linear-gradient(135deg, var(--primary) 0%, hsl(200 78% 55%) 100%);
  --grad-soft: linear-gradient(135deg, var(--primary-light) 0%, var(--pink) 100%);
  --grad-dark: linear-gradient(160deg, var(--primary-800) 0%, hsl(var(--h-blue) 60% 15%) 100%);

  --shadow-sm: 0 2px 10px hsl(var(--h-blue) 40% 20% / .06);
  --shadow-md: 0 10px 30px hsl(var(--h-blue) 40% 20% / .10);
  --shadow-lg: 0 25px 60px hsl(var(--h-blue) 45% 15% / .18);
  --shadow-glow: 0 0 0 1px hsl(var(--h-blue) var(--s-blue) 47% / .08), 0 20px 45px hsl(var(--h-blue) var(--s-blue) 47% / .16);

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

  --ff-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-body: 'Manrope', system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font-family:inherit; }
::selection{ background: var(--primary-light); color: var(--primary-800); }

h1,h2,h3,h4{ font-family: var(--ff-head); font-weight:800; line-height:1.12; letter-spacing:-.02em; color: var(--ink); }
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2{ font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); }
p{ color: var(--ink-soft); }
.lead{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); }

.container{ width:min(1200px, 92%); margin-inline:auto; }
.section{ padding: clamp(4rem, 8vw, 7.5rem) 0; position:relative; }
.section-tight{ padding: clamp(2.5rem, 5vw, 4rem) 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--ff-head); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--primary);
  background: var(--primary-lighter); padding:.5rem 1rem; border-radius: var(--radius-pill);
  margin-bottom:1.25rem;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--primary); box-shadow:0 0 0 4px hsl(var(--h-blue) var(--s-blue) 47% / .2); }

.section-head{ max-width: 680px; margin-bottom: 3.2rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ margin-top:1rem; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding: .95rem 1.9rem; border-radius: var(--radius-pill);
  font-family: var(--ff-head); font-weight:700; font-size:.95rem;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s var(--ease-soft), color .3s var(--ease-soft);
  isolation:isolate; overflow:hidden; white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition: transform .35s var(--ease); }
.btn-primary{ background: var(--grad-primary); color:#fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 22px 45px hsl(var(--h-blue) var(--s-blue) 47% / .32); }
.btn-primary:hover svg{ transform: translateX(4px); }
.btn-ghost{ background: var(--white); color: var(--primary); box-shadow: 0 0 0 1.5px var(--line) inset; }
.btn-ghost:hover{ box-shadow: 0 0 0 1.5px var(--primary) inset; transform: translateY(-3px); }
.btn-light{ background: hsl(0 0% 100% / .14); color:#fff; box-shadow: 0 0 0 1.5px hsl(0 0% 100% / .35) inset; backdrop-filter: blur(6px); }
.btn-light:hover{ background: hsl(0 0% 100% / .22); transform: translateY(-3px); }
.btn-warning{ background: var(--accent); color:#000; box-shadow: 0 8px 22px hsl(var(--h-cream) 96% 45% / .35); }
.btn-warning:hover{ background: var(--accent-600); transform: translateY(-3px); box-shadow: 0 16px 34px hsl(var(--h-cream) 96% 45% / .45); }

.btn-sm{ padding:.7rem 1.5rem; font-size:.82rem; }
.btn-block{ width:100%; }

/* magnetic ripple */
.btn::after{
  content:''; position:absolute; inset:0; border-radius: inherit;
  background: radial-gradient(120px circle at var(--x,50%) var(--y,50%), hsl(0 0% 100% / .35), transparent 60%);
  opacity:0; transition: opacity .3s; z-index:-1;
}
.btn:hover::after{ opacity:1; }

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding: 1.35rem 0; transition: all .45s var(--ease-soft);
}
.navbar.scrolled{
  padding: .8rem 0; background: hsl(var(--h-cream) 60% 99% / .78);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 8px 30px hsl(var(--h-blue) 40% 20% / .08);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--ff-head); font-weight:800; font-size:1.15rem; }
.brand img{ height:34px; width:auto; transition: transform .4s var(--ease); }
.brand:hover img{ transform: rotate(-6deg) scale(1.05); }

.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  position:relative; font-weight:600; font-size:.95rem; color: var(--ink);
  padding:.3rem 0;
}
.nav-links > a:not(.btn)::after{
  content:''; position:absolute; left:0; right:100%; bottom:-4px; top:auto; height:2px;
  background: var(--primary); transition: right .35s var(--ease);
}
.nav-links > a:not(.btn):hover::after, .nav-links > a:not(.btn).active::after{ right:0; }
.nav-links a.active{ color: var(--primary); }

/* I pulsanti non si comprimono: senza questo il flex riduce il padding
   orizzontale e il testo finisce a filo del bordo. */
.nav-cta{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }

/* Metriche Bootstrap 5 (btn + btn-sm), colori del brand. */
.nav-cta .btn{
  flex-shrink:0;
  padding: .55rem 1.4rem;
  font-family: var(--ff-head);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: none;
  transition: background .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.nav-cta .btn:hover{ transform:none; }

.nav-cta .btn-primary{ color:#fff; background: linear-gradient(135deg, var(--primary) 0%, hsl(206 72% 41%) 100%); border-color: transparent; }
.nav-cta .btn-primary:hover{ background: linear-gradient(135deg, var(--primary-600) 0%, hsl(206 72% 35%) 100%); box-shadow: 0 4px 14px hsl(var(--h-blue) var(--s-blue) 40% / .35); }

.nav-cta .btn-warning{ color:#000; background: var(--accent); border-color: var(--accent); }
.nav-cta .btn-warning:hover{ background: var(--accent-600); border-color: var(--accent-600); box-shadow: 0 2px 8px hsl(var(--h-cream) 96% 45% / .4); }

.nav-cta .btn:focus-visible{ outline:0; box-shadow: 0 0 0 .25rem hsl(var(--h-blue) var(--s-blue) 47% / .35); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; z-index:200; }
.nav-toggle span{ height:2px; width:100%; background: var(--ink); border-radius:2px; transition: all .35s var(--ease-soft); }
.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); }

.scroll-progress{ position:fixed; top:0; left:0; height:3px; background: var(--grad-primary); z-index:200; width:0%; }

/* mobile nav */
@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0; z-index:150; flex-direction:column; justify-content:center;
    background: var(--grad-dark); color:#fff;
    transform: translateX(100%); transition: transform .55s var(--ease); gap:2.2rem;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ color:#fff; font-size:1.5rem; }
  .nav-links a::after{ background:#fff; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding: clamp(8rem,16vw,11rem) 0 clamp(4rem,8vw,6rem);
  overflow:hidden; background: var(--cream);
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:3rem; align-items:center; }
.hero-copy .eyebrow{ animation: fadeUp .8s var(--ease) both; }
.hero-copy h1{ animation: fadeUp .9s .08s var(--ease) both; }
.hero-copy .lead{ animation: fadeUp .9s .16s var(--ease) both; margin: 1.4rem 0 2.2rem; max-width:520px; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; animation: fadeUp .9s .24s var(--ease) both; }
.hero-stats{ display:flex; gap:2.4rem; margin-top:3rem; animation: fadeUp .9s .32s var(--ease) both; }
.hero-stats div strong{ display:block; font-family:var(--ff-head); font-size:1.9rem; color: var(--primary); }
.hero-stats div span{ font-size:.82rem; color: var(--ink-soft); }

.hero-visual{ position:relative; height: 480px; display:flex; align-items:center; justify-content:center; }
.blob{ position:absolute; border-radius:50%; filter: blur(2px); }
.blob-1{ width:380px; height:380px; background: var(--grad-primary); top:-20px; right:-10px; animation: morph 9s ease-in-out infinite, float1 8s ease-in-out infinite; opacity:.95; }
.blob-2{ width:230px; height:230px; background: var(--pink); left:0; bottom:0; animation: morph 11s ease-in-out infinite reverse, float2 10s ease-in-out infinite; }
.blob-3{ width:130px; height:130px; background: var(--primary-light); right:40px; bottom:20px; animation: morph 7s ease-in-out infinite, float1 6s ease-in-out infinite; }
.hero-card{
  position:relative; z-index:2; width:280px; background: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding:1.6rem; animation: fadeUp 1s .3s var(--ease) both, floatCard 6s ease-in-out 1s infinite;
}
.hero-card .row{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.hero-card .icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background: var(--primary-lighter); color: var(--primary); flex-shrink:0; }
.hero-card .icon svg{ width:22px; height:22px; }
.hero-card h4{ font-size:.95rem; }
.hero-card small{ color: var(--ink-soft); font-size:.78rem; }
.hero-card .bar{ height:8px; border-radius:99px; background: var(--primary-lighter); overflow:hidden; margin-top:.9rem; }
.hero-card .bar span{ display:block; height:100%; background: var(--grad-primary); border-radius:99px; animation: growBar 1.6s .8s var(--ease) both; }
.floating-pill{
  position:absolute; z-index:3; background: var(--white); box-shadow: var(--shadow-md); border-radius: var(--radius-pill);
  padding:.7rem 1.1rem; display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:.82rem; font-family:var(--ff-head);
}
.floating-pill.p1{ top:20px; left:-10px; animation: float2 7s ease-in-out infinite; }
.floating-pill.p2{ bottom:40px; right:-20px; animation: float1 8s ease-in-out 1s infinite; }
.floating-pill .dot{ width:9px; height:9px; border-radius:50%; background:#39c07a; box-shadow:0 0 0 4px #39c07a33; }

/* ---------- Photo visuals (real product/lifestyle imagery) ---------- */
.hero-photo{
  position:relative; z-index:2; max-width:340px; width:100%;
  filter: drop-shadow(0 30px 45px hsl(var(--h-blue) 45% 15% / .28));
  animation: fadeUp 1s .3s var(--ease) both, floatCard 7s ease-in-out 1s infinite;
}
.showcase-photo{
  width:100%; height:auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display:block;
}
.showcase-wrap{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.media-card{ padding:0; overflow:hidden; }
.media-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.media-card .media-body{ padding:2.1rem; }
.media-card:hover img{ transform: scale(1.04); }
.media-card img{ transition: transform .6s var(--ease); }
.banner-photo{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.banner-photo img{ width:100%; display:block; }
.page-hero-photo{ position:absolute; inset:0; z-index:0; opacity:.14; object-fit:cover; width:100%; height:100%; }

@keyframes fadeUp{ from{ opacity:0; transform: translateY(26px);} to{ opacity:1; transform:none; } }
@keyframes float1{ 0%,100%{ transform: translateY(0) translateX(0);} 50%{ transform: translateY(-22px) translateX(10px);} }
@keyframes float2{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(18px);} }
@keyframes floatCard{ 0%,100%{ transform: translateY(0) rotate(0);} 50%{ transform: translateY(-14px) rotate(.6deg);} }
@keyframes morph{
  0%,100%{ border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  33%{ border-radius: 63% 37% 40% 60% / 55% 65% 35% 45%; }
  66%{ border-radius: 35% 65% 55% 45% / 40% 55% 45% 60%; }
}
@keyframes growBar{ from{ width:0; } to{ width:78%; } }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; padding: 1.6rem 0; border-block: 1px solid var(--line); background: var(--white); }
.marquee-track{ display:flex; gap:4rem; width:max-content; animation: scroll-x 28s linear infinite; }
.marquee-track span{ font-family:var(--ff-head); font-weight:800; font-size:1.3rem; color: var(--primary); white-space:nowrap; letter-spacing:.03em; }
@keyframes scroll-x{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- Cards / Grids ---------- */
.grid{ display:grid; gap:1.6rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--white); border-radius: var(--radius-md); padding: 2.1rem;
  box-shadow: var(--shadow-sm); border:1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  transform-style: preserve-3d; will-change: transform;
}
.card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card .icon{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background: var(--grad-soft); color: var(--primary-600); margin-bottom:1.3rem;
  transition: transform .5s var(--ease);
}
.card .icon svg{ width:26px; height:26px; }
.card:hover .icon{ transform: rotate(-8deg) scale(1.08); }
.card h3{ margin-bottom:.6rem; }
.card p{ font-size:.95rem; }
.card .link{ margin-top:1.2rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-family:var(--ff-head); font-size:.88rem; color: var(--primary); }
.card .link svg{ width:15px; height:15px; transition: transform .35s var(--ease); }
.card:hover .link svg{ transform: translateX(5px); }

.card-dark{ background: var(--grad-dark); color:#fff; }
.card-dark p{ color: hsl(0 0% 100% / .72); }
.card-dark h3{ color:#fff; }
.card-dark .icon{ background: hsl(0 0% 100% / .12); color:#fff; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform: scale(.92); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale.in{ opacity:1; transform:none; }
.stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ---------- Steps ---------- */
.steps{ counter-reset: step; }
.step{ display:flex; gap:1.5rem; position:relative; padding-bottom:2.6rem; }
.step:last-child{ padding-bottom:0; }
.step::before{ counter-increment: step; content: counter(step, decimal-leading-zero); font-family:var(--ff-head); font-weight:800; font-size:.85rem; color: var(--primary); width:52px; height:52px; border-radius:50%; background: var(--white); border:1.5px solid var(--line); display:grid; place-items:center; flex-shrink:0; z-index:1; }
.step:not(:last-child)::after{ content:''; position:absolute; left:26px; top:52px; bottom:0; width:2px; background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); }
.step h4{ font-family:var(--ff-head); font-weight:700; margin-bottom:.35rem; }
.step p{ font-size:.94rem; }

/* ---------- Stat band ---------- */
.stat-band{ background: var(--grad-dark); color:#fff; border-radius: var(--radius-lg); padding: clamp(2.5rem,5vw,4rem); }
.stat-band .grid-4{ text-align:center; }
.stat-band strong{ display:block; font-family:var(--ff-head); font-size: clamp(2rem,4vw,2.8rem); }
.stat-band span{ color: hsl(0 0% 100% / .68); font-size:.85rem; }

/* ---------- Testimonials ---------- */
.testi-track{ position:relative; min-height: 260px; }
.testi{ position:absolute; inset:0; opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft); pointer-events:none; }
.testi.active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.testi blockquote{ font-family:var(--ff-head); font-size: clamp(1.2rem,2vw,1.6rem); font-weight:600; color: var(--ink); line-height:1.5; }
.testi .who{ display:flex; align-items:center; gap:.9rem; margin-top:1.6rem; }
.avatar{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--ff-head); font-weight:800; background: var(--grad-primary); }
.testi .who strong{ display:block; font-size:.95rem; }
.testi .who span{ font-size:.8rem; color: var(--ink-soft); }
.testi-dots{ display:flex; gap:.5rem; margin-top:2rem; }
.testi-dots button{ width:9px; height:9px; border-radius:50%; background: var(--line); transition: all .35s var(--ease); }
.testi-dots button.active{ width:26px; border-radius:99px; background: var(--primary); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; width:100%; text-align:left; font-family:var(--ff-head); font-weight:700; font-size:1.02rem; }
.faq-q .plus{ width:26px; height:26px; border-radius:50%; background: var(--primary-lighter); color: var(--primary); display:grid; place-items:center; flex-shrink:0; transition: transform .4s var(--ease); }
.faq-item.open .faq-q .plus{ transform: rotate(135deg); background: var(--primary); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); }
.faq-a p{ padding-bottom:1.5rem; font-size:.95rem; max-width:640px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.82rem; font-weight:700; font-family:var(--ff-head); margin-bottom:.4rem; color: var(--ink); }
.field input, .field textarea, .field select{
  width:100%; padding:.85rem 1rem; border-radius: var(--radius-sm); border:1.5px solid var(--line);
  background: var(--white); transition: border-color .3s, box-shadow .3s; font-size:.95rem;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color: var(--primary); box-shadow: 0 0 0 4px hsl(var(--h-blue) var(--s-blue) 47% / .12);
}
.form-msg{ margin-top:1rem; padding:.9rem 1.1rem; border-radius: var(--radius-sm); font-size:.9rem; font-weight:600; display:none; }
.form-msg.show{ display:block; animation: fadeUp .5s var(--ease); }
.form-msg.ok{ background: hsl(150 55% 94%); color: hsl(150 55% 28%); }

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative; overflow:hidden; border-radius: var(--radius-lg); background: var(--grad-primary);
  padding: clamp(3rem,6vw,5rem); text-align:center; color:#fff;
}
.cta-banner h2{ color:#fff; }
.cta-banner p{ color: hsl(0 0% 100% / .85); }
.cta-banner .btn-primary{ background:#fff; color: var(--primary); box-shadow: var(--shadow-lg); }
.cta-banner::before, .cta-banner::after{ content:''; position:absolute; border-radius:50%; background: hsl(0 0% 100% / .1); }
.cta-banner::before{ width:340px; height:340px; top:-160px; left:-100px; animation: float1 10s ease-in-out infinite; }
.cta-banner::after{ width:220px; height:220px; bottom:-120px; right:-40px; animation: float2 9s ease-in-out infinite; }

/* ---------- Footer ---------- */
footer{ background: var(--grad-dark); color: hsl(0 0% 100% / .78); padding: 4.5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom: 3rem; border-bottom: 1px solid hsl(0 0% 100% / .12); }
.footer-brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--ff-head); font-weight:800; font-size:1.1rem; color:#fff; margin-bottom:1rem; }
.footer-brand img{ height:30px; }
.footer-col h4{ color:#fff; font-family:var(--ff-head); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col a{ display:block; padding:.35rem 0; font-size:.92rem; transition: color .3s, transform .3s; }
.footer-col a:hover{ color:#fff; transform: translateX(4px); }
.footer-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background: hsl(0 0% 100% / .08); display:grid; place-items:center; transition: all .35s var(--ease); }
.footer-social a:hover{ background: var(--primary); transform: translateY(-4px); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.8rem; font-size:.82rem; flex-wrap:wrap; gap:1rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding: clamp(8rem,14vw,10rem) 0 clamp(3rem,6vw,4.5rem); position:relative; overflow:hidden; }
.page-hero .container{ position:relative; z-index:2; }
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg .blob{ opacity:.5; }

/* ---------- Utilities ---------- */
.text-center{ text-align:center; }
.mt-2{ margin-top:2rem; }
.badge{ display:inline-flex; align-items:center; gap:.4rem; background: var(--pink); color: hsl(var(--h-pink) 60% 35%); font-family:var(--ff-head); font-weight:700; font-size:.76rem; padding:.4rem .85rem; border-radius: var(--radius-pill); }
.divider{ height:1px; background: var(--line); margin: 3rem 0; }

.tag-filter{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.tag-filter button{ padding:.6rem 1.2rem; border-radius: var(--radius-pill); font-weight:700; font-family:var(--ff-head); font-size:.85rem; background: var(--white); border:1.5px solid var(--line); transition: all .35s var(--ease); }
.tag-filter button.active, .tag-filter button:hover{ background: var(--primary); color:#fff; border-color: var(--primary); }

.blog-card{ background:#fff; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); transition: all .5s var(--ease); }
.blog-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.blog-cover{ height:190px; position:relative; overflow:hidden; }
.blog-cover .icon-big{ position:absolute; inset:0; display:grid; place-items:center; }
.blog-cover .icon-big svg{ width:56px; height:56px; color: hsl(0 0% 100% / .85); }
.blog-body{ padding:1.6rem; }
.blog-meta{ display:flex; gap:.8rem; align-items:center; font-size:.78rem; color: var(--ink-soft); margin-bottom:.7rem; font-weight:600; }
.blog-body h3{ margin-bottom:.6rem; font-size:1.15rem; }
.blog-body p{ font-size:.9rem; }

.timeline{ position:relative; padding-left:2.4rem; }
.timeline::before{ content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background: var(--line); }
.timeline-item{ position:relative; padding-bottom:2.6rem; }
.timeline-item::before{ content:''; position:absolute; left:-2.4rem; top:4px; width:18px; height:18px; border-radius:50%; background: var(--white); border:3px solid var(--primary); }
.timeline-item strong{ font-family:var(--ff-head); color: var(--primary); font-size:.85rem; }

.value-grid .card{ text-align:left; }

.team-card{ text-align:center; }
.team-avatar{ width:96px; height:96px; border-radius:50%; margin:0 auto 1.1rem; display:grid; place-items:center; color:#fff; font-family:var(--ff-head); font-weight:800; font-size:1.6rem; }
.team-card h4{ font-family:var(--ff-head); font-size:1.05rem; }
.team-card span{ font-size:.85rem; color: var(--primary); font-weight:700; }

/* cursor glow */
.cursor-glow{ position:fixed; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:1; background: radial-gradient(circle, hsl(var(--h-blue) var(--s-blue-l) 80% / .35), transparent 70%); transform: translate(-50%,-50%); filter: blur(10px); transition: opacity .3s; opacity:0; }
@media (hover:hover){ .cursor-glow{ opacity:1; } }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:360px; order:-1; }
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .nav-links a{ font-size:1.3rem; }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .step{ gap:1rem; }
}