:root{
  --brand:#0e65ae;
  --accent:#f6b11a;
  --bg:#0b1220;
  --text:#0c1324;
  --muted:#61708d;
  --card:#ffffff;
  --light:#f6f8fb;
  --border:#e6ecf3;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Segoe UI", Tahoma, Arial, "Helvetica Neue", sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.75;
}

.hidden { display: none; }

.error {
  border: 2px solid red !important;
  background-color: #ffe5e5;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  display: none;
}

.spinner {
  width: 45px;
  height: 45px;
  border: 4px solid #ddd;
  border-top-color: #0a6cff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}


.container{max-width:1100px;margin-inline:auto;padding:0 20px}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
h1{font-size:clamp(28px,3.2vw,42px)}
h2{font-size:clamp(22px,2.2vw,32px)}
h3{font-size:clamp(18px,1.8vw,24px)}
p{margin:0 0 1rem}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.list-unstyled{list-style:none;margin:0;padding:0}

.site-header{
  position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10
}
.nav{
  display:flex;align-items:center;justify-content:space-between;height:64px
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--brand)}
.brand img{height:42px;width:auto;display:block}
.nav-links{display:flex;gap:1rem}
.nav-links a{padding:.5rem .8rem;border-radius:.6rem}
.nav-links a:hover{background:var(--light);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;font-size:28px}

@media (max-width: 820px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;inset-inline:0;top:64px;background:#fff;border-bottom:1px solid var(--border);display:none;flex-direction:column;padding:10px}
  .nav-links.open{display:flex}
}

.hero{
  background:linear-gradient(180deg,#f6f9ff, #fff);
  border-bottom:1px solid var(--border)
}
.hero-inner{
  display:grid;grid-template-columns:1.4fr .8fr;gap:2rem;align-items:center;min-height:60vh;padding:40px 0
}
.hero-art img{width:100%;max-width:380px;opacity:.95;display:block;margin-inline:auto}
.hero-text h1{font-weight:800}
.hero-text .accent{color:var(--brand)}
.hero-cta{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}

.btn{display:inline-block;border:1px solid var(--brand);padding:.75rem 1.1rem;border-radius:.8rem;font-weight:700}
.btn-primary{background:var(--brand);color:#fff}
.btn-outline{color:var(--brand);background:#fff}
.btn:hover{text-decoration:none;transform:translateY(-2px);transition:.2s ease}

.services{padding:50px 0;background:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(8,26,81,.05)}
.card h3{color:var(--brand);margin-bottom:.4rem}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 580px){
  .cards{grid-template-columns:1fr}
}

.why{padding:50px 0;background:var(--light);border-top:1px solid var(--border)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 0}
.why-grid li{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px}
@media (max-width: 820px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
}

.page{padding:40px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0 24px}
@media (max-width: 820px){
  .split{grid-template-columns:1fr}
}

.pill-list{display:flex;gap:.6rem;flex-wrap:wrap}
.pill-list li{background:#fff;border:1px solid var(--border);border-radius:999px;padding:.4rem .8rem}

.form{display:grid;gap:12px;margin-top:10px}
.form input,.form textarea,.form select{
  width:100%;padding:.7rem .9rem;border:1px solid var(--border);border-radius:.7rem;background:#fff;font:inherit
}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid color-mix(in oklab, var(--brand) 35%, white);border-color:var(--brand)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 720px){ .grid-2{grid-template-columns:1fr}}

.job-list{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 10px}
.job{border:1px solid var(--border);border-radius:14px;background:#fff;padding:14px}
.job h3{margin-bottom:.2rem}
.badge{display:inline-block;background:var(--light);border:1px solid var(--border);border-radius:999px;padding:.15rem .6rem;margin-inline-start:.4rem;font-size:.85rem}

.site-footer{background:#0a0f19;color:#dbe4ff;margin-top:30px;padding:28px 0}
.site-footer a{color:#c7dbff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.copy{border-top:1px solid rgba(255,255,255,.08);margin-top:10px;padding-top:10px;color:#94a3b8}
@media (max-width: 820px){ .footer-grid{grid-template-columns:1fr} }

.accent{color:var(--accent)}
.actions{display:flex;align-items:center;gap:.8rem}