:root{
  --bg:#ffffff; --fg:#0b0b0c; --muted:#555; --line:#e9e9ef;
  --accent:#111; --soft:#f7f7fb;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg);}
a{color:inherit;text-decoration:none}
.nav{
  position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;
}
.brand{display:flex;align-items:center;gap:12px}
.mark{
  width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0b0b0c,#3a3a3a);
}
.name{font-weight:700;letter-spacing:.2px}
.tag{font-size:12px;color:var(--muted)}
.btn{
  display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;font-weight:600;
}
.btn.ghost{background:transparent;color:var(--accent)}
.hero{padding:54px 18px;max-width:980px;margin:0 auto}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 12px}
.hero p{font-size:16px;color:var(--muted);max-width:740px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.card{border:1px solid var(--line);background:var(--soft);border-radius:16px;padding:14px}
.card h3{margin:0 0 6px;font-size:15px}
.card p{margin:0;color:var(--muted);font-size:14px}
.section{padding:34px 18px;max-width:980px;margin:0 auto;border-top:1px solid var(--line)}
.section h2{margin:0 0 12px}
.list{margin:0;padding-left:18px;color:var(--muted)}
.muted{color:var(--muted)}
.contact .footnote{margin-top:14px;color:var(--muted);font-size:13px}
.footer{border-top:1px solid var(--line);padding:18px;text-align:center;color:var(--muted)}
/* ===== Global Dark Futuristic Theme ===== */

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(1200px 800px at 70% 20%, rgba(0,170,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(0,255,255,0.10), transparent 55%),
    linear-gradient(135deg, #05080f, #0a1a2e);
  color: #f2f5f8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Subtle grid overlay for futuristic feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  opacity: 0.25;
}

/* Watermark logo */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("continuity-watermark.png") center no-repeat;
  background-size: 720px;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* Headings */
h1, h2, h3 {
  color: #ffffff;
}

/* Muted text */
.muted {
  color: rgba(255,255,255,0.65);
}

/* Cards */
.card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

/* Sections */
.section {
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Buttons */
.btn {
  background: linear-gradient(135deg, #00b4ff, #4fdfff);
  color: #001018;
  border: none;
}

.btn.ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.35);
}

/* Header */
.nav {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Footer */
.footer {
  color: rgba(255,255,255,0.45);
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ===== Intro: glitch -> laser wipe -> matrix text settle ===== */

.introOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(10px);
  opacity: 1;
  overflow: hidden;
}

.introOverlay::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 55% 35%, rgba(0,180,255,0.20), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 9px);
  opacity: .65;
  animation: introFlicker 0.15s infinite alternate;
  mix-blend-mode: screen;
  filter: blur(1.2px) contrast(1.2);
}

/* glitch jitter */
@keyframes introFlicker{
  0%{ transform: translate(0,0); opacity:.55; }
  100%{ transform: translate(1px,-1px); opacity:.75; }
}

/* laser wipe */
.laserWipe{
  position:absolute;
  top:-20%;
  left:-140%;
  width: 140%;
  height: 140%;
  transform: rotate(-10deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,180,255,0.12) 35%,
    rgba(124,243,255,0.70) 50%,
    rgba(0,180,255,0.12) 65%,
    transparent 100%
  );
  filter: blur(0.4px);
  box-shadow: 0 0 70px rgba(0,180,255,0.35);
  opacity: 0;
}

/* matrix rain layer */
.matrixRain{
  position:absolute;
  inset:0;
  opacity: .65;
  filter: blur(0.2px);
}

/* little status text */
.introHint{
  position:absolute;
  left: 24px;
  bottom: 20px;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* when laser plays */
.introOverlay.playLaser .laserWipe{
  opacity: 1;
  animation: laserSweep 1.2s ease forwards;
}

@keyframes laserSweep{
  0%{ left:-140%; }
  100%{ left:140%; }
}

/* when overlay exits */
.introOverlay.exit{
  animation: overlayFadeOut .55s ease forwards;
}
@keyframes overlayFadeOut{
  to { opacity:0; visibility:hidden; }
}

/* ===== “Matrix-style” word settle for your main page elements =====
   Applies after intro ends by adding .settle class to <body>.
*/
body.settle .nav,
body.settle .hero h1,
body.settle .hero p,
body.settle .cta,
body.settle .cards,
body.settle .section,
body.settle .footer{
  animation: fallIn .55s ease both;
}

body.settle .hero h1{ animation-delay: .02s; }
body.settle .hero p{ animation-delay: .10s; }
body.settle .cta{ animation-delay: .16s; }
body.settle .cards{ animation-delay: .22s; }
body.settle .section{ animation-delay: .28s; }
body.settle .footer{ animation-delay: .34s; }

@keyframes fallIn{
  0%{
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(2px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

header, main, footer {
  position: relative;
  z-index: 1;
}