:root{
  --bg:#0b0f14;
  --card:#111827;
  --muted:#9CA3AF;
  --text:#E5E7EB;
  --accent:#00ccff;
  --accent2:#FF4500;
  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* HERO */
.hero{background:#000;padding:40px 16px 48px;border-bottom:1px solid #111}
.hero .container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.brand{font-weight:800;letter-spacing:.4px;font-size:clamp(22px,3.2vw,34px)}
.tagline{color:var(--muted);font-size:clamp(14px,2.2vw,16px)}
.hero-logo{height:clamp(38px,6vw,68px);width:auto;display:block}
.ctaTop{background:var(--accent);color:#001018;padding:12px 18px;border-radius:10px;border:none;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(0,204,255,.25);transition:transform .06s ease, filter .2s ease;text-decoration:none}
.ctaTop:hover{filter:brightness(1.05)}
.ctaTop:active{transform:translateY(1px)}

.container{max-width:1200px;margin:32px auto;padding:0 16px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
h2{margin:0 0 12px;font-size:22px}
p{margin:0 0 10px;line-height:1.65}
.list{margin:0;padding:0;list-style:none}
.list li{margin:6px 0}
.muted{color:var(--muted)}
.section{display:grid;margin:50px 0}
.helpbox{border:1px solid #1f2937}
.btn,.cta{display:inline-block;background:var(--accent2);color:#fff;border:none;text-decoration:none;font-weight:700;padding:10px 16px;border-radius:10px;cursor:pointer;transition:filter .15s}
.btn:hover,.cta:hover{filter:brightness(1.07)}
.input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #1f2937;background:#0b1220;color:var(--text)}
small.helper{color:#9CA3AF}
.row{display:grid;gap:10px}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:720px){ .col2{grid-template-columns:1fr} }
.msg-ok{background:#16a34a1a;border:1px solid #16a34a40;color:#C7F9CC;padding:10px;border-radius:10px}
.msg-err{background:#dc26261a;border:1px solid #dc262640;color:#FECACA;padding:10px;border-radius:10px}
a{color:var(--accent)}
footer{margin:26px 0;color:var(--muted);text-align:center}

/* Accordion */
.accordion{padding:0;overflow:hidden}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:rgba(255,255,255,.02);border-bottom:1px solid #1f2937;cursor:pointer}
.acc-title{font-size:20px;font-weight:800;margin:0}
.acc-toggle{width:34px;height:34px;border-radius:10px;border:1px solid #1f2937;display:grid;place-items:center;color:#fff;background:#0b1220;font-size:20px;line-height:1;user-select:none}
.acc-body{padding:22px;display:none}
.accordion.open .acc-body{display:block}
.accordion.open .acc-toggle{background:var(--accent);color:#001018;border-color:transparent}

/* Parallax background */
#bg-stars{position:fixed;inset:-8%;z-index:-1;pointer-events:none;background-image:url('img.php?src=background.jpg&w=1920&fmt=webp');background-size:cover;background-position:center;filter:brightness(.9) saturate(1.05);transform:translate3d(0,0,0) scale(0.8);will-change:transform;animation:bgPulse 14s ease-in-out infinite}
#bg-stars::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 800px at 70% -10%, rgba(0,204,255,.08), transparent 55%),radial-gradient(900px 600px at 10% 120%, rgba(255,69,0,.06), transparent 50%),linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.5));mix-blend-mode:screen;pointer-events:none}
@keyframes bgPulse{0%,100%{transform:translate3d(var(--tx,0),var(--ty,0),0) scale(1.05)}50%{transform:translate3d(var(--tx,0),var(--ty,0),0) scale(1.10)}}
@media (prefers-reduced-motion:reduce){#bg-stars{animation:none}}

/* Feature sections */
.feature{display:grid;gap:22px;align-items:center;grid-template-columns:1fr auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;overflow:hidden;border:1px solid #1f2937}
.feature.reverse{grid-template-columns:auto 1fr}
@media(max-width:980px){.feature,.feature.reverse{grid-template-columns:1fr}}
.feature-img{position:relative;width:50vw;max-width:600px;min-width:220px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0b1220;border:1px solid #1f2937;justify-self:end}
.feature.reverse .feature-img{justify-self:start}
@media(max-width:1200px){.feature-img{max-width:800px;min-width:360px}}
@media(max-width:980px){.feature-img{width:100%;max-width:none;min-width:0;justify-self:stretch}}
.feature-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;max-width:none;transform:scale(1.02);transition:transform .5s ease, filter .5s ease;filter:saturate(1.05) contrast(1.05)}
.feature:hover .feature-img img{transform:scale(1.06)}

/* Mobile header layout */
@media(max-width:720px){
  .hero .container{grid-template-columns:1fr 1fr;gap:12px 16px}
  .hero .container > :nth-child(2){grid-column:1 / -1;grid-row:1}
  .hero .container > img.hero-logo{grid-column:1;grid-row:2;justify-self:start}
  .hero .container > .ctaTop{grid-column:2;grid-row:2;justify-self:end}
}

/* Cookie banner responsive */
#cookie-banner{font-size:15px;line-height:1.4}
#cookie-banner button{vertical-align:middle}
@media(max-width:640px){
  #cookie-banner{font-size:14px;padding:12px 14px;text-align:left}
  #cookie-banner a{display:inline-block;margin-top:4px}
  #cookie-banner button{display:block;margin:8px 0 0 0 !important}
}

/* Privacy popup responsive */
#privacy-popup{padding:16px}
#privacy-popup > div{width:min(92vw,600px) !important;max-height:80vh;overflow:auto;margin:8% auto !important}
@media(max-width:640px){#privacy-popup > div{width:94vw !important;max-height:80vh;margin:10% auto !important}}