/* ====== Alapok ====== */
:root{
  --bg: #0b1020;
  --bg-alt: #0f172a;
  --card: #0b1226;
  --text: #e6edf6;
  --muted: #a5b4c9;
  --primary: #0ea5e9;
  --accent: #22d3ee;
  --ring: rgba(14,165,233,.35);
  --radius: 16px;
  --shadow: 0 6px 30px rgba(2,8,23,.35);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,.15), transparent 40%),
    radial-gradient(1000px 500px at 90% 10%, rgba(14,165,233,.15), transparent 40%),
    linear-gradient(180deg, #0b1020 0%, #0b1020 60%, #0f172a 100%);
  background-attachment: fixed;
  line-height:1.6;
}

.container{
  width:min(1120px, 92vw);
  margin-inline:auto;
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{ left:1rem; top:1rem; background:#000; color:#fff; padding:.5rem 1rem; border-radius:8px; }

/* ====== Header / Nav ====== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,16,32,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .75rem 0;
}
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; }
.brand-name{ letter-spacing:.2px; }
.logo{ width:32px; height:32px; border-radius:10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
}

.menu{ display:flex; align-items:center; gap:1rem; }
.menu a{ color:var(--text); text-decoration:none; opacity:.9; padding:.5rem .75rem; border-radius:10px; }
.menu a:hover{ background:rgba(255,255,255,.06); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; }
.nav-toggle .bar{ display:block; width:22px; height:2px; margin:4px 0; background:var(--text); }

/* ====== Buttons ====== */
.btn{
  display:inline-block; border:1px solid rgba(255,255,255,.1);
  padding:.6rem 1rem; border-radius:999px; text-decoration:none; color:var(--text);
  transition:.2s ease; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
.btn--primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); border-color: transparent; color:#071423; font-weight:700; }
.btn--primary:hover{ filter:brightness(1.1); }
.btn--ghost{ background: transparent; }
.btn--ghost:hover{ background: rgba(255,255,255,.08); }
.btn--lg{ padding:.8rem 1.2rem; }

.badge{
  display:inline-block; font-size:.8rem; letter-spacing:.3px;
  padding:.35rem .7rem; border-radius:999px; background:rgba(14,165,233,.15); color:#8bd5ff;
  border:1px solid rgba(14,165,233,.25);
}

/* ====== Hero ====== */
.hero{ padding: 6rem 0 3rem; }
.hero__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
.hero h1{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height:1.1; margin: 1rem 0 .5rem; }
.text-gradient{ background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ font-size:1.1rem; color:var(--muted); }
.hero__cta{ display:flex; gap:.8rem; margin:1rem 0 1.25rem; }
.meta-row{ display:flex; gap:1rem; color:var(--muted); font-size:.9rem; }

.hero__visual{ position:relative; min-height:340px; }
.orb{ position:absolute; border-radius:50%; filter: blur(14px); opacity:.7; }
.orb--1{ width:220px; height:220px; background: rgba(14,165,233,.35); top:20px; right:20px; }
.orb--2{ width:160px; height:160px; background: rgba(34,211,238,.28); bottom:20px; left:10%; }
.orb--3{ width:120px; height:120px; background: rgba(14,165,233,.22); bottom:10%; right:12%; }
.glass-card{
  position:absolute; inset:auto 24px 24px auto; width:min(320px, 80%);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); padding:1rem 1.1rem;
  backdrop-filter: blur(10px); box-shadow: var(--shadow);
}
.glass-card h3{ margin:.2rem 0 .6rem; }
.glass-card ul{ margin:0; padding-left:1.2rem; color:var(--muted); }

/* ====== Sections ====== */
.section{ padding: 4rem 0; }
.section--alt{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.section__header{ margin-bottom:1.6rem; }
.section__header h2{ margin:0 0 .4rem; font-size: clamp(1.6rem, 2.6vw, 2rem); }
.muted{ color:var(--muted); }

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem; }
.grid-2{ display:grid; grid-template-columns: 1.2fr 1fr; gap:1.2rem; }

.card{
  background: var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:1rem 1.1rem;
  box-shadow: var(--shadow);
}
.spec-list{ margin:0; padding-left:1.1rem; color:var(--muted); }

.project{ background: var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow: var(--shadow); }
.project__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.status{ font-size:.8rem; padding:.2rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.15); color:var(--muted); }
.status--active{ color:#a7f3d0; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.1); }
.status--planning{ color:#fde68a; border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.08); }
.status--pilot{ color:#93c5fd; border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.08); }
.bullets{ margin:.6rem 0 0; padding-left:1.1rem; color:var(--muted); }

/* ====== Timeline ====== */
.timeline{ display:grid; grid-template-columns: 1fr; gap:1rem; position:relative; }
.t-item{ position:relative; padding-left:4rem; }
.t-item::before{
  content:\"\"; position:absolute; left:1.6rem; top:.2rem; bottom:.2rem; width:2px; background: rgba(255,255,255,.1);
}
.t-badge{
  position:absolute; left:.6rem; top:.2rem; width:2rem; height:2rem;
  border-radius:999px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#071423; font-weight:800;
  box-shadow: var(--shadow);
}
.t-card{ background: var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:.8rem 1rem; }

/* ====== FAQ & Contact ====== */
.faq details{ background: var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:.8rem 1rem; margin-bottom:.6rem; }
.faq summary{ cursor:pointer; font-weight:600; }
.contact{ background: var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow: var(--shadow); }
.field{ margin-bottom:.8rem; }
label{ display:block; margin-bottom:.25rem; font-weight:600; }
input, textarea{
  width:100%; padding:.7rem .8rem; border-radius:12px; background:#0a1224; color:var(--text);
  border:1px solid rgba(255,255,255,.12); outline:none;
}
input:focus, textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 6px var(--ring); }
.consent{ display:flex; align-items:center; gap:.5rem; margin:.6rem 0 1rem; }
.form-note{ color:#a7f3d0; min-height:1.2em; }

/* ====== Footer ====== */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding:2rem 0; background: rgba(255,255,255,.02); }
.footer__grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem; align-items:start; }
.footer__links a{ display:block; color:var(--text); text-decoration:none; opacity:.85; margin:.25rem 0; }
.footer__links a:hover{ opacity:1; text-decoration:underline; }

/* ====== Responsive ====== */
@media (max-width: 960px){
  .hero__grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .menu{ display:none; position:absolute; right:1rem; top:64px; flex-direction:column; background: rgba(11,16,32,.95); padding:.6rem; border-radius:12px; border:1px solid rgba(255,255,255,.1); }
  .menu a{ padding:.6rem .8rem; }
  .nav-toggle{ display:block; }
  .site-header .btn--primary{ display:none; }
}