/* Premium dark theme with animated watermark, aurora, gradient borders, reveal */
:root{--bg:#0b0b12;--panel:#121225;--ink:#e9ecff;--muted:#a8b0d9;--brand:#7aa5ff;--accent:#a16dff;--cta:#00d4ff}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Animated aurora layer */
.aurora{position:fixed;inset:-20% -20% auto -20%;height:70vh;z-index:-2;
  background:
    radial-gradient(60% 80% at 10% 10%, rgba(122,165,255,.22), transparent 60%),
    radial-gradient(60% 80% at 90% 10%, rgba(161,109,255,.22), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(0,212,255,.14), transparent 60%);
  filter:blur(42px) saturate(120%);
  animation:auroraMove 18s ease-in-out infinite alternate }
@keyframes auroraMove{to{transform:translateY(22px)}}

/* Animated watermark (logo) */
.bg-animated::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background: url('../img/logo.svg') center/ min(70vmin,720px) no-repeat;
  opacity:.10; transform:scale(1) rotate(0deg);
  animation:logoFloat 28s ease-in-out infinite alternate;
}
@keyframes logoFloat{
  50%{transform:scale(1.03) rotate(2deg); opacity:.12}
  100%{transform:scale(1.06) rotate(-2deg); opacity:.11}
}
@media (max-width:520px){
  .bg-animated::before{background: url('../img/logo.svg') center/ 78vmin no-repeat}
}

/* Header */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(9,9,18,.72);
  backdrop-filter:saturate(120%) blur(10px);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:36px;height:36px;filter:drop-shadow(0 0 16px rgba(122,165,255,.45))}
.brand-name{font-weight:900;letter-spacing:.6px}
nav a{color:var(--ink);margin-left:10px;text-decoration:none;padding:8px 12px;border-radius:10px}
nav a:hover{background:rgba(255,255,255,.06)}
nav a.cta{background:linear-gradient(90deg,var(--brand),var(--accent))}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:20px}
.panel{position:relative;padding:22px;margin:18px 0;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* Gradient ring */
.panel::after{content:"";position:absolute;inset:-1px;border-radius:18px;pointer-events:none;
  background:linear-gradient(90deg,rgba(122,165,255,.35),rgba(161,109,255,.35));
  filter:blur(14px);opacity:.22}

.hero .logo-hero{display:flex;justify-content:center;align-items:center;margin-top:6px}
.hero .logo-hero img{width:120px;height:120px;filter:drop-shadow(0 0 28px rgba(122,165,255,.45)) drop-shadow(0 0 18px rgba(161,109,255,.4))}
.hero h1{font-size:clamp(32px,5.6vw,58px);margin:10px 0 6px}
.lead{color:var(--muted);font-size:18px}
.stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:12px 0 18px}
.stat{background:rgba(255,255,255,.06);padding:12px 16px;border-radius:12px;text-align:center;transition:transform .25s ease}
.stat:hover{transform:translateY(-2px)}
.stat strong{font-size:28px;display:block}
.actions .btn{margin:0 6px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);text-decoration:none;color:var(--ink)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent))}
.btn.ghost{background:rgba(255,255,255,.06)}

/* Feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:rgba(255,255,255,.06);border-radius:14px;padding:16px;transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.5)}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

/* About columns */
.columns{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.col{background:rgba(255,255,255,.04);border-radius:14px;padding:16px}
.kpi{display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.24);padding:12px 14px;border-radius:12px;margin-bottom:10px}
.kpi .num{font-weight:900;font-size:24px}
.kpi .lbl{color:var(--muted)}
@media (max-width:900px){.columns{grid-template-columns:1fr}}

/* Contact */
.contact-card .contact-lines{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.contact-pill{display:inline-block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:10px 12px;border-radius:999px;color:var(--ink);text-decoration:none}
.contact-form{display:grid;gap:10px;max-width:640px;margin:0 auto}
.contact-form label{display:grid;gap:6px;text-align:left}
.contact-form input,.contact-form textarea{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.35);color:var(--ink)}

/* Footer */
.site-footer{padding:20px 14px;text-align:center;color:var(--muted)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}