:root{
  --bg:#050612;
  --bg2:#081125;
  --panel:rgba(8, 18, 37, 0.82);
  --panel2:rgba(255,255,255,0.055);
  --border:rgba(100, 210, 255, 0.20);
  --text:rgba(255,255,255,0.94);
  --muted:rgba(224,240,255,0.74);
  --cyan:#19d8ff;
  --blue:#0d66ff;
  --violet:#8b2cff;
  --magenta:#c738ff;
  --accent:#19d8ff;
  --shadow:0 24px 80px rgba(0,0,0,.52), 0 0 45px rgba(25,216,255,.12);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.45;
  background:
    radial-gradient(800px 500px at 20% 0%, rgba(25,216,255,.16), transparent 60%),
    radial-gradient(760px 500px at 90% 15%, rgba(139,44,255,.16), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2) 55%, var(--bg));
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(5,6,18,.76);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
.nav-wrap{
  max-width:1180px;margin:0 auto;padding:6px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.nav-logo img{width:95px;height:auto;display:block;margin:-8px 0;filter:drop-shadow(0 0 12px rgba(25,216,255,.35))}
nav{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}
nav a{color:var(--muted);font-weight:700;font-size:14px;padding:10px 8px;border-radius:12px;transition:.18s ease}
nav a:hover{color:white;background:rgba(255,255,255,.065)}
.nav-cta{border:1px solid rgba(25,216,255,.32);background:rgba(25,216,255,.08);color:white}

.hero{position:relative;min-height:82vh;display:grid;place-items:center;overflow:hidden;padding:120px 22px 76px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.48;filter:saturate(1.05) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(5,6,18,.96), rgba(5,6,18,.58), rgba(5,6,18,.88));}
.hero-content{position:relative;z-index:1;max-width:920px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-logo{width:min(560px,80vw);filter:drop-shadow(0 0 24px rgba(25,216,255,.32));margin-bottom:4px}
.eyebrow{margin:0;color:var(--cyan);font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:13px}
h1{margin:0;font-size:clamp(40px,6vw,76px);line-height:.95;letter-spacing:-.055em;text-shadow:0 0 26px rgba(25,216,255,.16)}
.hero-subtitle{max-width:760px;margin:0;color:var(--muted);font-size:clamp(17px,2vw,22px)}

.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;padding:13px 18px;font-weight:800;transition:.18s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(25,216,255,.18)}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue) 55%,var(--violet));color:white;border-color:rgba(25,216,255,.45)}
.btn-secondary{background:rgba(255,255,255,.06);color:white}
.hero-buttons,.button-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:8px}

.intro-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(25,216,255,.055)}
.section{padding:78px 22px}
.section-inner{max-width:1180px;margin:0 auto}
.intro-strip .section-inner{padding:24px 22px;text-align:center}
.intro-strip p{margin:0;color:var(--muted);font-size:18px;font-weight:700}
.section-title{font-size:clamp(32px,4.4vw,52px);line-height:1;letter-spacing:-.04em;margin:0 0 14px}
.section-text{color:var(--muted);max-width:760px;margin:0 0 24px;font-size:17px}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.service-card{overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);transition:.18s ease}
.service-card:hover{transform:translateY(-4px);border-color:rgba(25,216,255,.42)}
.service-card img{width:100%;height:230px;object-fit:cover}
.service-body{padding:20px}
.service-label{display:inline-flex;margin-bottom:10px;padding:7px 10px;border-radius:999px;background:rgba(25,216,255,.09);border:1px solid rgba(25,216,255,.28);color:var(--cyan);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.service-card h3{font-size:24px;line-height:1.05;margin:0 0 10px}
.service-card p{color:var(--muted);margin:0 0 14px}
.text-link{font-weight:900;color:var(--cyan)}

.split-section{background:linear-gradient(135deg, rgba(25,216,255,.04), rgba(139,44,255,.08))}
.two-column{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.text-panel,.quote-box{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.text-panel p{color:var(--muted)}
.logo-panel{border-radius:var(--radius);padding:28px;background:radial-gradient(circle at 50% 45%, rgba(25,216,255,.14), rgba(255,255,255,.02) 54%, transparent 72%)}
.logo-panel img{filter:drop-shadow(0 0 24px rgba(25,216,255,.34))}

.video-frame{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#111;box-shadow:var(--shadow)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.quote-box{max-width:980px}
.quote-form{display:grid;gap:14px;margin-top:20px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
label{display:grid;gap:7px;color:white;font-weight:800;font-size:14px}
input,select,textarea{width:100%;padding:13px 14px;border-radius:15px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:var(--text);font:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:rgba(25,216,255,.55);box-shadow:0 0 0 3px rgba(25,216,255,.11)}
textarea{resize:vertical}
select option{color:#111;background:#fff}
button{font:inherit}

.site-footer{border-top:1px solid var(--border);padding:28px 22px;text-align:center;color:var(--muted);background:rgba(5,6,18,.72)}
.site-footer p{margin:0}

@media (max-width:880px){
  .nav-wrap{align-items:flex-start;flex-direction:column}
  nav{gap:8px}
  .service-grid,.two-column,.form-grid{grid-template-columns:1fr}
  .hero{min-height:76vh;padding-top:104px}

/* MOBILE HEADER */
@media (max-width: 768px){

  .nav-wrap{
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:10px 14px;
  }

  .nav-logo img{
    width:78px;
    height:auto;
  }

  nav{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }

  nav a{
    font-size:14px;
    font-weight:700;
    padding:6px 0;
    color:var(--muted);
    text-decoration:none;
    transition:.18s ease;
  }

  nav a:hover{
    color:white;
  }

  .nav-cta{
    padding:6px 12px;
    border-radius:12px;
    border:1px solid rgba(25,216,255,.22);
    background:rgba(25,216,255,.04);
    color:var(--muted);
  }

  .nav-cta:hover{
    color:white;
    border-color:rgba(25,216,255,.45);
    background:rgba(25,216,255,.08);
  }

  .hero{
    padding-top:70px;
  }

}