:root{
  --bg:#0b1220;--bg-2:#0e1627;--card:#111a2e;--muted:#a8b0c0;
  --grad: linear-gradient(90deg,#39d1ff 0%, #b04aff 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#fff;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.wrap{width:min(1200px,92%);margin:0 auto}
/* Nav */
.nav{position:sticky;top:0;z-index:50;background:#0c1323bd;backdrop-filter: blur(8px);border-bottom:1px solid #151d31}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:700}
.brand img{width:28px;height:28px}
.nav nav a{color:#d0d7e7;text-decoration:none;margin:0 .8rem;font-weight:600}
.btn{background:var(--grad);color:#0a0a0a;text-decoration:none;padding:.6rem 1rem;border-radius:999px;box-shadow:0 10px 30px rgba(176,74,255,.25);font-weight:700;display:inline-block}
.btn-outline{border:1px solid #3b4661;color:#e6edff;padding:.55rem 1rem;border-radius:999px;text-decoration:none;font-weight:600}
/* Hero */
.hero{position:relative;padding:4.5rem 0 3rem;background:radial-gradient(1200px 400px at 20% -10%, #10223e 0%, rgba(16,34,62,0) 70%)}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 .5rem;font-weight:800}
.hero .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);margin:0 0 1.1rem}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap}
.blur{position:absolute;filter:blur(90px);opacity:.45;z-index:-1}
.b1{width:280px;height:280px;background:#42d2ff;left:10%;top:-40px}
.b2{width:320px;height:320px;background:#b04aff;right:5%;top:-60px}

/* Sections */
.section{padding:3.2rem 0}
.title{text-align:center;font-size:clamp(24px,3.6vw,40px);margin:0 0 1.6rem;font-weight:800}

/* Grid of posts */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{overflow:hidden;border-radius:16px;background:#0f172a;position:relative;box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 0 0 1px #1e2743;transition:transform .25s ease, box-shadow .25s ease}
.card img{width:100%;height:auto;display:block;transform:scale(1.01);transition:transform .35s ease}
.card:before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;opacity:.5;transition:opacity .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(58,209,255,.18)}
.card:hover img{transform:scale(1.06)}
.note{color:#9bb0cf;text-align:center;margin-top:1rem}

/* Audit Box */
.audit .box{background:linear-gradient(180deg,#0f1629,#0b1324);border:1px solid #1b2743;border-radius:18px;padding:1.2rem 1.2rem;display:grid;grid-template-columns:1.2fr 1fr;gap:1.2rem;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.audit .left p{color:#c0c7da}
.audit label{display:block;font-weight:600;margin:.45rem 0 .25rem}
.audit input{width:100%;background:#0b1220;border:1px solid #243151;color:#e8eeff;border-radius:12px;padding:.7rem .9rem;outline:none}
.audit .right .full{width:100%;margin-top:.6rem}
.audit small{color:#8ea2c7}
@media (max-width:900px){.audit .box{grid-template-columns:1fr}}

/* Pricing */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.plan{background:var(--card);border:1px solid #1b2743;border-radius:16px;padding:1rem;box-shadow:0 10px 25px rgba(0,0,0,.35)}
.plan h3{margin:.2rem 0 .6rem;font-size:1.2rem}
.plan ul{margin:0 0 .8rem;padding-left:1.1rem;color:#d7def1}
.plan li{margin:.25rem 0}
.plan .price{font-weight:800;font-size:1.3rem;color:#48d4ff}
.plan .price span{color:#98a6c7;font-weight:600}
.plan .full{width:100%;margin-top:.6rem}
.mt{margin-top:2.2rem}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* Contact */
.contact .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.c-card{background:var(--card);border:1px solid #1b2743;border-radius:16px;padding:1rem;text-align:center}
.c-card a{color:#48d4ff;text-decoration:none}
@media (max-width:900px){.contact .contact-grid{grid-template-columns:1fr}}

/* Footer */
.footer{border-top:1px solid #141d33;color:#93a3c7;padding:1rem 0;text-align:center}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(5,9,18,.88);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100}
.lightbox.show{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:12px;box-shadow:0 25px 80px rgba(0,0,0,.6)}
.lightbox .close{position:absolute;top:16px;right:18px;background:#101a31;border:1px solid #213055;color:#eaf2ff;width:40px;height:40px;border-radius:999px;font-size:24px;line-height:24px;cursor:pointer}

/* About & Core Services */
.about .intro-text {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
  color: #c0c7da;
  font-size: 1.05rem;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 1.8rem;
}

.service-card {
  background: var(--card);
  border: 1px solid #1b2743;
  border-radius: 16px;
  padding: 1.5rem 1.2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(58, 209, 255, .2);
}

.service-card h3 {
  margin: 0 0 .6rem;
  font-size: 1.3rem;
  color: #fff;
}

.service-card p {
  color: #9bb0cf;
  font-size: .95rem;
}

@media (max-width: 900px) {
  .service-cards { grid-template-columns: 1fr; }
}