/* =================================================================
   BLISS MARKETING — LAYER IRIDE
   Va caricato DOPO style-iride.css.
   Ridefinisce i token cromatici e aggiunge i componenti nuovi.
   Per tornare al verde/oro: rimuovi questo <link> e usa style.css.
   ================================================================= */

@property --iride-ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  /* ---- canali usati dalle rgba() della base ---- */
  --accent-rgb: 53,30,229;
  --bg-rgb: 210,199,238;
  --bg-deep-rgb: 183,201,236;
  --bg-soft-rgb: 217,210,241;
  --bg-deeper-rgb: 197,187,241;
  --sage-rgb: 120,103,212;
  --fg-rgb: 38,50,88;
  --glow-rgb: 154,133,238;

  /* ---- campo chiaro (ex "verde") ---- */
  --green-primary:#D2C7EE;
  --green-darker:#B7C9EC;
  --green-soft:#D9D2F1;
  --green-deep:#C5BBF1;

  /* ---- inchiostro (ex "bianco") ---- */
  --white:#263258;
  --white-soft:rgba(38,50,88,.88);
  /* opacità calcolate sul fondo peggiore (#D9D2F1) per restare >= 4.5:1 */
  --white-muted:rgba(38,50,88,.80);
  --white-dim:rgba(38,50,88,.77);
  --white-faint:rgba(38,50,88,.20);
  --white-trace:rgba(38,50,88,.10);

  /* ---- accento (ex "oro") ---- */
  --gold:#351EE5;
  --gold-soft:#4D3FF0;
  --gold-deep:#18199C;
  --gold-glow:rgba(53,30,229,.30);
  --gold-faint:rgba(53,30,229,.10);

  --sage:#7867D4;
  --sage-soft:rgba(120,103,212,.6);

  /* ---- vetro, ribaltato sul chiaro ---- */
  --glass-bg:rgba(247,245,253,.52);
  --glass-bg-strong:rgba(247,245,253,.72);
  --glass-border:rgba(38,50,88,.12);
  --glass-border-gold:rgba(53,30,229,.24);

  /* ---- scala iride completa ---- */
  --i200:#B2A6EC; --i300:#9A85EE; --i400:#7867D4; --i500:#6C5AF5;
  --i600:#4D3FF0; --i700:#351EE5; --i800:#1E1FAB; --i900:#18199C;
  --flare:#B117BC; --rose:#B58696;
  --night:#130D2A; --night-lift:#211045; --night-plum:#2C0929;
  --mist:#EDF2FD; --white-pure:#F7F5FD;

  --grad-iris:linear-gradient(100deg,var(--i700),var(--i500) 38%,var(--flare) 62%,var(--i600));
  --grad-cool:linear-gradient(120deg,var(--i900),var(--i600) 55%,var(--i300));
  --grad-field:linear-gradient(168deg,var(--green-darker) 0%,var(--green-primary) 52%,var(--green-soft) 100%);
}

/* ============ BASE RIBALTATA ============ */

body{
  color:var(--white);
  background:var(--green-primary);
  background-image:var(--grad-field);
  background-attachment:fixed;
}

::selection{background:var(--i700);color:var(--mist)}

.bg-atmosphere{
  background:
    radial-gradient(46% 38% at 18% 12%, rgba(108,90,245,.26), transparent 70%),
    radial-gradient(40% 34% at 82% 8%, rgba(183,201,236,.55), transparent 70%),
    radial-gradient(44% 40% at 72% 88%, rgba(177,23,188,.12), transparent 70%);
}
.bg-noise{opacity:.10;mix-blend-mode:multiply}
.bg-grid{opacity:.35}

/* i glow decorativi della base erano tarati sul fondo scuro */
.bg-glow{opacity:.55;filter:blur(80px)}
.bg-glow.gold{background:radial-gradient(closest-side,rgba(108,90,245,.55),transparent 70%)}
.bg-glow.sage{background:radial-gradient(closest-side,rgba(183,201,236,.75),transparent 70%)}

/* ============ HEADER / NAV ============ */

.site-header{background:rgba(210,199,238,.66);backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-border)}
.site-header.scrolled{background:rgba(210,199,238,.88)}
.nav-link{color:var(--white-muted)}
.nav-link:hover,.nav-link.active{color:var(--i700)}
.menu-mobile{background:rgba(210,199,238,.97);backdrop-filter:blur(20px)}
.menu-toggle span{background:var(--white)}

/* ============ BOTTONI ============ */

.btn-primary{
  background:var(--grad-iris);background-size:220% 100%;
  color:var(--white-pure);border:none;
  transition:background-position .6s cubic-bezier(.22,1,.36,1),transform .3s,box-shadow .3s;
}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 10px 30px rgba(53,30,229,.28)}

.btn-ghost{color:var(--i900);border:1px solid rgba(53,30,229,.32);background:transparent}
.btn-ghost:hover{background:rgba(53,30,229,.07);border-color:rgba(53,30,229,.55)}

/* ============ TIPOGRAFIA IRIDE ============ */

.serif-accent,
.t-iris{
  background:var(--grad-iris);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.t-shimmer{
  background:linear-gradient(100deg,var(--i800) 0%,var(--i500) 22%,var(--flare) 42%,var(--i400) 62%,var(--i900) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:iride-shimmer 9s linear infinite;
}
@keyframes iride-shimmer{to{background-position:280% 0}}

.t-flare{color:var(--flare)}

.t-prism{position:relative;white-space:nowrap}
.t-prism::after{
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:2px;
  background:var(--grad-iris);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.t-prism:hover::after{transform:scaleX(1)}

.eyebrow{color:var(--i700)}

/* frase evidenziata di sezione */
.claim-iris{
  font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.9rem);
  line-height:1.25;letter-spacing:-.02em;max-width:30ch;
}

/* ============ CARD ============ */

.problem-card,.solution-card,.lever-card,.case-card,.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
}
.problem-card h3,.lever-card h3{color:var(--white)}
.p-icon{color:var(--i700);background:rgba(53,30,229,.09);border-color:rgba(53,30,229,.18)}

/* bordo iride rotante — per le card che devono spiccare */
.iris-edge{position:relative;background:rgba(247,245,253,.66);border:1px solid transparent;background-clip:padding-box}
.iris-edge::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--iride-ang),var(--i700),var(--flare),var(--i500),var(--i900),var(--i700));
  animation:iride-spin 8s linear infinite;
}
@keyframes iride-spin{to{--iride-ang:360deg}}

/* aurora che segue il puntatore */
.aurora-card{position:relative;overflow:hidden;isolation:isolate;background:var(--night);color:var(--mist)}
.aurora-card::before{
  content:"";position:absolute;width:28rem;height:28rem;border-radius:50%;z-index:-1;
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(108,90,245,.8),transparent 70%);
}
.aurora-card h3,.aurora-card .case-num{color:var(--mist)}
.aurora-card p{color:rgba(237,242,253,.76)}

/* ============ FASCIA NOTTE — il controcampo ============ */

.band-night{
  position:relative;color:var(--mist);
  background:radial-gradient(120% 92% at 50% 0%,var(--night-lift) 0%,var(--night) 62%);
  border-radius:32px;overflow:hidden;
}
.band-night h2,.band-night h3,.band-night .h-section{color:var(--mist)}
.band-night p{color:rgba(237,242,253,.74)}
.band-night .eyebrow{color:var(--i300)}
.band-night .glass-card,.band-night .problem-card,.band-night .lever-card{
  background:rgba(33,16,69,.5);border-color:rgba(178,166,236,.2);
}
.band-night .btn-ghost{color:var(--i200);border-color:rgba(178,166,236,.4)}
.band-night .btn-ghost:hover{background:rgba(178,166,236,.1)}
.band-night::after{
  content:"";position:absolute;right:-12%;bottom:-28%;width:34rem;height:34rem;border-radius:50%;
  background:radial-gradient(closest-side,rgba(177,23,188,.34),transparent 70%);pointer-events:none;
}

/* ============ NUMERI CASI STUDIO ============ */

.metric-value{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;
  font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:.95;
  background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.band-night .metric-value,
.aurora-card .metric-value{
  background:linear-gradient(120deg,var(--i200),var(--i300) 55%,#E58CE8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.metric-label{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--white-dim);margin-top:.4rem}
.band-night .metric-label,
.aurora-card .metric-label{color:rgba(237,242,253,.6)}
.aurora-card .case-media{mix-blend-mode:luminosity;opacity:.85}

/* ============ TIMELINE METODO ============ */

.iris-timeline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:2.5rem}
.iris-timeline span{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(.95rem,1.8vw,1.35rem);padding:.5rem 1.1rem;border-radius:999px;
  background:rgba(53,30,229,.08);border:1px solid rgba(53,30,229,.18);
}
.iris-timeline i{color:var(--i600);font-style:normal;opacity:.6}

/* ============ FORM ============ */

input,textarea,select{background:rgba(247,245,253,.6);border:1px solid var(--glass-border);color:var(--white)}
input::placeholder,textarea::placeholder{color:var(--white-dim)}
input:focus,textarea:focus,select:focus{border-color:var(--i600);outline:2px solid rgba(53,30,229,.18);outline-offset:1px}

/* ============ FOOTER ============ */

.site-footer{background:linear-gradient(180deg,transparent,rgba(183,201,236,.5))}
.footer-mega{
  background:var(--grad-iris);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.16;
}
.footer-col h4{color:var(--i800)}

/* ============ WHATSAPP ============ */

.bliss-whatsapp-float{background:var(--i700);color:var(--white-pure)}
.bliss-whatsapp-float:hover{background:var(--i800)}

/* ============ CURSORE ============ */

.cursor-dot,.cursor-ring{border-color:var(--i600);background-color:var(--i600)}

/* ============ ASSET IRIDE ============ */

.iris-shard{filter:drop-shadow(0 20px 60px rgba(108,90,245,.35))}
.iris-sparkle{display:inline-block;vertical-align:middle}

/* ============ MOVIMENTO ============ */

.sweep{position:relative;overflow:hidden}
.sweep::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 35%,rgba(154,133,238,.5) 50%,transparent 65%);
  transform:translateX(-120%);
}
.sweep.is-visible::before,.sweep.reveal.is-visible::before{animation:iride-sweep 1.3s cubic-bezier(.22,1,.36,1) .15s both}
@keyframes iride-sweep{to{transform:translateX(120%)}}

@media(prefers-reduced-motion:reduce){
  .t-shimmer{animation:none;background-position:20% 0}
  .iris-edge::before{animation:none}
  .sweep::before{display:none}
}


/* ============ LOGO VETTORIALE ============
   L'SVG porta il gradiente al suo interno: niente filtri, niente PNG.
   Su fondo chiaro si usa logo-iride.svg, sulla fascia notte la
   variante chiara. Il rapporto d'aspetto è 1323:960 (~1.378). */

.logo-img{height:clamp(38px,4.2vw,52px);width:auto;display:block}
.footer-logo-img{height:clamp(44px,5vw,64px);width:auto;display:block}
.logo-img,.footer-logo-img{filter:none;opacity:1}

/* Il lockup richiesto resta completamente indaco anche sulle fasce scure. */
.band-night .logo-img,
.band-night .footer-logo-img{content:url("../img/lockup-indaco.svg")}

@media (prefers-contrast: more){
  .logo-img,.footer-logo-img{filter:saturate(1.4) contrast(1.15)}
}