*,
*::before,
*::after{box-sizing:border-box;}
body{margin:0;font-family:'Poppins',system-ui,sans-serif;color:#020617;background:#050816;}
a{text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1120px;margin:0 auto;padding:0 16px;}

/* Header */
.site-header{position:sticky;top:0;background:rgba(5,8,22,0.96);backdrop-filter:blur(14px);z-index:40;border-bottom:1px solid rgba(148,163,184,0.25);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
.logo img{height:92px;}
.main-nav{display:flex;gap:24px;}
.main-nav a{color:#e5e7eb;font-size:.92rem;font-weight:500;position:relative;}
.main-nav a::after{content:'';position:absolute;left:0;bottom:-4px;height:2px;width:0;background:linear-gradient(90deg,#f97316,#ec4899,#3b82f6);transition:width .25s;}
.main-nav a:hover::after,.main-nav a.active::after{width:100%;}
.mobile-menu{display:none;font-size:1.4rem;color:#e5e7eb;background:none;border:none;cursor:pointer;}
.mobile-nav{display:none;flex-direction:column;background:#050816;border-bottom:1px solid rgba(148,163,184,0.2);padding:8px 16px 14px;}
.mobile-nav a{padding:6px 0;color:#e5e7eb;font-size:.92rem;}

/* Hero */
.hero{position:relative;overflow:hidden;color:#f9fafb;padding:80px 0 70px;}
.hero-bg{position:absolute;inset:-10%;background:
 radial-gradient(circle at 0% 0%,rgba(236,72,153,0.5),transparent 55%),
 radial-gradient(circle at 100% 0%,rgba(59,130,246,0.5),transparent 55%),
 radial-gradient(circle at 50% 100%,rgba(239,68,68,0.5),transparent 60%);
opacity:0.8;filter:blur(12px);}
.hero-grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center;}
.hero-tag{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#bfdbfe;margin-bottom:10px;}
.hero h1{font-size:2.6rem;margin:0 0 10px;}
.hero h1 span{background:linear-gradient(90deg,#f97316,#ec4899,#3b82f6);-webkit-background-clip:text;color:transparent;}
.hero-text{max-width:520px;margin:0 0 18px;font-size:.98rem;color:#e5e7eb;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;}
.hero-chips span{background:rgba(15,23,42,0.8);border-radius:999px;padding:6px 10px;color:#e5e7eb;border:1px solid rgba(148,163,184,0.4);}
.hero-right{display:flex;flex-direction:column;gap:12px;}
.hero-card{background:rgba(15,23,42,0.9);border-radius:20px;padding:14px 16px;border:1px solid rgba(148,163,184,0.5);box-shadow:0 18px 40px rgba(15,23,42,0.75);}
.hero-card h3{margin:0 0 6px;font-size:1.02rem;}
.hero-card p{margin:0;font-size:.86rem;color:#cbd5f5;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border-radius:999px;font-size:.9rem;font-weight:500;border:1px solid rgba(148,163,184,0.8);background:rgba(15,23,42,0.85);color:#e5e7eb;gap:6px;}
.btn.primary{background:linear-gradient(120deg,#f97316,#ec4899,#3b82f6);border-color:transparent;box-shadow:0 12px 30px rgba(15,23,42,0.9);}
.btn.ghost{background:transparent;}
.btn i{font-size:.85rem;}

/* Sections */
.section{padding:60px 0;background:#050816;}
.section.alt{background:#020617;}
.section-title{text-align:center;font-size:1.6rem;margin-bottom:10px;color:#f9fafb;}
.section-sub{text-align:center;font-size:.9rem;color:#9ca3af;margin-bottom:24px;}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
.service-column{background:#020617;border-radius:22px;padding:20px;border:1px solid rgba(148,163,184,0.5);box-shadow:0 18px 40px rgba(15,23,42,0.75);}
.service-column h3{margin:0 0 8px;color:#f9fafb;font-size:1.05rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.service-column p{margin:0 0 10px;font-size:.9rem;color:#e5e7eb;}
.service-column ul{margin:0;padding-left:18px;font-size:.86rem;color:#cbd5f5;}
.badge{border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
.badge.pink{background:#f472b6;color:#0f172a;}
.badge.blue{background:#60a5fa;color:#020617;}

/* About */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:flex-start;}
.about-grid p{font-size:.93rem;color:#e5e7eb;line-height:1.7;}
.timeline{list-style:none;margin:10px 0 0;padding:0;}
.timeline li{margin-bottom:12px;padding-left:12px;border-left:2px solid #3b82f6;}
.timeline-title{display:block;font-weight:600;font-size:.9rem;color:#e5e7eb;}
.timeline-sub{display:block;font-size:.82rem;color:#9ca3af;margin-top:2px;}

/* Work preview */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;}
.work-card{background:#020617;border-radius:18px;overflow:hidden;border:1px solid rgba(148,163,184,0.4);box-shadow:0 14px 35px rgba(15,23,42,0.8);display:flex;flex-direction:column;cursor:pointer;transition:transform .2s,box-shadow .2s,translate .2s;}
.work-card img{height:150px;object-fit:cover;}
.work-card:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(15,23,42,0.95);}
.work-info{padding:10px 12px 12px;}
.work-info h3{margin:4px 0 0;font-size:.96rem;color:#f9fafb;}
.work-text{font-size:.86rem;color:#e5e7eb;margin-top:4px;}
.chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 9px;font-size:.75rem;font-weight:500;}
.chip.pink{background:#f472b6;color:#02131d;}
.chip.blue{background:#60a5fa;color:#020617;}
.chip.purple{background:#a855f7;color:#020617;}

/* Page hero */
.page-hero{padding:70px 0 40px;text-align:center;background:#020617;color:#e5e7eb;}
.page-hero.colorful{background:linear-gradient(135deg,#020617,#111827);}
.page-section{padding:40px 0 60px;background:#050816;}

/* Projects / contact */
.project-list{display:grid;gap:18px;margin-top:10px;}
.project-card{background:#020617;border-radius:18px;padding:16px;border:1px solid rgba(148,163,184,0.5);box-shadow:0 14px 35px rgba(15,23,42,0.8);}
.project-card h3{margin:0 0 6px;color:#f9fafb;}
.project-card p{margin:0 0 6px;font-size:.9rem;color:#e5e7eb;}
.project-tags{font-size:.8rem;color:#60a5fa;}

.contact-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;}
.contact-form{display:grid;gap:12px;}
.contact-form input,.contact-form textarea{padding:10px 12px;border-radius:14px;border:1px solid #4b5563;background:#020617;color:#e5e7eb;font-family:inherit;font-size:.9rem;}
.contact-form textarea{min-height:130px;resize:vertical;}
.contact-form button{border:none;cursor:pointer;}
.contact-side h3{margin-top:0;color:#f9fafb;}
.contact-side p{font-size:.9rem;color:#e5e7eb;}

/* Footer */
.site-footer{background:#020617;color:#cbd5f5;padding-top:32px;}
.footer-grid{display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:22px;padding-bottom:16px;}
.site-footer h3,.site-footer h4{margin-top:0;}
.site-footer a{color:#e5e7eb;font-size:.86rem;}
.footer-bottom{text-align:center;padding:12px 0 16px;border-top:1px solid #111827;font-size:.78rem;}

/* Responsive */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-right{order:-1;}
  .services-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .main-nav{display:none;}
  .mobile-menu{display:block;}
  .logo img{height:44px;}
  .mobile-nav{display:none;}
  .hero{padding:70px 0 50px;}
  .hero h1{font-size:2rem;}
  .work-grid,.footer-grid{grid-template-columns:1fr;}
}

/* WhatsApp Floating Button */
.whatsapp-float{
  position:fixed;
  width:58px;
  height:58px;
  bottom:26px;
  right:22px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  text-align:center;
  font-size:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  z-index:999;
  transition:transform .2s ease;
}
.whatsapp-float:hover{
  transform:scale(1.1);
  background:#1ebe5b;
}