:root{
  --bg:#0b0d10; --panel:#12161b; --muted:#9aa4b2;
  --text:#e6edf3; --brand:#4cc2ff; --brand-2:#7cffb2;
  --ring:#78b0ff40; --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  background:linear-gradient(180deg,#0b0d10 0%, #0f1318 100%);
  color:var(--text); line-height:1.55;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

.container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.pad-block{padding:64px 0}

.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{
  left:12px; top:12px; background:#fff; color:#000; padding:8px 10px; z-index:999;
}

.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(6px);
  background:rgba(11,13,16,.6); border-bottom:1px solid #1b222b;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700; letter-spacing:.2px}
.nav-toggle{display:none; background:transparent; color:var(--text); border:1px solid #2a3240; padding:8px 10px; border-radius:8px}
.site-nav{display:flex; gap:18px; align-items:center}
.site-nav a{color:var(--text); opacity:.9; padding:8px 10px; border-radius:8px}
.site-nav a.active{background:#1a212b}
.btn{display:inline-block; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#071018;
  padding:12px 16px; border-radius:10px; font-weight:700; box-shadow:var(--shadow); border:0}
.btn:hover{text-decoration:none; filter:saturate(1.1)}
.btn-secondary{background:#1a212b; color:var(--text); box-shadow:none; border:1px solid #2a3240}
.btn-small{padding:8px 12px; font-size:.95rem}

.hero {
    width: 100%;
    padding: 80px 0;
    background: linear-gradient(135deg, #0b0d10, #16202c);
}

.hero-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-copy {
    width: 100%;
    text-align: center;
}

.hero-copy h1 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-copy p {
    max-width: 900px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 1.15rem;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.hero-media img {
    border-radius: 14px;
    border: 1px solid #212a35;
    box-shadow: var(--shadow);
}

--------------------------------------------------------
.features {
    padding: 60px 0;
}

.features h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
}

.office-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.office-grid .card {
    background: var(--panel);
    border: 1px solid #1b222b;
    border-radius: 14px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.office-grid .card h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--brand);
    font-size: 1.5rem;
}

.office-grid .card p {
    margin: 12px 0;
    line-height: 1.7;
}

.office-grid .card a {
    color: var(--brand);
    text-decoration: none;
}

.office-grid .card a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .office-grid {
        grid-template-columns: 1fr;
    }
}


.card{background:var(--panel); border:1px solid #1b222b; padding:18px; border-radius:14px}
.service .price{color:var(--brand-2); font-weight:700}

.cta-band{padding:48px 0; background: radial-gradient(1200px 600px at 50% -10%, #102232, transparent 60%)}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.btn-light{background:#e6edf3; color:#071018}

.site-footer{padding:28px 0; border-top:1px solid #1b222b; background:#0b0f14}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:18px}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.form .field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.form input, .form textarea{
  background:#0e1319; color:var(--text); border:1px solid #283141; border-radius:10px; padding:12px;
  outline:none; box-shadow:none;
}
.form input:focus, .form textarea:focus{border-color:#78b0ff; box-shadow:0 0 0 3px var(--ring)}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .cta-inner{flex-direction:column; text-align:center}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .site-nav{display:none}
  .nav-toggle{display:inline-block}
  .site-nav.open{display:flex; flex-direction:column; position:absolute; right:4%; top:58px; background:#0c1218; padding:10px; border:1px solid #1b2230; border-radius:12px}
}