/* ════════════════════════════════════
   TRANSFORMATION DIGITALE — Page specific
   ════════════════════════════════════ */

/* Phase color tokens */
:root {
  --p1:#00C4F0; --p1-lt:#E6F9FF; --p1-dk:#0096BB;
  --p2:#0047FF; --p2-lt:#EDF1FF; --p2-dk:#0030CC;
  --p3:#7B3FFF; --p3-lt:#F1EBFF; --p3-dk:#5A2ECC;
  --p4:#00D97E; --p4-lt:#E6FFF4; --p4-dk:#00A860;
}

/* ── HERO — dark ── */
.hero{background:var(--ink);}
.hero-h1{color:var(--white);}
.hero-sub{color:rgba(255,255,255,.55);}
.hero-dots{position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle,rgba(0,196,240,.12) 1.2px,transparent 1.2px);background-size:30px 30px;mask-image:radial-gradient(ellipse 70% 70% at 60% 45%,black 25%,transparent 75%);pointer-events:none;}
.hero-glow{position:absolute;z-index:0;top:10%;right:5%;width:600px;height:500px;background:radial-gradient(ellipse,rgba(0,196,240,.06) 0%,transparent 60%);pointer-events:none;animation:blobPulse 10s ease-in-out infinite;}
.hero-watermark{position:absolute;right:-3%;bottom:-8%;z-index:0;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(160px,22vw,320px);font-weight:800;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.035);user-select:none;pointer-events:none;}
.hero-kicker{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:var(--teal);}
.kicker-dot{background:var(--teal);}
.hero-phases{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;opacity:0;animation:fadeUp .8s 1.3s forwards;}
.hero-phase{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:8px 16px;border-radius:100px;}
.hp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.btn-ghost{color:rgba(255,255,255,.6);border-bottom-color:rgba(255,255,255,.2);}
.btn-ghost:hover{color:var(--white);border-color:var(--white);}

/* ── STATS (dark hero variant — white accent) ── */
.stats{background:var(--ink);border-color:rgba(255,255,255,.07);}
.stat{border-right-color:rgba(255,255,255,.07);}
.stat:hover{background:rgba(255,255,255,.04);}
.stat-n{color:var(--white);}
.stat-n .acc{color:var(--teal);}
.stat-caption{color:rgba(255,255,255,.35);}

/* burger bars on dark hero */
.burger-bar{background:var(--white);}
#nav.pinned .burger-bar{background:var(--ink);}
/* nav links on dark hero */
.nav-link{color:rgba(255,255,255,.6);}
.nav-link:hover{color:var(--white);}
.logo{color:var(--white);}
#nav.pinned .logo{color:var(--ink);}
#nav.pinned .nav-link{color:var(--ink2);}
#nav.pinned .nav-link:hover{color:var(--blue);}

/* ── JOURNEY — phase accordion ── */
.journey{background:var(--white);padding:120px 60px;}
.journey-header{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:80px;}
.phases{display:flex;flex-direction:column;gap:0;}
.phase{border:1px solid var(--border);border-bottom:none;background:var(--white);transition:background .3s;}
.phase:last-child{border-bottom:1px solid var(--border);}
.phase-header{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:24px;padding:28px 40px;cursor:pointer;user-select:none;transition:background .2s;}
.phase-header:hover{background:var(--off);}
.phase-num{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.03em;transition:color .3s;}
.ph-1 .phase-num{color:var(--p1);} .ph-2 .phase-num{color:var(--p2);} .ph-3 .phase-num{color:var(--p3);} .ph-4 .phase-num{color:var(--p4);}
.phase-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;}
.ph-1 .phase-label{color:var(--p1-dk);} .ph-2 .phase-label{color:var(--p2-dk);} .ph-3 .phase-label{color:var(--p3-dk);} .ph-4 .phase-label{color:var(--p4-dk);}
.phase-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.2;}
.phase-chevron{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;transition:transform .4s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s;}
.phase-chevron svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s;}
.phase.open .phase-chevron{transform:rotate(180deg);border-color:var(--blue);background:var(--blue);}
.phase.open .phase-chevron svg{stroke:var(--white);}
.phase-price-badge{font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 14px;border-radius:100px;white-space:nowrap;}
.ph-1 .phase-price-badge{color:var(--p1-dk);background:var(--p1-lt);border:1px solid rgba(0,196,240,.2);}
.ph-2 .phase-price-badge{color:var(--p2-dk);background:var(--p2-lt);border:1px solid rgba(0,71,255,.15);}
.ph-3 .phase-price-badge{color:var(--p3-dk);background:var(--p3-lt);border:1px solid rgba(123,63,255,.15);}
.ph-4 .phase-price-badge{color:var(--p4-dk);background:var(--p4-lt);border:1px solid rgba(0,217,126,.15);}
.phase-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1);}
.phase.open .phase-body{grid-template-rows:1fr;}
.phase-body-inner{overflow:hidden;}
.phase-content{padding:0 40px 44px 136px;display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.phase-steps{display:flex;flex-direction:column;gap:0;}
.phase-step{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border);}
.phase-step:last-child{border-bottom:none;}
.ps-num{font-size:11px;font-weight:700;color:var(--muted);min-width:22px;flex-shrink:0;padding-top:3px;font-variant-numeric:tabular-nums;}
.ps-text{font-size:14px;color:var(--ink2);line-height:1.65;}
.ps-text strong{color:var(--ink);font-weight:600;}
.phase-benefits{display:flex;flex-direction:column;gap:0;}
.phase-benefit{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--border);}
.phase-benefit:last-child{border-bottom:none;}
.pb-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:7px;}
.ph-1 .pb-dot{background:var(--p1);} .ph-2 .pb-dot{background:var(--p2);} .ph-3 .pb-dot{background:var(--p3);} .ph-4 .pb-dot{background:var(--p4);}
.pb-text{font-size:14px;color:var(--ink2);line-height:1.65;}
.pb-text strong{color:var(--ink);font-weight:600;}

/* ── PRICING — 4 columns ── */
.pricing{background:var(--ink);padding:120px 60px;position:relative;overflow:hidden;}
.pricing-geo{position:absolute;inset:0;pointer-events:none;}
.pricing-geo svg{width:100%;height:100%;}
.pricing-header{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:80px;position:relative;z-index:1;}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:relative;z-index:1;}
.price-col{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:44px 36px;display:flex;flex-direction:column;gap:0;position:relative;transition:background .3s,border-color .3s;overflow:hidden;}
.price-col:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);}
.price-col::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1);}
.price-col:hover::before{transform:scaleX(1);}
.pc-1::before{background:var(--p1);} .pc-2::before{background:var(--p2);} .pc-3::before{background:var(--p3);} .pc-4::before{background:var(--p4);}
.price-phase-num{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px;}
.pc-1 .price-phase-num{color:var(--p1);} .pc-2 .price-phase-num{color:var(--p2);} .pc-3 .price-phase-num{color:rgba(123,63,255,.7);} .pc-4 .price-phase-num{color:var(--p4);}
.price-phase-name{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--white);margin-bottom:28px;line-height:1.2;}
.price-divider{height:1px;background:rgba(255,255,255,.07);margin:0 0 28px;}
.price-amount{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-bottom:6px;}
.pc-1 .price-amount{color:var(--p1);} .pc-2 .price-amount{color:var(--p2);} .pc-3 .price-amount{color:var(--p3);} .pc-4 .price-amount{color:var(--p4);}
.price-period{font-size:13px;color:rgba(255,255,255,.35);margin-bottom:28px;line-height:1.5;}
.price-items{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:36px;flex:1;}
.price-item{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:rgba(255,255,255,.5);line-height:1.5;}
.price-item::before{content:'—';flex-shrink:0;}
.pc-1 .price-item::before{color:var(--p1);} .pc-2 .price-item::before{color:var(--p2);} .pc-3 .price-item::before{color:rgba(123,63,255,.6);} .pc-4 .price-item::before{color:var(--p4);}
.price-cta{display:block;text-align:center;font-size:13px;font-weight:700;padding:12px 20px;border-radius:6px;text-decoration:none;transition:opacity .2s,transform .15s;}
.price-cta:hover{opacity:.85;transform:translateY(-1px);}
.pc-1 .price-cta{background:var(--p1);color:var(--ink);}
.pc-2 .price-cta{background:var(--p2);color:var(--white);}
.pc-3 .price-cta{background:var(--p3);color:var(--white);}
.pc-4 .price-cta{background:var(--p4);color:var(--ink);}

/* ── DIFFERENTIATORS ── */
.diff{background:var(--off);padding:120px 60px;}
.diff-header{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:80px;}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);border:1px solid var(--border);}
.diff-card{background:var(--white);padding:44px 40px;position:relative;overflow:hidden;transition:background .25s;}
.diff-card:hover{background:var(--blue-lt);}
.diff-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;margin-bottom:24px;flex-shrink:0;}
.diff-icon svg{width:22px;height:22px;}
.diff-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px;}
.diff-desc{font-size:14px;color:var(--ink2);line-height:1.7;}

/* mob-meta-dot override for teal */
.mob-meta-dot{background:var(--teal);}

/* ════════════════════════════════════
   RESPONSIVE — Transformation specific
   ════════════════════════════════════ */
@media(max-width:1100px){
  #nav,.hero,.journey,.pricing,.diff,.cta-section,.dot-sep,footer{padding-left:32px;padding-right:32px;}
  .journey-header,.pricing-header,.diff-header{grid-template-columns:1fr;gap:32px;}
  .pricing-grid{grid-template-columns:1fr 1fr;}
  .diff-grid{grid-template-columns:1fr 1fr;}
  .phase-content{grid-template-columns:1fr;gap:0;padding:0 24px 0 24px;}
}
@media(max-width:840px){
  .hero{padding:120px 24px 80px;}
  .journey,.pricing,.diff,.cta-section{padding:80px 24px;}
  .pricing-grid{grid-template-columns:1fr;}
  .diff-grid{grid-template-columns:1fr;}
  .phase-header{grid-template-columns:40px 1fr auto;}
  .phase-content{padding:0 20px 32px 20px;}
}
@media(max-width:640px){
  .hero-phases{gap:8px;}
  .hero-phase{font-size:11px;padding:6px 12px;}
  .phase-header{gap:16px;}
  .phase-price-badge{display:none;}
}