:root{
  --bg:#0a0f1f;
  --card:#0f152a;
  --muted:#9fb1d8;
  --text:#eaf2ff;
  --accent:#69dbff;
  --accent-2:#6877ff;
  --primary:#00c2ff;
  --success:#44dba4;
  --warning:#ffc857;
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(16, 30, 78, .35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(1200px 800px at 10% 10%, #08112b 0%, #0a0f1f 35%, #090c17 100%);
  overflow-x:hidden;
}

/* Global containers */
.container{width:95%; max-width:1200px; margin:0 auto;}
.section{padding:90px 0; position:relative;}

/* Animated gradient mesh background */
.mesh-bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(800px 600px at 80% 20%, rgba(105,219,255,.25), transparent 60%),
    radial-gradient(900px 700px at 10% 80%, rgba(104,119,255,.22), transparent 60%),
    radial-gradient(600px 500px at 40% 40%, rgba(68,219,164,.18), transparent 60%);
  filter:saturate(110%);
  animation:floatMesh 18s linear infinite alternate;
}
@keyframes floatMesh{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-10px,0) scale(1.03)}
}

/* Navigation */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  backdrop-filter:saturate(120%) blur(12px);
  background:linear-gradient(to right, rgba(10,15,31,.65), rgba(10,15,31,.35));
  border-bottom:1px solid rgba(105,219,255,.15);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand svg{height:34px; width:34px}
.brand-name{font-weight:800; letter-spacing:.3px}
.nav-links{display:flex; gap:22px}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:600; transition:.2s}
.nav-links a:hover{color:var(--text)}
.nav-links .dropdown:hover .dropdown-content {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.dropdown-content a {
  color: var(--muted);
  padding: 6px 12px;
  text-decoration: none;
  display: block;
  border-radius: 6px;
  transition: all 0.2s;
}
.dropdown-content a:hover {
  background: rgba(105,219,255,.1);
  color: var(--text);
  transform: translateX(4px);
}
.cta-btn{
  padding:10px 16px; border-radius:10px; border:1px solid rgba(105,219,255,.3);
  background:linear-gradient(135deg, rgba(105,219,255,.25), rgba(104,119,255,.15));
  color:var(--text); text-decoration:none; font-weight:700; transition:.25s; box-shadow:var(--shadow);
}
.cta-btn:hover{transform:translateY(-2px); border-color:rgba(105,219,255,.6)}

/* Hero */
.hero{padding-top:120px; padding-bottom:80px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.eyebrow{color:var(--muted); text-transform:uppercase; font-size:.85rem; letter-spacing:.18em}
.title{
  font-size:clamp(2rem, 6vw, 3.6rem);
  line-height:1.05;
  margin:12px 0 16px;
  background:linear-gradient(90deg, #eaf2ff 0%, #a8c6ff 45%, #69dbff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subtitle{color:#cfe1ff; font-size:clamp(1rem, 2.2vw,1.25rem); max-width:650px}
.hero-actions{display:flex; gap:16px; margin-top:26px; flex-wrap:wrap}
.primary-btn{
  padding:14px 20px; border-radius:12px; border:1px solid rgba(105,219,255,.5);
  background:linear-gradient(135deg, #69dbff 0%, #6877ff 100%);
  color:#03132c; font-weight:800; text-decoration:none; box-shadow:var(--shadow);
}
.ghost-btn{
  padding:14px 20px; border-radius:12px; border:1px solid rgba(105,219,255,.3);
  background:linear-gradient(135deg, rgba(105,219,255,.12), rgba(104,119,255,.08));
  color:var(--text); font-weight:700; text-decoration:none;
}

/* Infinity mark visual */
.infinity-wrap{position:relative}
.glow{
  position:absolute; inset:-15% -15% -20% -10%; z-index:-1; filter:blur(30px);
  background:radial-gradient(400px 400px at 50% 40%, rgba(105,219,255,.35), transparent 70%);
  animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{opacity:.6; transform:scale(1)}
  50%{opacity:.95; transform:scale(1.08)}
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(105,219,255,.18);
  border-radius:20px; padding:22px; box-shadow:var(--shadow);
}
.hero-canvas{height:320px; border-radius:16px; overflow:hidden; position:relative}
canvas{width:100%; height:100%; display:block}

/* Trust bar */
.trust{display:flex; gap:26px; align-items:center; margin-top:26px; flex-wrap:wrap}
.trust small{color:var(--muted)}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(135deg, rgba(105,219,255,.12), rgba(104,119,255,.08));
  border:1px solid rgba(105,219,255,.25); color:var(--text); font-weight:600; font-size:.9rem;
}

/* Services */
.section-title{font-size:2rem; margin-bottom:8px}
.section-sub{color:var(--muted); margin-bottom:28px}
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.service-card .icon{
  height:46px; width:46px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(105,219,255,.18), rgba(104,119,255,.12));
  border:1px solid rgba(105,219,255,.25); margin-bottom:14px;
}
.service-card h4{margin:0 0 6px}
.service-card p{color:#cfe1ff}

/* Showcase */
.showcase{display:grid; grid-template-columns:2fr 1fr; gap:22px}
.showcase .shot{
  border-radius:16px; overflow:hidden; border:1px solid rgba(105,219,255,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  min-height:220px; position:relative;
}
.shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 100%);
}

/* Testimonials */
.carousel{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.testimonial{min-width:320px; scroll-snap-align:start}
.testimonial p{color:#cfe1ff}
.avatar{
  height:42px; width:42px; border-radius:999px; background:linear-gradient(135deg,#69dbff,#6877ff);
  border:2px solid rgba(255,255,255,.35)
}

/* CTA */
.cta{
  background:linear-gradient(135deg, rgba(105,219,255,.12), rgba(104,119,255,.08));
  border:1px solid rgba(105,219,255,.25);
  border-radius:20px; padding:26px; display:flex; align-items:center; justify-content:space-between; gap:16px
}

/* Footer */
footer{padding:50px 0 70px; color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:22px}
.foot-grid a{color:#cfe1ff; text-decoration:none}
.copy{margin-top:20px; font-size:.9rem}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px}
.form{
  display:grid; gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(105,219,255,.18); border-radius:16px; padding:18px;
}
.form input, .form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(105,219,255,.22);
  background:rgba(6,10,22,.65); color:var(--text); outline:none; transition:.2s;
}
.form input:focus, .form textarea:focus{border-color:rgba(105,219,255,.55)}
.submit-btn{padding:12px 16px; border-radius:12px; border:1px solid rgba(105,219,255,.5); background:linear-gradient(135deg,#69dbff,#6877ff); color:#021327; font-weight:800}

/* Responsive */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .showcase{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .nav-inner{padding:12px 0}
  .section{padding:70px 0}
  .hero{padding-top:100px}
}

/* Stats counter */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 40px 0;
}
.stat-card {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(105,219,255,.12), rgba(104,119,255,.08));
  border: 1px solid rgba(105,219,255,.25);
  border-radius: 16px;
}
.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, #eaf2ff 0%, #69dbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}

/* Process steps */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.process-card {
  text-align: center;
  padding: 24px;
}
.process-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #69dbff, #6877ff);
  color: var(--bg);
  font-weight: 800;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}

/* Tech stack */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.tech-card {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(105,219,255,.12), rgba(104,119,255,.08));
  border: 1px solid rgba(105,219,255,.25);
  border-radius: 12px;
  transition: transform .2s;
}
.tech-card:hover {
  transform: translateY(-4px);
}
.tech-icon {
  font-size: 2rem;
}

/* Blog preview */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.blog-card {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(105,219,255,.2);
}
.blog-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid rgba(105,219,255,.2);
}
.blog-content {
  padding: 20px;
}
.blog-date {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* Why choose us */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.feature-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
}
.feature-icon {
  font-size: 2rem;
  color: var(--accent);
}

@media(max-width:980px){
  .stats-grid, .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .blog-grid, .features-grid {
    grid-template-columns: 1fr;
  }
}
@media(max-width:640px){
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Utility classes */
.text-muted{color:var(--muted)}
.center{text-align:center}
.mb-8{margin-bottom:8px}
.mt-12{margin-top:12px}

/* Small layout helpers */
.grid-2{grid-template-columns:1fr 1fr}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-1{grid-template-columns:1fr}

/* Buttons default */
button, a.button{cursor:pointer}

/* Footer small print */
small{color:var(--muted)}

/* Mobile navigation & dropdown touch support */
.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(105,219,255,.12);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  font-size:1.05rem;
}

.dropdown-content{display:none; min-width:200px; position: absolute; background: var(--card); border: 1px solid rgba(105,219,255,.25); border-radius: 12px; padding: 12px; z-index: 1000; margin-top: 8px;}
.dropdown.open .dropdown-content{display:flex; flex-direction:column; gap:8px}

/* When nav has .open (mobile), show links stacked */
.nav.open .nav-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:12px;
  position:absolute;
  top:64px;
  right:20px;
  border-radius:12px;
  border:1px solid rgba(105,219,255,.12);
}

/* Ensure dropdowns inside mobile stacked nav keep their styles */
.nav.open .nav-links .dropdown{width:100%}

@media (max-width:980px){
  .menu-toggle{display:block}
  .nav-links{display:none}
}

/* small-screen dropdown caret spacing */
.nav-links a{white-space:nowrap}