
:root{
  --sea-blue:#0ea5e9;
  --sea-blue-dark:#0369a1;
  --sea-navy:#0f172a;
  --sea-slate:#334155;
  --sea-bg:#f8fbff;
  --sea-card:#ffffff;
  --sea-border:rgba(15,23,42,.08);
  --sea-shadow:0 18px 50px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 45%,#f3f8fc 100%);
  color:var(--sea-navy);
}
a{text-decoration:none}
.navbar{
  backdrop-filter:blur(18px);
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid var(--sea-border);
}
.brand-logo{
  height:46px;
  width:auto;
  object-fit:contain;
}
.hero{
  position:relative;
  overflow:hidden;
  padding:6.5rem 0 4rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(14,165,233,.15), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(2,132,199,.16), transparent 28%),
    linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto -8% -15% auto;
  width:420px;height:420px;
  background:radial-gradient(circle, rgba(14,165,233,.18), rgba(14,165,233,0));
  border-radius:50%;
  pointer-events:none;
}
.hero-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.55rem .95rem;
  border:1px solid rgba(14,165,233,.18);
  background:rgba(14,165,233,.08);
  color:var(--sea-blue-dark);
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
}
.hero h1{
  font-size:clamp(2.2rem,4vw,4.25rem);
  line-height:1.05;
  letter-spacing:-.03em;
}
.hero p.lead{
  color:var(--sea-slate);
  max-width: 60ch;
}
.hero-card, .site-card{
  background:rgba(255,255,255,.9);
  border:1px solid var(--sea-border);
  border-radius:28px;
  box-shadow:var(--sea-shadow);
}
.hero-media{
  position:relative;
  padding:1.2rem;
}
.hero-media img{
  width:100%;
  height:auto;
  max-height:330px;
  object-fit:contain;
  filter:drop-shadow(0 22px 40px rgba(14,165,233,.18));
}
.section{
  padding:4.5rem 0;
}
.section-title{
  font-size:clamp(1.6rem,2.2vw,2.6rem);
  letter-spacing:-.03em;
}
.section-kicker{
  color:var(--sea-blue-dark);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
}
.feature-card{
  height:100%;
  padding:1.5rem;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--sea-border);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.icon-pill{
  width:56px;height:56px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(14,165,233,.14), rgba(14,165,233,.06));
  color:var(--sea-blue-dark);
  font-size:1.35rem;
}
.service-list{
  list-style:none;
  padding:0;margin:0;
}
.service-list li{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  margin-bottom:.9rem;
  color:var(--sea-slate);
}
.service-list i{color:var(--sea-blue-dark);margin-top:.18rem}
.stats{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
  border-radius:32px;
  padding:2rem;
  box-shadow:var(--sea-shadow);
}
.stats .stat{
  padding:1rem 0;
}
.stat strong{
  display:block;
  font-size:2rem;
  line-height:1;
}
.media-card{
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--sea-border);
  box-shadow:var(--sea-shadow);
  height:100%;
}
.media-thumb{
  aspect-ratio:16/10;
  background:linear-gradient(135deg,#dff3ff,#ffffff);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.media-thumb img, .media-thumb object{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:20px;
}
.media-body{
  padding:1.25rem 1.25rem 1.5rem;
}
.tag{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  color:var(--sea-blue-dark);
  background:rgba(14,165,233,.1);
}
.member-card{
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--sea-border);
  box-shadow:var(--sea-shadow);
}
.member-portrait{
  aspect-ratio: 5 / 6;
  background:linear-gradient(180deg,#f8fbff 0,#eaf6ff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.member-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:24px;
}
.contact-box{
  border-radius:28px;
  background:#fff;
  border:1px solid var(--sea-border);
  box-shadow:var(--sea-shadow);
}
.form-control, .form-select{
  border-radius:16px;
  padding:.85rem 1rem;
  border-color:#dbe6f3;
}
.form-control:focus, .form-select:focus{
  border-color:rgba(14,165,233,.55);
  box-shadow:0 0 0 .25rem rgba(14,165,233,.12);
}
.btn-sea{
  background:linear-gradient(135deg,var(--sea-blue),var(--sea-blue-dark));
  color:#fff;
  border:none;
  border-radius:14px;
  padding:.85rem 1.2rem;
  font-weight:700;
}
.btn-sea:hover{color:#fff;opacity:.95}
.btn-outline-sea{
  border:1px solid rgba(14,165,233,.28);
  color:var(--sea-blue-dark);
  border-radius:14px;
  padding:.85rem 1.2rem;
  font-weight:700;
  background:#fff;
}
footer{
  border-top:1px solid var(--sea-border);
  background:#fff;
}
.footer-logo{height:42px;width:auto}
.soft-shadow{box-shadow:0 12px 30px rgba(15,23,42,.08)}
.rounded-24{border-radius:24px}
