/* ============================================================
   site.css — vlastní styl webu PHisto / Falcon Projects.
   Toto NENÍ styl aplikace Wallbox EVSE — ten má vlastní paletu,
   viz assets/css/app-preview.css (použito jen uvnitř náhledů
   rozhraní na /wallbox/).
   ============================================================ */

:root{
  --bg:#0a0a0a; --panel:#111827; --panel-border:#1f2937;
  --text:#e2e8f0; --text-dim:#94a3b8; --text-mute:#64748b;
  --blue:#38bdf8; --green:#22c55e; --violet:#a78bfa; --cyan:#22d3ee; --yellow:#eab308; --red:#ef4444;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bg); color:var(--text); font-family:'Manrope',system-ui,sans-serif;}
a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--cyan);}
h1,h2{text-wrap:balance;}
img{max-width:100%;}
::selection{background:rgba(56,189,248,0.3);}

.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}

/* hologram ring — 1:1 s aplikací (viz /about ve wallbox_evse) */
@keyframes ringRotate{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
@keyframes falconFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
.holo{position:relative; width:150px; height:150px; margin:0 auto;}
.holo-ring{position:absolute; inset:-14px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, #22b04d, transparent 32%, transparent 68%, #38bdf8, transparent 100%);
  animation:ringRotate 5s linear infinite; filter:blur(3px); opacity:0.65;}
.holo-logo{width:110px; height:110px; position:relative; top:20px; left:20px; display:block;
  animation:falconFloat 3.2s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(34,176,77,0.65)) drop-shadow(0 0 28px rgba(56,189,248,0.3));}

/* nav */
.nav{display:flex; justify-content:space-between; align-items:center; padding:24px 32px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:28px; height:28px; filter:drop-shadow(0 0 6px rgba(34,176,77,0.6));}
.brand-word{font-family:'Orbitron',sans-serif; font-weight:800; letter-spacing:0.18em; font-size:0.9rem; color:var(--text);}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-link{font-size:0.82rem; color:var(--text-dim);}
.nav-link.active{color:var(--blue);}
.nav-link.soon{color:var(--text-mute); display:flex; gap:8px; align-items:center;}
.nav-link.soon em{font-style:normal; font-size:0.62rem; padding:2px 8px; border:1px solid #3f3f46; border-radius:999px; color:var(--text-mute);}
.lang-switch{display:flex; border:1px solid var(--panel-border); border-radius:8px; overflow:hidden;}
.lang-btn{background:transparent; border:none; color:var(--text-mute); font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  font-weight:600; padding:6px 11px; cursor:pointer; letter-spacing:0.05em;}
.lang-btn.is-active{background:rgba(56,189,248,0.14); color:var(--blue);}

/* eyebrow / section heads */
.eyebrow{font-family:'Orbitron',sans-serif; font-size:0.7rem; letter-spacing:0.3em; color:var(--cyan); text-transform:uppercase;}
.sec-head{text-align:center; margin-bottom:32px;}
.sec-title{font-family:'Orbitron',sans-serif; font-weight:800; font-size:1.35rem; margin:0 0 6px;}
.sec-sub{color:var(--text-dim); font-size:0.92rem;}

/* buttons */
.cta-solid{display:inline-block; background:var(--blue); color:#04121a; border:none; font-weight:700; font-size:0.86rem; padding:12px 22px; border-radius:9px;
  box-shadow:0 0 20px rgba(56,189,248,0.3); cursor:pointer;}
.cta-ghost{display:inline-block; background:transparent; border:1px solid var(--panel-border); color:var(--text-dim); font-weight:600; font-size:0.86rem;
  padding:11px 20px; border-radius:9px; cursor:pointer;}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* home hero */
.home-hero{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 24px 4px;
  background:radial-gradient(ellipse 780px 420px at 50% 0%, rgba(56,189,248,0.10), transparent 60%);}
.home-wordmark{font-family:'Orbitron',sans-serif; font-weight:900; font-size:3.8rem; letter-spacing:0.1em; margin:16px 0 0; color:var(--text);
  text-shadow:0 0 22px rgba(56,189,248,0.35);}
.home-by{font-size:0.8rem; letter-spacing:0.28em; color:var(--text-dim); margin-top:4px;}
.home-tagline{max-width:560px; color:var(--text-dim); font-size:1.05rem; line-height:1.6; margin:20px auto 6px;}
.home-disclaimer{font-size:0.8rem; color:var(--text-mute); margin-top:2px;}

/* project cards */
.projects{position:relative; z-index:2; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; padding:36px 24px 0;}
.card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; padding:26px 26px 24px;
  display:flex; flex-direction:column; gap:9px;}
.card-live{box-shadow:0 0 0 1px rgba(56,189,248,0.15), 0 20px 50px -20px rgba(56,189,248,0.25);}
.pill{align-self:flex-start; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px;}
.pill-live{background:rgba(16,185,129,0.14); color:#10b981; border:1px solid rgba(16,185,129,0.35);}
.pill-soon{background:rgba(234,179,8,0.10); color:var(--yellow); border:1px solid rgba(234,179,8,0.3);}
.card h3{font-family:'Orbitron',sans-serif; font-size:1.2rem; margin:4px 0 2px;}
.card p{color:var(--text-dim); font-size:0.89rem; line-height:1.55; margin:0 0 8px; flex-grow:1;}
.card .cta{align-self:flex-start; background:transparent; border:1px solid var(--blue); color:var(--blue); font-weight:600; font-size:0.83rem;
  padding:9px 16px; border-radius:8px;}
.card .cta.disabled{border-color:#3f3f46; color:var(--text-mute);}

/* small teaser strip (for secondary/lightweight items, e.g. 3D Modely) */
.teaser{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; padding:22px 24px 0;}
.teaser-chip{display:flex; align-items:center; gap:9px; padding:10px 16px; border:1px dashed var(--panel-border); border-radius:10px; color:var(--text-mute); font-size:0.82rem;}
.teaser-chip b{color:var(--text-dim); font-weight:600;}

/* footer */
.foot{position:relative; z-index:2; text-align:center; color:var(--text-mute); font-size:0.75rem; padding:50px 20px 30px;}

/* not-finished notice banner */
.notice-banner{position:relative; z-index:2; margin:0 auto; padding:10px 32px; text-align:center; font-size:0.8rem;
  color:var(--yellow); background:rgba(234,179,8,0.08); border-bottom:1px solid rgba(234,179,8,0.25);}

@media (max-width:720px){
  .wrap{padding:0 16px;}
  .nav{padding:16px;}
  .home-wordmark{font-size:2.6rem;}
  .nav{flex-wrap:wrap; gap:12px;}
  .nav-links{flex-wrap:wrap; justify-content:center;}
  .notice-banner{padding:9px 16px; font-size:0.74rem;}
  .card{padding:22px 20px 20px;}
}