/* ═══════════════════════════════════════════════════════════════
   SolarPlatform — SUPER PREMIUM Cinematic Edition
   Fonts: Outfit (headings) + DM Sans (body)
   Aesthetic: Cinematic dark, living light, depth & emotion
   ═══════════════════════════════════════════════════════════════ */
:root{
  --sun:#F59E0B;--sun-50:#FFFBEB;--sun-100:#FEF3C7;--sun-200:#FDE68A;
  --sun-light:#FCD34D;--sun-dark:#D97706;--sun-glow:rgba(245,158,11,.22);
  --blaze:#F97316;--flame:#EF4444;
  --eco:#10B981;--eco-50:#ECFDF5;--eco-glow:rgba(16,185,129,.12);
  --sky:#0EA5E9;
  --deep:#060918;--dark:#0C1024;--cosmos:#111631;
  --surface:#F8F6F1;--warm:#FDFCF9;
  --card:#FFFFFF;--card-alt:#FAFAF7;
  --ink:#15172A;--ink-2:#555770;--ink-3:#8E90A6;--cream:#F0EDE5;
  --w:1160px;
  --r-s:10px;--r-m:16px;--r-l:24px;--r-xl:32px;
  --sh-s:0 1px 3px rgba(0,0,0,.04);
  --sh-m:0 4px 20px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.03);
  --sh-l:0 12px 44px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.03);
  --sh-xl:0 28px 72px rgba(0,0,0,.12);
  --glass:rgba(255,255,255,.06);--glass-border:rgba(255,255,255,.08);
  --f-head:'Outfit',system-ui,sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior:smooth removed for native scroll performance */
#solar-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--f-body);color:var(--ink);background:var(--deep);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;max-width:100%;position:relative;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
.s-container{max-width:var(--w);margin:0 auto;padding:0 24px;overflow:hidden}

/* ── Scroll reveal (JS adds .sr class, IntersectionObserver adds .is-visible) ── */
/* Safety: .sr only works when JS adds it. Without JS, elements stay visible */
.sr{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sr.is-visible{opacity:1;transform:translateY(0)}

/* ═══ HERO ═══ Full-screen cinematic ═════════════════════════ */
.s-hero{
  position:relative;background:var(--deep);
  padding:0;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
  min-height:100vh;
}
.s-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%,rgba(245,158,11,.08) 0%,transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 20%,rgba(249,115,22,.06) 0%,transparent 50%),
    radial-gradient(ellipse 50% 60% at 50% 80%,rgba(14,165,233,.04) 0%,transparent 50%);
  animation:meshMove 20s ease-in-out infinite alternate;
}
.s-hero__noise{
  position:absolute;inset:0;opacity:.025;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;z-index:1;
}
.s-hero__glow{position:absolute;border-radius:50%;pointer-events:none;z-index:1}
.s-hero__glow--1{width:700px;height:700px;top:-250px;right:-150px;background:radial-gradient(circle,rgba(245,158,11,.12),rgba(249,115,22,.04) 40%,transparent 65%);animation:orbFloat 12s ease-in-out infinite}
.s-hero__glow--2{width:500px;height:500px;bottom:-200px;left:-100px;background:radial-gradient(circle,rgba(245,158,11,.07),transparent 55%);animation:orbFloat 16s ease-in-out 4s infinite reverse}

#solarParticles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}

.s-hero__inner{position:relative;z-index:3;max-width:740px;text-align:center;margin:0 auto;padding:40px 24px 48px}

.s-hero__logo{margin-bottom:14px}
.s-hero__logo-img{height:80px;width:auto;opacity:.92;transition:opacity .3s ease}
.s-hero__logo-img:hover{opacity:1}

.s-hero__tag{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--sun-light);padding:10px 24px;border-radius:100px;
  font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.04em;
  margin-bottom:22px;animation:heroFadeUp .9s var(--ease) .2s both;
}
.s-hero__tag-dot{width:8px;height:8px;background:var(--sun);border-radius:50%;box-shadow:0 0 12px rgba(245,158,11,.8),0 0 24px rgba(245,158,11,.4);animation:dotPulse 2.5s ease-in-out infinite}

.s-hero__title{
  font-family:var(--f-head);font-weight:900;
  font-size:clamp(1.8rem,5vw,4.2rem);line-height:1.15;
  color:var(--cream);margin-bottom:20px;letter-spacing:-.03em;
  animation:heroFadeUp 1s var(--ease) .35s both;
}
.s-hero__accent{
  display:block;
  background:linear-gradient(135deg,var(--sun) 0%,var(--blaze) 50%,#FB923C 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:heroFadeUp 1s var(--ease) .35s both,gradientShift 6s ease-in-out infinite;
}
.s-hero__desc{font-size:clamp(.95rem,2vw,1.15rem);color:rgba(240,237,229,.72);max-width:520px;margin:0 auto 32px;line-height:1.75;animation:heroFadeUp 1s var(--ease) .5s both}

.s-hero__stats{
  display:flex;align-items:center;justify-content:center;gap:0;
  margin-bottom:36px;background:var(--glass);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-border);border-radius:20px;padding:20px 8px;
  animation:heroFadeUp 1s var(--ease) .6s both;
}
.s-hero__stat{text-align:center;flex:1;padding:0 20px}
.s-hero__stat-n{font-family:var(--f-head);font-size:2.2rem;font-weight:800;color:#fff;letter-spacing:-.02em;text-shadow:0 0 40px rgba(245,158,11,.2)}
.s-hero__stat-l{font-size:11px;color:rgba(240,237,229,.28);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;font-weight:600}
.s-hero__stat-sep{width:1px;height:44px;background:rgba(255,255,255,.06);flex-shrink:0}

.s-hero__cta{
  display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--sun),var(--blaze));
  color:#fff;font-family:var(--f-head);font-weight:700;font-size:1.1rem;
  padding:20px 48px;border-radius:16px;text-decoration:none;
  box-shadow:0 8px 40px rgba(245,158,11,.35),0 0 0 0 rgba(245,158,11,0);
  transition:all .5s var(--ease);position:relative;overflow:hidden;
  animation:heroFadeUp 1s var(--ease) .7s both;
}
.s-hero__cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 3s ease-in-out infinite 2s}
.s-hero__cta:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 64px rgba(245,158,11,.45),0 0 0 4px rgba(245,158,11,.1)}

.s-hero__inner::after{
  content:'';display:block;width:24px;height:40px;
  border:2px solid rgba(255,255,255,.12);border-radius:12px;
  margin:60px auto 0;animation:scrollHint 2s ease-in-out infinite;
  background:linear-gradient(transparent 30%,rgba(245,158,11,.2));
}

/* ═══ TRUST ════════════════════════════════════════════════ */
.s-trust{background:var(--warm);border-bottom:2px solid rgba(0,0,0,.06);padding:0;position:relative;z-index:10}
.s-trust__inner{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:20px 0}
.s-trust__item{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink-2);padding:8px 20px;border-radius:100px;transition:all .4s var(--ease)}
.s-trust__item:hover{background:rgba(245,158,11,.05);color:var(--ink);transform:translateY(-1px)}
.s-trust__icon{font-size:20px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}

/* ═══ WIZARD ════════════════════════════════════════════════ */
.s-wizard{padding:clamp(16px,2vw,24px) 0 clamp(14px,2vw,24px);background:var(--cosmos);border-top:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
/* ── progress step su sfondo scuro ── */
.s-wizard .s-progress__step span{color:rgba(240,237,229,.4)}
.s-wizard .s-progress__step.is-active span{color:var(--sun)}
.s-wizard .s-progress__step.is-done span{color:rgba(240,237,229,.65)}
.s-wizard .s-progress__dot{background:rgba(255,255,255,.08);color:rgba(240,237,229,.5)}
.s-wizard .s-progress__bar{background:rgba(255,255,255,.08)}
/* ── trust bar: riduce padding ── */
.s-trust__inner{padding:14px 0!important}
.s-trust__item{padding:6px 14px!important;font-size:12px!important}
/* ── WIZARD SU SFONDO DARK ── */
.s-wizard .s-progress__step span{color:rgba(240,237,229,.35)}
.s-wizard .s-progress__step.is-active span{color:var(--sun)}
.s-wizard .s-progress__step.is-done span{color:rgba(240,237,229,.6)}
.s-wizard .s-progress__bar{background:rgba(255,255,255,.06)}

.s-progress{margin-bottom:28px}
.s-progress__bar{height:4px;background:rgba(0,0,0,.06);border-radius:100px;margin-bottom:24px;overflow:visible;position:relative}
.s-progress__fill{height:100%;width:33.33%;border-radius:100px;background:linear-gradient(90deg,var(--sun),var(--blaze),#FB923C);background-size:200% 100%;animation:gradientFlow 3s linear infinite;transition:width .7s var(--ease);position:relative}
.s-progress__fill::after{content:'';position:absolute;right:-7px;top:-5px;width:14px;height:14px;background:var(--sun);border-radius:50%;box-shadow:0 0 20px rgba(245,158,11,.5),0 0 6px var(--sun)}
.s-progress__steps{display:flex;justify-content:space-between}
.s-progress__step{display:flex;align-items:center;gap:12px;opacity:.25;transition:all .6s var(--ease)}
.s-progress__step.is-active{opacity:1}
.s-progress__step.is-done{opacity:.5}
.s-progress__dot{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.03);display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--ink-3);transition:all .6s var(--ease)}
.s-progress__step.is-active .s-progress__dot{background:linear-gradient(135deg,var(--sun),var(--blaze));color:#fff;box-shadow:0 4px 24px var(--sun-glow),0 0 0 4px rgba(245,158,11,.08);transform:scale(1.15)}
.s-progress__step.is-done .s-progress__dot{background:var(--eco);color:#fff;box-shadow:0 4px 16px var(--eco-glow),0 0 0 4px rgba(16,185,129,.06)}
.s-progress__step span{font-family:var(--f-head);font-size:13px;font-weight:600;color:var(--ink-2)}
.s-progress__step.is-active span{color:var(--ink)}

.s-step{display:none;animation:stepReveal .7s var(--ease) both}
.s-step.is-active{display:block}
.s-step__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;
  background:var(--card);border-radius:var(--r-xl);padding:28px 32px;
  box-shadow:var(--sh-l),0 0 0 1px rgba(0,0,0,.05);
  position:relative;overflow:hidden;transition:box-shadow .4s;
}
.s-step__grid:hover{box-shadow:var(--sh-xl),0 0 0 1px rgba(0,0,0,.03)}
.s-step__grid::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sun),var(--blaze),#FB923C,var(--sun));background-size:200% 100%;animation:gradientFlow 4s linear infinite}
.s-step__grid::after{content:'';position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,rgba(245,158,11,.02),transparent);pointer-events:none}

.s-step__header{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;position:relative;z-index:1}
.s-step__num{font-family:var(--f-head);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;line-height:1;background:linear-gradient(140deg,var(--sun),var(--blaze));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.2;flex-shrink:0}
.s-step__title{font-family:var(--f-head);font-size:clamp(1.2rem,2.5vw,1.55rem);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.2;margin-bottom:4px}
.s-step__sub{font-size:clamp(13px,1.5vw,14.5px);color:var(--ink-2);line-height:1.65}
.s-step__visual{position:relative}
.s-step__visual--info{display:flex;align-items:stretch}

/* Fields */
.s-field{margin-bottom:18px;position:relative;z-index:1}
.s-field__label{display:block;font-family:var(--f-head);font-size:12px;font-weight:700;color:#3D3F55;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.s-field__wrap{position:relative}
.s-field__ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3);transition:color .3s}
.s-field__input{width:100%;padding:16px 16px 16px 46px;background:var(--card-alt);border:2px solid rgba(0,0,0,.04);border-radius:var(--r-m);font-family:var(--f-body);font-size:16px;color:var(--ink);transition:all .4s var(--ease);outline:none}
.s-field__input:focus{border-color:var(--sun);box-shadow:0 0 0 4px var(--sun-glow),0 4px 20px rgba(245,158,11,.08);background:#fff}
.s-field__input:focus~.s-field__ico{color:var(--sun)}
.s-field__input::placeholder{color:var(--ink-3)}
.s-field__row{display:flex;gap:12px}
.s-field--grow{flex:1}
.s-field--cap{width:120px;flex-shrink:0}
.s-field--cap .s-field__input{padding-left:16px}

/* Buttons */
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-head);font-weight:700;font-size:15px;padding:16px 36px;border-radius:var(--r-m);border:none;cursor:pointer;transition:all .4s var(--ease);position:relative;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.s-btn--primary{background:linear-gradient(135deg,var(--sun),var(--blaze));color:#fff;box-shadow:0 6px 28px var(--sun-glow)}
.s-btn--primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 4s ease-in-out infinite 1s}
.s-btn--primary:hover{transform:translateY(-3px);box-shadow:0 10px 44px rgba(245,158,11,.4),0 0 0 3px rgba(245,158,11,.08)}
.s-btn--primary:active{transform:translateY(-1px)}
.s-btn--ghost{background:rgba(255,255,255,.06);color:rgba(240,237,229,.82);border:2px solid rgba(255,255,255,.14);box-shadow:none;backdrop-filter:blur(8px)}
.s-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
.s-btn--full{width:100%}
.s-btn--lg{padding:20px 40px;font-size:16px;border-radius:var(--r-l)}
.s-btn__row{display:flex;gap:10px;margin-top:10px}
.s-alert{padding:14px 20px;border-radius:var(--r-m);font-size:14px;margin-top:12px}
.s-alert--error{background:#FEF2F2;color:#991B1B;border:1px solid rgba(239,68,68,.1)}
.s-alert--success{background:var(--eco-50);color:#065F46;border:1px solid rgba(16,185,129,.1);display:flex;align-items:center;gap:12px;font-size:15px}

/* Map */
.s-map{height:380px;border-radius:var(--r-l);overflow:hidden;position:relative;border:1px solid rgba(0,0,0,.04)}
.s-map__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(248,246,241,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:400;transition:all .6s var(--ease);gap:12px}
.s-map__overlay.hidden{opacity:0;pointer-events:none;transform:scale(1.05)}
.s-map__overlay p{font-size:14px;color:var(--ink-3);max-width:200px;text-align:center;line-height:1.5}

/* Consumption */
.s-consumption{margin-bottom:24px}
.s-consumption__display{text-align:center;padding:28px;background:linear-gradient(140deg,var(--deep),var(--cosmos));border-radius:var(--r-l);margin-bottom:20px;position:relative;overflow:hidden}
.s-consumption__display::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(245,158,11,.1),transparent 60%);pointer-events:none}
.s-consumption__val{font-family:var(--f-head);font-size:clamp(2.6rem,6vw,4rem);font-weight:900;letter-spacing:-.03em;background:linear-gradient(140deg,#fff,var(--sun-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;display:inline-block;transition:transform .15s var(--ease-spring)}
.s-consumption__val.bump{transform:scale(1.06)}
.s-consumption__unit{display:block;font-size:14px;color:rgba(240,237,229,.35);margin-top:4px;font-weight:500}

.s-slider{-webkit-appearance:none;width:100%;height:6px;background:rgba(0,0,0,.04);border-radius:100px;outline:none;margin:16px 0 8px;cursor:pointer}
.s-slider::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:#fff;border:3px solid var(--sun);box-shadow:0 4px 16px rgba(245,158,11,.25);cursor:grab;transition:box-shadow .3s,transform .3s var(--ease-spring)}
.s-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 24px rgba(245,158,11,.35),0 0 0 6px rgba(245,158,11,.06)}
.s-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.2)}
.s-slider::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:#fff;border:3px solid var(--sun);box-shadow:0 4px 16px rgba(245,158,11,.25);cursor:grab}
.s-slider__labels{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}

.s-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 24px}
.s-preset{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:var(--r-m);border:2px solid rgba(0,0,0,.03);background:var(--card);cursor:pointer;transition:all .4s var(--ease);font-family:var(--f-body)}
.s-preset:hover{border-color:rgba(245,158,11,.12);transform:translateY(-3px);box-shadow:var(--sh-m)}
.s-preset.is-active{border-color:var(--sun);background:var(--sun-50);box-shadow:0 4px 20px var(--sun-glow),0 0 0 3px rgba(245,158,11,.06);transform:translateY(-3px)}
.s-preset__ico{font-size:26px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.08));transition:transform .4s var(--ease-spring)}
.s-preset:hover .s-preset__ico{transform:scale(1.15) rotate(-3deg)}
.s-preset__txt{font-size:11px;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.3}
.s-preset.is-active .s-preset__txt{color:var(--sun-dark)}

.s-loading{display:flex;align-items:center;gap:18px;padding:24px;background:var(--card-alt);border-radius:var(--r-l);margin-top:16px}
.s-loading__spinner{width:40px;height:40px;border-radius:50%;flex-shrink:0;border:3px solid rgba(245,158,11,.12);border-top:3px solid var(--sun);animation:spin .8s linear infinite}
.s-loading__title{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:2px}
.s-loading__sub{font-size:13px;color:var(--ink-3);animation:loadingPulse 1.5s ease-in-out infinite}

.s-info-card{background:linear-gradient(150deg,var(--deep),var(--cosmos));border-radius:var(--r-l);padding:28px 32px;position:relative;overflow:hidden;color:var(--cream);position:relative;overflow:hidden}
.s-info-card::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(245,158,11,.08),transparent 60%);border-radius:50%}
.s-info-card h3{font-family:var(--f-head);font-size:1.2rem;font-weight:700;margin-bottom:28px;position:relative}
.s-info-steps{display:flex;flex-direction:column;gap:24px;position:relative}
.s-info-step{display:flex;gap:16px;align-items:flex-start;color:rgba(240,237,229,.85)}
.s-info-step__n{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.15);display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--sun-light)}
.s-info-step strong{display:block;font-size:14px;margin-bottom:3px}
.s-info-step p{font-size:13px;color:rgba(240,237,229,.4);line-height:1.55}

/* ═══ RESULTS ═══════════════════════════════════════════════ */
.s-results-hero{text-align:center;margin-bottom:28px;padding:28px 20px;background:linear-gradient(160deg,var(--deep),var(--cosmos));border-radius:var(--r-xl);position:relative;overflow:hidden}
.s-results-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(245,158,11,.1),transparent 60%)}
.s-results-hero h2{font-family:var(--f-head);font-size:1.6rem;font-weight:800;color:#FFFBEB;position:relative;letter-spacing:-.01em;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.s-results-hero p{font-size:14px;color:rgba(240,237,229,.72);margin-top:6px;position:relative}

.s-kpi-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:14px;margin-bottom:20px}
.s-kpi{background:var(--card);border-radius:var(--r-l);padding:18px 16px;box-shadow:var(--sh-m);border:1px solid rgba(0,0,0,.02);transition:all .5s var(--ease);animation:cardReveal .7s var(--ease) both;position:relative;overflow:hidden}
.s-kpi::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(245,158,11,.02));opacity:0;transition:opacity .4s;pointer-events:none}
.s-kpi:hover{transform:translateY(-6px);box-shadow:var(--sh-l)}
.s-kpi:hover::after{opacity:1}
.s-kpi:nth-child(1){animation-delay:.1s}.s-kpi:nth-child(2){animation-delay:.2s}.s-kpi:nth-child(3){animation-delay:.3s}.s-kpi:nth-child(4){animation-delay:.4s}
.s-kpi--main{border:2px solid rgba(245,158,11,.22);background:linear-gradient(170deg,#fff,var(--sun-50))}
.s-kpi--main::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(245,158,11,.1),transparent);border-radius:50%}
.s-kpi__label{font-size:12px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.s-kpi__value{font-family:var(--f-head);font-size:2rem;font-weight:800;color:var(--ink);line-height:1.1;position:relative}
.s-kpi__value--gold{font-size:2.6rem;background:linear-gradient(135deg,var(--sun),var(--blaze));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.s-kpi__value--green{color:var(--eco)}
.s-kpi__sub{font-size:13px;color:var(--ink-2);margin-top:6px;font-weight:500}

.s-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.s-panel{background:var(--card);border-radius:var(--r-l);padding:28px;box-shadow:var(--sh-m);border:1px solid rgba(0,0,0,.02);transition:all .4s var(--ease)}
.s-panel:hover{box-shadow:var(--sh-l);transform:translateY(-2px)}
.s-panel--full{grid-column:1/-1;margin-bottom:24px}
.s-panel--full:last-child{margin-bottom:0}
.s-panel__title{font-family:var(--f-head);font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:18px;letter-spacing:-.01em;padding-bottom:12px;border-bottom:2px solid rgba(0,0,0,.03)}

.s-specs{display:flex;flex-direction:column}
.s-spec{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid rgba(0,0,0,.03);transition:background .3s}
.s-spec:last-child{border-bottom:none}
.s-spec:hover{background:rgba(245,158,11,.01)}
.s-spec__k{font-size:14px;color:var(--ink-2)}
.s-spec__v{font-family:var(--f-head);font-size:14px;font-weight:700;color:var(--ink)}
.s-spec--hl{background:linear-gradient(90deg,rgba(245,158,11,.04),rgba(245,158,11,.01));border-radius:var(--r-s);padding:16px 14px;margin-top:8px;border:1px solid rgba(245,158,11,.08);border-bottom:1px solid rgba(245,158,11,.08)}
.s-spec--hl .s-spec__v{color:var(--sun-dark);font-size:16px}

.s-invest{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.s-invest__card{padding:22px;border-radius:var(--r-m);text-align:center;background:var(--card-alt);transition:transform .3s var(--ease)}
.s-invest__card:hover{transform:translateY(-2px)}
.s-invest__card--green{background:var(--eco-50);border:1.5px solid rgba(16,185,129,.12);position:relative}
.s-invest__badge{position:absolute;top:10px;right:10px;background:var(--eco);color:#fff;font-family:var(--f-head);font-size:11px;font-weight:700;padding:4px 12px;border-radius:100px;animation:badgePulse 3s ease-in-out infinite}
.s-invest__label{font-size:11px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.s-invest__val{font-family:var(--f-head);font-size:1.6rem;font-weight:800;color:var(--ink);margin:8px 0 3px}
.s-invest__card--green .s-invest__val{color:var(--eco)}
.s-invest__note{font-size:11px;color:var(--ink-3)}
.s-invest__extras{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.s-invest__detail{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card-alt);border-radius:var(--r-s);font-size:13px;font-weight:600;color:var(--ink-2)}

.s-eco-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s-eco{display:flex;align-items:center;gap:10px;padding:16px;background:var(--card-alt);border-radius:var(--r-s);transition:all .3s var(--ease)}
.s-eco:hover{transform:translateX(4px);background:var(--eco-50)}
.s-eco__ico{font-size:24px}
.s-eco__val{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--ink)}
.s-eco__lbl{font-size:12px;color:var(--ink-3)}

.s-chart-wrap{height:240px;position:relative}
.s-chart-wrap canvas{max-height:100%;width:100%}

.s-weather-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.s-weather-card{text-align:center;padding:16px 6px;border-radius:var(--r-m);background:var(--card-alt);border:1.5px solid transparent;transition:all .4s var(--ease)}
.s-weather-card:hover{border-color:rgba(245,158,11,.1);background:var(--sun-50);transform:translateY(-4px);box-shadow:0 8px 24px rgba(245,158,11,.08)}
.s-weather-day{font-family:var(--f-head);font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.s-weather-icon{font-size:28px;margin:8px 0;display:block;transition:transform .4s var(--ease-spring)}
.s-weather-card:hover .s-weather-icon{transform:scale(1.2) rotate(-5deg)}
.s-weather-temp{font-size:15px;font-weight:700;color:var(--ink)}
.s-weather-irr{font-size:11px;color:var(--sun-dark);font-weight:600;margin-top:4px}
.s-weather-loading{grid-column:1/-1;text-align:center;color:var(--ink-3);padding:24px;font-size:14px}

/* ═══ LEAD ═════════════════════════════════════════════════ */
.s-lead{margin-top:36px;border-radius:var(--r-xl);overflow:hidden;position:relative}
.s-lead__grid{display:grid;grid-template-columns:1fr 1fr;background:var(--deep)}
.s-lead__info{padding:52px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.s-lead__info::before{content:'';position:absolute;top:50%;left:50%;width:300px;height:300px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(245,158,11,.06),transparent 60%);border-radius:50%}
.s-lead__badge{display:inline-block;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.1);color:var(--sun-light);padding:7px 18px;border-radius:100px;font-family:var(--f-head);font-size:12px;font-weight:700;margin-bottom:22px;width:fit-content;position:relative}
.s-lead__title{font-family:var(--f-head);font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;color:var(--cream);line-height:1.2;margin-bottom:16px;position:relative}
.s-lead__desc{font-size:14px;color:rgba(240,237,229,.72);line-height:1.7;margin-bottom:28px;position:relative}
.s-lead__checks{display:flex;flex-direction:column;gap:12px;position:relative}
.s-lead__check{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(240,237,229,.82);font-weight:500;transition:color .3s}
.s-lead__check:hover{color:rgba(240,237,229,.75)}
.s-lead__form{background:var(--card);padding:44px}
.s-lead__summary{display:flex;gap:0;flex-wrap:nowrap;padding:0;background:var(--sun-50);border:1px solid rgba(245,158,11,.15);border-radius:var(--r-m);margin-bottom:16px;overflow:hidden}
.s-lead__summary:empty{display:none}
.s-lead__summary-item{text-align:center;flex:1;padding:14px 8px;position:relative}
.s-lead__summary-item+.s-lead__summary-item{border-left:1px solid rgba(245,158,11,.15)}
.s-lead__summary-item .val{font-family:var(--f-head);font-weight:800;font-size:15px;color:var(--ink);white-space:nowrap;display:block;line-height:1.2}
.s-lead__summary-item .lbl{font-size:10px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:3px;margin-top:3px;text-transform:uppercase;letter-spacing:.03em}
.s-lead__form .s-field{margin-bottom:14px}
.s-lead__form .s-field__input{padding-left:16px}





.s-check{display:flex;align-items:flex-start;gap:10px;margin:18px 0 22px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.s-check input{display:none}
.s-check__box{width:20px;height:20px;border:2px solid rgba(0,0,0,.1);border-radius:6px;flex-shrink:0;transition:all .35s var(--ease);display:flex;align-items:center;justify-content:center;margin-top:1px}
.s-check input:checked~.s-check__box{background:var(--sun);border-color:var(--sun);box-shadow:0 2px 12px var(--sun-glow);transform:scale(1.08)}
.s-check input:checked~.s-check__box::after{content:'✓';color:#fff;font-size:12px;font-weight:700}
.s-recalc{text-align:center;margin-top:32px}

/* ═══ ANIMATIONS ════════════════════════════════════════════ */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes meshMove{0%{background-position:0% 0%}100%{background-position:100% 100%}}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);opacity:.5}33%{transform:translate(30px,-20px) scale(1.1);opacity:.7}66%{transform:translate(-20px,15px) scale(.95);opacity:.55}}
@keyframes dotPulse{0%,100%{opacity:1;box-shadow:0 0 12px rgba(245,158,11,.8),0 0 24px rgba(245,158,11,.4)}50%{opacity:.5;box-shadow:0 0 4px rgba(245,158,11,.3),0 0 8px rgba(245,158,11,.1)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes gradientFlow{0%{background-position:200% 0}100%{background-position:0% 0}}
@keyframes shimmer{0%{left:-100%}30%{left:100%}100%{left:100%}}
@keyframes scrollHint{0%,100%{opacity:.5;transform:scaleY(1)}50%{opacity:1;transform:scaleY(.85)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes stepReveal{from{opacity:0;transform:translateX(30px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes cardReveal{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.2)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}
@keyframes loadingPulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 10px rgba(245,158,11,.7)}50%{opacity:.4;box-shadow:0 0 2px rgba(245,158,11,.2)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ctaPulse{0%,100%{box-shadow:0 6px 28px var(--sun-glow)}50%{box-shadow:0 6px 48px rgba(245,158,11,.45)}}

/* ═══ METER TYPE SELECTOR ════════════════════════════════════ */
.s-meter{margin-bottom:24px}
.s-meter__label{display:block;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.s-meter__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.s-meter__btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px;border-radius:var(--r-l);background:var(--card-alt);border:2px solid rgba(0,0,0,.04);cursor:pointer;transition:all .35s var(--ease);text-align:center;font-family:var(--f-body)}
.s-meter__btn:hover{border-color:rgba(245,158,11,.15);background:var(--sun-50)}
.s-meter__btn.is-active{border-color:var(--sun);background:linear-gradient(160deg,var(--sun-50),#fff);box-shadow:0 4px 20px rgba(245,158,11,.12)}
.s-meter__icon{font-size:32px}
.s-meter__name{font-family:var(--f-head);font-size:16px;font-weight:800;color:var(--ink)}
.s-meter__desc{font-size:12px;color:var(--ink-3)}
.s-meter__hint{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 14px;background:rgba(14,165,233,.04);border-radius:var(--r-s);font-size:13px;color:var(--ink-3);border:1px solid rgba(14,165,233,.08)}

/* ═══ CONSUMPTION MODE TOGGLE ════════════════════════════════ */
.s-consumo-mode{margin-bottom:20px}
.s-consumo-mode__label{display:block;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.s-consumo-mode__toggle{display:flex;background:var(--card-alt);border-radius:var(--r-m);padding:4px;border:1px solid rgba(0,0,0,.04)}
.s-consumo-mode__btn{flex:1;padding:12px 16px;border-radius:var(--r-s);border:none;cursor:pointer;font-family:var(--f-head);font-size:14px;font-weight:600;color:var(--ink-3);background:transparent;transition:all .3s var(--ease)}
.s-consumo-mode__btn:hover{color:var(--ink)}
.s-consumo-mode__btn.is-active{background:#fff;color:var(--ink);box-shadow:0 2px 12px rgba(0,0,0,.06)}

/* ═══ BILL INPUT SECTION ═════════════════════════════════════ */
.s-bolletta__intro{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,rgba(245,158,11,.04),rgba(249,115,22,.02));border:1px solid rgba(245,158,11,.08);border-radius:var(--r-m);font-size:14px;color:var(--ink-2);margin-bottom:16px}
.s-bolletta__tabs{display:flex;gap:8px;margin-bottom:16px}
.s-bolletta__tab{flex:1;padding:10px 16px;border-radius:var(--r-s);border:2px solid rgba(0,0,0,.04);background:var(--card-alt);cursor:pointer;font-family:var(--f-head);font-size:13px;font-weight:600;color:var(--ink-3);text-align:center;transition:all .3s var(--ease)}
.s-bolletta__tab:hover{border-color:rgba(245,158,11,.1)}
.s-bolletta__tab.is-active{border-color:var(--sun);background:var(--sun-50);color:var(--sun-dark)}
.s-bolletta__result{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,var(--eco-50),#fff);border:1px solid rgba(16,185,129,.15);border-radius:var(--r-m);font-size:15px;color:var(--ink);margin-top:12px;animation:resultPop .4s ease both;box-shadow:0 2px 12px rgba(16,185,129,.1)}
@keyframes resultPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.s-bolletta__result-ico{font-size:24px}
.s-bolletta__result strong{font-family:var(--f-head);font-weight:800;color:var(--eco);font-size:18px}
.s-field__helper{display:block;font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.5}

/* Period toggle (mensile/bimestrale) */
.s-bolletta__period{margin-bottom:16px}
.s-bolletta__period-label{display:block;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.s-bolletta__period-toggle{display:flex;gap:8px}
.s-bolletta__period-btn{flex:1;padding:10px 16px;border-radius:var(--r-s);border:2px solid rgba(0,0,0,.04);background:var(--card-alt);cursor:pointer;font-family:var(--f-head);font-size:14px;font-weight:600;color:var(--ink-3);text-align:center;transition:all .3s var(--ease)}
.s-bolletta__period-btn:hover{border-color:rgba(245,158,11,.1)}
.s-bolletta__period-btn.is-active{border-color:var(--sun);background:var(--sun-50);color:var(--sun-dark)}

/* Big euro input — unmissable */
.s-euro-input{margin-bottom:16px}
.s-euro-input__label{display:block;font-family:var(--f-head);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px}
.s-euro-input__wrap{display:flex;align-items:center;background:var(--card);border:2.5px solid var(--sun);border-radius:16px;padding:4px;transition:all .3s;box-shadow:0 0 0 4px rgba(245,158,11,.08)}
.s-euro-input__wrap:focus-within{border-color:var(--blaze);box-shadow:0 0 0 6px rgba(245,158,11,.15),0 4px 20px rgba(245,158,11,.1)}
.s-euro-input__symbol{font-family:var(--f-head);font-size:28px;font-weight:800;color:var(--sun);padding:0 6px 0 18px;flex-shrink:0}
.s-euro-input__field{border:none;outline:none;background:transparent;font-family:var(--f-head);font-size:32px;font-weight:800;color:var(--ink);width:100%;padding:16px 18px 16px 8px;-moz-appearance:textfield}
.s-euro-input__field::-webkit-inner-spin-button,.s-euro-input__field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.s-euro-input__field::placeholder{color:rgba(0,0,0,.2);font-weight:600}
.s-euro-input__helper{display:block;font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.5}
/* Filled state */
.s-euro-input.is-filled .s-euro-input__wrap{border-color:var(--eco);box-shadow:0 0 0 4px rgba(16,185,129,.1)}
.s-euro-input.is-filled .s-euro-input__symbol{color:var(--eco)}

/* Consumo mode toggle */
.s-consumo-mode__btn.is-active{transition:all .2s ease}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */

/* ── Tablet ≤1024px ──────────────────────────────────────── */
/* ═══════════════════════════════════════════════════
   OVERRIDE CONTRASTO — elementi su sfondo cosmos/dark
   ═══════════════════════════════════════════════════ */

/* Progress step: testo leggibile su --cosmos */
.s-wizard .s-progress__step span{
  color:rgba(240,237,229,.55);
  font-weight:600;
}
.s-wizard .s-progress__step.is-active span{
  color:#FCD34D;
  font-weight:700;
}
.s-wizard .s-progress__step.is-done span{
  color:rgba(240,237,229,.72);
}
.s-wizard .s-progress__dot{
  background:rgba(255,255,255,.10);
  color:rgba(240,237,229,.60);
  border:1.5px solid rgba(255,255,255,.12);
}
.s-wizard .s-progress__bar{
  background:rgba(255,255,255,.10);
}

/* KPI row sulla dark: le card sono bianche → testo dark OK,
   ma la label uppercase va resa più scura */
.s-kpi__label{color:#3D3F55!important}      /* più scuro di ink-2 */
.s-kpi__sub{color:#555770!important}         /* = ink-2 */

/* step__sub su card bianca: più leggibile */
.s-step__sub{color:#555770!important}

/* results-hero: location (p) più visibile */
.s-results-hero p{color:rgba(240,237,229,.75)!important}
.s-results-hero .s-rbadge{
  font-size:12.5px;
  color:rgba(240,237,229,.82);
}

/* info-card su dark: testi interni */
.s-info-card h3{color:#FCD34D}           /* giallo caldo → leggibile su dark */
.s-info-step__text h4{color:rgba(240,237,229,.95);font-weight:700}
.s-info-step__text p{color:rgba(240,237,229,.68)}

/* autodetect banner: testo su bg chiaro */
.s-autodetect__text{color:var(--ink-2);font-size:14px}

/* Panel title: sempre leggibile */
.s-panel__title{color:#1A1C2E!important;font-size:15px!important}

/* Campo input placeholder: più visibile */
.s-field__input::placeholder{color:rgba(21,23,42,.38)}
.s-field__label{color:#3D3F55!important;font-size:11.5px!important}

/* Btn avanti: testo sempre bianco ad alto contrasto */
.s-btn--primary{color:#fff!important;font-weight:700!important}

/* KPI value: nero puro per massimo contrasto su bianco */
.s-kpi__value{color:#0F1020!important}
.s-kpi__value--gold{color:#B45309!important}   /* ambra scura, non giallo puro */
.s-kpi__value--green{color:#047857!important}  /* verde scuro */

@media(max-width:1024px){
  .s-step__grid{grid-template-columns:1fr;padding:36px 28px}
  .s-step__visual{order:-1}.s-map{height:260px}
  .s-kpi-row{grid-template-columns:1fr 1fr}
  .s-grid-2{grid-template-columns:1fr}
  .s-lead__grid{grid-template-columns:1fr}.s-lead__info{padding:36px}
  .s-hero__stats{flex-direction:column;gap:0;padding:20px}
  .s-hero__stat{padding:12px 0}.s-hero__stat-sep{width:80%;height:1px;margin:0 auto}
}

/* ── Mobile ≤768px ───────────────────────────────────────── */
@media(max-width:768px){
  /* === BASE === */
  #solar-app{font-size:16px;line-height:1.7;overflow-x:hidden !important}
  .s-container{padding:0 16px}

  /* === HERO — no more 100vh dead space === */
  .s-hero{min-height:auto !important}
  .s-hero__inner{padding:48px 20px 36px}
  .s-hero__logo-img{height:64px}
  .s-hero__tag{font-size:12px;padding:8px 16px;margin-bottom:20px}
  .s-hero__title{font-size:1.9rem;line-height:1.15;margin-bottom:16px;word-break:break-word}
  .s-hero__desc{font-size:15px;line-height:1.6;margin-bottom:24px}
  .s-hero__stats{flex-direction:column;gap:0;padding:16px;margin-bottom:28px;border-radius:16px}
  .s-hero__stat{padding:10px 0}
  .s-hero__stat-n{font-size:1.6rem}
  .s-hero__stat-l{font-size:11px;margin-top:2px}
  .s-hero__stat-sep{width:70%;height:1px;margin:0 auto}
  .s-hero__cta{width:100%;justify-content:center;padding:18px 32px;font-size:16px}
  .s-hero__sun svg{width:130px;height:130px}
  .s-hero__sun{top:0% !important;left:auto !important;right:-30% !important;transform:none !important;opacity:.2 !important;animation:none !important}
  .s-hero__glow--1{width:300px;height:300px}
  .s-hero__glow--2{width:200px;height:200px}

  /* === TRUST === */
  .s-trust__inner{gap:4px;flex-wrap:wrap;justify-content:center}
  .s-trust__item{padding:8px 14px;font-size:13px}

  /* === URGENCY === */
  .s-urgency__inner{flex-direction:column;text-align:center;gap:10px}
  .s-urgency__text{font-size:14px}
  .uc-n{padding:5px 8px;font-size:16px;min-width:38px}

  /* === PROGRESS === */
  .s-progress{margin-bottom:20px}
  .s-progress__step span{display:inline;font-size:11px}
  .s-progress__dot{width:32px;height:32px;font-size:13px}

  /* === STEP CARDS === */
  .s-step__grid{padding:24px 16px !important;gap:20px;border-radius:20px}
  .s-step__header{gap:12px;margin-bottom:24px}
  .s-step__num{font-size:2.4rem}
  .s-step__title{font-size:1.25rem}
  .s-step__sub{font-size:14px}

  /* === FIELDS — 16px prevents iOS zoom === */
  .s-field{margin-bottom:14px}
  .s-field__label{font-size:13px;margin-bottom:6px}
  .s-field__input{padding:16px 16px 16px 44px;font-size:16px !important;border-radius:14px;min-height:52px}
  .s-field__ico{width:20px;height:20px}
  .s-field__row{flex-direction:column;gap:0}
  .s-field--cap{width:100%}
  .s-field--cap .s-field__input{padding-left:16px}

  /* === BUTTONS — touch targets === */
  .s-btn{padding:18px 32px;font-size:16px;border-radius:14px;min-height:56px;touch-action:manipulation}
  .s-btn--lg{padding:20px 36px;font-size:17px}
  .s-btn__row{flex-direction:column}
  .s-alert{font-size:15px;padding:14px 16px}

  /* === MAP === */
  .s-map{height:220px;border-radius:16px}
  .s-map__overlay p{font-size:14px}
  .s-map-toggle{padding:8px 12px;font-size:12px}

  /* === CONSUMPTION === */
  .s-consumption__display{padding:24px 16px;border-radius:20px}
  .s-consumption__val{font-size:3rem}
  .s-consumption__unit{font-size:14px}
  .s-slider{height:8px;margin:20px 0 12px}
  .s-slider::-webkit-slider-thumb{width:36px;height:36px}
  .s-slider::-moz-range-thumb{width:36px;height:36px}
  .s-slider__labels{font-size:13px}

  /* === METER TYPE === */
  .s-meter__row{gap:10px}
  .s-meter__btn{padding:16px 12px}
  .s-meter__icon{font-size:28px}
  .s-meter__name{font-size:15px}
  .s-meter__desc{font-size:11px}
  .s-meter__hint{font-size:12px;padding:10px 12px}

  /* === CONSUMPTION MODE === */
  .s-consumo-mode__btn{padding:12px 10px;font-size:13px}
  .s-bolletta__intro{font-size:13px;gap:8px;flex-wrap:wrap}
  .s-bolletta__tabs{flex-direction:column;gap:6px}
  .s-bolletta__tab{padding:12px;font-size:14px}
  .s-bolletta__result{flex-wrap:wrap;font-size:14px}
  .s-field__helper{font-size:12px}

  /* === PRESETS === */
  .s-presets{grid-template-columns:1fr 1fr;gap:10px}
  .s-preset{padding:18px 10px;gap:8px}
  .s-preset__ico{font-size:28px}
  .s-preset__txt{font-size:13px}
  .s-preset__kwh{font-size:11px}

  /* ═══ STEP 3 RESULTS — ALL SINGLE COLUMN ═══ */

  /* Results Hero */
  .s-results-hero{padding:32px 16px;margin-bottom:24px;border-radius:20px}
  .s-results-hero h2{font-size:1.4rem !important;word-break:break-word;overflow-wrap:break-word}
  .s-results-hero p{font-size:13px;word-break:break-word;overflow-wrap:break-word}
  .s-results-badges{flex-direction:column !important;align-items:center;gap:6px}
  .s-rbadge{font-size:12px;white-space:nowrap}

  /* KPI Row — SINGLE COLUMN forced */
  .s-kpi-row{grid-template-columns:1fr !important;gap:12px}
  .s-kpi{padding:22px 18px;border-radius:18px}
  .s-kpi--main{padding:28px 20px}
  .s-kpi__label{font-size:13px;margin-bottom:8px}
  .s-kpi__value{font-size:1.8rem !important}
  .s-kpi__value--gold{font-size:2.4rem !important}
  .s-kpi__value--green{font-size:1.8rem !important}
  .s-kpi__sub{font-size:13px;margin-top:6px}

  /* Panels — reduced padding, single column */
  .s-grid-2{grid-template-columns:1fr !important;gap:16px}
  .s-panel{padding:22px 16px;border-radius:18px;overflow:hidden}
  .s-panel:hover{transform:none}
  .s-panel__title{font-size:15px;margin-bottom:16px}

  /* Bill Comparison — STACKED vertical */
  .s-bill-compare{padding:22px 16px}
  .s-bill-grid{flex-direction:column !important;gap:12px;align-items:stretch}
  .s-bill{min-width:0 !important;max-width:none !important;width:100% !important;flex:none !important;padding:22px 16px}
  .s-bill__header{font-size:15px}
  .s-bill__amount{font-size:2rem}
  .s-bill__sub{font-size:13px}
  .s-bill__saving{font-size:14px;padding:10px 14px}
  .s-bill__arrow{transform:rotate(90deg);align-self:center}

  /* Specs */
  .s-spec{padding:12px 0}
  .s-spec__k{font-size:13px}
  .s-spec__v{font-size:15px}
  .s-spec--hl{padding:16px 14px}
  .s-spec--hl .s-spec__v{font-size:18px}

  /* Investment — stacked */
  .s-invest{grid-template-columns:1fr !important;gap:10px}
  .s-invest__extras{grid-template-columns:1fr !important}
  .s-invest__card{padding:22px 18px}
  .s-invest__label{font-size:12px}
  .s-invest__val{font-size:1.6rem}
  .s-invest__note{font-size:13px}
  .s-invest__badge{font-size:11px;padding:5px 12px}

  /* Eco row — stacked */
  .s-eco-row{grid-template-columns:1fr !important;gap:8px}
  .s-eco{padding:16px;gap:12px}
  .s-eco__ico{font-size:28px}
  .s-eco__val{font-size:16px}
  .s-eco__lbl{font-size:13px}

  /* Charts */
  .s-chart-wrap{height:200px;overflow:hidden}

  /* Weather */
  .s-weather-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .s-weather-card{padding:12px 4px}
  .s-weather-day{font-size:11px}
  .s-weather-icon{font-size:26px;margin:6px 0}
  .s-weather-temp{font-size:14px}
  .s-weather-irr{font-size:11px}

  /* Realtime Panel */
  .s-realtime__header{flex-direction:column;gap:12px}
  .s-realtime__now{text-align:center;width:100%}
  .s-realtime__now-value{font-size:22px}
  .s-realtime__stats{flex-direction:column;gap:8px}
  .s-realtime__stat{min-width:0;padding:14px}
  .s-realtime__stat-label{font-size:11px}
  .s-realtime__stat-value{font-size:18px}

  /* NASA Panel */
  .s-nasa__badge{font-size:10px;padding:5px 10px}
  .s-nasa__sub{font-size:13px}
  .s-nasa-stats{flex-direction:column !important;gap:10px}
  .s-nstat{min-width:0 !important;padding:16px}
  .s-nstat__v{font-size:22px}
  .s-nstat__l{font-size:12px}

  /* Electricity Panel */
  .s-elec__sub{font-size:13px}
  .s-elec__highlight{flex-direction:column !important;gap:10px}
  .s-elec__stat{min-width:0 !important;padding:18px 16px}
  .s-elec__stat-value{font-size:22px}
  .s-elec__stat-label{font-size:12px}

  /* Money Loss */
  .s-money-loss__inner{flex-direction:column;text-align:center;gap:12px}
  .s-money-loss__icon{font-size:36px}
  .s-money-loss__label{font-size:13px}
  .s-money-loss__value{font-size:28px !important}
  .s-money-loss__sub{font-size:13px}
  .s-money-loss__pulse{display:none}

  /* Historical Panel */
  .s-historical-stats{flex-direction:column;gap:8px}

  /* === LEAD FORM === */
  .s-lead{margin-top:24px}
  .s-lead__grid{grid-template-columns:1fr !important}
  .s-lead__info{padding:32px 20px}
  .s-lead__badge{font-size:12px;padding:8px 16px}
  .s-lead__title{font-size:1.4rem !important}
  .s-lead__desc{font-size:14px}
  .s-lead__check{font-size:14px;gap:8px}
  .s-lead__checks{gap:8px}
  .s-lead__form{padding:28px 18px}
  .s-lead__form .s-field__input{font-size:16px !important;padding:16px}
  .s-lead__form .s-field__row{flex-direction:column !important;gap:0 !important}
  
  
  
  
  .s-lead__live{font-size:14px;padding:12px 16px;margin-top:16px}
  .s-check{font-size:14px;gap:10px}
  .s-check__box{width:22px;height:22px}
  .s-check__txt{font-size:14px;line-height:1.5}

  /* === ENERGY FLOW — vertical on mobile === */
  .ef-container{flex-direction:column !important;gap:0;padding:20px 0}
  .ef-node{padding:18px 28px;width:80%;max-width:260px}
  .ef-node__icon{font-size:40px}
  .ef-node__label{font-size:13px}
  .ef-node__val{font-size:17px}
  .ef-line{width:3px !important;height:40px !important;margin:0 auto !important;transform:rotate(0) !important}
  .ef-line__particle{animation-name:flowParticleV !important}

  /* === WEATHER — 3.5 columns scrollable, or 4 max === */
  .s-weather-grid{grid-template-columns:repeat(4,1fr) !important;gap:8px}
  .s-weather-card{padding:14px 6px}
  .s-weather-day{font-size:12px}
  .s-weather-icon{font-size:28px;margin:8px 0}
  .s-weather-temp{font-size:15px;font-weight:800}
  .s-weather-irr{font-size:12px;margin-top:4px}
  .s-weather-daylight{font-size:11px}

  /* === INFO CARD (step 2 side) === */
  .s-info-card{padding:24px 18px}
  .s-info-card h3{font-size:1.1rem}
  .s-info-step{gap:12px}
  .s-info-step__n{width:32px;height:32px;font-size:14px}
  .s-info-step p{font-size:14px}
  .s-info-step strong{font-size:15px}

  /* === AUTODETECT === */
  .s-autodetect{flex-wrap:wrap;padding:14px 16px;font-size:14px;gap:8px}
  .s-autodetect__btn{width:100%;text-align:center;margin-top:4px;padding:12px 20px;font-size:14px}

  /* === RECALC BUTTON === */
  .s-recalc{margin-top:16px;padding-bottom:24px}
  .s-recalc .s-btn{width:100%;font-size:15px}

  /* === HINTS === */
  .s-hint{font-size:13px;padding:12px 14px}

  /* === EXIT MODAL === */
  .ex-modal{margin:16px;padding:28px 20px;border-radius:20px}
  .ex-emoji{font-size:48px}
  .ex-title{font-size:1.3rem}
  .ex-desc{font-size:15px}
  .ex-cta-row .s-btn{width:100%;font-size:15px}

  /* === FIXED ELEMENTS === */
  .sp-container{bottom:auto;top:16px;left:16px;right:16px;z-index:998}
  .sp-toast{max-width:100%;transform:translateY(-120%) !important;opacity:0}
  .sp-toast--show{transform:translateY(0) !important;opacity:1 !important}
  /* Ticker: bottom banner, full width, prominent */
  .st-ticker{top:auto;bottom:0;right:0;left:0;max-width:none;border-radius:16px 16px 0 0;padding:14px 20px;gap:6px;
    box-shadow:0 -4px 24px rgba(16,185,129,.3);
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .st-ticker__label{font-size:.82rem;line-height:1.35}
  .st-ticker__label strong{font-size:.85rem}
  .st-ticker__value{font-size:1.5rem}
  .st-ticker__sub{font-size:.68rem}
  .st-ticker__close{top:8px;right:10px;width:36px;height:36px;font-size:20px;z-index:10}
  /* FAB: icon-only pill, bottom-right, above ticker */
  .s-kit-fab{
    top:auto !important;bottom:100px !important;bottom:calc(100px + env(safe-area-inset-bottom,0px)) !important;
    left:auto !important;right:14px !important;
    padding:12px 16px !important;border-radius:50px !important;
    font-size:.75rem !important;z-index:8000 !important;
    gap:8px !important;
    box-shadow:0 4px 20px rgba(245,158,11,.5),0 0 0 1px rgba(255,255,255,.15) inset !important;
  }
  .s-kit-fab > span{display:none !important}
  .s-kit-fab > svg{width:20px !important;height:20px !important}
}

/* ── Small Mobile ≤480px ─────────────────────────────────── */
/* info-steps testo: strong e p su dark background */
.s-info-steps strong{color:#FCD34D;font-weight:700;font-size:14px}
.s-info-steps p{color:rgba(240,237,229,.72);font-size:13px;margin-top:3px;line-height:1.5}
.s-info-step__n{
  width:28px;height:28px;min-width:28px;
  background:rgba(245,158,11,.2);
  border:1px solid rgba(245,158,11,.35);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#FCD34D;
  flex-shrink:0;
}

/* s-rbadge (location badges): contrasto su dark */
.s-results-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.s-rbadge{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;
  padding:5px 12px;
  font-size:12.5px;
  color:rgba(240,237,229,.82);
  display:inline-flex;align-items:center;gap:6px;
}

/* autodetect banner leggibilità */
.s-autodetect{
  background:rgba(245,158,11,.06);
  border:1.5px solid rgba(245,158,11,.18);
  border-radius:var(--r-m);
}
.s-autodetect__text strong{color:var(--ink)!important;font-weight:700}

/* s-hint text */
.s-hint{color:var(--ink-2)!important;font-size:13px!important}

/* KPI row su results: grid più compatta */
.s-kpi-row{gap:12px}

/* ── Particelle mini — lead section e footer ── */
.s-particles-mini{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.s-lead__info{position:relative;overflow:hidden}
.s-lead__info > *:not(.s-particles-mini){position:relative;z-index:1}

/* ── App starfield ── */
#appStars{position:fixed;top:0;left:0;width:100%;height:100%;opacity:.5;z-index:0;pointer-events:none}

/* Tutti i figli diretti di solar-app sopra il canvas */
#solar-app > *:not(#appStars){
  isolation:isolate;
}

/* ═══ KIT POPUP ═══ */
.s-kit-popup{
  position:relative;z-index:1;
  background:var(--deep);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);
  padding:28px 28px 24px;
  width:100%;max-width:480px;
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  animation:kitPopupIn .35s var(--ease) both;
}
@keyframes kitPopupOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(12px) scale(.97)}
}
@keyframes kitPopupIn{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}
}
.s-kit-popup__close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;
  border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.08);
  color:rgba(240,237,229,.7);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.s-kit-popup__close:hover{background:rgba(255,255,255,.15);color:#fff}

/* FAB riapertura */
.s-kit-fab{
  position:fixed;
  top:16px;left:16px;
  z-index:8000;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#f59e0b 0%,#f97316 60%,#ea580c 100%);
  color:#fff;
  border:none;cursor:pointer;
  border-radius:18px;
  padding:14px 24px 14px 18px;
  font-size:1rem;font-weight:900;
  letter-spacing:.02em;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 8px 32px rgba(245,158,11,.6),
    0 2px 8px rgba(0,0,0,.3);
  animation:kitSlideIn .5s cubic-bezier(.34,1.56,.64,1) both, kitGlow 3s ease-in-out 2s infinite;
  transition:transform .2s,box-shadow .2s;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  backdrop-filter:blur(4px);
}
.s-kit-fab:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,158,11,.55)}
@keyframes fabIn{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:none}
}
@keyframes kitSlideIn{
  from{opacity:0;transform:translateX(-40px) scale(.9)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes kitGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 8px 32px rgba(245,158,11,.6),0 2px 8px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 40px rgba(245,158,11,.9),0 0 0 6px rgba(245,158,11,.15),0 2px 8px rgba(0,0,0,.3)}
}
@keyframes fabPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 8px 32px rgba(245,158,11,.6),0 2px 8px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 40px rgba(245,158,11,.9),0 0 0 6px rgba(245,158,11,.15),0 2px 8px rgba(0,0,0,.3)}
}

@media(max-width:480px){
  /* === HERO — compact, no dead space === */
  .s-hero{min-height:auto !important}
  .s-hero__inner{padding:32px 16px 28px}
  .s-hero__logo{margin-bottom:16px !important}
  .s-hero__logo-img{width:200px !important;height:auto !important}
  .s-hero__tag{font-size:11.5px;padding:7px 14px;margin-bottom:16px}
  .s-hero__title{font-size:1.75rem !important;margin-bottom:12px}
  .s-hero__desc{font-size:14px;margin-bottom:20px;line-height:1.6}
  .s-hero__stats{padding:14px 12px;margin-bottom:20px;border-radius:14px;gap:0}
  .s-hero__stat{padding:8px 0}
  .s-hero__stat-n{font-size:1.5rem}
  .s-hero__stat-l{font-size:10.5px;margin-top:1px}
  .s-hero__cta{padding:16px 24px;font-size:15.5px;border-radius:14px}
  .s-hero__sun svg{width:120px;height:120px}
  .s-hero__glow--1{width:200px;height:200px;top:-100px;right:-80px}
  .s-hero__glow--2{width:160px;height:160px}
  #solarParticles{opacity:.4}

  /* === TRUST BAR === */
  .s-trust__inner{flex-direction:column;align-items:center;gap:2px}
  .s-trust__item{font-size:12.5px;padding:6px 10px}

  /* === URGENCY === */
  .s-urgency__text{font-size:13px;line-height:1.4}
  .uc-n{padding:4px 7px;font-size:13px;min-width:32px}

  /* === PROGRESS STEPS === */
  .s-progress{margin-bottom:16px;padding:0 8px}
  .s-progress__step span{font-size:10px}
  .s-progress__dot{width:28px;height:28px;font-size:12px}
  .s-progress__line{height:2px}

  /* === WIZARD STEP CARDS === */
  .s-step__grid{padding:20px 14px !important;border-radius:16px;gap:16px}
  .s-step__header{gap:10px;margin-bottom:20px}
  .s-step__num{font-size:1.8rem}
  .s-step__title{font-size:1.15rem}
  .s-step__sub{font-size:13.5px;line-height:1.5}

  /* === FIELDS — big touch targets === */
  .s-field{margin-bottom:12px}
  .s-field__label{font-size:13px;font-weight:700;margin-bottom:6px}
  .s-field__input{padding:14px 14px 14px 42px;font-size:16px !important;border-radius:12px;min-height:50px}
  .s-field__ico{width:18px;height:18px;left:14px}

  /* === MAP === */
  .s-map{height:200px;border-radius:14px}

  /* === METER TYPE — bigger cards === */
  .s-meter__row{gap:10px}
  .s-meter__btn{padding:18px 14px;border-radius:14px}
  .s-meter__icon{font-size:30px;margin-bottom:6px}
  .s-meter__name{font-size:15.5px;font-weight:800}
  .s-meter__desc{font-size:12px}
  .s-meter__hint{font-size:12.5px;padding:10px 14px}

  /* === CONSUMPTION === */
  .s-consumption__display{padding:20px 14px;border-radius:18px}
  .s-consumption__val{font-size:3rem}
  .s-consumption__unit{font-size:14px}
  .s-slider{height:8px;margin:18px 0 10px}
  .s-slider::-webkit-slider-thumb{width:34px;height:34px}
  .s-slider::-moz-range-thumb{width:34px;height:34px}
  .s-slider__labels{font-size:12px}

  /* === CONSUMPTION MODE === */
  .s-consumo-mode{margin-bottom:14px}
  .s-consumo-mode__btn{padding:12px 10px;font-size:13.5px;border-radius:10px}
  .s-bolletta__tab{padding:12px;font-size:14px}
  .s-bolletta__result{font-size:14.5px}

  /* === PRESETS — 2×2 bigger === */
  .s-presets{grid-template-columns:1fr 1fr;gap:8px}
  .s-preset{padding:16px 10px;border-radius:12px}
  .s-preset__ico{font-size:26px}
  .s-preset__txt{font-size:13px;font-weight:700}
  .s-preset__kwh{font-size:11px}

  /* === BUTTONS — full width, big === */
  .s-btn{padding:16px 28px;font-size:15.5px;border-radius:14px;min-height:52px}
  .s-btn--primary{font-size:16px;font-weight:800}
  .s-alert{font-size:14px;padding:12px 14px;border-radius:12px}

  /* === INFO CARD (step 2 sidebar) === */
  .s-info-card{padding:20px 16px;border-radius:16px}
  .s-info-card h3{font-size:1.05rem;margin-bottom:14px}
  .s-info-step{gap:10px;margin-bottom:10px}
  .s-info-step__n{width:30px;height:30px;min-width:30px;font-size:13px}
  .s-info-step strong{font-size:14px !important}
  .s-info-step p{font-size:12.5px !important;line-height:1.45}

  /* ═══ STEP 3 RESULTS ═══ */

  /* Results Hero — compact */
  .s-results-hero{padding:24px 16px;margin-bottom:20px;border-radius:16px}
  .s-results-hero h2{font-size:1.25rem !important;line-height:1.25}
  .s-results-hero p{font-size:13px;line-height:1.4}
  .s-results-badges{flex-direction:row !important;flex-wrap:wrap;justify-content:center;gap:6px}
  .s-rbadge{font-size:11.5px;padding:5px 10px;white-space:nowrap}

  /* KPI Row — 2×2 grid on mobile instead of stacked */
  .s-kpi-row{grid-template-columns:1fr 1fr !important;gap:10px}
  .s-kpi{padding:18px 14px;border-radius:16px}
  .s-kpi--main{padding:22px 16px;grid-column:span 2}
  .s-kpi__label{font-size:11px;margin-bottom:6px;letter-spacing:.04em}
  .s-kpi__value{font-size:1.5rem !important;line-height:1.1}
  .s-kpi__value--gold{font-size:2rem !important}
  .s-kpi__value--green{font-size:1.5rem !important}
  .s-kpi__sub{font-size:12px;margin-top:4px}

  /* Panels — full width, bigger text */
  .s-grid-2{gap:14px}
  .s-panel{padding:20px 16px;border-radius:16px}
  .s-panel__title{font-size:15.5px;font-weight:800;margin-bottom:14px}

  /* Bill Comparison — bigger amounts */
  .s-bill-compare{padding:20px 14px}
  .s-bill{padding:20px 14px;border-radius:14px}
  .s-bill__header{font-size:14px}
  .s-bill__amount{font-size:2rem}
  .s-bill__sub{font-size:12.5px}
  .s-bill__saving{font-size:13.5px;padding:10px 14px;border-radius:10px}

  /* Realtime panel */
  .s-realtime__now-value{font-size:22px}
  .s-realtime__stat{padding:12px}
  .s-realtime__stat-label{font-size:10.5px}
  .s-realtime__stat-value{font-size:17px}

  /* Charts — proper height */
  .s-chart-wrap{height:200px}

  /* Specs — bigger text */
  .s-spec{padding:12px 0}
  .s-spec__k{font-size:14px}
  .s-spec__v{font-size:15.5px;font-weight:700}
  .s-spec--hl{padding:14px 12px;border-radius:12px}
  .s-spec--hl .s-spec__v{font-size:18px}

  /* Investment — clear hierarchy */
  .s-invest__card{padding:20px 16px;border-radius:14px}
  .s-invest__label{font-size:11.5px}
  .s-invest__val{font-size:1.7rem}
  .s-invest__note{font-size:12.5px}
  .s-invest__badge{font-size:11px;padding:4px 10px}
  .s-invest__detail{font-size:13px;padding:8px 0}

  /* Eco */
  .s-eco{padding:14px;border-radius:12px}
  .s-eco__ico{font-size:26px}
  .s-eco__val{font-size:16px;font-weight:800}
  .s-eco__lbl{font-size:12.5px}

  /* Weather — 3 col */
  .s-weather-grid{grid-template-columns:repeat(3,1fr) !important;gap:6px}
  .s-weather-card{padding:10px 4px;border-radius:10px}
  .s-weather-day{font-size:11px}
  .s-weather-icon{font-size:24px;margin:6px 0}
  .s-weather-temp{font-size:14px}
  .s-weather-irr{font-size:10.5px}

  /* NASA/Electricity panels */
  .s-nstat{padding:14px;border-radius:12px}
  .s-nstat__v{font-size:19px}
  .s-nstat__l{font-size:11.5px}
  .s-elec__stat{padding:16px 14px;border-radius:12px}
  .s-elec__stat-value{font-size:19px}
  .s-elec__stat-label{font-size:11.5px}

  /* Money loss */
  .s-money-loss__value{font-size:24px !important}
  .s-money-loss__label{font-size:12.5px}

  /* === LEAD FORM === */
  .s-lead__info{padding:24px 16px}
  .s-lead__badge{font-size:11.5px}
  .s-lead__title{font-size:1.3rem !important}
  .s-lead__desc{font-size:14px;line-height:1.5}
  .s-lead__check{font-size:13.5px}
  .s-lead__form{padding:22px 14px}
  .s-lead__summary{gap:8px}
  .s-lead__summary-item .val{font-size:15px}
  .s-lead__summary-item .lbl{font-size:10px}

  /* Energy Flow */
  .ef-node{width:90%;padding:16px 20px}
  .ef-node__icon{font-size:34px}
  .ef-node__label{font-size:11px}
  .ef-node__val{font-size:16px}
  .ef-line{height:30px !important}

  /* === TICKER — bottom full width bar === */
  .st-ticker{padding:12px 16px;border-radius:14px 14px 0 0}
  .st-ticker__label{font-size:.78rem}
  .st-ticker__value{font-size:1.35rem}

  /* === EXIT MODAL === */
  .ex-modal{margin:12px;padding:24px 18px;border-radius:18px}
  .ex-emoji{font-size:42px}
  .ex-title{font-size:1.2rem}
  .ex-desc{font-size:14px}

  /* === KIT POPUP === */
  .s-kit-popup{padding:22px 18px 20px;border-radius:18px}
  .s-kit-popup__title{font-size:1.1rem}
  .s-kit-popup__desc{font-size:13px}
  .s-kit-popup__specs{gap:10px}
  .s-kit-popup__spec{padding:8px 10px;border-radius:10px}
  .s-kit-popup__spec-value{font-size:16px}
  .s-kit-popup__spec-label{font-size:10px}
  .s-kit-popup__price{font-size:1.8rem}
}


/* ═══ ANIMATED SVG SUN ═══════════════════════════════════════ */
.s-hero__sun{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;
  opacity:.6;
  animation:sunRotate 60s linear infinite;
}
.s-sun-rays{animation:sunRaysPulse 4s ease-in-out infinite;transform-origin:center}
.s-sun-core{animation:sunCorePulse 6s ease-in-out infinite}

@keyframes sunRotate{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sunRaysPulse{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:.25;transform:scale(1.05)}}
@keyframes sunCorePulse{0%,100%{opacity:1;r:95}50%{opacity:.8;r:92}}

/* ═══ ENERGY FLOW DIAGRAM ════════════════════════════════════ */
.s-energy-flow{overflow:hidden}
.ef-container{
  display:flex;align-items:center;justify-content:center;
  gap:0;padding:28px 0;position:relative;
}
.ef-node{
  text-align:center;flex-shrink:0;
  padding:20px 24px;border-radius:var(--r-l);
  background:var(--card-alt);border:2px solid rgba(0,0,0,.03);
  transition:all .6s var(--ease);
  opacity:0;transform:scale(.85);
}
.is-active .ef-node{opacity:1;transform:scale(1)}
.is-active .ef-node--sun{transition-delay:.1s}
.is-active .ef-node--panel{transition-delay:.4s}
.is-active .ef-node--home{transition-delay:.7s}

.ef-node--sun{border-color:rgba(245,158,11,.15);background:linear-gradient(160deg,var(--sun-50),#fff)}
.ef-node--panel{border-color:rgba(14,165,233,.15);background:linear-gradient(160deg,#F0F9FF,#fff)}
.ef-node--home{border-color:rgba(16,185,129,.15);background:linear-gradient(160deg,var(--eco-50),#fff)}

.ef-node__icon{font-size:36px;margin-bottom:6px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.06))}
.ef-node__label{font-family:var(--f-head);font-size:12px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.ef-node__val{font-family:var(--f-head);font-size:15px;font-weight:800;color:var(--ink);margin-top:6px}

.ef-line{
  width:80px;height:3px;position:relative;overflow:visible;
  background:rgba(0,0,0,.04);border-radius:100px;
  flex-shrink:0;margin:0 8px;
}
.ef-line__particle{
  position:absolute;top:-3px;left:-8px;
  width:8px;height:8px;border-radius:50%;
  background:var(--sun);
  box-shadow:0 0 12px rgba(245,158,11,.6),0 0 4px rgba(245,158,11,.8);
  opacity:0;
}
.is-active .ef-line--1 .ef-line__particle{
  opacity:1;animation:flowParticle 2s ease-in-out .5s infinite;
}
.is-active .ef-line--2 .ef-line__particle{
  opacity:1;animation:flowParticle 2s ease-in-out .8s infinite;
}
.is-active .ef-line--1{background:linear-gradient(90deg,rgba(245,158,11,.2),rgba(14,165,233,.2))}
.is-active .ef-line--2{background:linear-gradient(90deg,rgba(14,165,233,.2),rgba(16,185,129,.2))}

@keyframes flowParticle{
  0%{left:-8px;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{left:calc(100% + 8px);opacity:0}
}
@keyframes flowParticleV{
  0%{top:-8px;left:50%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{top:calc(100% + 8px);left:50%;opacity:0}
}

/* ═══ MAP CUSTOM MARKER ══════════════════════════════════════ */
.s-map-marker{background:none !important;border:none !important}
.s-map-toggle{background:#fff;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);border:2px solid rgba(0,0,0,.1);transition:all .2s;user-select:none}
.s-map-toggle:hover{background:var(--sun-50,#FFFBEB);border-color:var(--sun,#F59E0B)}
.s-map-marker__dot{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  font-size:24px;position:relative;z-index:2;
  filter:drop-shadow(0 4px 12px rgba(245,158,11,.4));
}
.s-map-marker__pulse{
  position:absolute;inset:0;
  border-radius:50%;
  background:rgba(245,158,11,.2);
  animation:markerPulse 2s ease-out infinite;
}
@keyframes markerPulse{
  0%{transform:scale(.5);opacity:1}
  100%{transform:scale(2.5);opacity:0}
}

/* ═══ WEATHER CARD STAGGER ═══════════════════════════════════ */
.s-weather-card{
  animation:cardReveal .5s var(--ease) both;
}

/* ═══ PAGE LOAD TRANSITION ═══════════════════════════════════ */
/* Page load handled without hiding body */

/* ═══ SOCIAL PROOF TOASTS ════════════════════════════════════ */

/* ═══ AUTO-DETECT BANNER ═════════════════════════════════════ */
.s-autodetect{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(14,165,233,.02));border:1px solid rgba(14,165,233,.12);border-radius:var(--r-m);margin-bottom:18px;animation:slideUp .5s var(--ease) both}
.s-autodetect__icon{font-size:20px}
.s-autodetect__text{font-size:13px;color:var(--ink-2);flex:1}
.s-autodetect__btn{background:var(--sky);color:#fff;border:none;padding:6px 14px;border-radius:8px;font-family:var(--f-head);font-size:12px;font-weight:700;cursor:pointer;transition:all .3s;white-space:nowrap}
.s-autodetect__btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,165,233,.3)}

/* ═══ WEATHER EXTRAS ═════════════════════════════════════════ */
.s-weather-uv{font-size:10px;color:var(--blaze);font-weight:700;margin-top:3px}
.s-weather-daylight{font-size:10px;color:var(--ink-3);margin-top:2px}

/* ═══ HINT ═══════════════════════════════════════════════════ */
.s-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);padding:10px 14px;background:var(--card-alt);border-radius:var(--r-s);margin-bottom:16px}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ═══ SOCIAL PROOF TOASTS ════════════════════════════════════ */
.sp-container{position:fixed;bottom:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:24px;left:auto;z-index:999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:300px}
.sp-toast{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04);transform:translateX(120%);opacity:0;transition:all .5s cubic-bezier(.16,1,.3,1);pointer-events:auto;max-width:340px}
.sp-toast--show{transform:translateX(0);opacity:1}
.sp-toast__icon{font-size:28px;flex-shrink:0}
.sp-toast__body{display:flex;flex-direction:column;gap:2px;overflow:hidden;min-width:0}
body.is-loaded{display:flex;flex-direction:column;gap:0;background:#060918!important;padding:0!important;margin:0!important}
.sp-toast__body strong{font-family:var(--f-head);font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sp-toast__body span{font-size:12px;color:var(--ink-2)}
.sp-toast__body small{font-size:11px;color:var(--ink-3)}

/* ═══ SAVINGS TICKER (floating) ══════════════════════════════ */
.st-ticker{position:fixed;top:16px;right:16px;z-index:998;display:flex;flex-direction:column;align-items:stretch;padding:16px 20px;max-width:280px;background:linear-gradient(135deg,#064e3b 0%,#065f46 50%,#047857 100%);color:#fff;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 8px 32px rgba(16,185,129,.4),0 2px 8px rgba(0,0,0,.3);animation:tickerSlideIn .5s cubic-bezier(.34,1.56,.64,1) .2s both}
.st-ticker__content{display:flex;flex-direction:column;gap:4px}
.st-ticker__label{font-size:.78rem;font-weight:500;line-height:1.35;opacity:.92;letter-spacing:.01em}
.st-ticker__label strong{font-weight:800;color:#6ee7b7}
.st-ticker__value{font-family:var(--f-head);font-size:1.6rem;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#6ee7b7;text-shadow:0 0 20px rgba(110,231,183,.35)}
.st-ticker__sub{font-size:.65rem;opacity:.55;letter-spacing:.02em}
.st-ticker__close{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.6);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;line-height:1;padding:0}
.st-ticker__close:hover{background:rgba(255,255,255,.2);color:#fff}
@keyframes tickerSlideIn{from{transform:translateX(60px) scale(.9);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes tickerFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ═══ URGENCY BANNER ═════════════════════════════════════════ */
.s-urgency{background:linear-gradient(135deg,#7C2D12,#991B1B);color:#fff;padding:14px 0;overflow:hidden;position:relative}
.s-urgency::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Cpath d='M20 0l20 20-20 20L0 20z'/%3E%3C/g%3E%3C/svg%3E")}
.s-urgency__inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.s-urgency__icon{font-size:22px;animation:urgencyPulse 1.5s ease-in-out infinite}
.s-urgency__text{font-size:14px;font-weight:600;color:rgba(255,255,255,.95)}
.s-urgency__text strong{color:#FEF08A;font-weight:800}
.s-urgency__countdown{display:flex;gap:4px;font-family:var(--f-head)}
.uc-n{display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.3);padding:6px 10px;border-radius:8px;font-size:18px;font-weight:800;min-width:42px;font-variant-numeric:tabular-nums}
.uc-n small{font-size:8px;font-weight:500;opacity:.7;text-transform:uppercase;letter-spacing:.08em}
.uc-sep{font-size:18px;font-weight:800;opacity:.4;line-height:42px}
@keyframes urgencyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ═══ MONEY LOSS TICKER ══════════════════════════════════════ */
.s-money-loss{background:linear-gradient(135deg,#1C1917,#292524) !important;border:2px solid rgba(239,68,68,.15) !important;position:relative;overflow:hidden}
.s-money-loss__inner{display:flex;align-items:center;gap:20px;padding:8px 0;position:relative;z-index:1}
.s-money-loss__icon{font-size:40px;animation:moneyShake 2s ease-in-out infinite}
.s-money-loss__label{font-size:13px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.04em}
.s-money-loss__value{font-family:var(--f-head);font-size:32px;font-weight:900;color:#EF4444;font-variant-numeric:tabular-nums;text-shadow:0 0 20px rgba(239,68,68,.4)}
.s-money-loss__sub{font-size:12px;color:rgba(255,255,255,.35)}
.s-money-loss__pulse{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:80px;height:80px;border-radius:50%;background:rgba(239,68,68,.08);animation:moneyPulse 2s ease-out infinite}
@keyframes moneyShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes moneyPulse{0%{transform:translateY(-50%) scale(.5);opacity:1}100%{transform:translateY(-50%) scale(2.5);opacity:0}}

/* ═══ NASA PANEL ═════════════════════════════════════════════ */
.s-nasa__header{margin-bottom:20px}
.s-nasa__badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:linear-gradient(135deg,#1E293B,#0F172A);color:#60A5FA;font-size:11px;font-weight:700;border-radius:100px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.s-nasa__sub{font-size:14px;color:var(--ink-3);margin-top:4px}
.s-nasa-stats{display:flex;gap:20px;margin-top:16px;flex-wrap:wrap}
.s-nstat{text-align:center;flex:1;min-width:120px;padding:12px;background:var(--card-alt);border-radius:var(--r-m);border:1px solid rgba(0,0,0,.04)}
.s-nstat__v{display:block;font-family:var(--f-head);font-size:20px;font-weight:800;color:var(--ink)}
.s-nstat__l{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.s-nstat--hl{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-color:rgba(245,158,11,.15)}
.s-nstat--hl .s-nstat__v{color:#92400E}
.s-nasa__fonte{font-size:11px;color:var(--ink-3);margin-top:12px;font-style:italic}

/* ═══ ELECTRICITY PANEL ══════════════════════════════════════ */
.s-elec__sub{font-size:14px;color:var(--ink-3);margin-top:4px}
.s-elec__highlight{display:flex;gap:16px;margin:20px 0;flex-wrap:wrap}
.s-elec__stat{flex:1;min-width:140px;text-align:center;padding:16px;background:var(--card-alt);border-radius:var(--r-m);border:1px solid rgba(0,0,0,.04)}
.s-elec__stat-value{display:block;font-family:var(--f-head);font-size:24px;font-weight:900;color:var(--ink)}
.s-elec__stat-label{display:block;font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.4}
.s-elec__stat--alert{background:linear-gradient(135deg,#FEF2F2,#FECACA);border-color:rgba(239,68,68,.15)}
.s-elec__stat--alert .s-elec__stat-value{color:#DC2626}
.s-elec__stat--future{background:linear-gradient(135deg,#F0FDF4,#BBF7D0);border-color:rgba(16,185,129,.15)}
.s-elec__stat--future .s-elec__stat-value{color:#059669}

/* ═══ BILL COMPARISON ════════════════════════════════════════ */
.s-bill-grid{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.s-bill{flex:1;min-width:200px;max-width:340px;text-align:center;padding:24px;border-radius:var(--r-l);background:var(--card-alt);border:2px solid rgba(0,0,0,.04);transition:all .4s var(--ease)}
.s-bill--before{border-color:rgba(239,68,68,.1)}
.s-bill--after{border-color:rgba(16,185,129,.15);background:linear-gradient(160deg,#F0FDF4,#fff)}
.s-bill__header{font-size:14px;font-weight:700;margin-bottom:12px}
.s-bill__amount{font-family:var(--f-head);font-size:36px;font-weight:900;color:var(--ink)}
.s-bill__amount--green{color:#059669}
.s-bill__sub{font-size:12px;color:var(--ink-3);margin-top:4px}
.s-bill__bar{height:8px;background:rgba(0,0,0,.04);border-radius:100px;margin-top:16px;overflow:hidden}
.s-bill__bar-fill{height:100%;border-radius:100px;width:0;transition:width 1.5s cubic-bezier(.16,1,.3,1)}
.s-bill__bar-fill--red{background:linear-gradient(90deg,#EF4444,#F97316)}
.s-bill__bar-fill--green{background:linear-gradient(90deg,#10B981,#34D399)}
.s-bill__saving{margin-top:12px;padding:8px 12px;background:linear-gradient(135deg,#059669,#10B981);color:#fff;border-radius:8px;font-family:var(--f-head);font-size:13px;font-weight:700}
.s-bill__arrow{flex-shrink:0;color:var(--ink-3);animation:billArrow 1.5s ease-in-out infinite}
@keyframes billArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ═══ REALTIME PANEL ═════════════════════════════════════════ */
.s-realtime__header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.s-realtime__sub{font-size:13px;color:var(--ink-3);margin-top:4px}
.s-realtime__now{text-align:right;padding:12px 16px;background:linear-gradient(135deg,#064E3B,#065F46);border-radius:var(--r-m);color:#fff;position:relative;overflow:hidden}
.s-realtime__now-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.s-realtime__now-value{font-family:var(--f-head);font-size:24px;font-weight:900;color:#34D399}
.s-realtime__now-pulse{position:absolute;right:8px;top:8px;width:8px;height:8px;background:#34D399;border-radius:50%;animation:dotPulse 2s ease-out infinite}
.s-realtime__stats{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}
.s-realtime__stat{flex:1;min-width:100px;text-align:center;padding:10px;background:var(--card-alt);border-radius:var(--r-m)}
.s-realtime__stat-label{display:block;font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.s-realtime__stat-value{display:block;font-family:var(--f-head);font-size:16px;font-weight:700;margin-top:2px}

/* ═══ HISTORICAL STATS ═══════════════════════════════════════ */
.s-historical-stats{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}
.s-hstat{flex:1;min-width:100px;text-align:center;padding:10px;background:var(--card-alt);border-radius:var(--r-m)}
.s-hstat__v{display:block;font-family:var(--f-head);font-size:20px;font-weight:800;color:var(--ink)}
.s-hstat__l{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}

/* ═══ RESULTS BADGES ═════════════════════════════════════════ */
.s-results-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.s-rbadge{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;font-size:12px;font-weight:600;border-radius:100px;background:rgba(0,0,0,.03);color:var(--ink-2)}
.s-rbadge__ico{font-size:14px}

/* ═══ LEAD LIVE COUNTER ══════════════════════════════════════ */
.s-lead__live{display:flex;align-items:center;gap:8px;margin-top:20px;padding:10px 14px;background:rgba(16,185,129,.06);border-radius:var(--r-m);font-size:13px;color:var(--ink-2)}
.s-lead__live-dot{width:8px;height:8px;background:#10B981;border-radius:50%;animation:dotPulse 2s ease-out infinite}

/* ═══ EXIT INTENT MODAL ══════════════════════════════════════ */
.ex-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.ex-modal{background:#fff;border-radius:20px;padding:40px;max-width:440px;width:100%;text-align:center;position:relative;animation:exModalIn .5s var(--ease)}
.ex-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink-3)}
.ex-emoji{font-size:56px;margin-bottom:12px}
.ex-title{font-family:var(--f-head);font-size:24px;font-weight:800;margin:0 0 10px}
.ex-desc{font-size:15px;color:var(--ink-2);margin:0 0 20px}
.ex-cta-row{margin-bottom:14px}
.ex-footer{font-size:12px;color:var(--ink-3)}
@keyframes exModalIn{from{transform:scale(.9) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

#solar-app input,#solar-app textarea,#solar-app select{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}