/* =============
   sheelsoft — styles
   ============= */
:root{
  --bg:#070815;
  --bg-alt:#0c0e1d;
  --card:#101229;
  --text:#e9ebff;
  --muted:#a8afc7;
  --brand:#7c5cff;
  --brand-2:#00d2ff;
  --accent:#23d5ab;
  --glass: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(900px 500px at 110% 10%, rgba(0,210,255,.15), transparent 60%),
              var(--bg);
  line-height:1.6;
}

.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(7,8,21,.85), rgba(7,8,21,.6));
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.brand{font-family:Poppins, sans-serif; font-weight:800; letter-spacing:0.5px; text-decoration:none; color:var(--text); font-size:1.3rem}
.brand span{color:var(--brand)}
.navbar nav{display:flex; gap:18px; align-items:center}
.navbar nav a{color:var(--muted); text-decoration:none; font-weight:500; padding:8px 10px; border-radius:10px}
.navbar nav a:hover{color:var(--text); background:var(--glass)}
.navbar .cta{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0f1a !important; font-weight:800}
.navbar .cta:hover{filter:brightness(1.1)}

/* Mobile menu */
.menu-btn{display:none; flex-direction:column; gap:5px; background:transparent; border:0; cursor:pointer}
.menu-btn span{display:block; width:24px; height:2px; background:var(--text); transition:.3s}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none; position:fixed; top:52px; left:0; right:0; background:var(--bg-alt); border-bottom:1px solid var(--border); padding:10px 20px}
.mobile-menu.open{display:grid; gap:10px}
.mobile-menu a{color:var(--text); text-decoration:none; padding:12px 8px; border-radius:10px}
.mobile-menu .cta{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0f1a; font-weight:800}

/* Hero */
.hero{
  position:relative;
  min-height:78vh;
  display:grid; place-items:center;
  background: url('https://images.unsplash.com/photo-1542831371-29b0f74f9713?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat;
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,8,21,.75), rgba(7,8,21,.85));
}
.hero-inner{
  position:relative; z-index:1; padding:90px 0 70px; text-align:center;
}
.hero h1{font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.15; margin:0 0 12px; letter-spacing:.3px}
.hero p{color:var(--muted); max-width:760px; margin:0 auto 24px}
.gradient{background: linear-gradient(135deg, var(--brand), var(--brand-2), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800}
.hero-cta{display:flex; gap:12px; justify-content:center}
.hero-badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.badge{background:var(--glass); border:1px solid var(--border); padding:6px 10px; border-radius:999px; color:var(--muted); font-weight:600}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:700; letter-spacing:.2px; border:1px solid var(--border); transition:.2s; cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0f1a}
.btn.primary:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.ghost{background:transparent; color:var(--text)}
.btn.ghost:hover{background:var(--glass)}

/* Sections */
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section-title{font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0 0 24px}

/* Cards (Services) */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--glass); border:1px solid var(--border); border-radius:18px; overflow:hidden; transform:translateY(10px); opacity:0; transition:.5s}
.card.revealed{transform:translateY(0); opacity:1}
.card img{width:100%; height:220px; object-fit:cover}
.card-body{padding:16px 16px 18px}
.card h3{margin:0 0 6px}
.card p{color:var(--muted); margin:0}

/* About */
.about{display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; align-items:center}
.about-media img{width:100%; height:auto; border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow)}
.checks{padding:0; margin:16px 0 18px; list-style:none}
.checks li{margin:6px 0; padding-left:26px; position:relative}
.checks li:before{content:"✓"; position:absolute; left:0; color:var(--accent)}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:22px; text-align:center; transform:translateY(10px); opacity:0; transition:.5s}
.stat.revealed{transform:translateY(0); opacity:1}
.stat-number{font-size:2.2rem; font-weight:800}
.stat-label{color:var(--muted)}

/* Duo panels */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center}
.duo.reverse{direction:rtl}
.duo.reverse .panel{direction:ltr}
.panel img{width:100%; border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow)}

/* Testimonials */
.slider{background:var(--glass); border:1px solid var(--border); border-radius:20px; padding:22px}
.slides{position:relative; min-height:140px}
.slide{position:absolute; inset:0; opacity:0; transform:translateY(10px); transition:.5s}
.slide.active{opacity:1; transform:translateY(0)}
blockquote{margin:0 0 8px; font-size:1.2rem; line-height:1.5}
figcaption{color:var(--muted)}
.slider-controls{display:flex; gap:8px; justify-content:center; margin-top:8px}
.dot{width:10px; height:10px; border-radius:50%; background:#39405f; border:0; cursor:pointer}
.dot.active{background:linear-gradient(135deg, var(--brand), var(--brand-2))}

/* Contact */
.contact{display:grid; grid-template-columns:1fr 1.1fr; gap:24px; align-items:start}
.contact-list{list-style:none; padding:0; margin:12px 0 0; color:var(--muted)}
.contact-list li{display:flex; align-items:center; gap:8px; margin:6px 0}
.contact-form{background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.contact-form label{display:grid; gap:6px}
.contact-form label.full{grid-column:1/-1}
.contact-form input, .contact-form textarea{
  background:#0d1022; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:12px; outline: none;
}
.form-actions{grid-column:1/-1; display:flex; gap:12px; align-items:center}
.form-note{color:var(--accent); margin:4px 0 0}

/* Footer */
.footer{border-top:1px solid var(--border); padding:18px 0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.to-top{color:var(--text); text-decoration:none; background:var(--glass); padding:8px 10px; border-radius:12px; border:1px solid var(--border)}

/* Reveal animation */
[data-reveal]{opacity:0; transform: translateY(14px); transition: .6s ease}
.revealed{opacity:1 !important; transform: translateY(0) !important}

/* Responsive */
@media (max-width: 980px){
  .cards{grid-template-columns:1fr 1fr}
  .about, .duo, .contact{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .navbar nav{display:none}
  .menu-btn{display:flex}
}
@media (max-width: 560px){
  .cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}
}