:root{--bg:#ffffff;--ink:#1a304f;--ink-2:#4a4e57;--brand:#0289f7;--brand-2:#35baf2;--mute:#f1f4f7;--ring:rgba(2,137,247,.25);--radius:18px;--radius-lg:28px;--shadow:0 8px 30px rgba(26,48,79,.10);}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,100% - 48px);margin-inline:auto}

/* Header */
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eef2f6}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink);letter-spacing:.3px}
.brand img{width:120px;max-height:45px}
.menu{display:flex;gap:28px;align-items:center}
.menu a{color:var(--ink);font-weight:600}
.menu a:hover{color:var(--brand)}
.burger{display:none;cursor:pointer;border:1px solid #e7edf4;border-radius:12px;padding:8px 10px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}
@media (max-width:1024px){.menu{display:none}.burger{display:block}}
.mobile-panel{display:none;position:fixed;inset:64px 16px auto 16px;background:#fff;border:1px solid #e6eef6;border-radius:16px;box-shadow:var(--shadow);padding:16px}
.mobile-panel a{display:block;padding:14px 10px;border-radius:10px;color:var(--ink);font-weight:600}
.mobile-panel a:hover{background:#f7fbff;color:var(--brand)}

/* Hero */
.hero{position:relative;min-height:66dvh;display:grid;place-items:center;overflow:hidden}
.hero video,.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.40))}
.hero-inner{position:relative;z-index:1;text-align:center;color:#fff;padding:72px 0}
.eyebrow{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.3px}
.hero h1{font-size:clamp(28px,5vw,56px);line-height:1.1;margin:14px auto 12px;max-width:960px;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.hero .cta{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:700;border:1px solid transparent;box-shadow:0 2px 0 rgba(0,0,0,.03)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:#117ee0}
.btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.14)}

/* Sections */
section{scroll-margin-top:84px}
.title{font-size:clamp(22px,3.6vw,32px);margin:0 0 6px}
.lead{color:var(--ink-2)}
.sep{width:180px;height:3px;background:var(--brand);border-radius:999px;margin:18px 0}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e9eef5;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:2px solid #d7e9fd}
.muted{background:var(--mute)}

/* About */
#about .badges{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.badge{border:1px solid #dde7f2;color:var(--ink);padding:8px 10px;border-radius:999px;font-weight:600;font-size:12px}

/* Certificates */
.cert a{display:flex;align-items:center;gap:12px;font-weight:700}
.cert small{color:var(--ink-2)}

/* Services */
.service h4{margin:10px 0 6px}
.service p{color:var(--ink-2);margin:0}

/* Schedule */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
select,input[type="search"],button{appearance:none;padding:10px 12px;border:1px solid #e1e8f0;border-radius:12px;outline:none}
select:focus,input[type="search"]:focus{box-shadow:0 0 0 6px var(--ring);border-color:#bfe1ff}
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid #e9eef5;border-radius:16px}
th,td{padding:14px 16px;text-align:left}
thead th{background:#f8fbff;font-weight:800;color:#18314d}
tbody tr+tr td{border-top:1px solid #eef3f8}

/* Contacts */
.contact-card{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
@media (max-width:900px){.contact-card{grid-template-columns:1fr}}
.map{background:#d9e9ff;border-radius:var(--radius);height:320px;display:grid;place-items:center;border:1px dashed #b8d7fd}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){form .row{grid-template-columns:1fr}}
label{display:block;font-weight:700;margin:8px 0 6px}
textarea{min-height:120px;resize:vertical}

/* Footer */
.footer{background:#0f1f34;color:#cbd6e6;margin-top:64px}
.footer a{color:#e7f3ff}
.footer .cols{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:24px;padding:36px 0}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr}}
.tiny{border-top:1px solid rgba(255,255,255,.08);padding:12px 0;color:#9fb2ca}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form .row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 6px;
  color: #1a304f;
}

.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #0289f7;
  box-shadow: 0 0 0 3px rgba(2,137,247,0.25);
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form button {
  align-self: flex-start;
  padding: 12px 24px;
  background: #0289f7;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.contact-form button:hover {
  background: #0272d1;
}
