/* ===================================================================
   SOL-TECH INDUSTRIE — Design System
   =================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
button { background: none; border: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Tokens ---------- */
:root{
  /* Farben — aus dem offiziellen Logo (#0A5BD6 / #0844A8) */
  --blue:        #0A5BD6;
  --blue-dark:   #0844A8;
  --blue-light:  #4A8CF2;
  --blue-tint:   #EAF2FE;
  --blue-tint-2: #F3F8FF;

  --sun:         #F3A712;   /* warmer Sonnenakzent, sehr sparsam einsetzen */
  --sun-tint:    #FEF6E4;
  --eco:         #1FA971;   /* Erfolg / Förderung / Nachhaltigkeit */
  --eco-tint:    #E9F8F1;

  --ink:         #0B1220;
  --ink-2:       #1C2333;
  --body:        #4B5568;
  --muted:       #7C8797;
  --faint:       #A6AEBB;

  --white:       #FFFFFF;
  --bg:          #FAFBFD;
  --panel:       #F4F7FB;
  --panel-dark:  #EEF2F8;
  --line:        #E4E9F1;
  --line-dark:   rgba(255,255,255,.14);

  --dark:        #0B1220;
  --dark-2:      #141B2C;

  /* Typografie */
  --sans: "Avenir Next", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Abstände — 4px-Raster */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --maxw: 1220px;
  --maxw-narrow: 820px;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11,18,32,.05), 0 1px 1px rgba(11,18,32,.04);
  --shadow: 0 12px 32px rgba(11,18,32,.08);
  --shadow-lg: 0 30px 70px rgba(11,18,32,.16);
  --shadow-blue: 0 14px 30px rgba(10,91,214,.28);

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-1: 180ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
}

/* ---------- Base ---------- */
body{
  font-family: var(--sans);
  color: var(--body);
  background: var(--white);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{
  color: var(--ink);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h1{ font-size: clamp(38px, 6vw, 68px); letter-spacing: -0.03em; }
h2{ font-size: clamp(30px, 4.2vw, 46px); }
h3{ font-size: clamp(22px, 2.6vw, 28px); }
h4{ font-size: 19px; }
p{ margin: 0; }
strong{ color: var(--ink); font-weight: 700; }
.lead{ font-size: clamp(17px, 2vw, 20px); color: var(--body); line-height: 1.6; }

.container{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container--narrow{ max-width: var(--maxw-narrow); }

.section{ padding: var(--sp-9) 0; }
.section--tight{ padding: var(--sp-8) 0; }
.section--panel{ background: var(--panel); }
.section--dark{ background: var(--dark); color: #C7CEDB; }
.section--dark h2, .section--dark h3{ color: #fff; }
.section--gradient{
  background: radial-gradient(120% 140% at 15% -10%, var(--blue-tint) 0%, var(--white) 55%);
}

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: var(--sp-4);
}
.eyebrow::before{ content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
.eyebrow--light{ color: var(--blue-light); }

.section-head{ max-width: 720px; margin-bottom: var(--sp-7); }
.section-head--center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head p{ margin-top: var(--sp-4); }

.mono{ font-family: var(--mono); font-variant-numeric: tabular-nums; }
.text-muted{ color: var(--muted); }
.text-eco{ color: var(--eco); }
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 16px; line-height: 1;
  padding: 16px 30px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  white-space: nowrap;
}
.btn svg{ width: 18px; height: 18px; flex: none; }
.btn--primary{ background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover{ background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(10,91,214,.36); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--ink); }
.btn--light{ background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--light:hover{ background: #fff; color: var(--ink); }
.btn--sm{ padding: 11px 20px; font-size: 14.5px; }
.btn--block{ width: 100%; }
.btn:focus-visible{ outline: 3px solid var(--blue-light); outline-offset: 2px; }

/* ---------- Header ---------- */
.topbar{ background: var(--dark); color: #B7C0D1; font-size: 13.5px; }
.topbar__inner{ display:flex; justify-content: space-between; align-items:center; height: 38px; gap:16px; flex-wrap: wrap; }
.topbar a{ color: #B7C0D1; margin-right: 18px; transition: color var(--dur-1); }
.topbar a:hover{ color:#fff; }
.topbar__note{ color:#7C8797; }

.header{
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-2), border-color var(--dur-2);
}
.header.is-scrolled{ box-shadow: var(--shadow-sm); border-color: var(--line); }
.header__inner{ display:flex; align-items:center; gap: 28px; height: 76px; }
.header__logo{ display:flex; align-items:center; flex: none; }
.header__logo img{ height: 28px; width:auto; }

.nav{ display:flex; align-items:center; gap: 26px; margin-left: 8px; flex: 1; }
.nav a{ font-size: 15px; font-weight: 600; color: var(--body); padding: 8px 0; position: relative; transition: color var(--dur-1); }
.nav a:hover, .nav a[aria-current="page"]{ color: var(--ink); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--blue); border-radius: 2px;
}
.header__actions{ display:flex; align-items:center; gap: 14px; flex: none; }
.header__phone{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color: var(--ink); }
.header__phone svg{ width:16px; height:16px; color: var(--blue); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-toggle span{ height:2px; width:100%; background: var(--ink); border-radius: 2px; transition: transform var(--dur-2), opacity var(--dur-2); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px){
  .nav{
    position: fixed; inset: 76px 0 0 0; margin:0; flex-direction: column; align-items: stretch;
    background: #fff; padding: var(--sp-5) 24px; gap: 4px; overflow-y:auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), visibility var(--dur-2);
  }
  .nav.is-open{ transform: translateY(0); opacity:1; visibility: visible; }
  .nav a{ padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 17px; }
  .header__phone{ display:none; }
  .nav-toggle{ display:flex; }
  .header__cta-desktop{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ position: relative; padding: var(--sp-9) 0 var(--sp-8); overflow: hidden; }
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 55% at 82% 8%, var(--blue-tint) 0%, transparent 60%),
    radial-gradient(45% 40% at 8% 85%, var(--sun-tint) 0%, transparent 60%);
}
.hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items:center; }
.hero__kpis{ display:flex; flex-wrap:wrap; gap: var(--sp-6); margin-top: var(--sp-7); }
.hero__kpi b{ display:block; font-size: 28px; font-weight: 800; color: var(--ink); font-family: var(--mono); }
.hero__kpi span{ font-size: 13.5px; color: var(--muted); }
.hero__actions{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: var(--sp-6); }
.hero__trust{ display:flex; align-items:center; gap:10px; margin-top: var(--sp-6); font-size:14px; color: var(--muted); }
.hero__trust svg{ width:16px; height:16px; color: var(--eco); flex:none; }

@media (max-width: 960px){
  .hero__grid{ grid-template-columns: 1fr; }
}

/* ---------- Placeholder image blocks ---------- */
.ph-media{
  position: relative; border-radius: var(--radius-lg); overflow:hidden;
  background: linear-gradient(135deg, var(--blue-tint) 0%, var(--panel) 100%);
  border: 1.5px dashed #C7D6EF;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color: var(--blue-dark); text-align:center; padding: var(--sp-6);
  aspect-ratio: 4 / 3; min-height: 220px;
}
.ph-media svg{ width: 40px; height: 40px; opacity:.65; }
.ph-media__label{ font-size: 13px; font-weight: 700; max-width: 260px; line-height:1.4; }
.ph-media__tag{
  position:absolute; top:14px; left:14px; background: rgba(255,255,255,.9);
  font-size: 11px; font-weight: 800; letter-spacing:.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill); color: var(--blue-dark);
}
.ph-media--square{ aspect-ratio: 1/1; }
.ph-media--wide{ aspect-ratio: 16/9; }
.ph-media--tall{ aspect-ratio: 3/4; }
.ph-media--dark{ background: linear-gradient(135deg, #17233B, #0B1220); border-color: rgba(255,255,255,.18); color:#AFC2EA; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap: var(--sp-6); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px){ .grid--3, .grid--4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; } }

.card{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: #D7E2F5; }
.card__icon{
  width: 52px; height:52px; border-radius: 16px; background: var(--blue-tint); color: var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom: var(--sp-5);
}
.card__icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom: 10px; font-size: 20px; }
.card p{ color: var(--body); font-size: 15.5px; }

.card--dark{ background: var(--dark-2); border-color: rgba(255,255,255,.08); }
.card--dark h3{ color:#fff; }
.card--dark p{ color:#AEB7C9; }
.card--dark .card__icon{ background: rgba(255,255,255,.08); color: var(--blue-light); }

/* Step / process cards */
.steps{ counter-reset: step; display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-6); }
@media (max-width: 960px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .steps{ grid-template-columns: 1fr; } }
.step{ position:relative; padding-top: var(--sp-6); }
.step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
  width: 40px; height:40px; border-radius: 12px; background: var(--blue-tint);
  margin-bottom: var(--sp-4);
}
.step h4{ margin-bottom:6px; }
.step p{ font-size: 14.5px; color: var(--muted); }

/* Testimonial / reference cards */
.ref-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.ref-card__media{ position:relative; }
.ref-card__body{ padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.ref-card__stat{ font-family: var(--mono); font-weight:800; font-size:26px; color: var(--blue); }
.ref-card__meta{ font-size: 13px; color: var(--muted); margin-top: 4px; }
.ref-card p{ margin-top: var(--sp-4); font-size: 15px; }
.placeholder-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#9A6B00; background:#FFF3D6;
  padding:4px 10px; border-radius: var(--radius-pill); margin-top: var(--sp-4);
}

/* Numbers / stats strip */
.stats{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-6); max-width:820px; margin-inline:auto; }
@media (max-width: 720px){ .stats{ grid-template-columns: repeat(2,1fr); } }
.stat b{ display:block; font-family: var(--mono); font-weight:800; font-size: clamp(28px,4vw,40px); color: var(--ink); }
.stat span{ font-size: 14px; color: var(--muted); }

/* Badges / pills */
.pill{ display:inline-flex; align-items:center; gap:8px; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 16px; font-size:13.5px; font-weight:600; color: var(--body); }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Tech explainer (interactive tabs) ---------- */
.explainer{ display:grid; grid-template-columns: .9fr 1.1fr; gap: var(--sp-8); align-items:start; }
@media (max-width: 960px){ .explainer{ grid-template-columns: 1fr; } }
.explainer__tabs{ display:flex; flex-direction:column; gap: 10px; position: sticky; top: 100px; }
.explainer__tab{
  text-align:left; padding: var(--sp-5); border-radius: var(--radius); border: 1.5px solid var(--line);
  background: #fff; transition: border-color var(--dur-2), background var(--dur-2);
  cursor:pointer;
}
.explainer__tab strong{ display:block; font-size: 16.5px; margin-bottom: 4px; }
.explainer__tab span{ font-size: 13.5px; color: var(--muted); }
.explainer__tab.is-active{ border-color: var(--blue); background: var(--blue-tint-2); }
.explainer__tab.is-active strong{ color: var(--blue-dark); }
.explainer__panels{ position:relative; min-height: 420px; }
.explainer__panel{ display:none; }
.explainer__panel.is-active{ display:block; animation: fade-up var(--dur-3) var(--ease); }
.explainer__panel h3{ margin-bottom: var(--sp-3); }
.explainer__panel .lead{ margin-bottom: var(--sp-5); }
.explainer__analogy{
  display:flex; gap: 14px; align-items:flex-start; background: var(--sun-tint); border: 1px solid #F3DFA8;
  border-radius: var(--radius); padding: var(--sp-5); margin-top: var(--sp-5);
}
.explainer__analogy svg{ width:22px; height:22px; color:#B4790A; flex:none; margin-top:2px; }
.explainer__analogy p{ font-size: 14.5px; color:#6B4B08; }

@keyframes fade-up{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none; } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- System diagram (Alles arbeitet zusammen) ---------- */
.system{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap: var(--sp-6); padding: var(--sp-8) 0; }
.system__node{
  width: 180px; text-align:center; padding: var(--sp-5) var(--sp-4); background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); position:relative; z-index:1;
}
.system__node .card__icon{ margin: 0 auto var(--sp-4); }
.system__node strong{ display:block; font-size:15px; margin-bottom:4px; }
.system__node span{ font-size:12.5px; color:var(--muted); }
.system__hub{
  width:120px;height:120px;border-radius:50%; background: var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px;
  box-shadow: var(--shadow-blue); font-weight:800; font-size:13px; text-align:center; text-transform:uppercase; letter-spacing:.04em;
}

/* ---------- FAQ Accordion ---------- */
.accordion{ border-top: 1px solid var(--line); }
.accordion__item{ border-bottom: 1px solid var(--line); }
.accordion__trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  padding: var(--sp-5) 4px; text-align:left; font-weight:700; font-size: 16.5px; color: var(--ink);
}
.accordion__trigger svg{ width:20px; height:20px; flex:none; color: var(--blue); transition: transform var(--dur-2) var(--ease); }
.accordion__trigger[aria-expanded="true"] svg{ transform: rotate(45deg); }
.accordion__panel{ max-height:0; overflow:hidden; transition: max-height var(--dur-3) var(--ease); }
.accordion__panel__inner{ padding: 0 4px var(--sp-5); color: var(--body); font-size: 15.5px; max-width: 760px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width:640px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-size: 13.5px; font-weight:700; color: var(--ink); }
.field input, .field select, .field textarea{
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px;
  font-size: 15.5px; background:#fff; transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field small{ font-size:12.5px; color: var(--muted); }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color: var(--muted); }
.consent input{ margin-top:3px; }
.form-note{ font-size: 12.5px; color: var(--faint); margin-top: var(--sp-4); }
.form-success{
  display:none; align-items:center; gap:12px; background: var(--eco-tint); border:1px solid #BFE7D3;
  color:#0E6B45; border-radius: var(--radius); padding: var(--sp-5); font-weight:700; margin-top: var(--sp-5);
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:22px;height:22px;flex:none; }

/* ---------- Calculator widget ---------- */
.calc{
  background: var(--dark); color:#E7ECF7; border-radius: var(--radius-lg); padding: var(--sp-7);
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px){ .calc{ grid-template-columns:1fr; padding: var(--sp-6); } }
.calc h3{ color:#fff; margin-bottom: var(--sp-2); }
.calc .lead{ color:#AEB7C9; margin-bottom: var(--sp-6); }
.calc__field{ margin-bottom: var(--sp-5); }
.calc__field label{ display:flex; justify-content:space-between; font-size:14px; font-weight:700; color:#C7CEDB; margin-bottom:10px; }
.calc__field output{ color: var(--sun); font-family: var(--mono); }
.calc__field input[type="range"]{
  width:100%; accent-color: var(--sun); height: 6px;
}
.calc__result{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: var(--sp-6); }
.calc__result-row{ display:flex; justify-content:space-between; align-items:baseline; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.calc__result-row:last-child{ border-bottom:0; }
.calc__result-row span{ font-size:14px; color:#9AA5BC; }
.calc__result-row b{ font-family: var(--mono); font-size:20px; color:#fff; }
.calc__result-row.is-highlight b{ color: var(--sun); font-size:28px; }
.calc__disclaimer{ font-size:12px; color:#7C8797; margin-top: var(--sp-4); }

/* ---------- Logos / partners strip ---------- */
.brandstrip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: var(--sp-8); opacity:.75; }
.brandstrip span{ font-family: var(--mono); font-weight:700; font-size:15px; color: var(--faint); letter-spacing:.02em; }

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-7); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-6); flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size: clamp(26px,3.4vw,36px); max-width: 560px; }
.cta-band p{ color: rgba(255,255,255,.85); margin-top:10px; max-width: 520px; }

/* ---------- Footer ---------- */
.footer{ background: var(--dark); color:#8B94A8; padding: var(--sp-8) 0 var(--sp-6); }
.footer__top{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,.08); }
@media (max-width: 960px){ .footer__top{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .footer__top{ grid-template-columns: 1fr; } }
.footer__brand img{ height:26px; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); }
.footer__brand p{ font-size:14px; max-width: 280px; line-height:1.6; }
.footer h5{ color:#fff; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom: var(--sp-4); }
.footer ul{ display:flex; flex-direction:column; gap:11px; }
.footer a{ font-size:14.5px; transition: color var(--dur-1); }
.footer a:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top: var(--sp-6); font-size:13px; }
.footer__legal{ display:flex; gap: var(--sp-5); flex-wrap:wrap; }
.footer__social{ display:flex; gap:12px; }
.footer__social a{ width:34px;height:34px;border-radius:10px; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.footer__social svg{ width:16px;height:16px; }

/* ---------- Breadcrumb / page intro (subpages) ---------- */
.page-hero{ padding: var(--sp-8) 0 var(--sp-7); background: var(--panel); }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:13.5px; color: var(--muted); margin-bottom: var(--sp-5); }
.breadcrumb a{ color: var(--muted); } .breadcrumb a:hover{ color: var(--blue); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 800; background:#fff; border-top: 1px solid var(--line);
  padding: 12px 16px; display:none; box-shadow: 0 -8px 24px rgba(11,18,32,.08);
}
.sticky-cta__inner{ display:flex; gap:10px; }
@media (max-width: 720px){ .sticky-cta{ display:flex; } body{ padding-bottom: 72px; } }

/* ---------- Utility ---------- */
.flow > * + *{ margin-top: var(--sp-5); }
.center{ text-align:center; }
.mt-1{margin-top:var(--sp-5)} .mt-2{margin-top:var(--sp-7)}
.hide-mobile{ }
@media (max-width:720px){ .hide-mobile{ display:none; } }

/* ===================================================================
   2026 CINEMATIC REDESIGN
   Visual language derived from the supplied day / night hero concept.
   =================================================================== */

:root{
  --blue: #1667e8;
  --blue-dark: #0d47b5;
  --blue-light: #72a8ff;
  --blue-tint: #e9f0ff;
  --blue-tint-2: #f3f7ff;
  --sun: #d8ff72;
  --sun-tint: #f3fbdc;
  --eco: #176d50;
  --eco-tint: #e6f4ee;
  --ink: #101611;
  --ink-2: #263129;
  --body: #536057;
  --muted: #7b867e;
  --faint: #a0aaa2;
  --white: #ffffff;
  --bg: #f6f6f1;
  --panel: #eeefe8;
  --panel-dark: #e5e8de;
  --line: rgba(16, 22, 17, .11);
  --dark: #09110e;
  --dark-2: #111c17;
  --sans: "Avenir Next", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1280px;
  --maxw-narrow: 860px;
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 32px;
  --shadow-sm: 0 1px 0 rgba(16,22,17,.06), 0 8px 24px rgba(16,22,17,.035);
  --shadow: 0 22px 55px rgba(16,22,17,.1);
  --shadow-lg: 0 36px 100px rgba(0,0,0,.22);
  --shadow-blue: 0 16px 34px rgba(22,103,232,.24);
}

body{
  background: var(--bg);
  font-family: var(--sans);
  color: var(--body);
  font-weight: 400;
}

h1,h2,h3,h4{
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -.035em;
}

h1{ font-size: clamp(46px, 7vw, 84px); }
h2{ font-size: clamp(34px, 5vw, 58px); }
h3{ font-size: clamp(22px, 2.6vw, 29px); }
.lead{ font-weight: 350; }
.section{ padding: clamp(84px, 10vw, 140px) 0; }
.section--tight{ padding: clamp(56px, 7vw, 88px) 0; }
.section--panel{ background: var(--panel); }
.section--gradient{ background: radial-gradient(circle at 85% 5%, rgba(216,255,114,.34), transparent 28%), var(--bg); }
.container{ padding-left: clamp(20px, 4vw, 54px); padding-right: clamp(20px, 4vw, 54px); }

.eyebrow{
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
}
.eyebrow::before{ width: 8px; height: 8px; background: var(--blue); box-shadow: 0 0 0 5px rgba(22,103,232,.1); }
.section-head{ max-width: 820px; margin-bottom: clamp(42px, 6vw, 72px); }
.section-head--center{ max-width: 900px; }

/* Refined buttons */
.btn{
  min-height: 52px;
  border-radius: 12px;
  padding: 16px 25px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.btn--primary{ background: var(--ink); color: #fff; box-shadow: none; }
.btn--primary:hover{ background: var(--blue); box-shadow: var(--shadow-blue); }
.btn--ghost{ background: rgba(255,255,255,.55); border-color: var(--line); backdrop-filter: blur(10px); }
.btn--ghost:hover{ background: #fff; border-color: rgba(16,22,17,.28); }
.btn--light{ background: #fff; color: var(--ink); border-color: transparent; }
.btn--light:hover{ background: var(--sun); color: var(--ink); }

/* Navigation */
.topbar{ background: var(--dark); font-size: 12.5px; letter-spacing: .01em; }
.topbar__inner{ height: 34px; }
.header{
  background: rgba(246,246,241,.88);
  border-bottom-color: rgba(16,22,17,.07);
  backdrop-filter: saturate(140%) blur(22px);
  -webkit-backdrop-filter: saturate(140%) blur(22px);
}
.header__inner{ height: 82px; max-width: 1440px; }
.header__logo img{ height: 31px; }
.nav{ justify-content: center; gap: clamp(16px, 2vw, 30px); }
.nav a{ color: var(--ink-2); font-size: 14px; font-weight: 500; }
.nav a[aria-current="page"]::after{ background: var(--blue); bottom: -5px; }
.header__phone{ font-weight: 500; }

/* Home header sits inside the photographic hero. */
.home .topbar{ display: none; }
.home .header{
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border: 0;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home .header__inner{ height: 94px; }
.home .header__logo img{ filter: brightness(0) invert(1); transition: filter .45s ease; }
.home .nav a,
.home .header__phone{ color: rgba(255,255,255,.84); text-shadow: 0 1px 16px rgba(0,0,0,.35); }
.home .nav a:hover{ color: #fff; }
.home .header__phone svg{ color: var(--sun); }
.home .header__phone{ display:none; }
.home .header .btn--primary{ color: var(--ink); background: #fff; }
.home .nav-toggle span{ background: #fff; }
.home.is-day .header__logo img{ filter: brightness(0); }
.home.is-day .nav a,
.home.is-day .header__phone{ color: rgba(16,22,17,.8); text-shadow: 0 1px 18px rgba(255,255,255,.5); }
.home.is-day .nav a:hover{ color: var(--ink); }
.home.is-day .header .btn--primary{ color:#fff; background: var(--ink); }
.home.is-day .nav-toggle span{ background: var(--ink); }

/* Fullscreen day / night hero */
.hero--cinematic{
  min-height: 680px;
  height: 100svh;
  padding: 0;
  background: #07100d;
  color: #fff;
  isolation: isolate;
}
.hero__scene,
.hero__image,
.hero__veil{ position: absolute; inset: 0; }
.hero__scene{ z-index: -1; overflow: hidden; background: #07100d; }
.hero__image{
  background-size: cover;
  background-position: center 48%;
  transform: scale(1.035);
  will-change: transform, opacity;
}
.hero__image--back{
  z-index: 0;
  background-image: url('../img/hero/solar-night.jpg');
  filter: blur(26px);
  transform: scale(1.09);
}
.hero__image--front{
  z-index: 1;
  background-image: url('../img/hero/solar-night.jpg');
  transition: transform .58s cubic-bezier(.175,.885,.32,1.35), opacity .5s ease;
}
.hero__image--front.is-pulling{
  transform: translateY(18vh) scale(1.04) !important;
  opacity: .64;
  transition: transform .3s cubic-bezier(.32,0,.67,0), opacity .3s ease;
}
.hero__veil{
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(3,8,6,.58) 0%, rgba(3,8,6,.1) 28%, rgba(3,8,6,.08) 52%, rgba(3,8,6,.78) 100%),
    radial-gradient(circle at 50% 46%, transparent 10%, rgba(2,6,4,.42) 100%);
  transition: background .5s ease;
}
.home.is-day .hero__veil{
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.02) 32%, rgba(255,255,255,.04) 58%, rgba(244,240,225,.84) 100%),
    radial-gradient(circle at 50% 45%, transparent 20%, rgba(59,47,27,.2) 100%);
}
.hero--cinematic::before,
.hero--cinematic::after{
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 13vh;
  pointer-events: none;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.hero--cinematic::before{ top: 0; -webkit-mask-image: linear-gradient(#000 45%,transparent); mask-image: linear-gradient(#000 45%,transparent); }
.hero--cinematic::after{ bottom: 0; -webkit-mask-image: linear-gradient(transparent,#000 70%); mask-image: linear-gradient(transparent,#000 70%); }
.hero__cinematic-inner{
  min-height: 680px;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 4;
  padding-top: clamp(140px, 19vh, 210px);
  padding-bottom: 26px;
}
.hero__cinematic-copy{ max-width: 1040px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__overline{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(8,15,12,.18);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.8);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: hero-rise .9s .1s both;
}
.hero__overline::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--sun); box-shadow:0 0 15px var(--sun); }
.home.is-day .hero__overline{ color: rgba(16,22,17,.72); background: rgba(255,255,255,.24); border-color: rgba(16,22,17,.14); }
.hero--cinematic h1{
  max-width: 1000px;
  color: #f6f3e9;
  font-size: clamp(52px, 7.2vw, 104px);
  font-weight: 400;
  line-height: .93;
  letter-spacing: -.055em;
  text-shadow: 0 12px 50px rgba(0,0,0,.3);
  animation: hero-rise .95s .2s both;
  transition: color .5s ease;
}
.hero--cinematic h1 span{ color: rgba(246,243,233,.38); transition: color .5s ease; }
.home.is-day .hero--cinematic h1{ color: #342d21; text-shadow: 0 12px 55px rgba(255,255,255,.28); }
.home.is-day .hero--cinematic h1 span{ color: rgba(255,255,255,.86); }
.hero__cinematic-copy > p{
  max-width: 650px;
  margin-top: 26px;
  color: rgba(255,255,255,.74);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  text-shadow: 0 2px 25px rgba(0,0,0,.35);
  animation: hero-rise .95s .34s both;
  transition: color .5s ease;
}
.home.is-day .hero__cinematic-copy > p{ color: rgba(45,38,28,.78); text-shadow: 0 1px 20px rgba(255,255,255,.65); }
.hero--cinematic .hero__actions{ margin-top: 30px; justify-content: center; animation: hero-rise .95s .46s both; }
.btn--hero{ background:#fff; color:var(--ink); border-color:#fff; box-shadow:0 15px 40px rgba(0,0,0,.18); }
.btn--hero:hover{ background:var(--sun); border-color:var(--sun); transform:translateY(-2px); }
.btn--hero-ghost{ color:#fff; border-color:rgba(255,255,255,.38); background:rgba(3,8,6,.18); backdrop-filter:blur(12px); }
.btn--hero-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; transform:translateY(-2px); }
.home.is-day .btn--hero{ background:var(--ink); color:#fff; border-color:var(--ink); }
.home.is-day .btn--hero-ghost{ color:var(--ink); border-color:rgba(16,22,17,.28); background:rgba(255,255,255,.24); }
.hero__proof{
  display:flex;
  justify-content:center;
  gap:0;
  margin-top:32px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.18);
  animation: hero-rise .95s .58s both;
}
.hero__proof > div{ min-width:160px; padding:0 26px; border-right:1px solid rgba(255,255,255,.16); text-align:left; }
.hero__proof > div:last-child{ border:0; }
.hero__proof strong{ display:block; color:#fff; font-size:18px; font-weight:500; }
.hero__proof span{ display:block; color:rgba(255,255,255,.54); font-size:11px; letter-spacing:.03em; }
.home.is-day .hero__proof{ border-color:rgba(16,22,17,.16); }
.home.is-day .hero__proof > div{ border-color:rgba(16,22,17,.14); }
.home.is-day .hero__proof strong{ color:var(--ink); }
.home.is-day .hero__proof span{ color:rgba(16,22,17,.58); }
.hero__bottom{ width:100%; margin-top:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; }
.day-night-toggle{
  grid-column:2;
  position:relative;
  display:flex;
  width:min(460px, calc(100vw - 40px));
  padding:3px;
  border-radius:13px;
  background:rgba(13,20,16,.28);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 16px 42px rgba(0,0,0,.14);
}
.day-night-toggle__indicator{
  position:absolute;
  inset:3px auto 3px 3px;
  width:calc(50% - 5px);
  border-radius:9px;
  background:#f3f5ea;
  box-shadow:0 6px 18px rgba(0,0,0,.13);
  transform:translateX(calc(100% + 4px));
  transition:transform .52s cubic-bezier(.175,.885,.32,1.275);
}
.home.is-day .day-night-toggle__indicator{ transform:translateX(0); }
.day-night-toggle__button{
  flex:1;
  position:relative;
  z-index:1;
  padding:9px 14px;
  border-radius:9px;
  color:rgba(255,255,255,.72);
  transition:color .35s ease;
}
.day-night-toggle__button span{ display:block; font-size:15px; font-weight:500; line-height:1.15; }
.day-night-toggle__button small{ display:block; margin-top:3px; font-size:10px; font-weight:300; opacity:.68; }
.day-night-toggle__button.is-active{ color:#3d3527; }
.day-night-toggle__button:focus-visible{ outline:2px solid var(--sun); outline-offset:2px; }
.home.is-day .day-night-toggle__button:focus-visible{ outline-color:var(--ink); }
.home.is-day .day-night-toggle{ background:rgba(255,255,255,.25); border-color:rgba(16,22,17,.12); }
.home.is-day .day-night-toggle__button{ color:rgba(16,22,17,.62); }
.home.is-day .day-night-toggle__button.is-active{ color:#3d3527; }
.hero__scroll{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:9px;
  padding-bottom:12px;
  color:rgba(255,255,255,.64);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero__scroll svg{ width:18px; animation:scroll-bob 1.8s ease-in-out infinite; }
.home.is-day .hero__scroll{ color:rgba(16,22,17,.62); }
@keyframes hero-rise{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes scroll-bob{ 0%,100%{transform:translateY(-2px)} 50%{transform:translateY(4px)} }

/* Partner line directly following the hero */
.home .hero + .container.section--tight{
  max-width:none;
  padding-top:42px;
  padding-bottom:42px;
  border-bottom:1px solid var(--line);
  background:#f7f7f2;
}
.brandstrip{ gap:clamp(24px,5vw,72px); opacity:1; }
.brandstrip span{ color:#778079; font-weight:500; font-size:13px; letter-spacing:.1em; }

/* Cards, diagrams and interactive modules */
.card{
  position:relative;
  overflow:hidden;
  padding:clamp(26px,3vw,38px);
  background:rgba(255,255,255,.68);
  border-color:rgba(16,22,17,.09);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(10px);
}
.card::after{ content:""; position:absolute; inset:auto 0 0; height:3px; background:linear-gradient(90deg,var(--blue),var(--sun)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.card:hover::after{ transform:scaleX(1); }
.card:hover{ border-color:rgba(16,22,17,.14); box-shadow:var(--shadow); transform:translateY(-6px); }
.card__icon{ width:54px; height:54px; border-radius:50%; background:var(--ink); color:var(--sun); }
.card h3{ font-size:21px; font-weight:500; }
.card p{ color:var(--body); font-size:15px; }
.card--dark{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); }
.card--dark .card__icon{ background:var(--sun); color:var(--ink); }

.ph-media{
  border:0;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 72% 22%, rgba(216,255,114,.62), transparent 20%),
    linear-gradient(145deg,#10241b,#07100d);
  color:#d8ff72;
  box-shadow:var(--shadow-lg);
}
.ph-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom right,#000,transparent 78%);
}
.ph-media svg{ position:relative; width:64px; height:64px; opacity:.9; filter:drop-shadow(0 0 26px rgba(216,255,114,.32)); }
.ph-media__tag,
.ph-media__label{ display:none; }
.ref-card{ border:0; border-radius:var(--radius); box-shadow:var(--shadow-sm); background:rgba(255,255,255,.75); }
.ref-card:hover{ box-shadow:var(--shadow); }
.ref-card__stat{ color:var(--ink); font-weight:500; }
.placeholder-badge{ display:none; }

.steps{ gap:clamp(20px,3vw,36px); }
.step{ padding:30px 24px 24px; border-top:1px solid var(--line); }
.step::before{ width:auto; height:auto; border-radius:0; padding:0; color:var(--blue); background:transparent; font-size:13px; }
.step h4{ font-size:20px; font-weight:500; margin-top:22px; }
.step p{ line-height:1.6; }
.stats{ gap:0; }
.stat{ padding:24px; border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; }
.stat b{ font-family:var(--sans); font-weight:500; letter-spacing:-.04em; }
.pill{ background:rgba(255,255,255,.58); }

.explainer__tab{ background:rgba(255,255,255,.55); border-color:var(--line); border-radius:16px; }
.explainer > *{ min-width:0; }
.explainer__tabs,
.explainer__panels{ width:100%; }
.explainer__tab.is-active{ border-color:var(--ink); background:var(--ink); }
.explainer__tab.is-active strong{ color:#fff; }
.explainer__tab.is-active span{ color:rgba(255,255,255,.58); }
.explainer__analogy{ background:var(--sun-tint); border-color:#dce9b1; }

.calc{ background:linear-gradient(145deg,#101c17,#07100d); border:1px solid rgba(255,255,255,.08); }
.calc__result{ background:rgba(255,255,255,.045); }
.calc__result-row.is-highlight b,
.calc__field output{ color:var(--sun); }
.calc__field input[type="range"]{ accent-color:var(--sun); }

.accordion__trigger{ font-weight:500; font-size:17px; }
.accordion__trigger svg{ color:var(--ink); }
.accordion__item{ border-color:var(--line); }

.field input,.field select,.field textarea{ background:rgba(255,255,255,.72); border-color:var(--line); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 4px rgba(16,22,17,.07); }
.cta-band{ background:linear-gradient(130deg,#14261e 0%,#07100d 74%); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-lg); }
.cta-band h2{ font-weight:400; }

/* Subpages receive a dramatic photographic introduction. */
.page-hero{
  min-height:clamp(460px,62svh,680px);
  display:flex;
  align-items:flex-end;
  padding:clamp(90px,12vw,150px) 0 clamp(68px,8vw,100px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#07100d;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:-5%;
  z-index:-2;
  background:url('../img/hero/solar-night.jpg') center 52% / cover no-repeat;
  filter:saturate(.78);
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(3,9,6,.92) 0%,rgba(3,9,6,.7) 52%,rgba(3,9,6,.22) 100%),linear-gradient(0deg,rgba(3,9,6,.62),transparent 55%);
}
.page-hero .container{ width:100%; }
.page-hero h1{ max-width:980px; color:#f5f2e8; font-weight:400; font-size:clamp(48px,7vw,86px); line-height:.98; }
.page-hero .lead{ color:rgba(255,255,255,.7); font-weight:300; }
.page-hero .eyebrow{ color:var(--sun); }
.page-hero .eyebrow::before{ background:var(--sun); box-shadow:0 0 0 5px rgba(216,255,114,.12); }
.breadcrumb,.breadcrumb a{ color:rgba(255,255,255,.52); }
.breadcrumb a:hover{ color:#fff; }

.section--dark{ background:var(--dark); }
.section--dark .eyebrow{ color:var(--sun); }
.section--dark .eyebrow::before{ background:var(--sun); }
.system__hub{ background:var(--sun); color:var(--ink); box-shadow:0 18px 45px rgba(216,255,114,.16); }
.system__node{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.1); }
.system__node strong{ color:#fff; }
.system__node .card__icon{ background:rgba(255,255,255,.08); color:var(--sun); }

/* Footer */
.footer{ background:#050b08; padding-top:84px; }
.footer__top{ grid-template-columns:1.4fr repeat(4,1fr); border-color:rgba(255,255,255,.1); }
.footer__brand img{ height:30px; opacity:.9; }
.footer h5{ color:var(--sun); font-weight:500; letter-spacing:.12em; }
.footer a{ color:#929d96; }
.footer a:hover{ color:#fff; }
.sticky-cta{ background:rgba(246,246,241,.9); backdrop-filter:blur(18px); }

@media (max-width:1100px){
  .home .nav{ gap:16px; }
  .home .nav a{ font-size:13px; }
  .home .header__phone{ display:none; }
}

@media (max-width:1320px){
  .header__phone{ display:none; }
}

@media (min-width:721px) and (max-height:800px){
  .hero__cinematic-inner{ padding-top:105px; padding-bottom:18px; }
  .hero__overline{ margin-bottom:12px; padding-top:6px; padding-bottom:6px; }
  .hero--cinematic h1{ font-size:clamp(54px,6.2vw,78px); }
  .hero__cinematic-copy > p{ margin-top:16px; font-size:16px; line-height:1.45; }
  .hero--cinematic .hero__actions{ margin-top:18px; }
  .hero__proof{ margin-top:18px; padding:10px 0; }
  .hero__proof > div{ padding:0 22px; }
  .day-night-toggle__button{ padding-top:7px; padding-bottom:7px; }
}

@media (max-width:960px){
  .header__inner{ height:74px; }
  .nav-toggle{ margin-left:auto; }
  .home .header__inner{ height:78px; }
  .nav{ inset:74px 0 0; background:rgba(246,246,241,.98); backdrop-filter:blur(24px); }
  .home .nav{ inset:0; padding:110px 28px 40px; background:rgba(5,11,8,.97); }
  .home.is-day .nav{ background:rgba(246,246,241,.98); }
  .home .nav a{ color:#fff; text-shadow:none; font-size:22px; padding:15px 4px; border-color:rgba(255,255,255,.12); }
  .home.is-day .nav a{ color:var(--ink); border-color:var(--line); }
  .home .nav-toggle{ z-index:20; }
  .hero__cinematic-inner{ padding-top:130px; }
  .hero--cinematic h1{ font-size:clamp(50px,10vw,82px); }
  .hero__scroll{ display:none; }
  .hero__bottom{ grid-template-columns:1fr; }
  .day-night-toggle{ grid-column:1; justify-self:center; }
  .footer__top{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .topbar{ display:none; }
  .section{ padding:78px 0; }
  .hero--cinematic{ height:auto; min-height:max(740px,100svh); }
  .hero__cinematic-inner{ height:auto; min-height:max(740px,100svh); padding-top:112px; padding-bottom:88px; }
  .hero__cinematic-copy{ width:100%; }
  .hero--cinematic h1{ font-size:clamp(46px,14vw,68px); line-height:.96; }
  .hero__cinematic-copy > p{ font-size:16px; margin-top:20px; }
  .hero__overline{ font-size:9px; letter-spacing:.12em; }
  .hero--cinematic .hero__actions{ flex-direction:column; width:100%; margin-top:24px; }
  .hero--cinematic .hero__actions .btn{ width:100%; }
  .hero__proof{ width:100%; margin-top:24px; }
  .hero__proof > div{ min-width:0; flex:1; padding:0 10px; text-align:center; }
  .hero__proof strong{ font-size:15px; }
  .hero__proof span{ font-size:9px; line-height:1.25; margin-top:3px; }
  .hero__bottom{ position:absolute; bottom:92px; left:20px; right:20px; width:auto; }
  .day-night-toggle{ width:100%; }
  .day-night-toggle__button{ padding:9px 7px; }
  .day-night-toggle__button span{ font-size:14px; }
  .hero__image{ background-position:center 48%; }
  .ph-media{ min-height:180px; }
  .page-hero{ min-height:500px; padding:100px 0 64px; }
  .page-hero::after{ background:linear-gradient(0deg,rgba(3,9,6,.9),rgba(3,9,6,.3)); }
  .page-hero h1{ font-size:clamp(44px,13vw,62px); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-left:0; border-top:1px solid var(--line); }
  .footer__top{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .hero__image--front,
  .day-night-toggle__indicator{ transition:none; }
}

/* ===================================================================
   PHOTOVOLTAIK · AIKO IMMERSIVE PRODUCT STORY
   =================================================================== */
.photovoltaik-page .page-hero{ min-height:clamp(600px,78svh,820px); }
.photovoltaik-page .page-hero::before{
  inset:-2%;
  background-image:url('../img/people/soltech-montage-inspection.jpg');
  background-position:center 46%;
  filter:saturate(.82) contrast(1.08);
  transform:scale(1.025);
}
.photovoltaik-page .page-hero::after{
  background:
    linear-gradient(90deg,rgba(2,7,5,.96) 0%,rgba(2,7,5,.78) 43%,rgba(2,7,5,.1) 76%),
    linear-gradient(0deg,rgba(2,7,5,.78),transparent 60%);
}
.photovoltaik-page .page-hero h1{ max-width:870px; }
.pv-hero-lead{ max-width:650px; margin-top:19px; font-size:17px; line-height:1.62; }
.pv-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:27px; }
.btn--glass{ color:#fff; border:1px solid rgba(255,255,255,.3); background:rgba(3,10,7,.3); backdrop-filter:blur(14px); }
.btn--glass:hover{ color:#07100d; border-color:#fff; background:#fff; transform:translateY(-2px); }
.pv-hero-proof{
  display:flex; flex-wrap:wrap; gap:0; width:max-content; max-width:100%; margin-top:30px;
  border:1px solid rgba(255,255,255,.2); border-radius:16px; overflow:hidden;
  background:rgba(4,12,8,.32); backdrop-filter:blur(14px);
}
.pv-hero-proof span{ min-width:176px; padding:13px 20px; border-right:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.58); font-size:11px; line-height:1.35; }
.pv-hero-proof span:last-child{ border-right:0; }
.pv-hero-proof b{ display:block; color:#fff; font-size:15px; font-weight:500; margin-bottom:2px; }

.pv-energy-map{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr) 34px) minmax(0,1fr); align-items:center;
  gap:12px; max-width:1120px; margin-inline:auto; padding:18px;
  border:1px solid var(--line); border-radius:30px; background:#f7f8f5; box-shadow:var(--shadow);
}
.pv-energy-map__node{
  position:relative; min-height:220px; padding:24px; border-radius:22px; background:#fff;
  border:1px solid rgba(16,22,17,.08); display:flex; flex-direction:column; justify-content:flex-end;
}
.pv-energy-map__node--dark{ color:#fff; background:linear-gradient(145deg,#1d2421,#050806); border-color:rgba(255,255,255,.08); }
.pv-energy-map__node--dark b,.pv-energy-map__node--blue b{ color:#fff; }
.pv-energy-map__node--blue{ color:#fff; background:linear-gradient(145deg,#2679eb,#0d47b5); border-color:transparent; }
.pv-energy-map__number{ position:absolute; top:18px; right:18px; color:var(--faint); font:600 11px/1 var(--mono); letter-spacing:.08em; }
.pv-energy-map__node--dark .pv-energy-map__number,.pv-energy-map__node--blue .pv-energy-map__number{ color:rgba(255,255,255,.42); }
.pv-energy-map__icon{ width:48px; height:48px; margin-bottom:auto; border-radius:15px; display:grid; place-items:center; color:var(--ink); background:#eef0eb; }
.pv-energy-map__icon svg{ width:25px; }
.pv-energy-map__node--dark .pv-energy-map__icon{ color:var(--sun); background:rgba(255,255,255,.08); }
.pv-energy-map__node--blue .pv-energy-map__icon{ color:#fff; background:rgba(255,255,255,.14); }
.pv-energy-map__node b{ font-size:17px; color:var(--ink); }
.pv-energy-map__node small{ margin-top:5px; color:var(--muted); font-size:12.5px; line-height:1.45; }
.pv-energy-map__node--dark small,.pv-energy-map__node--blue small{ color:rgba(255,255,255,.62); }
.pv-energy-map__arrow{ color:#9da69f; font-size:24px; text-align:center; }

/* Human project story — consultation, engineering, build, handover. */
.pv-people{
  position:relative; overflow:hidden; color:#ecf1ed;
  background:
    radial-gradient(760px 520px at 10% 5%,rgba(22,103,232,.2),transparent 68%),
    radial-gradient(650px 500px at 95% 90%,rgba(216,255,114,.07),transparent 70%),
    #07100d;
}
.pv-people::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(#000,transparent 82%); }
.pv-people .container{ position:relative; }
.pv-people__head{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(35px,7vw,95px); align-items:end; margin-bottom:48px; }
.pv-people__head .eyebrow{ color:var(--sun); }
.pv-people__head .eyebrow::before{ background:var(--sun); box-shadow:0 0 0 5px rgba(216,255,114,.1); }
.pv-people__head h2{ max-width:880px; color:#fff; font-size:clamp(42px,5.7vw,72px); line-height:1; font-weight:400; }
.pv-people__head .lead{ color:#89958e; font-size:15px; }
.pv-people__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pv-people-card{ --mx:0px; --my:0px; position:relative; min-height:clamp(500px,52vw,680px); overflow:hidden; isolation:isolate; border:1px solid rgba(255,255,255,.12); border-radius:28px; background:#0c1511; box-shadow:0 25px 70px rgba(0,0,0,.25); }
.pv-people-card picture{ position:absolute; inset:0; }
.pv-people-card img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; transform:scale(1.025) translate3d(var(--mx),var(--my),0); transition:transform 1s var(--ease),filter .8s var(--ease); filter:saturate(.78) contrast(1.04); }
.pv-people-card:nth-child(1) img{ object-position:center 62%; }
.pv-people-card:nth-child(2) img{ object-position:center 66%; }
.pv-people-card:nth-child(3) img{ object-position:center 58%; }
.pv-people-card:nth-child(4) img{ object-position:center 56%; }
.pv-people-card:hover img,.pv-people-card.is-active img{ transform:scale(1.065) translate3d(var(--mx),var(--my),0); filter:saturate(.96) contrast(1.06); }
.pv-people-card__shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(2,8,5,.94) 0%,rgba(2,8,5,.55) 39%,rgba(2,8,5,.05) 72%),linear-gradient(90deg,rgba(2,8,5,.34),transparent 70%); }
.pv-people-card__copy{ position:absolute; z-index:2; left:clamp(24px,4vw,48px); right:clamp(24px,4vw,48px); bottom:clamp(26px,4vw,46px); max-width:570px; }
.pv-people-card__copy>span{ display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.58); font:700 9px/1 var(--mono); letter-spacing:.14em; }
.pv-people-card__copy>span b{ display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(216,255,114,.42); border-radius:50%; color:var(--sun); font-size:9px; box-shadow:0 0 24px rgba(216,255,114,.09); }
.pv-people-card h3{ margin:17px 0 12px; color:#fff; font-size:clamp(29px,3.2vw,43px); line-height:1.05; font-weight:400; }
.pv-people-card p{ max-width:50ch; color:rgba(255,255,255,.65); font-size:14px; line-height:1.58; }
.pv-people__promise{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:25px; padding:20px; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:rgba(255,255,255,.035); }
.pv-people__promise span{ color:#a5b1aa; font:700 8.5px/1 var(--mono); letter-spacing:.13em; }
.pv-people__promise i{ color:#5f9cf3; font-style:normal; }
.pv-people__disclosure{ max-width:850px; margin:15px auto 0; color:#57645d; font-size:9.5px; line-height:1.5; text-align:center; }

.aiko-stage{
  position:relative; overflow:hidden; color:rgba(255,255,255,.7);
  background:
    radial-gradient(70% 50% at 93% 0%,rgba(22,103,232,.18),transparent 65%),
    radial-gradient(50% 40% at 0% 52%,rgba(216,255,114,.08),transparent 70%),
    #050806;
}
.aiko-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.2;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(#000,transparent 78%);
}
.aiko-stage .container{ position:relative; }
.aiko-stage__head{ display:flex; align-items:end; justify-content:space-between; gap:48px; margin-bottom:42px; }
.aiko-stage__head .eyebrow{ color:var(--sun); }
.aiko-stage__head .eyebrow::before{ background:var(--sun); box-shadow:0 0 0 5px rgba(216,255,114,.1); }
.aiko-stage__head h2{ color:#f5f6f1; max-width:850px; font-weight:400; font-size:clamp(38px,5.2vw,66px); line-height:1.02; }
.aiko-stage__logo{ width:150px; height:auto; padding:15px 18px; border-radius:16px; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.24); }

.aiko-home{
  position:relative; min-height:clamp(570px,68vw,740px); overflow:hidden; border-radius:32px;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 36px 90px rgba(0,0,0,.35); isolation:isolate;
}
.aiko-home__image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; transition:transform 1.2s var(--ease); }
.aiko-home:hover .aiko-home__image{ transform:scale(1.025); }
.aiko-home__shade{
  position:absolute; inset:0; background:
    linear-gradient(90deg,rgba(2,7,5,.84) 0%,rgba(2,7,5,.42) 50%,rgba(2,7,5,.08) 78%),
    linear-gradient(0deg,rgba(2,7,5,.88),transparent 56%);
}
.aiko-home__content{ position:absolute; left:clamp(26px,4vw,56px); bottom:clamp(28px,4vw,54px); z-index:2; max-width:610px; }
.aiko-kicker{ display:inline-flex; align-items:center; gap:9px; color:var(--sun); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.aiko-kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 16px currentColor; }
.aiko-kicker--dark{ color:#225c48; }
.aiko-home h3{ color:#fff; font-size:clamp(38px,5vw,62px); font-weight:400; max-width:700px; margin:14px 0 14px; }
.aiko-home__content>p{ max-width:590px; color:rgba(255,255,255,.72); font-size:16px; font-weight:300; }
.aiko-home__facts{ display:flex; flex-wrap:wrap; gap:0; margin-top:26px; border-top:1px solid rgba(255,255,255,.22); }
.aiko-home__facts span{ min-width:150px; padding:14px 24px 0 0; color:rgba(255,255,255,.54); font-size:10.5px; line-height:1.4; }
.aiko-home__facts b{ display:block; color:#fff; font-size:15px; font-weight:500; }
.aiko-home__quote{
  position:absolute; z-index:3; right:28px; bottom:28px; width:min(350px,32vw); padding:18px;
  border:1px solid rgba(255,255,255,.2); border-radius:20px; background:rgba(5,10,7,.66); backdrop-filter:blur(18px);
  display:flex; align-items:center; gap:14px; box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.aiko-home__quote img{ width:58px; height:58px; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,.78); flex:none; }
.aiko-home__quote p{ color:#fff; font-size:13px; line-height:1.45; }
.aiko-home__quote cite{ display:block; margin-top:6px; color:rgba(255,255,255,.5); font-size:10.5px; font-style:normal; }
.aiko-source{
  position:absolute; z-index:3; right:24px; top:24px; padding:9px 13px; border-radius:999px;
  background:rgba(4,10,7,.55); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px);
  color:rgba(255,255,255,.76); font-size:11px; transition:background var(--dur-2),color var(--dur-2);
}
.aiko-source:hover{ color:#fff; background:rgba(4,10,7,.82); }

.aiko-story-grid{ display:grid; grid-template-columns:1.18fr .82fr; gap:22px; margin-top:22px; }
.aiko-product,.aiko-utility{ min-width:0; border-radius:28px; overflow:hidden; }
.aiko-product{ display:grid; grid-template-columns:1fr .88fr; background:#f4f5f1; color:var(--body); min-height:650px; }
.aiko-product__copy{ padding:clamp(28px,4vw,54px); display:flex; flex-direction:column; justify-content:center; }
.aiko-product h3{ color:#101611; font-size:clamp(34px,3.7vw,50px); font-weight:400; margin:15px 0; }
.aiko-product__copy>p{ color:#667069; font-size:15px; max-width:48ch; }
.aiko-specs{ display:grid; grid-template-columns:1fr 1fr; margin-top:28px; border-top:1px solid #d9ddd8; }
.aiko-specs li{ padding:15px 12px 15px 0; border-bottom:1px solid #d9ddd8; }
.aiko-specs li:nth-child(odd){ border-right:1px solid #d9ddd8; }
.aiko-specs li:nth-child(even){ padding-left:16px; }
.aiko-specs b{ display:block; color:#111713; font-size:16px; }
.aiko-specs span{ display:block; color:#7c857f; font-size:10.5px; line-height:1.35; }
.aiko-textlink{ align-self:flex-start; margin-top:24px; color:#173d30; font-size:12px; font-weight:600; border-bottom:1px solid #173d30; }
.aiko-textlink:hover{ color:#0d47b5; border-color:#0d47b5; }
.aiko-product__visual{ display:flex; flex-direction:column; justify-content:center; padding:24px; background:#fff; }
.aiko-product__visual img{ width:100%; height:auto; mix-blend-mode:multiply; filter:drop-shadow(0 28px 32px rgba(6,11,8,.14)); }
.aiko-product__visual figcaption{ margin-top:22px; color:#929a94; font-size:10px; text-align:center; letter-spacing:.08em; text-transform:uppercase; }

.aiko-utility{ position:relative; min-height:650px; isolation:isolate; }
.aiko-utility>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.aiko-utility:hover>img{ transform:scale(1.035); }
.aiko-utility__shade{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,8,5,.95) 0%,rgba(3,8,5,.55) 50%,rgba(3,8,5,.08) 100%); }
.aiko-utility__content{ position:absolute; z-index:2; inset:auto clamp(25px,3vw,42px) clamp(28px,3.5vw,46px); }
.aiko-utility__number{ display:block; margin-top:16px; color:#fff; font-size:clamp(58px,7vw,90px); font-weight:300; letter-spacing:-.06em; line-height:.86; }
.aiko-utility h3{ color:#fff; font-size:clamp(25px,2.8vw,36px); font-weight:400; margin:17px 0 12px; }
.aiko-utility p{ color:rgba(255,255,255,.65); font-size:13.5px; line-height:1.55; }
.aiko-utility a{ display:inline-block; margin-top:20px; color:#fff; font-size:12px; border-bottom:1px solid rgba(255,255,255,.55); }
.aiko-rights{ margin-top:20px; color:rgba(255,255,255,.38); font-size:10.5px; text-align:center; }

@media(max-width:1040px){
  .aiko-home__content{ max-width:54%; }
  .aiko-home__quote{ width:36%; }
  .aiko-story-grid{ grid-template-columns:1fr; }
  .aiko-product,.aiko-utility{ min-height:580px; }
  .aiko-utility{ aspect-ratio:16/10; }
}
@media(max-width:760px){
  .photovoltaik-page .page-hero{ min-height:720px; }
  .photovoltaik-page .page-hero::before{ background-image:url('../img/people/soltech-montage-inspection-sm.jpg'); background-position:58% center; }
  .photovoltaik-page .page-hero::after{ background:linear-gradient(0deg,rgba(2,7,5,.94) 0%,rgba(2,7,5,.64) 68%,rgba(2,7,5,.25) 100%); }
  .pv-hero-actions{ flex-direction:column; align-items:stretch; }
  .pv-hero-actions .btn{ width:100%; }
  .pv-hero-proof{ width:100%; }
  .pv-hero-proof span{ min-width:0; flex:1; padding:11px 10px; text-align:center; }
  .pv-energy-map{ grid-template-columns:1fr; padding:12px; }
  .pv-energy-map__node{ min-height:180px; }
  .pv-energy-map__arrow{ transform:rotate(90deg); line-height:1; }
  .pv-people__head{ grid-template-columns:1fr; gap:22px; }
  .pv-people__grid{ grid-template-columns:1fr; }
  .pv-people-card{ min-height:610px; border-radius:22px; }
  .aiko-stage__head{ align-items:flex-start; flex-direction:column; gap:24px; }
  .aiko-stage__logo{ width:125px; }
  .aiko-home{ min-height:0; background:#0a0f0c; }
  .aiko-home__image{ position:relative; aspect-ratio:4/3; object-position:center; }
  .aiko-home__shade{ background:linear-gradient(0deg,#0a0f0c 0%,transparent 52%); }
  .aiko-home__content{ position:relative; left:auto; bottom:auto; max-width:none; padding:28px 24px 22px; margin-top:-55px; }
  .aiko-home h3{ font-size:38px; }
  .aiko-home__quote{ position:relative; right:auto; bottom:auto; width:auto; margin:0 18px 18px; }
  .aiko-source{ position:relative; display:block; right:auto; top:auto; margin:0 18px 22px; text-align:center; }
  .aiko-product{ grid-template-columns:1fr; }
  .aiko-product__visual{ min-height:340px; }
  .aiko-utility{ aspect-ratio:auto; min-height:580px; }
}
@media(max-width:520px){
  .photovoltaik-page .page-hero{ min-height:820px; }
  .photovoltaik-page .page-hero h1{ font-size:clamp(42px,12.5vw,58px); }
  .pv-hero-lead{ font-size:14px; line-height:1.55; }
  .pv-hero-proof span{ flex:1 0 33%; font-size:9px; }
  .pv-hero-proof b{ font-size:12px; }
  .pv-people__head h2{ font-size:39px; }
  .pv-people-card{ min-height:570px; }
  .pv-people-card__copy{ left:23px; right:23px; bottom:25px; }
  .pv-people-card h3{ font-size:31px; }
  .pv-people__promise{ justify-content:flex-start; }
  .aiko-stage{ padding-top:72px; padding-bottom:72px; }
  .aiko-stage__head h2{ font-size:38px; }
  .aiko-home__facts{ display:grid; grid-template-columns:1fr 1fr; }
  .aiko-home__facts span{ min-width:0; }
  .aiko-home__quote{ align-items:flex-start; }
  .aiko-product__copy{ padding:30px 24px; }
  .aiko-specs{ grid-template-columns:1fr; }
  .aiko-specs li:nth-child(odd){ border-right:0; }
  .aiko-specs li:nth-child(even){ padding-left:0; }
  .aiko-product__visual{ min-height:280px; }
  .aiko-utility__number{ font-size:68px; }
}

/* ============================================================
   STROMSPEICHER · SIGENERGY EXPERIENCE
   ============================================================ */
.storage-page .page-hero{ position:relative; overflow:hidden; background:
  radial-gradient(800px 420px at 82% 20%,rgba(22,103,232,.14),transparent 65%),
  linear-gradient(180deg,#f6f9ff,#fff); }
.storage-daycycle{ position:relative; min-height:430px; overflow:hidden; border-radius:28px; padding:28px;
  background:linear-gradient(180deg,#93c4fa 0%,#eaf4ff 47%,#27364d 48%,#0a101a 100%); box-shadow:0 32px 70px rgba(13,37,72,.2); isolation:isolate; }
.storage-daycycle::after{ content:""; position:absolute; inset:48% 0 0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:28px 28px; }
.storage-daycycle__sky{ position:absolute; inset:0 0 52%; overflow:hidden; }
.storage-daycycle__sun,.storage-daycycle__moon{ position:absolute; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; font-size:35px; }
.storage-daycycle__sun{ left:16%; top:24px; color:#ffbf46; background:#fff3c7; box-shadow:0 0 55px rgba(255,188,52,.58); animation:daySun 9s ease-in-out infinite; }
.storage-daycycle__moon{ right:14%; top:38px; color:#dbe9ff; background:#5d759a; box-shadow:0 0 45px rgba(174,207,255,.35); animation:dayMoon 9s ease-in-out infinite; }
@keyframes daySun{0%,100%{transform:translate(-35px,90px);opacity:.25}42%{transform:translate(90px,-8px);opacity:1}72%{transform:translate(240px,78px);opacity:.25}}
@keyframes dayMoon{0%,50%{transform:translate(100px,75px);opacity:.15}78%,100%{transform:translate(-35px,-4px);opacity:1}}
.storage-daycycle__curve{ position:absolute; z-index:3; left:14%; right:14%; top:50%; height:1px; background:linear-gradient(90deg,transparent,#6ee7b7 16%,#6ee7b7 84%,transparent); }
.storage-daycycle__curve i{ position:absolute; top:-4px; width:9px; height:9px; border-radius:50%; background:#7cf0bf; box-shadow:0 0 15px #7cf0bf; animation:storageFlow 3s linear infinite; }
.storage-daycycle__curve i:nth-child(2){animation-delay:.6s}.storage-daycycle__curve i:nth-child(3){animation-delay:1.2s}.storage-daycycle__curve i:nth-child(4){animation-delay:1.8s}.storage-daycycle__curve i:nth-child(5){animation-delay:2.4s}
@keyframes storageFlow{from{left:0;opacity:0}15%,85%{opacity:1}to{left:100%;opacity:0}}
.storage-daycycle__house,.storage-daycycle__battery{ position:absolute; z-index:4; top:60%; display:flex; flex-direction:column; align-items:center; color:#fff; }
.storage-daycycle__house{ left:17%; }.storage-daycycle__house>span{ font-size:72px; line-height:.72; }
.storage-daycycle__house small,.storage-daycycle__battery small{ margin-top:12px; color:#94a6bd; font:700 9px/1 var(--mono); letter-spacing:.13em; }
.storage-daycycle__battery{ right:17%; }.storage-daycycle__battery>span{ position:relative; width:58px; height:90px; padding:5px; border:2px solid #d8e3ef; border-radius:9px; }
.storage-daycycle__battery>span::before{ content:""; position:absolute; left:19px; top:-8px; width:17px; height:6px; border-radius:3px 3px 0 0; background:#d8e3ef; }
.storage-daycycle__battery>span i{ position:absolute; left:5px; right:5px; bottom:5px; height:72%; border-radius:4px; background:linear-gradient(#7cf0bf,#2fbd89); box-shadow:0 0 24px rgba(76,224,169,.45); animation:batteryCharge 9s ease-in-out infinite; transform-origin:bottom; }
@keyframes batteryCharge{0%,100%{transform:scaleY(.25)}45%,72%{transform:scaleY(1)}}
.storage-daycycle__battery b{ color:#fff; font-size:12px; margin-top:5px; }
.storage-daycycle__timeline{ position:absolute; z-index:4; left:28px; right:28px; bottom:22px; display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid rgba(255,255,255,.18); color:#75869d; font:600 8px/1 var(--mono); }
.storage-daycycle>p{ position:absolute; z-index:4; left:28px; bottom:55px; color:#91a0b4; font-size:11px; }.storage-daycycle>p b{ color:#fff; }

.storage-sigen{ position:relative; overflow:hidden; background:#080d13!important; color:#9aa6b6; }
.storage-sigen::before{ content:""; position:absolute; inset:0; background:radial-gradient(800px 680px at 18% 34%,rgba(22,103,232,.24),transparent 60%),radial-gradient(620px 520px at 90% 86%,rgba(94,224,182,.08),transparent 62%); }
.storage-sigen>.container{ position:relative; }
.storage-sigen__stage{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(45px,7vw,92px); align-items:center; }
.storage-sigen__visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:650px; border:1px solid rgba(255,255,255,.1); border-radius:32px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); overflow:hidden; }
.storage-sigen__halo{ position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(72,139,240,.35),rgba(72,139,240,.08) 42%,transparent 70%); animation:sigenHalo 4s ease-in-out infinite; }
@keyframes sigenHalo{50%{transform:scale(1.1);opacity:.65}}
.storage-sigen__visual>img{ position:relative; z-index:2; width:86%; max-height:570px; object-fit:contain; filter:drop-shadow(0 42px 35px rgba(0,0,0,.55)); }
.storage-sigen__visual.storage-sigen__visual--sharp{ min-height:0; aspect-ratio:1600/1041; background:#e9ebed; }
.storage-sigen__visual--sharp::after{ content:""; position:absolute; z-index:2; inset:55% 0 0; background:linear-gradient(180deg,transparent,rgba(6,10,16,.7)); pointer-events:none; }
.storage-sigen__visual--sharp .storage-sigen__halo{ display:none; }
.storage-sigen__visual--sharp>img{ width:100%; height:100%; max-height:none; object-fit:cover; filter:none; }
.storage-sigen__chips{ position:absolute; z-index:3; left:22px; right:22px; bottom:22px; display:flex; gap:7px; flex-wrap:wrap; }
.storage-sigen__chips span{ padding:8px 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(4,8,13,.6); backdrop-filter:blur(10px); color:#b7c2d0; font:700 8px/1 var(--mono); letter-spacing:.08em; }
.storage-sigen__copy .eyebrow{ color:#78aaff; }.storage-sigen__logo{ width:155px; height:40px; object-fit:contain; object-position:left center; filter:brightness(0) invert(1); margin-bottom:30px; }
.storage-sigen__copy h2{ color:#fff; font-size:clamp(39px,4.8vw,62px); font-weight:500; }.storage-sigen__copy .lead{ color:#9da8b7; font-size:16px; margin-top:20px; }
.storage-sigen__benefits{ margin-top:30px; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.1); }
.storage-sigen__benefits li{ display:grid; grid-template-columns:.82fr 1.4fr; gap:22px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.storage-sigen__benefits b{ color:#fff; font-size:13px; }.storage-sigen__benefits span{ color:#8995a5; font-size:12.5px; line-height:1.55; }
.storage-sigen__actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:28px; }.storage-sigen__actions>a:not(.btn){ color:#b8c5d4; font-size:12px; border-bottom:1px solid #647286; }
.storage-sigen__caveat{ margin-top:20px; color:#5e6978; font-size:9.5px; line-height:1.55; }
.sigen-score{ display:grid; grid-template-columns:.55fr 1fr .8fr; gap:34px; margin-top:85px; padding:36px; border:1px solid rgba(255,255,255,.1); border-radius:28px; background:rgba(255,255,255,.035); }
.sigen-score small{ color:#78aaff; font:700 8px/1 var(--mono); letter-spacing:.14em; }.sigen-score__value strong{ display:block; margin-top:15px; color:#fff; font-size:65px; line-height:1; letter-spacing:-.06em; }.sigen-score__value strong span{ color:#647184; font-size:22px; }.sigen-score__value p{ margin-top:12px; color:#677384; font-size:10px; }
.sigen-score__bars{ display:grid; gap:13px; }.sigen-score__bars p{ display:grid; grid-template-columns:1fr 1.25fr 28px; align-items:center; gap:12px; color:#9ba6b4; font-size:10px; }.sigen-score__bars i{ display:block; height:3px; background:#29313d; overflow:hidden; }.sigen-score__bars i b{ display:block; height:100%; background:linear-gradient(90deg,#1667e8,#68dbb7); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease); }.sigen-score.in .sigen-score__bars i b{ transform:scaleX(1); }.sigen-score__bars em{ color:#fff; font-style:normal; text-align:right; font-size:10px; }
.sigen-score__verdict{ padding-left:30px; border-left:1px solid rgba(255,255,255,.1); }.sigen-score__verdict h3{ color:#fff; font-size:25px; margin:14px 0; }.sigen-score__verdict p{ color:#8994a3; font-size:12px; line-height:1.6; }
.storage-alternative{ display:grid; grid-template-columns:.4fr 1fr; gap:35px; margin-top:18px; padding:22px 28px; border:1px solid rgba(255,255,255,.08); border-radius:18px; }.storage-alternative b{ color:#fff; font-size:13px; }.storage-alternative p{ color:#707c8b; font-size:11.5px; }
@media(max-width:980px){ .storage-sigen__stage{grid-template-columns:1fr}.storage-sigen__visual{min-height:560px}.sigen-score{grid-template-columns:1fr 1fr}.sigen-score__verdict{grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:25px 0 0}.storage-alternative{grid-template-columns:1fr} }
@media(max-width:640px){ .storage-daycycle{min-height:380px}.storage-sigen__visual{min-height:450px;border-radius:22px}.storage-sigen__copy h2{font-size:39px}.storage-sigen__benefits li{grid-template-columns:1fr;gap:7px}.sigen-score{grid-template-columns:1fr;padding:25px}.sigen-score__bars p{grid-template-columns:1fr 1fr 26px}.storage-alternative{gap:8px}.storage-daycycle__house{left:10%}.storage-daycycle__battery{right:11%} }

/* ============================================================
   ÜBER UNS · EXPERTISE CHAIN
   ============================================================ */
.about-page .page-hero::before{ background-image:url('../img/people/soltech-montage-qualitaet.jpg'); background-position:center 49%; filter:saturate(.78) contrast(1.08); }
.about-page .page-hero::after{ background:linear-gradient(90deg,rgba(3,9,6,.95) 0%,rgba(3,9,6,.72) 48%,rgba(3,9,6,.08) 78%),linear-gradient(0deg,rgba(3,9,6,.66),transparent 62%); }
.about-story{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,7vw,92px); align-items:center; }
.about-story__copy h2{ font-size:clamp(39px,4.8vw,62px); }
.about-story__visual{ position:relative; min-height:650px; overflow:hidden; border-radius:28px; background:#0b1310; box-shadow:0 30px 80px rgba(14,30,22,.2); }
.about-story__visual picture{ position:absolute; inset:0; }
.about-story__visual img{ width:100%; height:100%; object-fit:cover; object-position:center 52%; filter:saturate(.82) contrast(1.05); transition:transform 1s var(--ease); }
.about-story__visual:hover img{ transform:scale(1.035); }
.about-story__visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,10,6,.88),transparent 48%); }
.about-story__visual figcaption{ position:absolute; z-index:2; left:28px; right:28px; bottom:28px; padding:18px 20px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(4,11,7,.55); backdrop-filter:blur(15px); }
.about-story__visual figcaption b{ display:block; color:#fff; font-size:20px; }
.about-story__visual figcaption span{ display:block; margin-top:5px; color:rgba(255,255,255,.58); font-size:11.5px; line-height:1.5; }
.expertise{ position:relative; overflow:hidden; background:#090e14!important; color:#95a0ae; }
.expertise::before{ content:""; position:absolute; inset:0; background:radial-gradient(700px 520px at 10% 14%,rgba(22,103,232,.19),transparent 62%),radial-gradient(700px 520px at 90% 86%,rgba(92,219,181,.07),transparent 65%); }
.expertise>.container{ position:relative; }.expertise .section-head{ max-width:880px; margin-left:auto; margin-right:auto; }.expertise .eyebrow{ color:#79aaff; }.expertise h2{ color:#fff; }.expertise .lead{ color:#939dac; }
.expertise__chain{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:55px; }
.expertise__chain::before{ content:""; position:absolute; left:5%; right:5%; top:50%; height:1px; background:linear-gradient(90deg,transparent,#2f78e3,#5bd0ac,transparent); opacity:.42; }
.expertise-card{ position:relative; z-index:2; min-height:390px; padding:30px; border:1px solid rgba(255,255,255,.1); border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow:0 28px 65px rgba(0,0,0,.25); transition:transform var(--dur-2) var(--ease),border-color var(--dur-2); }
.expertise-card:hover{ transform:translateY(-7px); border-color:rgba(109,169,255,.42); }.expertise-card__num{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:38px; border:1px solid rgba(111,169,255,.35); border-radius:50%; background:rgba(22,103,232,.13); color:#8ab5f8; font:700 11px/1 var(--mono); box-shadow:0 0 35px rgba(22,103,232,.16); }
.expertise-card small{ color:#6f7d90; font:700 8px/1 var(--mono); letter-spacing:.15em; }.expertise-card h3{ margin:13px 0 15px; color:#fff; font-size:25px; }.expertise-card>p{ color:#8f9aa9; font-size:13px; line-height:1.65; }
.expertise-card ul{ margin-top:23px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); display:grid; gap:8px; }.expertise-card li{ position:relative; padding-left:17px; color:#697687; font-size:10.5px; }.expertise-card li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:#5bd0ac; box-shadow:0 0 10px rgba(91,208,172,.45); }
.expertise__handoff{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:42px; padding:20px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(255,255,255,.025); }.expertise__handoff span{ color:#9aa7b7; font:700 8.5px/1 var(--mono); letter-spacing:.13em; }.expertise__handoff i{ color:#3c7ad3; font-style:normal; }
.expertise__note{ max-width:850px; margin:20px auto 0; text-align:center; color:#5f6b79; font-size:10.5px; }
@media(max-width:960px){ .about-story{grid-template-columns:1fr}.about-story__visual{min-height:600px}.expertise__chain{grid-template-columns:1fr 1fr}.expertise__chain::before{display:none} }
@media(max-width:640px){ .about-page .page-hero::before{background-image:url('../img/people/soltech-montage-qualitaet-sm.jpg');background-position:53% center}.about-story__visual{min-height:580px;border-radius:22px}.about-story__visual figcaption{left:18px;right:18px;bottom:18px}.expertise__chain{grid-template-columns:1fr}.expertise-card{min-height:0}.expertise__handoff{justify-content:flex-start} }

/* ============================================================
   FINAL DETAIL LAYER · REFERENCES, HEAT, CHARGING, CONTACT
   ============================================================ */
.form-honeypot{ position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important; }
.btn:disabled{ cursor:wait; opacity:.72; transform:none!important; box-shadow:none!important; }

.reference-grid{ align-items:stretch; }
.ref-card--photo{ display:flex; flex-direction:column; min-height:100%; color:inherit; transition:transform .35s var(--ease),box-shadow .35s var(--ease); }
.ref-card--photo::after{ display:none; }
.ref-card--photo:hover{ transform:translateY(-8px); }
.ref-card--photo .ref-card__media{ aspect-ratio:4/3; overflow:hidden; background:#dfe5df; }
.ref-card--photo .ref-card__media::after{ content:""; position:absolute; inset:auto 0 0; height:34%; background:linear-gradient(transparent,rgba(2,9,6,.4)); pointer-events:none; }
.ref-card--photo .ref-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .75s var(--ease),filter .75s var(--ease); filter:saturate(.82) contrast(1.04); }
.ref-card--photo:hover .ref-card__media img{ transform:scale(1.045); filter:saturate(1) contrast(1.04); }
.ref-card--photo .ref-card__body{ display:flex; flex:1; flex-direction:column; padding:25px; }
.ref-card__index{ color:var(--blue); font:700 9px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.ref-card--photo .ref-card__stat{ margin-top:16px; color:var(--ink); font-family:var(--sans); font-size:23px; font-weight:500; line-height:1.12; letter-spacing:-.035em; }
.ref-card--photo p{ margin:13px 0 22px; color:var(--muted); line-height:1.55; }
.ref-card__open{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); color:var(--ink); font-size:11px; font-weight:600; }
.ref-card__open span{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; transition:transform .3s var(--ease),background .3s; }
.ref-card--photo:hover .ref-card__open span{ transform:rotate(45deg); background:var(--blue); }

.energy-visual{ position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:30px; background:#080e13; color:#fff; box-shadow:0 34px 80px rgba(4,15,10,.24); }
.energy-visual::before{ content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(500px 360px at 80% 15%,rgba(22,103,232,.2),transparent 65%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:auto,32px 32px,32px 32px; mask-image:linear-gradient(145deg,#000,transparent 82%); }
.energy-visual__top{ position:absolute; z-index:8; top:22px; left:24px; right:24px; display:flex; align-items:center; gap:8px; color:#fff; font:700 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.energy-visual__top small{ margin-left:auto; color:#667587; font-size:7.5px; letter-spacing:.1em; }
.live-dot{ width:7px; height:7px; flex:none; border-radius:50%; background:#71e4af; box-shadow:0 0 0 5px rgba(113,228,175,.08),0 0 15px rgba(113,228,175,.8); animation:livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse{ 50%{ opacity:.45; box-shadow:0 0 0 9px rgba(113,228,175,0),0 0 20px rgba(113,228,175,.35); } }
.energy-visual__caption{ position:absolute; z-index:8; left:24px; right:24px; bottom:18px; color:#637184; font-size:8.5px; line-height:1.45; }

.heat-cycle{ min-height:540px; }
.heat-cycle::after{ content:""; position:absolute; width:250px; aspect-ratio:1; left:50%; top:52%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(216,255,114,.12),transparent 67%); filter:blur(5px); }
.heat-cycle__track{ position:absolute; inset:52px 18px 60px; width:calc(100% - 36px); height:calc(100% - 112px); overflow:visible; }
.heat-cycle__track path{ fill:none; stroke:url(#heatFlow); stroke-width:1.5; opacity:.35; }
.heat-cycle__track .heat-cycle__pulse{ stroke-width:3; stroke-dasharray:8 28; opacity:1; filter:drop-shadow(0 0 6px rgba(216,255,114,.72)); animation:heatOrbit 4.2s linear infinite; }
@keyframes heatOrbit{ to{ stroke-dashoffset:-144; } }
.heat-cycle__core{ position:absolute; z-index:3; left:50%; top:52%; transform:translate(-50%,-50%); display:grid; place-items:center; width:134px; aspect-ratio:1; border:1px solid rgba(216,255,114,.3); border-radius:50%; background:radial-gradient(circle at 45% 38%,rgba(216,255,114,.18),rgba(8,14,19,.86) 70%); box-shadow:inset 0 0 40px rgba(216,255,114,.06),0 0 50px rgba(216,255,114,.08); text-align:center; }
.heat-cycle__core span{ color:#d8ff72; font-size:23px; font-weight:500; letter-spacing:-.04em; }
.heat-cycle__core small{ margin-top:-32px; color:#788596; font-size:8px; line-height:1.45; }
.heat-node{ position:absolute; z-index:4; width:145px; padding:14px 14px 13px; border:1px solid rgba(255,255,255,.1); border-radius:15px; background:rgba(8,14,19,.72); box-shadow:0 14px 32px rgba(0,0,0,.18); backdrop-filter:blur(12px); }
.heat-node>span{ color:#78aaff; font:700 7px/1 var(--mono); letter-spacing:.1em; }
.heat-node b{ display:block; margin-top:8px; color:#fff; font-size:13px; }
.heat-node small{ display:block; margin-top:3px; color:#657385; font-size:8px; line-height:1.35; }
.heat-node--air{ left:7%; top:20%; }.heat-node--compress{ right:6%; top:22%; }.heat-node--home{ right:7%; bottom:17%; }.heat-node--return{ left:6%; bottom:18%; }

.heat-product-stage{ min-height:590px; }
.heat-product-stage__glow{ position:absolute; left:50%; top:47%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(104,172,255,.2),transparent 65%); animation:productGlow 4s ease-in-out infinite; }
@keyframes productGlow{ 50%{ transform:translate(-50%,-50%) scale(1.1); opacity:.55; } }
.heat-unit{ position:absolute; z-index:3; left:50%; top:45%; width:55%; max-width:290px; aspect-ratio:.86; transform:translate(-50%,-50%) perspective(900px) rotateY(-7deg); border:1px solid rgba(255,255,255,.55); border-radius:24px; background:linear-gradient(145deg,#f9fbfc,#cad2d7); box-shadow:-22px 35px 60px rgba(0,0,0,.35),inset -12px -12px 25px rgba(64,77,83,.18),inset 10px 10px 20px #fff; }
.heat-unit__top{ display:flex; gap:4px; padding:15px 18px 8px; }.heat-unit__top i{ height:3px; flex:1; border-radius:3px; background:#9eaaaf; }
.heat-unit__fan{ position:absolute; left:50%; top:48%; display:grid; place-items:center; width:64%; aspect-ratio:1; transform:translate(-50%,-50%); border:7px solid #849198; border-radius:50%; background:repeating-radial-gradient(circle,#5b6970 0 2px,#7a878d 3px 5px); box-shadow:inset 0 0 0 7px #b7c1c6; }
.heat-unit__fan span{ width:30%; aspect-ratio:1; border-radius:50%; background:#69777d; box-shadow:0 0 0 7px rgba(255,255,255,.16); }
.heat-unit__mark{ position:absolute; left:20px; bottom:40px; color:#4d5a61; font:700 7px/1 var(--mono); letter-spacing:.16em; }
.heat-unit__status{ position:absolute; right:18px; bottom:19px; display:flex; align-items:center; gap:6px; color:#58656b; font:600 7px/1 var(--mono); }.heat-unit__status i{ width:6px; height:6px; border-radius:50%; background:#45c78e; box-shadow:0 0 8px #45c78e; }
.heat-partners{ position:absolute; z-index:5; left:24px; right:24px; bottom:58px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.heat-partners div{ display:grid; place-items:center; height:48px; padding:9px; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.94); box-shadow:0 10px 25px rgba(0,0,0,.12); }
.heat-partners img{ max-width:100%; max-height:27px; object-fit:contain; }

.charge-flow{ min-height:455px; }
.charge-flow__line{ position:absolute; left:9%; right:9%; top:50%; height:2px; background:linear-gradient(90deg,#f5bf4f,#d8ff72,#6edfb0,#72a9f8); opacity:.58; }
.charge-flow__line i{ position:absolute; top:-4px; width:10px; height:10px; border-radius:50%; background:#d8ff72; box-shadow:0 0 16px #d8ff72; animation:chargeMove 3.2s linear infinite; }
@keyframes chargeMove{ from{ left:0; opacity:0; } 12%,88%{ opacity:1; } to{ left:100%; opacity:0; } }
.charge-device{ position:absolute; z-index:3; top:50%; display:flex; flex-direction:column; align-items:center; width:105px; transform:translate(-50%,-50%); text-align:center; }
.charge-device--pv{ left:10%; }.charge-device--brain{ left:36.5%; }.charge-device--box{ left:63.5%; }.charge-device--car{ left:90%; }
.charge-device__icon{ display:grid; place-items:center; width:73px; height:73px; border:1px solid rgba(255,255,255,.13); border-radius:22px; background:#101923; color:#d8ff72; box-shadow:0 14px 32px rgba(0,0,0,.3),inset 0 0 25px rgba(216,255,114,.025); }
.charge-device--brain .charge-device__icon{ color:#72a9f8; }.charge-device--box .charge-device__icon{ color:#6edfb0; }.charge-device--car .charge-device__icon{ color:#fff; }
.charge-device__icon svg{ width:35px; height:35px; }
.charge-device b{ margin-top:13px; color:#fff; font-size:11px; }.charge-device small{ margin-top:3px; color:#697789; font-size:8px; }

.smart-charge{ min-height:570px; padding:78px 28px 62px; }
.smart-charge__hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:25px; border-bottom:1px solid rgba(255,255,255,.1); }
.smart-charge__hero span{ display:block; color:#788698; font-size:9px; }.smart-charge__hero b{ display:block; margin-top:10px; color:#fff; font-size:54px; font-weight:400; line-height:1; letter-spacing:-.065em; }.smart-charge__hero b small{ display:inline; color:#7f8e9f; font-size:15px; }
.smart-charge__hero .smart-charge__pill{ padding:8px 11px; border:1px solid rgba(111,229,176,.26); border-radius:999px; background:rgba(111,229,176,.08); color:#70dfae; font:700 7px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.smart-charge__bars{ display:grid; gap:19px; margin-top:27px; }.smart-charge__bars>div>span{ display:flex; justify-content:space-between; margin-bottom:8px; }.smart-charge__bars b{ color:#dce4ed; font-size:10px; }.smart-charge__bars small{ color:#778598; font-size:9px; }.smart-charge__bars i{ display:block; height:5px; overflow:hidden; border-radius:5px; background:#1a2631; }.smart-charge__bars i::before{ content:""; display:block; width:var(--fill); height:100%; border-radius:5px; background:linear-gradient(90deg,#1667e8,#6edfb0,#d8ff72); box-shadow:0 0 12px rgba(110,223,176,.28); animation:barIn 1.8s var(--ease) both; transform-origin:left; }
@keyframes barIn{ from{ transform:scaleX(0); } }
.smart-charge__priority{ display:grid; grid-template-columns:30px 1fr 30px 1fr; gap:10px; align-items:center; margin-top:32px; padding:16px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(255,255,255,.03); }
.smart-charge__priority>span{ display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#d8ff72; color:#111a16; font:700 9px/1 var(--mono); }.smart-charge__priority p{ border-right:1px solid rgba(255,255,255,.08); }.smart-charge__priority p:last-child{ border:0; }.smart-charge__priority b,.smart-charge__priority small{ display:block; }.smart-charge__priority b{ color:#e8edf3; font-size:9px; }.smart-charge__priority small{ margin-top:3px; color:#697587; font-size:7.5px; }

.address-stage{ max-width:480px; overflow:hidden; border:1px solid rgba(16,22,17,.1); border-radius:25px; background:#fff; box-shadow:var(--shadow); }
.address-stage__map{ position:relative; height:180px; overflow:hidden; background:#dfe7df; background-image:linear-gradient(34deg,transparent 45%,rgba(255,255,255,.45) 46% 49%,transparent 50%),linear-gradient(-24deg,transparent 46%,rgba(255,255,255,.65) 47% 50%,transparent 51%); }
.address-stage__map::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 20%,rgba(216,255,114,.48),transparent 28%),linear-gradient(90deg,rgba(16,22,17,.035) 1px,transparent 1px),linear-gradient(rgba(16,22,17,.035) 1px,transparent 1px); background-size:auto,26px 26px,26px 26px; }
.address-stage__road{ position:absolute; z-index:2; display:block; height:10px; border:2px solid #fff; border-width:2px 0; background:#c3cec4; transform-origin:left center; }.address-stage__road--a{ left:-30px; top:95px; width:570px; transform:rotate(-9deg); }.address-stage__road--b{ left:90px; top:-30px; width:320px; transform:rotate(63deg); }.address-stage__road--c{ left:270px; top:18px; width:250px; height:6px; transform:rotate(29deg); }
.address-stage__pin{ position:absolute; z-index:4; left:58%; top:48%; width:36px; height:36px; transform:translate(-50%,-50%) rotate(45deg); border-radius:50% 50% 50% 5px; background:var(--ink); box-shadow:0 12px 25px rgba(16,22,17,.28); }.address-stage__pin i{ position:absolute; left:50%; top:50%; width:10px; height:10px; transform:translate(-50%,-50%); border:3px solid #d8ff72; border-radius:50%; }
.address-stage__content{ padding:25px; }.address-stage__label{ color:var(--blue); font:700 8px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }.address-stage h3{ margin-top:12px; color:var(--ink); font-size:22px; }.address-stage p{ margin-top:7px; color:var(--muted); font-size:14px; }.address-stage__link{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink); font-size:11px; font-weight:600; }.address-stage__link span{ color:var(--blue); font-size:16px; }

@media(max-width:1100px){
  .heat-node{ width:130px; padding:12px; }.heat-node--air{left:4%}.heat-node--compress{right:3%}.heat-node--home{right:4%}.heat-node--return{left:3%}
  .charge-device__icon{ width:64px; height:64px; }.charge-device{width:92px}.charge-device__icon svg{width:31px;height:31px}
}
@media(max-width:640px){
  .ref-card--photo .ref-card__media{ aspect-ratio:16/11; }
  .energy-visual{ border-radius:22px; }
  .heat-cycle{ min-height:500px; }.heat-cycle__core{ width:105px; }.heat-cycle__core span{font-size:19px}.heat-node{width:112px;padding:10px}.heat-node b{font-size:11px}.heat-node small{font-size:7px}.heat-node--air{left:3%;top:18%}.heat-node--compress{right:3%;top:20%}.heat-node--home{right:3%;bottom:18%}.heat-node--return{left:3%;bottom:19%}
  .heat-product-stage{ min-height:550px; }.heat-unit{width:68%;}.heat-partners{left:16px;right:16px}.heat-partners div{height:44px;padding:7px}
  .charge-flow{ min-height:600px; }.charge-flow__line{left:50%;right:auto;top:17%;bottom:17%;width:2px;height:auto;background:linear-gradient(#f5bf4f,#d8ff72,#6edfb0,#72a9f8)}.charge-flow__line i{left:-4px;top:0;animation:chargeMoveY 3.2s linear infinite}.charge-device{left:50%!important;top:auto;transform:translate(-50%,-50%)}.charge-device--pv{top:20%}.charge-device--brain{top:40%}.charge-device--box{top:60%}.charge-device--car{top:80%}.charge-device__icon{width:57px;height:57px;border-radius:18px}.charge-device__icon svg{width:27px;height:27px}.charge-device b{margin-top:8px}.charge-device small{padding:2px 5px;border-radius:4px;background:#080e13}
  .smart-charge{ min-height:570px; padding:72px 20px 62px; }.smart-charge__hero b{font-size:45px}.smart-charge__priority{grid-template-columns:27px 1fr;}.smart-charge__priority p{border:0}.energy-visual__caption{left:20px;right:20px}
}
@keyframes chargeMoveY{ from{ top:0;opacity:0 } 12%,88%{opacity:1} to{ top:100%;opacity:0 } }