:root{
  --bg:#0b0d10; --surface:#12161b; --card:#151a20; --muted:#9aa4b2; --text:#eaf0f6; --brand:#5d8aff; --brand-2:#7ef3c7; --accent:#ffd166;
  --ring:0 0 0 3px color-mix(in oklab, var(--brand) 45%, transparent);
  --radius:14px; --radius-sm:10px; --shadow:0 10px 24px rgba(0,0,0,.28);
  --maxw:1150px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:linear-gradient(180deg,#0b0d10 0%, #0f1318 60%, #0b0d10 100%); color:var(--text); font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 clamp(16px,4vw,28px)}
.pill{display:inline-flex; gap:.5rem; align-items:center; border:1px solid #263140; color:var(--muted); background:#0d1117; border-radius:999px; padding:.35rem .7rem; font-size:.85rem}
.btn{display:inline-flex; align-items:center; gap:.6rem; background:linear-gradient(135deg,var(--brand),#6aa8ff); color:#fff; border:none; border-radius:12px; padding:.9rem 1.1rem; font-weight:600; box-shadow:var(--shadow); cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border:1px solid #2a3340; box-shadow:none; color:var(--text)}
.btn .icon{width:1.15rem; height:1.15rem}
header.site{position:sticky; top:0; z-index:30; backdrop-filter:saturate(150%) blur(8px); background:rgba(11,13,16,.6); border-bottom:1px solid rgba(148,163,184,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.7rem 0}
.brand{display:flex; gap:.75rem; align-items:center; font-weight:800; letter-spacing:.2px}
.logo{inline-size:34px; block-size:34px; border-radius:10px; background:#000; display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.4)}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1.1rem}
nav a{color:var(--text); padding:.6rem .8rem; border-radius:10px}
nav a:hover{background:#141a21; text-decoration:none}
.desktop-nav a.active{background:#1a2230; border:1px solid #2a3340}
.menu-toggle{display:none}
.mobile{display:none; position:absolute; left:0; right:0; top:62px; background:#0c1015; border-bottom:1px solid #1c2531; padding:10px}
.mobile a{display:block; padding:.9rem 1rem; border-radius:10px}
@media (max-width:860px){
  nav ul{display:none}
  .menu-toggle{display:inline-flex}
}

.hero{padding: clamp(40px, 8vw, 90px) 0 36px; position:relative; overflow:hidden}
.glow{position:absolute; inset:auto -20% -25% -20%; height:460px; background: radial-gradient(1200px 220px at 50% 0%, rgba(93,138,255,.35), transparent 65%); pointer-events:none}
.grid{display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 48px)}
@media (max-width:960px){ .grid{grid-template-columns:1fr} }
.hero h1{font-size: clamp(2rem, 4vw + .8rem, 3.2rem); line-height:1.08; margin:.2rem 0 .6rem}
.lead{color:var(--muted); font-size: clamp(1rem, 1.6vw + .6rem, 1.25rem)}
.hero-card{background:linear-gradient(180deg,#121821, #0e141b); border:1px solid #1b2532; border-radius:var(--radius); padding: clamp(16px, 3.5vw, 26px); box-shadow:var(--shadow)}
.cta-row{display:flex; gap:.6rem; margin-top:12px}
.stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px}
.stat{background:#0f141b; border:1px solid #1b2532; border-radius:12px; padding:14px}
.stat strong{font-size:1.2rem}
.section{padding: clamp(28px, 6vw, 80px) 0}
.section h2{font-size: clamp(1.6rem, 2.4vw + .6rem, 2.2rem); margin:0 0 8px}
.muted{color:var(--muted)}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px}
@media (max-width:980px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }
.card{background:linear-gradient(180deg,#121821, #0e141b); border:1px solid #1b2532; border-radius:var(--radius-sm); padding:18px; box-shadow:var(--shadow); display:flex; gap:12px}
.card .icon{width:34px; height:34px; border-radius:9px; background:#0b0f15; display:grid; place-items:center; border:1px solid #1b2532; flex:0 0 auto}
.card h3{margin:.2rem 0 .25rem; font-size:1.05rem}
.tag{display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; padding:.35rem .6rem; border-radius:999px; background:#0f151d; border:1px solid #1b2532; color:var(--muted)}
.process{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:18px}
@media (max-width:980px){ .process{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .process{grid-template-columns:1fr} }
.step{position:relative; padding:16px 16px 16px 52px; background:#0f141b; border:1px solid #1b2532; border-radius:12px}
.step .num{position:absolute; left:12px; top:14px; width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:#0b0f15; border:1px solid #1b2532; font-weight:700}
.portfolio{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px}
@media (max-width:980px){ .portfolio{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .portfolio{grid-template-columns:1fr} }
.shot{border-radius:14px; overflow:hidden; border:1px solid #1b2532; background:#0f141b}
.shot img{aspect-ratio:16 / 10; object-fit:cover; filter:saturate(1.02) contrast(1.02)}
.shot .meta{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; color:var(--muted); font-size:.92rem}
.testimonial{background:linear-gradient(180deg,#121821, #0e141b); border:1px solid #1b2532; border-radius:var(--radius); padding:18px; display:flex; gap:16px}
.avatar{width:48px; height:48px; border-radius:50%; background:#0b0f15; border:1px solid #1b2532}
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px}
@media (max-width:980px){ .pricing{grid-template-columns:1fr} }
.plan{background:linear-gradient(180deg,#121821, #0e141b); border:1px solid #2b3645; border-radius:16px; padding:20px}
.price{font-size:2rem; font-weight:800}
.features{margin:10px 0 0; padding:0 0 0 18px; color:var(--muted)}
form{display:grid; gap:12px; margin-top:14px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){ .row{grid-template-columns:1fr} }
input, textarea, select{width:100%; background:#0b0f15; color:var(--text); border:1px solid #1b2532; border-radius:12px; padding:.8rem .9rem; outline:none}
textarea{min-height:120px; resize:vertical}
input:focus, textarea:focus, select:focus{box-shadow:var(--ring); border-color: color-mix(in oklab, var(--brand) 60%, #1b2532)}
.footer{border-top:1px solid #1b2532; padding:22px 0; color:#98a2b3; display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center}
.small{font-size:.92rem}
.skip{position:absolute; left:10px; top:-40px; background:#11161d; border:1px solid #263140; padding:.5rem .8rem; border-radius:8px; color:var(--text); z-index:100}
.skip:focus{top:10px}
.page-hero{padding: clamp(44px, 10vw, 120px) 0 24px; background:linear-gradient(180deg,#0e1418,#0c1117)}
.page-hero h1{font-size: clamp(1.8rem, 3.6vw + .6rem, 2.6rem); margin:0 0 6px}
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:14px}
@media (max-width:980px){ .team{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .team{grid-template-columns:1fr} }
.person{background:#0f141b; border:1px solid #1b2532; border-radius:14px; padding:12px; text-align:center}
.gradient-text{background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.fade-in{opacity:0; transform:translateY(10px); animation: fade .7s ease .1s forwards}
@keyframes fade{to{opacity:1; transform:none}}
.stack-tags{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.form-actions{display:flex; gap:.6rem; align-items:center}