@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root{
  --bg:#f7f9fc;
  --card:#ffffff;
  --text:#0f1724;
  --muted:#6b7280;
  --accent:#0b5cff;
  --radius:12px;
  --container:1100px;
  --gap:24px;
}
*{box-sizing:border-box}
body{font-family:'Satoshi', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;line-height:1.5;color:var(--text);background:var(--bg);margin:0}
.container{max-width:var(--container);margin:0 auto;padding:48px 20px}
.site-header{
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position:sticky;
  top:0;
  z-index:40;
  transition: background-color .2s ease, box-shadow .2s ease;
  border-bottom: 1px solid rgba(15,23,36,0.04);
}
/* tighter header spacing so logo/nav don't create extra vertical space */
.site-header .container{padding:12px 20px}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand{font-weight:700;font-size:1.1rem}
.logo img{
  height:130px;
  width:auto;
  display:block;
  transition:height .18s ease, transform .18s ease;
  min-height:130px;
}

@media (max-width:920px){
  .logo img{height:110px}
}

@media (max-width:720px){
  .logo img{height:90px}
}

@media (max-width:420px){
  .logo img{height:70px}
}
.nav a{margin-left:18px;text-decoration:none;color:var(--muted)}
.theme-toggle{background:transparent;border:1px solid rgba(15,23,36,0.06);padding:6px;min-width:40px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.theme-toggle img{width:18px;height:18px;display:block}
.theme-toggle:hover{background:rgba(15,23,36,0.04)}
.hero{padding:80px 0;background:linear-gradient(180deg, rgba(11,92,255,0.08), transparent);}
.hero-inner{display:grid;gap:20px;max-width:900px}
.hero h1{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:0}
.lead{color:var(--muted);font-size:1.05rem}
.hero-ctas{display:flex;gap:12px;margin-top:8px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;border:1px solid transparent;font-weight:600}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border-color:rgba(15,23,36,0.06);color:var(--muted)}
.section{padding:48px 0}
.services .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap)}
.card{background:var(--card);padding:20px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(11,23,60,0.06)}
.about p{color:var(--muted);max-width:100%;width:100%}
.contact-form{max-width:100%;width:100%;margin-top:16px;display:grid;gap:12px}
.field label{display:block;font-size:.9rem;margin-bottom:6px}
.field input,.field textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(15,23,36,0.08);background:transparent}
.form-actions{display:flex;gap:12px;align-items:center}
.site-footer{border-top:1px solid rgba(15,23,36,0.06);margin-top:48px;background:transparent}
.footer-inner{padding:24px 20px;display:flex;justify-content:center}

/* Light / explicit theme override (use body.theme-light to force) */
.theme-light{
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#4b5563;
  --accent:#174871;
  --text:#0f1724;
}
.theme-light .site-header{
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(15,23,36,0.06);
}

/* If user explicitly forces dark */
.theme-dark{
  --bg: linear-gradient(180deg, #0F2D4D, #174871);
  --text: #e6eef8;
}
.theme-dark .site-header{
  background: rgba(7,23,40,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

@media (prefers-color-scheme: dark){
  :root{--bg:#071028;--card:#07172a;--muted:#9aa6b2}
  :root{--text:#e6eef8}
  .nav a{color:var(--muted)}
  .site-header{
    background: rgba(7,23,40,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }
}