:root {
  --bg:#0b0d10;
  --grid:rgba(255,255,255,0.05);
  --card:rgba(18,20,24,0.85);
  --accent:#5BC4E8;
  --text:#e8eaed;
  --muted:#9aa0a6;
}

* { 
  box-sizing:border-box; 
  margin:0; 
  padding:0; 
}

html {
  scroll-behavior:smooth;
}

body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* GRID BACKGROUND */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at top, white 15%, transparent 70%);
  z-index:-1;
}

section { 
  min-height:100vh;
  padding:120px 8%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

h1,h2{
  text-align:center;
  font-weight:600;
  margin-bottom:60px;
  letter-spacing:-0.03em;
}

h1{ 
  font-size:clamp(2.4rem,4vw,3.2rem); 
}

h2{ 
  font-size:clamp(1.9rem,3vw,2.5rem); 
}

/* NAVBAR */
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 8%;
  background:rgba(11,13,16,0.8);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:1000;
}

.logo{
  width:50px;
  height:50px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(18,20,24,0.9);
  border:1px solid rgba(255,255,255,.08);
  transition:.3s ease;
  overflow:hidden;
}

.logo:hover{
  transform:scale(1.05);
  border-color:var(--accent);
  box-shadow:0 0 30px rgba(91,196,232,.3);
}

.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.nav-links{
  display:flex;
  gap:40px;
}

.nav-links a{
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  transition:.3s ease;
  position:relative;
}

.nav-links a::after{
  content:"";
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  background:var(--accent);
  transition:.3s ease;
}

.nav-links a:hover{
  color:var(--text);
}

.nav-links a:hover::after{
  width:100%;
}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;
  max-width:1200px;
  margin:auto;
  position:relative;
}

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:28px;
  backdrop-filter:blur(12px);
  transition:all .3s ease;
  cursor:pointer;
  position:relative;
}

.card::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top, var(--accent), transparent 70%);
  opacity:0;
  transition:.3s ease;
}

.card:hover{
  transform:translateY(-8px) scale(1.02);
  border-color:rgba(91,196,232,.45);
  box-shadow:0 20px 50px rgba(91,196,232,.2);
  z-index:10;
}

.card:hover::before {
  opacity:0.1;
}

.card h3{
  font-size:1.4rem;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}

.card-content{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
  margin-top:10px;
  position:relative;
  z-index:1;
}

.card-content p{
  margin-bottom:14px;
}

.stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.stat{
  background:rgba(255,255,255,.05);
  padding:8px 14px;
  border-radius:8px;
  font-size:.85rem;
  border:1px solid rgba(255,255,255,.05);
  transition:.3s ease;
}

.card:hover .stat {
  background:rgba(91,196,232,.1);
  border-color:rgba(91,196,232,.3);
}

/* SERVICES */
.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  max-width:1100px;
  margin:auto;
}

.service{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:24px;
  transition:.3s ease;
}

.service:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:0 10px 30px rgba(91,196,232,.15);
}

.service svg{
  width:28px;
  height:28px;
  margin-bottom:14px;
  stroke:var(--accent);
  transition:.3s ease;
}

.service:hover svg {
  transform:scale(1.1) rotate(5deg);
}

.service h4{
  font-weight:500;
  margin-bottom:6px;
}

.service span{
  font-size:.85rem;
  color:var(--muted);
}

/* PROCESS SECTION */
.process-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:32px;
  max-width:1200px;
  margin:auto;
}

.step{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:32px;
  transition:.3s ease;
}

.step:hover{
  transform:translateY(-8px);
  border-color:var(--accent);
  box-shadow:0 15px 40px rgba(91,196,232,.15);
}

.step-number{
  font-size:3rem;
  font-weight:700;
  color:var(--accent);
  opacity:0.3;
  margin-bottom:16px;
  line-height:1;
}

.step h4{
  font-size:1.3rem;
  margin-bottom:12px;
}

.step p{
  color:var(--muted);
  line-height:1.6;
  font-size:.95rem;
}

/* EXPERIENCE SECTION */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
  max-width:1000px;
  margin:0 auto 60px;
}

.stat-box{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:32px;
  text-align:center;
  transition:.3s ease;
}

.stat-box:hover{
  transform:translateY(-8px);
  border-color:var(--accent);
  box-shadow:0 15px 40px rgba(91,196,232,.15);
}

.stat-value{
  font-size:3rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:8px;
}

.stat-label{
  color:var(--muted);
  font-size:.9rem;
}

.tech-stack{
  max-width:800px;
  margin:auto;
  text-align:center;
}

.tech-stack h3{
  font-size:1.5rem;
  margin-bottom:24px;
}

.tech-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

.tech-tag{
  background:rgba(91,196,232,.1);
  border:1px solid rgba(91,196,232,.3);
  color:var(--accent);
  padding:8px 16px;
  border-radius:8px;
  font-size:.9rem;
  font-weight:500;
  transition:.3s ease;
}

.tech-tag:hover{
  background:rgba(91,196,232,.2);
  transform:translateY(-2px);
}

/* CONTACT SECTION */
.contact-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:32px;
  max-width:900px;
  margin:auto;
}

.contact-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:40px;
  display:flex;
  align-items:center;
  gap:24px;
  text-decoration:none;
  color:var(--text);
  transition:.3s ease;
  position:relative;
  overflow:hidden;
}

.contact-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, var(--accent), transparent 70%);
  opacity:0;
  transition:.3s ease;
}

.contact-card:hover{
  transform:translateY(-8px);
  border-color:var(--accent);
  box-shadow:0 20px 50px rgba(91,196,232,.2);
}

.contact-card:hover::before{
  opacity:0.05;
}

.contact-icon{
  width:70px;
  height:70px;
  background:rgba(91,196,232,.1);
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--accent);
  flex-shrink:0;
  transition:.3s ease;
  position:relative;
  z-index:1;
}

.contact-card:hover .contact-icon{
  background:rgba(91,196,232,.2);
  transform:scale(1.05);
}

.contact-info-text{
  flex:1;
  position:relative;
  z-index:1;
}

.contact-info-text h3{
  font-size:1.5rem;
  margin-bottom:6px;
}

.contact-info-text p{
  color:var(--muted);
  font-size:.95rem;
}

.arrow-icon{
  color:var(--accent);
  flex-shrink:0;
  transition:.3s ease;
  position:relative;
  z-index:1;
}

.contact-card:hover .arrow-icon{
  transform:translateX(6px);
}

footer{
  text-align:center;
  padding:40px;
  color:var(--muted);
  font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.06);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .nav-links{
    gap:20px;
  }
  
  .contact-links{
    grid-template-columns:1fr;
  }
  
  section{
    padding:80px 6%;
  }
  
  .contact-card{
    flex-direction:column;
    text-align:center;
  }
}