:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --accent1:#7A00FF;
  --accent2:#C600FF;
  --dark:#062044;
  --muted:#6b7280;
  --radius:12px;
  --maxw:1200px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, Poppins, system-ui, Arial, sans-serif;background:var(--bg);color:#0f172a;line-height:1.5}
a{color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:20px}

/* header */
.header{background:linear-gradient(90deg,var(--dark),#0b2340);padding:18px 0;position:sticky;top:0;z-index:50}
.header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:56px}
.nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:600;opacity:0.95}
.nav a:hover{opacity:1;color:var(--accent1)}

/* hero */
.hero{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:56px 0;background:
  linear-gradient(180deg, rgba(6,9,26,0.5), rgba(6,9,26,0.25)),
  url('https://images.unsplash.com/photo-1565182999561-1b1a2b9c6f22?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;color:#fff}
.hero .left{max-width:640px}
.hero h1{font-size:2.6rem;margin:0 0 12px;letter-spacing:0.3px}
.hero p{margin:0 0 18px;color:rgba(255,255,255,0.9)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none;display:inline-block}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;box-shadow:0 10px 30px rgba(122,0,255,0.12)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.12);color:#fff}

/* sections */
.section{background:var(--card);border-radius:var(--radius);padding:32px;margin:28px 0;box-shadow:0 8px 30px rgba(2,6,23,0.06)}
.section h2{color:var(--dark);margin-top:0}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{padding:18px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.muted{color:var(--muted)}

/* portfolio */
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.portfolio img{width:100%;height:200px;object-fit:cover;border-radius:10px;display:block}

/* testimonials */
.testimonials{display:flex;gap:16px;flex-wrap:wrap}
.testimonial{flex:1 1 300px;background:linear-gradient(180deg,#fff,#f7f9fb);padding:16px;border-radius:10px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e9ee;font-size:1rem}
textarea{min-height:140px;resize:vertical}

/* footer */
.footer{background:var(--dark);color:#fff;padding:28px;text-align:center;border-top:4px solid rgba(255,255,255,0.03)}

@media(max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .portfolio{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .hero{flex-direction:column;text-align:center;padding:50px 20px}
}
@media(max-width:600px){
  .grid-3{grid-template-columns:1fr}
  .portfolio{grid-template-columns:1fr}
  .nav a{display:none}
  .logo img{height:48px}
  .hero h1{font-size:1.8rem}
}