/* ---------- tokens ---------- */
:root{
  --ink:#0e2431;
  --ink-2:#3a5060;
  --muted:#6b7e8a;
  --line:#e7edf1;
  --paper:#fff;
  --brand:#12b2e8;
  --brand-2:#0ed3a5;
  --shadow:0 14px 30px rgba(0,0,0,.12);
  --radius:14px;
  --max:1150px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
}

.wrap{ width:min(100%, var(--max)); margin-inline:auto; padding:0 16px; }

/* ---------- hero ---------- */
.sp-hero{
  position:relative;
  min-height:54vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.sp-hero__bg{
  position:absolute; inset:0;
  background-image:var(--src);
  background-size:cover;
  background-position:center;
  filter:brightness(.8);
}



.sp-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.40));
}
.sp-hero__overlay{
  position:relative; z-index:2;
  text-align:center;
  color:#fff;
  padding:16px;
  text-shadow:0 6px 22px rgba(0,0,0,.45);
}
.sp-hero__overlay h1{
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:clamp(1.6rem, 3.6vw, 2.6rem);
}
.sp-hero__overlay p{
  margin:0;
  opacity:.95;
  font-size:clamp(.95rem, 1.4vw, 1.05rem);
}
.sp-hero__cta{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ---------- section ---------- */
.sp-section{ background:#fff; padding:28px 0 44px; }
.sp-head h2{
  margin:0 0 4px;
  font:900 1.4rem/1 system-ui,Segoe UI,Inter,Arial;
  letter-spacing:.2px;
  text-transform:uppercase;
}
.sp-head p{ margin:0 0 16px; color:var(--muted); }

/* ---------- grid + cards ---------- */
.sp-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(280px, 1fr));
  gap:20px;
}
.sp-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.sp-card__media img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.sp-card__body{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sp-card__icon{ color:#1f6aa6; font-size:14px; line-height:1; }
.sp-card h3{
  margin:0;
  font:900 1rem/1.2 system-ui,Segoe UI,Inter,Arial;
  text-transform:uppercase;
  letter-spacing:.2px;
}
.sp-card p{
  margin:0;
  color:var(--ink-2);
  font-size:.95rem;
  line-height:1.45;
}

/* ---------- buttons ---------- */
.btn{
  align-self:flex-start;
  text-decoration:none;
  border:none;
  cursor:pointer;
  padding:.55rem .9rem;
  border-radius:999px;
  font-weight:800;
  color:#052734;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow:0 8px 18px rgba(0,0,0,.1);
}
.btn:hover{ filter:brightness(1.05); }

.btn-outline{
  background:#fff;
  color:var(--ink);
  border:1.5px solid var(--line);
  box-shadow:none;
}
.btn-outline:hover{ background:#f7fbff; }

.btn-disabled{
  background:#e7edf1;
  color:#8295a3;
  cursor:not-allowed;
  box-shadow:none;
}

/* ---------- media highlights ---------- */
.sp-media{ padding:56px 0 64px; background:#fff; }
.sp-media__head{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:22px;
}
.sp-media__title{
  margin:0;
  font-size:clamp(24px, 3.4vw, 40px);
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.sp-media__sub{ margin:6px 0 0; color:var(--muted); font-size:.95rem; }
.sp-media__btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:10px 16px;
  border-radius:999px;
  border:2px solid var(--ink);
  color:var(--ink);
  text-decoration:none;
  font-weight:800;
  font-size:.9rem;
  white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.sp-media__btn:hover{ background:var(--ink); color:#fff; transform:translateY(-1px); }

.sp-media__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.sp-shot{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:16/11;
  padding:8px;
}
.sp-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:6px;
  transition:transform .25s ease;
}
.sp-shot:hover img{ transform:scale(1.015); }

/* ---------- responsive ---------- */
@media (max-width: 1024px){
  .sp-media__grid{ grid-template-columns:repeat(2, 1fr); }
  .sp-media__btn{ height:38px; padding:8px 14px; }
}
@media (max-width: 900px){
  .sp-grid{ grid-template-columns:1fr; }
  .sp-hero{ min-height:44vh; }
}
@media (max-width: 600px){
  .sp-media__head{ flex-direction:column; align-items:flex-start; }
  .sp-media__btn{ margin-left:0; }
  .sp-media__grid{ grid-template-columns:1fr; }
}