/* ============================================================
   KORVIA — Sistema Operativo del Consulente ESG
   Visual system — blu scuro + verde, stile Stripe-like
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --ink:        #0a2440;   /* deep navy — text & dark sections */
  --ink-2:      #0e3155;
  --ink-3:      #123c68;
  --blue:       #1f63ab;   /* accent blue */
  --blue-soft:  #3f86d6;
  --green:      #3d7a5e;   /* accent green (richer logo sage) */
  --green-2:    #4f7a64;   /* logo sage */
  --green-bright:#74b896;  /* gradient highlight */
  --mint:       #eef5f1;
  --mint-2:     #e3efe9;

  --paper:      #f6f9f8;
  --white:      #ffffff;
  --muted:      #56697b;
  --muted-2:    #7c8a99;
  --line:       rgba(10,36,64,.10);
  --line-soft:  rgba(10,36,64,.06);

  /* Accent (overridable by [data-accent]) */
  --accent:     var(--green);
  --accent-2:   var(--green-bright);
  --accent-ink: #25543f;

  /* Gradients */
  --grad-brand: linear-gradient(115deg,#15467e 0%,#1f7a8c 45%,#3d8f6a 100%);
  --grad-soft:  linear-gradient(120deg,#e9f2fb 0%,#eaf5ef 55%,#e6f1ea 100%);
  --grad-text:  linear-gradient(100deg,#123c68 0%,#1f7a8c 60%,#3d8f6a 100%);

  /* Type */
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;

  /* Geometry */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px;
  --shadow-sm:0 1px 2px rgba(10,36,64,.06), 0 2px 6px rgba(10,36,64,.05);
  --shadow:0 8px 24px -10px rgba(10,36,64,.20), 0 2px 8px rgba(10,36,64,.06);
  --shadow-lg:0 30px 70px -28px rgba(10,36,64,.40);
  --maxw:1180px;
  --gut:clamp(20px,5vw,40px);
}

/* accent variants */
[data-accent="blue"]{ --accent:var(--blue); --accent-2:var(--blue-soft); --accent-ink:#163e6b; }
[data-accent="teal"]{ --accent:#1f8a8f; --accent-2:#5fc4bf; --accent-ink:#0f5658; }

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body);
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0; color:var(--ink)}
p{margin:0}
::selection{background:#cdeede; color:var(--ink)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.section{padding-block:clamp(72px,10vw,128px); position:relative}
.section--tight{padding-block:clamp(56px,7vw,88px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink);
  padding:7px 13px; border-radius:100px; white-space:nowrap;
  background:var(--mint); border:1px solid var(--line-soft);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}
[data-theme="dark"] .eyebrow{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#bfe6d2 }
.eyebrow--dark{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#bfe6d2 }

.sec-head{max-width:680px; margin-bottom:clamp(40px,5vw,60px)}
.sec-head h2{font-size:clamp(30px,4.4vw,48px); margin:18px 0 0}
.sec-head .lead{margin-top:18px; font-size:clamp(17px,1.6vw,20px); color:var(--muted); line-height:1.55}
.sec-head--center{margin-inline:auto; text-align:center}

.grad-word{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:100px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, background .2s, color .2s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn--brand{ --bg:var(--accent); --fg:#fff; box-shadow:0 10px 24px -10px color-mix(in oklab,var(--accent),#000 10%) }
.btn--dark{ --bg:var(--ink); --fg:#fff }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); box-shadow:none }
.btn--ghost:hover{ background:var(--mint); border-color:transparent }
.btn--light{ --bg:#fff; --fg:var(--ink) }
.btn--lg{ padding:16px 28px; font-size:16px }
[data-theme="dark"] .btn--ghost{ --fg:#e8f0ee; border-color:rgba(255,255,255,.22) }
[data-theme="dark"] .btn--ghost:hover{ background:rgba(255,255,255,.08) }

.link-arrow{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--accent-ink)}
.link-arrow .arr{transition:transform .2s}
.link-arrow:hover .arr{transform:translateX(4px)}

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px var(--gut);
  transition:background .3s, box-shadow .3s, padding .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line-soft); box-shadow:0 1px 0 rgba(10,36,64,.02);
}
.brand{display:flex; align-items:center; gap:11px}
.brand img{width:auto; height:50px;}
.brand .logo { height: 66px; width: auto; display: block }
.brand .logo-dark { display: none }
.nav.scrolled .brand .logo-light { display: none }
.nav.scrolled .brand .logo-dark { display: block }
.wm{font-family:var(--font-display); font-weight:700; font-size:23px; letter-spacing:.01em; color:var(--ink)}
.wm .a{color:var(--accent); font-style:normal}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  font-family:var(--font-display); font-weight:500; font-size:14.5px; color:#99b3a5;
  padding:9px 13px; border-radius:9px; transition:color .15s, background .15s;
}
.nav-links a:hover{color:var(--ink); background:var(--mint)}
.nav-right{display:flex; align-items:center; gap:14px}
.lang{display:flex; gap:2px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--muted)}
.lang button{background:none; border:none; color:var(--muted); padding:5px 7px; border-radius:7px}
.lang button.on{color:var(--ink); background:var(--mint)}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink)}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}

/* ---------- Mesh / blobs ---------- */
.mesh{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; will-change:transform}
.blob.b1{width:520px; height:520px; background:radial-gradient(circle at 30% 30%,#7fc6e8,transparent 70%); top:-180px; left:-80px; animation:drift1 22s ease-in-out infinite}
.blob.b2{width:560px; height:560px; background:radial-gradient(circle at 60% 40%,#8fe0bd,transparent 70%); top:-220px; right:-120px; animation:drift2 26s ease-in-out infinite}
.blob.b3{width:420px; height:420px; background:radial-gradient(circle at 50% 50%,#bcd2f0,transparent 70%); top:40px; left:40%; opacity:.4; animation:drift3 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(60px,40px) scale(1.1)}}
@keyframes drift2{50%{transform:translate(-50px,50px) scale(1.05)}}
@keyframes drift3{50%{transform:translate(-40px,30px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none!important}}

/* ============================================================
   HERO — shared
   ============================================================ */
.hero{position:relative; isolation:isolate}
.hero-eyebrow{margin-bottom:22px}
.hero h1{font-size:clamp(36px,6vw,68px); letter-spacing:-.03em}
.hero .sub{font-size:clamp(18px,1.9vw,22px); color:var(--muted); line-height:1.5; max-width:620px}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.payoff{font-family:var(--font-display); font-weight:600; font-style:italic; font-size:14px; letter-spacing:.01em; color:var(--accent-ink); opacity:.9}
.trust{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; color:var(--muted); font-size:13.5px}
.trust .chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:500}
.trust .chip svg{width:15px; height:15px; color:var(--accent)}

.hero-variant{display:none}
[data-hero="a"] .hero-a{display:block}
[data-hero="b"] .hero-b{display:block}
[data-hero="c"] .hero-c{display:block}

/* ---- HERO A : Luce (light, centered, orbit) ---- */
.hero-a{padding:148px 0 96px; text-align:center}
.hero-a .mesh .blob{opacity:.55}
.hero-a .h-inner{max-width:880px; margin:0 auto; position:relative; z-index:2}
.hero-a h1{margin-bottom:22px}
.hero-a .sub{margin:0 auto; max-width:660px}
.hero-a .cta-row{justify-content:center; margin-top:34px}
.hero-a .payoff{margin-top:22px}
.hero-a .orbit{position:relative; height:clamp(240px,34vw,360px); margin-top:54px}
.orbit .core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(120px,15vw,168px); height:clamp(120px,15vw,168px);
  border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:var(--shadow-lg); border:1px solid var(--line-soft)}
.orbit .core::after{content:""; position:absolute; inset:-14px; border-radius:50%; background:var(--grad-brand); opacity:.16; z-index:-1; filter:blur(8px)}
.orbit .core img{width:64%}
.orbit .ring{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px dashed var(--line); border-radius:50%}
.orbit .ring.r1{width:clamp(280px,38vw,420px); height:clamp(280px,38vw,420px); animation:spin 60s linear infinite}
.orbit .ring.r2{width:clamp(420px,56vw,620px); height:clamp(420px,56vw,620px); opacity:.6; animation:spin 90s linear infinite reverse}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.orbit .tag{position:absolute; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:100px; background:#fff; box-shadow:var(--shadow); font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink); border:1px solid var(--line-soft); white-space:nowrap; animation:float 7s ease-in-out infinite}
.orbit .tag i{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.orbit .tag.t1{left:6%; top:24%} .orbit .tag.t2{right:4%; top:14%; animation-delay:-2s}
.orbit .tag.t3{left:14%; bottom:8%; animation-delay:-4s} .orbit .tag.t4{right:10%; bottom:14%; animation-delay:-1s}
.orbit .tag.t5{left:50%; top:-2%; transform:translateX(-50%); animation-delay:-3s}
@keyframes float{50%{transform:translateY(-12px)}}
.orbit .tag.t5{animation-name:float5} @keyframes float5{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.orbit .ring,.orbit .tag{animation:none!important}}

/* ---- HERO B : Profondità (dark split) ---- */
.hero-b{background:var(--ink); color:#fff; padding:152px 0 100px; overflow:hidden}
.hero-b .mesh .blob{opacity:.4; filter:blur(80px)}
.hero-b .mesh .b1{background:radial-gradient(circle,#1f7a8c,transparent 70%)}
.hero-b .mesh .b2{background:radial-gradient(circle,#2f9f74,transparent 70%)}
.hero-b .mesh .b3{background:radial-gradient(circle,#2c6bb0,transparent 70%)}
.hero-b .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; position:relative; z-index:2}
.hero-b h1{color:#fff}
.hero-b .sub{color:#aebfcf}
.hero-b .cta-row{margin-top:34px}
.hero-b .trust{color:#8fa3b6; margin-top:30px}
.hero-b .payoff{color:#7fd6ac; margin-top:24px}
.hero-b .visual{position:relative; aspect-ratio:1/1; display:grid; place-items:center}
.hero-b .orb{position:relative; width:74%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.14),rgba(255,255,255,.02) 60%);
  border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 30px rgba(255,255,255,.08), 0 40px 80px -30px #000}
.hero-b .orb::before{content:""; position:absolute; inset:-2px; border-radius:50%; background:conic-gradient(from 0deg,#1f7a8c,#3d8f6a,#2c6bb0,#1f7a8c); opacity:.5; filter:blur(18px); z-index:-1; animation:spin 18s linear infinite}
.hero-b .orb img{width:58%; filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.hero-b .gtag{position:absolute; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:100px; background:rgba(255,255,255,.07); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16); font-family:var(--font-display); font-weight:600; font-size:13px; color:#eaf3f0; animation:float 7s ease-in-out infinite}
.hero-b .gtag i{width:7px;height:7px;border-radius:50%;background:var(--green-bright)}
.hero-b .gtag.g1{top:8%; left:-4%} .hero-b .gtag.g2{top:30%; right:-8%; animation-delay:-2s}
.hero-b .gtag.g3{bottom:14%; left:2%; animation-delay:-4s} .hero-b .gtag.g4{bottom:4%; right:6%; animation-delay:-1s}

/* ---- HERO C : Editoriale (band watermark) ---- */
.hero-c{padding:150px 0 90px; position:relative; overflow:hidden}
.hero-c .band{position:absolute; z-index:0; top:-10%; right:-12%; width:62%; height:130%;
  background:var(--grad-brand); transform:rotate(-9deg); border-radius:60px; opacity:.95;
  box-shadow:var(--shadow-lg)}
.hero-c .band .wmk{position:absolute; right:8%; top:50%; transform:translateY(-50%); width:46%; opacity:.16; filter:brightness(0) invert(1)}
.hero-c .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; position:relative; z-index:2}
.hero-c h1{font-size:clamp(38px,6.4vw,74px); max-width:13ch}
.hero-c .sub{margin-top:24px}
.hero-c .cta-row{margin-top:32px}
.hero-c .payoff{margin-top:22px}
.hero-c .side{position:relative}
.hero-c .qcard{background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.5); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-lg)}
.hero-c .qcard h4{font-size:15px; color:#dff1e7; margin-bottom:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.hero-c .qrow{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.18); color:#eef6f2; font-family:var(--font-display); font-weight:500; font-size:14.5px}
.hero-c .qrow:last-child{border-bottom:none}
.hero-c .qrow .pct{margin-left:auto; font-weight:700; color:#bff0d6}
.hero-c .qbar{height:6px; border-radius:6px; background:rgba(255,255,255,.18); overflow:hidden; margin-top:3px; flex:0 0 70px}
.hero-c .qbar i{display:block; height:100%; background:var(--green-bright); border-radius:6px}

/* ============================================================
   LOGOS / standard strip
   ============================================================ */
.standards{border-block:1px solid var(--line-soft); background:var(--paper)}
.standards .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; justify-content:center; padding-block:26px}
.standards .lbl{font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.standards .std{font-family:var(--font-display); font-weight:700; font-size:16px; color:#48617a; letter-spacing:.02em}
.standards .sep{width:1px; height:18px; background:var(--line)}

/* ============================================================
   MODULES — Cosa fa KORVIA
   ============================================================ */
.modules-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mcard{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; transition:transform .25s, box-shadow .25s, border-color .25s; overflow:hidden;
}
.mcard::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-brand); opacity:0; transition:opacity .25s}
.mcard:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.mcard:hover::before{opacity:1}
.mcard .ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--mint); color:var(--accent-ink); margin-bottom:18px; transition:background .25s}
.mcard:hover .ic{background:var(--grad-brand); color:#fff}
.mcard .ic svg{width:24px; height:24px}
.mcard h3{font-size:19px; margin-bottom:8px; letter-spacing:-.01em}
.mcard p{color:var(--muted); font-size:15px; line-height:1.55}
.mcard .ai{position:absolute; top:18px; right:18px; font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.08em; color:var(--accent-ink); background:var(--mint-2); padding:4px 8px; border-radius:7px}

/* ============================================================
   STEPS — Come funziona
   ============================================================ */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px}
.step{position:relative; padding-top:34px}
.step .num{position:absolute; top:0; left:0; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff; background:var(--grad-brand); box-shadow:var(--shadow-sm)}
.step .num{top:-21px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:40px 22px 24px; margin-top:21px}
.step h3{font-size:17px; margin-bottom:8px}
.step p{color:var(--muted); font-size:14.5px; line-height:1.55}
.steps .track{display:none}

/* ============================================================
   CONSULENTI — programma certificazione
   ============================================================ */
.consul{background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(34px,5vw,64px); position:relative; overflow:hidden; isolation:isolate}
.consul .mesh .blob{opacity:.35}
.consul .mesh .b1{background:radial-gradient(circle,#1f7a8c,transparent 70%); top:-200px; left:-60px}
.consul .mesh .b2{background:radial-gradient(circle,#2f9f74,transparent 70%); bottom:-260px; right:-80px; top:auto}
.consul .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; position:relative; z-index:2}
.consul h2{color:#fff; font-size:clamp(28px,3.6vw,42px)}
.consul .lead{color:#aec3d2; margin-top:18px; font-size:18px; line-height:1.55}
.consul .cta-row{margin-top:30px}
.cbadge-list{display:grid; gap:14px}
.cbadge{display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:18px 20px; transition:background .2s, transform .2s}
.cbadge:hover{background:rgba(255,255,255,.09); transform:translateX(4px)}
.cbadge .ck{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--grad-brand); color:#fff}
.cbadge .ck svg{width:18px;height:18px}
.cbadge h4{color:#fff; font-size:16px; margin-bottom:4px}
.cbadge p{color:#9fb4c5; font-size:14px; line-height:1.5}

/* ============================================================
   BENEFITS — Vantaggi
   ============================================================ */
.ben-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.ben{display:flex; gap:18px; align-items:flex-start; padding:26px; border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(180deg,#fff,var(--paper))}
.ben .bic{flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--mint); color:var(--accent-ink)}
.ben .bic svg{width:26px;height:26px}
.ben h3{font-size:19px; margin-bottom:7px}
.ben p{color:var(--muted); font-size:15px; line-height:1.55}

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{max-width:820px; margin:0 auto}
.faq{border-bottom:1px solid var(--line)}
.faq:first-child{border-top:1px solid var(--line)}
.faq button{width:100%; background:none; border:none; display:flex; align-items:center; gap:18px; padding:24px 4px; text-align:left; color:var(--ink)}
.faq .q{font-family:var(--font-display); font-weight:600; font-size:18px; flex:1; letter-spacing:-.01em}
.faq .pm{flex:0 0 auto; width:26px; height:26px; position:relative}
.faq .pm::before,.faq .pm::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--accent); border-radius:2px}
.faq .pm::before{width:14px; height:2px}
.faq .pm::after{width:2px; height:14px; transition:transform .3s}
.faq[aria-expanded="true"] .pm::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.faq .a{overflow:hidden; max-height:0; transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.faq .a-inner{padding:0 4px 26px; color:var(--muted); font-size:16px; line-height:1.6; max-width:64ch}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--paper); border-top:1px solid var(--line-soft)}
.contact .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:start}
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,38px); box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--font-display); font-weight:600; font-size:13px; color:#3a4f63; margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  transition:border-color .18s, box-shadow .18s;
}
.field textarea{resize:vertical; min-height:104px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),#fff 78%)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.seg{display:flex; gap:8px}
.seg label{flex:1; cursor:pointer; margin:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg .opt{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--font-display); font-weight:600; font-size:14px; color:#3a4f63; transition:all .18s}
.seg input:checked + .opt{border-color:var(--accent); background:var(--mint); color:var(--accent-ink)}
.form-note{font-size:12.5px; color:var(--muted); margin-top:6px}

/* consent checkbox */
.consent{display:flex; gap:11px; align-items:flex-start; margin:4px 0 18px; cursor:pointer}
.consent input{position:absolute; opacity:0; width:0; height:0}
.consent .box{flex:0 0 auto; width:20px; height:20px; border:1.5px solid var(--line); border-radius:6px; background:#fff; display:grid; place-items:center; margin-top:1px; color:#fff; transition:background .15s, border-color .15s}
.consent .box svg{width:13px; height:13px; opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s}
.consent input:checked + .box{background:var(--accent); border-color:var(--accent)}
.consent input:checked + .box svg{opacity:1; transform:scale(1)}
.consent input:focus-visible + .box{box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),#fff 78%)}
.consent .ctext{font-size:13.5px; line-height:1.5; color:var(--muted)}
.consent .ctext a{color:var(--accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.consent .ctext .req{color:var(--accent-ink); font-weight:700}
.consent.invalid .box{border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.form-ok{display:none; text-align:center; padding:30px 10px}
.form-ok .ok-ic{width:62px; height:62px; border-radius:50%; background:var(--grad-brand); display:grid; place-items:center; margin:0 auto 18px; color:#fff}
.form-ok h3{font-size:22px; margin-bottom:8px}
.form-ok p{color:var(--muted)}
.form-card.sent .form-body{display:none}
.form-card.sent .form-ok{display:block}

.booking{position:sticky; top:96px}
.book-card{background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:clamp(24px,3vw,32px); box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.book-card .mesh .blob{opacity:.3}
.book-card h3{color:#fff; font-size:22px; position:relative; z-index:2}
.book-card .bsub{color:#aec3d2; margin-top:10px; font-size:15px; position:relative; z-index:2}
.cal{position:relative; z-index:2; margin-top:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:16px}
.cal-head{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-display); font-weight:600; font-size:14px; color:#dde8f0; margin-bottom:12px}
.cal-head button{background:none; border:none; color:#9fb4c5; width:26px; height:26px; border-radius:7px}
.cal-head button:hover{background:rgba(255,255,255,.1); color:#fff}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-grid .dow{font-family:var(--font-display); font-weight:600; font-size:11px; color:#8298ab; text-align:center; padding-bottom:4px}
.cal-grid .day{aspect-ratio:1; display:grid; place-items:center; font-size:13px; color:#cdd9e3; border-radius:8px; cursor:pointer; transition:background .15s, color .15s; border:1px solid transparent}
.cal-grid .day:hover{background:rgba(255,255,255,.1)}
.cal-grid .day.muted{color:#4d6276; pointer-events:none}
.cal-grid .day.sel{background:var(--accent); color:#fff; font-weight:700}
.cal-grid .day.dot{position:relative}
.cal-grid .day.dot::after{content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--green-bright)}
.slots{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.slot{font-family:var(--font-display); font-weight:600; font-size:13px; color:#dde8f0; padding:9px 13px; border-radius:9px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); cursor:pointer; transition:all .15s}
.slot:hover{background:rgba(255,255,255,.12)}
.slot.sel{background:var(--accent); border-color:transparent; color:#fff}
.book-card .btn{margin-top:18px; width:100%; justify-content:center; position:relative; z-index:2}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink); color:#9fb4c5; padding-block:clamp(48px,6vw,72px) 32px}
.footer .top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1)}
.footer .brand .wm{color:#fff}
.footer .brand img{filter:none}
.footer .fdesc{margin-top:16px; max-width:34ch; font-size:14.5px; line-height:1.6; color:#8ea4b6}
.footer .fpay{margin-top:16px; font-family:var(--font-display); font-style:italic; font-weight:600; font-size:13.5px; color:#7fd6ac}
.footer h5{font-family:var(--font-display); color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; font-weight:600}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.footer ul a{font-size:14.5px; color:#9fb4c5; transition:color .15s}
.footer ul a:hover{color:#fff}
.footer .bottom{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; padding-top:28px; font-size:13px; color:#7990a3}
.footer .bottom .co{color:#9fb4c5}

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* Tweak: disable motion */
.no-motion .blob,.no-motion .ring,.no-motion .tag,.no-motion .gtag,.no-motion .orb::before{animation:none!important}
.no-motion .reveal{opacity:1!important; transform:none!important; transition:none!important}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .modules-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .hero-b .grid,.hero-c .grid,.consul .grid,.contact .grid{grid-template-columns:1fr}
  .hero-b .visual{max-width:440px; margin:6px auto 0}
  .hero-c .band{display:none}
  .hero-c .side{display:none}
  .booking{position:static; margin-top:4px}
  .footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .modules-grid,.ben-grid,.steps{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .hero-a{padding-top:120px}
  .orbit{display:none}
  .footer .top{grid-template-columns:1fr}
  .nav{padding-inline:18px}
}

/* mobile menu */
.mobile-menu{position:fixed; inset:0; z-index:55; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); display:none; flex-direction:column; padding:90px 28px 28px; gap:6px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--ink); padding:14px 6px; border-bottom:1px solid var(--line-soft)}
.mobile-menu .btn{margin-top:18px; justify-content:center}