/* ============================================================
   fv-core.css — Solvio (fotovoltaika) hero engine
   Teplá svetla paleta · liquid glass · reaktivni kurzorove svetlo
   den<->noc prechod (smooth, dlouha draha, zadne useklé hrany)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&display=swap");
@property --dot-r { syntax: "<number>"; inherits: false; initial-value: 1; }

:root{
  /* clean: bílá / tmavě modrá / modrý akcent */
  --ink:#0e1626; --ink-soft:#3a465f; --muted:#5c6983; --faint:rgba(14,22,38,.45);
  --paper:#eef3fa; --paper-2:#f6f9ff; --white:#ffffff;
  --navy:#0b1024; --navy-2:#111a3c;
  --blue:#2f6bff; --blue-2:#5e93ff; --blue-deep:#1c4fd6; --blue-soft:#dce8ff;
  --line:rgba(14,22,38,.1); --line-2:rgba(14,22,38,.16);
  --glass-bg:rgba(255,255,255,.5); --glass-brd:rgba(255,255,255,.7);
  --battery:#2fbf71;
  --gx:50vw; --gy:30vh; --mx:0; --my:0; --glow-on:1; --glow-mul:.5; --nav-a:0;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:"Inter",system-ui,-apple-system,sans-serif; letter-spacing:-.011em;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.tight{font-family:"Inter Tight","Inter",sans-serif; letter-spacing:-.04em; line-height:1.0}
a{color:inherit;text-decoration:none}
svg{display:block}
.muted{color:var(--muted)} .faint{color:var(--faint)}

/* ---------- SCÉNA: foto pozadí (den/noc crossfade) ---------- */
.scene{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--paper);
  --bg-pos:center bottom; --bg-zoom:1.12; --fade-to:var(--paper)}
.is-night .scene{--fade-to:var(--navy)}
.bg{position:absolute;inset:0;background-size:cover;background-position:var(--bg-pos);background-repeat:no-repeat;
  transform:scale(var(--bg-zoom));transform-origin:center bottom;
  transition:opacity 1.9s ease-in-out;will-change:opacity}
.bg-day{opacity:1}
.bg-night{opacity:0}
.is-night .bg-day{opacity:0}
.is-night .bg-night{opacity:1}
/* spodní plynulé splynutí do další sekce (žádný hard-cut): blur band + barevný fade */
.bg-blur{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;z-index:1;
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  -webkit-mask:linear-gradient(to bottom,transparent 0%,#000 78%);
          mask:linear-gradient(to bottom,transparent 0%,#000 78%)}
.bg-fade{position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,var(--fade-to) 96%);
  transition:background 1.9s ease-in-out}

/* ---------- světelný zdroj u kurzoru ---------- */

.light-glow{position:fixed;left:var(--gx);top:var(--gy);width:520px;height:520px;z-index:2;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  opacity:calc(var(--glow-on) * var(--glow-mul));transition:opacity .55s var(--ease);
  background:radial-gradient(circle,rgba(120,170,255,.2),rgba(47,107,255,.07) 42%,transparent 70%);filter:blur(22px)}

/* ---------- liquid glass (propousti rozmazane pozadi + 3D stin) ---------- */
.glass{
  position:relative; isolation:isolate;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid var(--glass-brd); border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(16,26,56,.1), 0 24px 60px rgba(16,26,56,.18);
  transition:background 1.25s var(--ease),border-color 1.25s var(--ease);
}
.is-night .glass,.is-night .seg{--glass-bg:rgba(20,28,60,.4);--glass-brd:rgba(255,255,255,.2)}
.glass::before{ /* specular fill — slabne se vzdalenosti (--edge-i) */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  opacity:var(--edge-i,1);
  background:radial-gradient(220px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.5),transparent 72%);
}
.glass::after,.btn::after,.pill::after,.seg::after{ /* reaktivni okraj (bily, smooth) */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--la,0deg),
    rgba(255,255,255,.85),rgba(255,255,255,.12) 58deg,rgba(255,255,255,.06) 180deg,
    rgba(255,255,255,.12) 302deg,rgba(255,255,255,.85) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:var(--edge-i,1);
}
.btn::after,.pill::after,.seg::after{opacity:calc(var(--edge-i,1)*.8)}
/* barevny okraj u BAREVNYCH (modrych) tlacitek */
.btn-primary::after{
  background:conic-gradient(from var(--la,0deg),
    rgba(224,238,255,.9),rgba(120,170,255,.2) 58deg,rgba(60,120,255,.06) 180deg,
    rgba(120,170,255,.2) 302deg,rgba(224,238,255,.9) 360deg);
}

/* ---------- mesh gradient (bohaty, modry) ---------- */
.grad-blue{
  background:
    radial-gradient(120% 160% at 12% -10%,#7db0ff 0%,rgba(125,176,255,0) 46%),
    radial-gradient(125% 170% at 100% 110%,#2f6bff 0%,rgba(47,107,255,0) 52%),
    radial-gradient(150% 230% at 55% 135%,#1c4fd6 0%,rgba(28,79,214,0) 56%),
    linear-gradient(135deg,#2f6bff,#1c4fd6);
  background-size:215% 215%,215% 215%,215% 215%,100% 100%;
  animation:meshMove 3.2s ease-in-out infinite alternate;
}
@keyframes meshMove{
  0%{background-position:0% 8%,100% 92%,38% 100%,0 0}
  50%{background-position:70% 40%,30% 60%,72% 28%,0 0}
  100%{background-position:24% 84%,76% 16%,18% 70%,0 0}
}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;font-size:15px;
  letter-spacing:-.01em;padding:14px 24px;border-radius:999px;border:none;cursor:pointer;
  transition:transform .35s var(--ease),filter .35s var(--ease),box-shadow .35s var(--ease)}
.btn svg{width:18px;height:18px;stroke:#fff;fill:none}
.btn-primary{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(16,40,110,.25),0 12px 30px rgba(28,79,214,.42)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 18px 44px rgba(28,79,214,.55)}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.4);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.btn-ghost svg{stroke:var(--ink)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.6)}

/* ---------- pills / chips ---------- */
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);
  border:1px solid var(--line-2);background:rgba(255,255,255,.4);padding:7px 14px;border-radius:999px;
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  transition:transform .35s var(--ease),background .35s var(--ease),color 1.25s var(--ease),border-color 1.25s var(--ease)}
.pill:hover{transform:translateY(-2px);background:rgba(255,255,255,.6)}
.is-night .pill{color:#fff;border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.1)}
.is-night .pill:hover{background:rgba(255,255,255,.18)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue-deep)}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--blue);border-radius:2px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#36d07a;animation:liveBlink 2.6s ease-in-out infinite}
@keyframes liveBlink{0%,100%{opacity:.55;box-shadow:0 0 0 0 rgba(54,208,122,0)}50%{opacity:1;box-shadow:0 0 9px 1px rgba(54,208,122,.55)}}

/* ---------- den/noc prepinac (segmented liquid glass) ---------- */
.seg{position:relative;display:inline-flex;padding:6px;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 40px rgba(16,26,56,.18);
  transition:background 1.25s var(--ease),border-color 1.25s var(--ease)}
/* aktivní knob = modrý animovaný button (jako CTA) */
.seg-knob{position:absolute;top:6px;left:6px;height:calc(100% - 12px);border-radius:999px;z-index:0;
  background:
    radial-gradient(120% 160% at 12% -10%,#7db0ff 0%,rgba(125,176,255,0) 46%),
    radial-gradient(125% 170% at 100% 110%,#2f6bff 0%,rgba(47,107,255,0) 52%),
    radial-gradient(150% 230% at 55% 135%,#1c4fd6 0%,rgba(28,79,214,0) 56%),
    linear-gradient(135deg,#2f6bff,#1c4fd6);
  background-size:215% 215%,215% 215%,215% 215%,100% 100%;
  animation:meshMove 3.2s ease-in-out infinite alternate;
  box-shadow:0 6px 18px rgba(28,79,214,.5),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .55s var(--ease),width .55s var(--ease)}
.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:15px;color:var(--ink-soft);padding:11px 22px;border-radius:999px;
  transition:color .45s var(--ease)}
.is-night .seg button{color:rgba(255,255,255,.74)}
.seg button svg{width:17px;height:17px;stroke:currentColor;fill:none;transition:stroke .45s var(--ease)}
.seg button[aria-selected="true"],.is-night .seg button[aria-selected="true"]{color:#fff}
.seg .sub{display:block;font-size:11.5px;font-weight:500;color:var(--faint);margin-top:1px}
.is-night .seg .sub{color:rgba(255,255,255,.6)}
.seg button[aria-selected="true"] .sub{color:rgba(255,255,255,.85)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;transition:background .5s var(--ease),border-color .5s var(--ease);
  background:rgba(240,245,252,calc(var(--nav-a)*.72));backdrop-filter:blur(calc(var(--nav-a)*12px));
  -webkit-backdrop-filter:blur(calc(var(--nav-a)*12px));border-bottom:1px solid rgba(14,22,38,calc(var(--nav-a)*.08))}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:"Inter Tight";font-size:23px;font-weight:700;letter-spacing:-.04em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  box-shadow:0 6px 16px rgba(28,79,214,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.brand-mark svg{width:19px;height:19px;stroke:#fff;fill:none}
.nav-links{display:flex;gap:6px}
.nav-links a{padding:9px 16px;font-size:14.5px;font-weight:500;color:var(--ink-soft);border-radius:999px;transition:background .3s,color .3s}
.nav-links a:hover{background:rgba(255,255,255,.5);color:var(--ink)}
@media(max-width:760px){.nav-links{display:none}.nav{padding:16px 20px}}

/* ---------- reveal (transition -> klidový stav je vždy opacity:1) ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}.reveal[data-d="2"]{transition-delay:.13s}
.reveal[data-d="3"]{transition-delay:.2s}.reveal[data-d="4"]{transition-delay:.27s}.reveal[data-d="5"]{transition-delay:.34s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}