:root{
  --bg:#0b1110;
  --surface:#0f151a;
  --card:#101820;
  --line:#1b2a33;
  --text:#e6edf3;
  --muted:#9fb0be;
  --accent:#22d3ee; /* cyan */
  --accent-2:#60a5fa; /* blue */
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 800px at 75% -10%, rgba(34,211,238,.12), transparent),
              radial-gradient(1000px 700px at 0% 20%, rgba(96,165,250,.12), transparent),
              var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height:1.6;
}

.container{width:min(1100px, 92vw); margin-inline:auto}
.section-slim{margin-block:3.5rem}
header.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .9rem 0;}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.2px}
.brand .logo{width:34px; height:34px}
.brand-text{font-family:"Plus Jakarta Sans", Inter, system-ui, sans-serif; font-weight:800}
.nav-list{display:flex; list-style:none; gap:.6rem; padding:0; margin:0; align-items:center}
.nav-list a{color:var(--muted); text-decoration:none; padding:.55rem .8rem; border-radius:12px; border:1px solid transparent}
.nav-list a:hover{color:var(--text); border-color:var(--line); background:#0f171d}
.nav-list a.active{color:#0d1720; background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1rem; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:var(--text); transition:.2s ease; box-shadow:var(--shadow); background: #0f171d}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#041014; border-color:transparent; font-weight:700}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text)}
.link{color:var(--accent); text-decoration:none}
.link:hover{text-decoration:underline}
.nav-toggle{display:none; background:transparent; border:0; padding:.2rem .25rem}
.nav-toggle .bar{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px}

.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; padding: 3.2rem 0 2rem}
.hero .xl{font-family:"Plus Jakarta Sans", Inter, sans-serif; font-weight:800; font-size: clamp(2.2rem, 3.3vw + .8rem, 4rem); line-height:1.05; letter-spacing:-.02em}
.hero p{color:var(--muted); max-width:54ch}
.grad{background: linear-gradient(135deg,var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta-row{display:flex; gap:.8rem; margin-top:1.1rem}
.hero-badges{display:flex; flex-wrap:wrap; gap:.6rem; padding:0; list-style:none; margin-top:1rem}
.hero-badges li{padding:.38rem .6rem; border-radius:999px; border:1px solid var(--line); font-size:.9rem; color:var(--muted)}

.hero-art img{width:100%; height:auto; filter: drop-shadow(0 10px 40px rgba(0,0,0,.5))}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr)}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr)}
.gap{gap:1rem}
.card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), #0b1217);
  border:1px solid var(--line); border-radius: var(--radius); padding:1.1rem; box-shadow: var(--shadow);
}
.card h3{margin-top:0}
.section-head{display:flex; align-items:end; justify-content:space-between}
.work-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.work-card{display:block; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#0e151b; box-shadow:var(--shadow); text-decoration:none; color:var(--text)}
.work-card img{width:100%; height:auto; display:block}
.work-meta{display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border-top:1px solid var(--line); color:var(--muted)}
.banner{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; background: linear-gradient(180deg, rgba(34,211,238,.12), rgba(34,211,238,0)); box-shadow:var(--shadow)}
.banner.alt{background: linear-gradient(180deg, rgba(96,165,250,.12), rgba(96,165,250,0));}

.page-hero{padding: 2.2rem 0 1rem}
.page-hero p{color:var(--muted)}

.service .checklist, .checklist{
  list-style:none; padding-left:0; margin: .8rem 0 0;
}
.checklist li{position:relative; padding-left:1.6rem; margin:.35rem 0}
.checklist li:before{content:"✓"; position:absolute; left:.2rem; color:var(--accent)}

.bullet{list-style: disc; padding-left:1.2rem; margin:.5rem 0 0}
.tags{display:flex; gap:.5rem; list-style:none; padding:0; margin:.6rem 0 0}
.tags li{padding:.2rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.85rem}

.price{margin-top:.9rem; color:var(--muted)}

.section-slim .grid-3 .card{min-height:160px}

.case img{width:100%; border-radius: 12px}
.case-body h3{margin:.6rem 0 .2rem}
.case-body p{color:var(--muted)}

.contact-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem}
.form .field{display:grid; gap:.35rem}
.form input, .form select, .form textarea{
  background:#0f171d; border:1px solid var(--line); padding:.8rem .9rem; border-radius:12px; color:var(--text); font:inherit
}
.form input:focus, .form select:focus, .form textarea:focus{outline:none; border-color: var(--accent)}
.form-foot{color:var(--muted)}

.site-footer{margin-top:3rem; border-top:1px solid var(--line); background:#0a1015}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:1rem; padding:1.4rem 0}
.footer-brand p{color:var(--muted)}
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin:.2rem 0}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; border-top:1px solid var(--line); color:var(--muted)}
.icon-link{color:var(--muted)}
.icon-link:hover{color:var(--text)}
.logo.small{width:28px; height:28px}

.reveal{opacity:0; transform: translateY(10px); transition: .5s ease}
.reveal.show{opacity:1; transform:none}

@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr; gap:1rem}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  nav.nav{position:absolute; inset:64px 0 auto 0; background:#0a1015; border-bottom:1px solid var(--line); display:none}
  nav.nav.open{display:block}
  .nav-list{flex-direction:column; align-items:stretch; gap:0}
  .nav-list a{border-radius:0; padding:1rem; border-bottom:1px solid var(--line)}
  .banner{flex-direction:column; gap:1rem; text-align:center}
}