/*
  SPN Alphabetz - Production-ready static CSS
  Notes:
  - Uses CSS variables for theming.
  - Mobile-first, responsive layout.
  - Components: header/nav, hero, sections, cards, sliders, accordions, forms.
*/

:root{
  --text: #0f172a;
  --muted: #475569;

  /* Brand palette (primary → secondary) */
  --brand: #3b82f6;   /* Blue */
  --brand-2:#7c3aed;  /* Violet */
  --accent: #f97316;  /* Orange */

  --ok: #16a34a;
  --warn:#f59e0b;
  --danger:#ef4444;

  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 18px 45px rgba(15, 23, 42, .10);
  --shadow-sm: 0 10px 24px rgba(15, 23, 42, .08);
  --radius: 18px;
  --radius-sm: 12px;
  --container: 1120px;
  --header-h: 76px;
  --focus: 0 0 0 4px rgba(59, 130, 246, .25);

  /* Figma-like extras */
  --bg-soft: #eef4ff;
  --surface-soft: #f8fbff;
  --brand-deep: #1d4ed8;
  --brand-pill: rgba(29,78,216,.10);
}

/* Small primitive helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.gradient-text{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted{color: var(--muted)}

/* Top bar (matches screenshot header strip) */
.topbar{
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-2));
  color:#fff;
  font-weight:650;
  font-size: 12.5px;
}
.topbar .row{
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.topbar .item{display:inline-flex; align-items:center; gap:8px; opacity:.95}
.topbar a{color:#fff}
.topbar svg{opacity:.92}
.topbar .item img{width:16px; height:16px; display:block}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 560px at 12% -10%, rgba(124,58,237,.22), transparent 55%),
    radial-gradient(960px 560px at 92% 0%, rgba(59,130,246,.18), transparent 50%),
    radial-gradient(900px 560px at 40% 20%, rgba(249,115,22,.10), transparent 50%),
    linear-gradient(180deg, #ffffff, var(--bg));
  line-height:1.5;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button, input, textarea, select{font:inherit}

.container{
  width:min(var(--container), calc(100% - 2*18px));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:#fff;
  color:#000;
  padding:10px 14px;
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{left:10px; outline:none}

/* Header */
.site-header{
  /* Header should scroll with the page (not fixed) */
  position:relative;
  z-index:1000;
  backdrop-filter:saturate(180%) blur(12px);
  background: rgba(255,255,255,.70);
  border-bottom:1px solid var(--border);
}

/* Optional “logo image + text” brand layout */
.brand{display:flex; align-items:center; gap:12px}
.brand .logo-img{
  display:block;
  width: clamp(160px, 18vw, 220px);
  height:auto;
  max-height: 74px;
  object-fit:contain;
}
.site-header .bar{
  min-height:var(--header-h);
  padding: 10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  /* Brand area sizing restored so header/nav layout remains stable */
  min-width: 160px;
  flex-shrink:0;
}
.brand .logo{
  width:42px;
  height:42px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 22px rgba(59,130,246,.18);
}
.brand .name{font-weight:800; letter-spacing:.2px}
.brand .tag{font-size:12px; color:var(--muted); margin-top:-2px}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:center;
  min-width:0;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.02);
  border-radius: 999px;
}
.nav-links a{
  position:relative;
  padding: 10px 12px;
  font-weight:600;
  color: rgba(15, 23, 42, .88);
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.nav-links a:hover{background: rgba(15,23,42,.05)}
.nav-links a[aria-current="page"]{
  color: var(--brand-deep);
  background: transparent;
  box-shadow: none;
}

.header-actions{display:flex; align-items:center; gap:10px}

.header-actions .btn{white-space:nowrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  color:var(--text);
  font-weight:750;
  cursor:pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{background: rgba(15,23,42,.05)}
.btn:active{transform: translateY(1px)}
.btn:focus-visible{outline:none; box-shadow: var(--focus)}

.btn.primary{
  border-color: rgba(59,130,246,.40);
  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(124,58,237,.18));
}

.btn.gradient{
  border-color: rgba(29,78,216,.35);
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-2));
  color:#fff;
}
.btn.gradient:hover{filter: brightness(1.02)}
.btn.primary:hover{border-color: rgba(59,130,246,.65)}

.icon-btn{
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  color:var(--text);
  cursor:pointer;
}
.icon-btn:focus-visible{outline:none; box-shadow: var(--focus)}

.mobile-toggle{display:none}

/* Mobile nav */
.mobile-panel{
  display:none;
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.80);
}
.mobile-panel .inner{padding: 12px 0 14px}
.mobile-panel a{
  display:block;
  padding: 12px 12px;
  margin: 4px 0;
  border-radius: 12px;
  border:1px solid transparent;
  background: rgba(15,23,42,.03);
  font-weight:700;
}
.mobile-panel a:hover{background: rgba(15,23,42,.05)}
.mobile-panel a[aria-current="page"]{border-color: rgba(59,130,246,.4)}
.mobile-panel a[aria-current="page"]{
  color: var(--brand-deep);
  border-color: transparent;
  background: transparent;
}

@media (max-width: 1080px){
  .nav-links{display:none}
  .mobile-toggle{display:inline-flex}
  .mobile-panel{display:block}
  .header-actions .btn{display:none}
  .site-header .bar{gap:10px}
  .brand{min-width:0}
  .brand .logo-img{max-height: 64px}
}

/* Hero */
.hero{
  padding: 34px 0 10px;
}

/* Figma hero pill */
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--brand-pill);
  border:1px solid rgba(29,78,216,.18);
  color: var(--brand-deep);
  font-weight: 800;
  font-size: 13px;
}
.hero-pill .icon{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: #fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow-sm);
}
.hero-pill .icon img{width:18px; height:18px; display:block}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: stretch;
}
.hero-card{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Figma-like scene image */
.hero-media{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.hero-media img{width:100%; height:100%; object-fit: cover}

.float-chip{
  position:absolute;
  left: 18px;
  bottom: 16px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow-sm);
}
.float-chip .mini{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(29,78,216,.12);
  color: var(--brand-deep);
}
.float-chip .mini img{width:18px; height:18px; display:block}
.float-chip .t{font-weight:900; font-size: 13px; line-height:1.1}
.float-chip .d{font-size: 12px; color: var(--muted); font-weight:700; margin-top:2px}
.hero-content{padding: 26px}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.92);
  font-weight:800;
  font-size: 13px;
}
.kicker .dot{width:10px; height:10px; border-radius:999px; background: var(--ok)}

.hero h1{margin: 14px 0 10px; font-size: clamp(30px, 4vw, 46px); line-height:1.08; letter-spacing:-.6px}
.hero p{margin:0 0 18px; color: var(--muted); font-size: 16px}

.hero-actions{display:flex; gap:10px; flex-wrap:wrap}

.hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
  border-top:1px solid var(--border);
  background: rgba(15,23,42,.02);
}
.metric{
  padding: 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.75);
}
.metric .num{font-weight:900; font-size: 20px}
.metric .lbl{color: var(--muted); font-weight:700; font-size: 12px; margin-top:2px}

/* Slider */
.slider{
  position:relative;
  height: 100%;
  min-height: 390px;
  display:flex;
  flex-direction:column;
}
.slides{position:relative; flex:1; overflow:hidden}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translateX(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.slide.is-active{opacity:1; transform: translateX(0)}
.slide .media{
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 400px at 20% 10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(600px 420px at 80% 0%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(520px 380px at 60% 40%, rgba(249,115,22,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.12));
}
.slide .media img{
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:.95;
  mix-blend-mode: normal;
}
.slide .overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(15,23,42,.55) 85%);
}
.slide .caption{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 14px;
}
.slide .caption .title{font-weight:900; letter-spacing:-.3px}
.slide .caption .text{color: var(--muted); margin-top:4px; font-weight:650; font-size: 13px}

.slider-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-top:1px solid var(--border);
  background: rgba(15,23,42,.02);
}
.dots{display:flex; gap:8px; align-items:center}
.dot-btn{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.18);
  background: rgba(15,23,42,.05);
  cursor:pointer;
}
.dot-btn[aria-current="true"]{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: rgba(59,130,246,.45);
}

/* Sections */
.section{padding: 54px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom: 18px}
.section-title{margin:0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing:-.3px}
.section-desc{margin:0; color: var(--muted); max-width: 66ch}

.page-intro{
  justify-content:center;
  text-align:center;
  margin-bottom: 26px;
}

.page-intro > div{
  max-width: 980px;
}

.page-intro .section-desc{
  margin-inline:auto;
}

.page-intro > .btn{
  display:none;
}

.grid{
  display:grid;
  gap: 14px;
}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.grid.cols-2{grid-template-columns: repeat(2, 1fr)}

.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  overflow:hidden;
}

.card.hover:hover{transform: translateY(-2px); box-shadow: var(--shadow-sm)}
.card.hover{transition: transform .15s ease, box-shadow .2s ease}

/* Icon tiles (Programs section) */
.tile{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.icon-square{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow: 0 12px 26px rgba(15,23,42,.14);
}
.icon-square img{width:22px; height:22px; display:block}
.icon-square.blue{background: linear-gradient(180deg, #1d4ed8, #2563eb)}
.icon-square.purple{background: linear-gradient(180deg, #6d28d9, #8b5cf6)}
.icon-square.pink{background: linear-gradient(180deg, #c026d3, #ec4899)}
.icon-square.orange{background: linear-gradient(180deg, #ea580c, #f97316)}
.icon-square.green{background: linear-gradient(180deg, #15803d, #22c55e)}
.icon-square.red{background: linear-gradient(180deg, #be123c, #fb7185)}

.tile h3{margin: 2px 0 6px}
.tile p{margin:0; color: var(--muted); font-weight:450}

/* Choose-us list cards (right side list) */
.choose-list{display:grid; gap: 12px}
.choose-item{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(29,78,216,.07);
  border:1px solid rgba(29,78,216,.10);
}
.choose-item .i{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, #2563eb, #4338ca);
  border:1px solid rgba(37,99,235,.28);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.choose-item .i img{width:20px; height:20px; display:block}
.choose-item .h{font-weight:700}
.choose-item .s{color: var(--muted); font-weight:450; font-size: 13px; margin-top:2px}

/* Testimonials cards (two large cards like screenshot) */
.testimonial-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 18px}
.t-card{
  background: rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 18px;
  min-height: 280px;
  position:relative;
}
.t-stars{display:flex; gap:4px; color:#f59e0b}
.t-stars img{width:18px; height:18px; display:block}
.t-quote{margin: 12px 0 14px; color: #334155; font-weight:450; line-height:1.7}
.t-footer{display:flex; align-items:center; gap: 12px; margin-top: 18px}
.testimonial-slider{
  min-height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.9);
}
.testimonial-slider .slides{padding: 6px; transition: height .28s ease}
.testimonial-slider .slides{
  position: relative;
  overflow: visible;
  flex: 0 0 auto;
}
.testimonial-slider .slide{
  position: static;
  inset: auto;
  opacity: 1;
  transform: none;
  padding: 2px;
  display: none;
}
.testimonial-slider .slide.is-active{
  display: block;
}
.testimonial-slider .testimonial-grid{
  margin: 0;
  height: 100%;
  grid-template-columns: repeat(2, 1fr);
}
.testimonial-slider .t-card{
  margin: 0;
  height: 100%;
}
.avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff;
}
.t-name{font-weight:900}
.t-sub{font-size: 12.5px; color: var(--muted); font-weight:650; margin-top:2px}
.t-mark{
  position:absolute;
  right: 16px;
  top: 16px;
  opacity:.12;
}
.t-mark img{width:54px; height:54px; display:block}

.gallery-wrap{
  overflow: hidden;
  border-radius: var(--radius);
}

.gallery-slider{
  min-height: 430px;
  border: 0;
  background: rgba(255,255,255,.9);
}

.gallery-slider .slide .media img{
  object-fit: cover;
  object-position: center;
}

.gallery-slider .caption{
  max-width: 620px;
}

/* Contact tiles + admissions form like screenshot */
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start}
.contact-tiles{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
.contact-tile{padding: 18px; border-radius: 18px; background: rgba(255,255,255,.86); border:1px solid rgba(15,23,42,.10); box-shadow: var(--shadow-sm)}
.contact-tile h3{margin: 10px 0 6px}
.contact-tile p{margin:0; color: var(--muted); font-weight:450}

/* Programs page screenshot styling */
.program-card{border-radius:22px; border:1px solid transparent; box-shadow: none}
.program-card .pad{padding:28px}
.program-card .tile{display:block}
.program-card .icon-square{
  width:64px;
  height:64px;
  aspect-ratio: 1 / 1;
  border-radius:22px;
  margin-bottom:22px;
  flex: 0 0 auto;
}
.program-card .icon-square img{width:64px; height:64px; display:block; object-fit:contain}
.program-card h3{
  margin:0 0 10px;
  font-size: clamp(20px, 2.1vw, 20px);
  line-height:1.2;
  letter-spacing:-.2px;
  font-weight:700;
  color:#102a4d;
}
.program-card p{
  margin:0;
  font-size: 16px;
  line-height:1.55;
  font-weight:450;
  color:#334e68;
}
.program-card.card-blue{background:#e9edf8; border-color:#86b6ff}
.program-card.card-purple{background:#e9edf8}
.program-card.card-lilac{background:#efeaf7}
.program-card.card-cream{background:#f3eee4}
.program-card.card-green{background:#e6f2eb}
.program-card.card-rose{background:#f4eaee}

.curriculum-grid{grid-template-columns: repeat(4, 1fr); gap: 18px}

.program-levels-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.level-card{
  border-radius: 28px;
  padding: 20px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-sm);
}

.level-aqua{background:#dff0f2}
.level-cream{background:#efe9df}
.level-pink{background:#f7e6ea}

.level-media{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
}

.level-card h3{
  margin: 14px 0 8px;
  font-size: clamp(24px, 3.4vw, 24px);
  line-height:1.15;
  letter-spacing:-.4px;
}

.level-card p{
  margin:0;
  color:#394452;
  font-size: 16px;
  line-height:1.65;
  min-height: 106px;
}

.level-meta{
  margin-top: 14px;
  border-radius: 22px;
  color:#fff;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  overflow:hidden;
}

.level-meta span{
  padding: 13px 10px 11px;
  text-align:center;
  display:grid;
  gap:2px;
}

.level-meta span + span{border-left:1px dashed rgba(255,255,255,.45)}
.level-meta strong{font-size: 16px; line-height:1.1}
.level-meta em{font-style:normal; font-size:13px; opacity:.92; font-weight:650}

.level-blue{background: linear-gradient(90deg, #3b82f6, #4f46e5)}
.level-orange{background: linear-gradient(90deg, #fb923c, #f59e0b)}
.level-rose{background: linear-gradient(90deg, #fb7185, #ef4444)}

.program-gallery{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.program-photo{
  position:relative;
  overflow:hidden;
  border-radius: 18px;
  min-height: 264px;
  box-shadow: var(--shadow-sm);
}
.program-photo img{width:100%; height:100%; object-fit:cover; display:block}
.program-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(15,23,42,.75) 100%);
}
.program-photo .cap{
  position:absolute;
  left:16px;
  bottom:14px;
  color:#fff;
  font-weight:900;
  z-index:1;
  font-size: 16px;
}

.curriculum-visual{
  margin-top: 30px;
  text-align:center;
}

.curriculum-visual .section-desc{
  margin: 8px auto 0;
}

.curriculum-poster{
  margin: 18px 0 0;
  padding: 14px;
  border-radius: 22px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
}

.curriculum-poster img{
  width:min(760px, 100%);
  height:auto;
  margin-inline:auto;
  border-radius: 16px;
  display:block;
}

.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.form-grid .span-2{grid-column: 1 / -1}
.btn.full{width:100%}

@media (max-width: 980px){
  .testimonial-grid{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .curriculum-grid{grid-template-columns: repeat(2, 1fr)}
  .program-levels-grid{grid-template-columns: 1fr 1fr}
  .program-gallery{grid-template-columns: repeat(2, 1fr)}
  .program-card h3{font-size: clamp(20px, 3.2vw, 20px)}
  .level-card h3{font-size: clamp(28px, 3.4vw, 38px)}
}

@media (max-width: 720px){
  .contact-tiles{grid-template-columns: 1fr}
  .form-grid{grid-template-columns: 1fr}
  .form-grid .span-2{grid-column:auto}
  .curriculum-grid{grid-template-columns: 1fr}
  .program-levels-grid{grid-template-columns: 1fr}
  .program-gallery{grid-template-columns: 1fr}
  .program-card .icon-square{width:74px; height:74px; border-radius:18px}
  .program-card .icon-square img{width:34px; height:34px}
  .program-card h3{font-size:28px}
  .program-card p{font-size:17px}
  .level-card{padding:16px}
  .level-card h3{font-size:34px}
  .level-card p{min-height:auto}
}
.card .pad{padding: 18px}
.card .eyebrow{font-weight:900; font-size:12px; color: rgba(234,240,255,.78); letter-spacing:.8px; text-transform:uppercase}
.card h3{margin:8px 0 6px; letter-spacing:-.2px}
.card p{margin:0; color: var(--muted)}

.badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px}
.badge{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.78);
  font-weight:750;
  font-size: 12px;
}

.media-thumb{
  aspect-ratio: 16/9;
  border-bottom:1px solid var(--border);
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(124,58,237,.10));
}
.media-thumb img{width:100%; height:100%; object-fit:cover; opacity:.98; mix-blend-mode: normal}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.list{margin:0; padding-left: 18px; color: var(--muted)}
.list li{margin: 8px 0}

/* Quote slider */
.quote{
  padding: 18px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
}
.quote .text{margin:0; font-weight: 750; letter-spacing:-.15px}
.quote .meta{margin-top:10px; color: var(--muted); font-weight:700; font-size: 13px}

/* Accordion */
.accordion{display:grid; gap:10px}
.acc-item{border:1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.032); overflow:hidden}
.acc-item{background: rgba(255,255,255,.85)}
.acc-btn{width:100%; text-align:left; padding: 14px 16px; background: transparent; border:0; color:var(--text); font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px}
.acc-btn:focus-visible{outline:none; box-shadow: var(--focus)}
.acc-panel{max-height:0; overflow:hidden; transition: max-height .25s ease; border-top:1px solid var(--border)}
.acc-panel .inner{padding: 12px 16px; color: var(--muted); font-weight:650}
.acc-item.is-open .acc-panel{max-height: 220px}

/* Forms */
.form{display:grid; gap:12px}
.field{
  display:grid;
  gap:8px;
}
.label{font-weight:700; font-size: 13px; color: rgba(19, 20, 21, 0.9)}
.input, .textarea, .select{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.90);
  color: var(--text);
}
.textarea{min-height: 120px; resize: vertical}
.input:focus, .textarea:focus, .select:focus{outline:none; box-shadow: var(--focus); border-color: rgba(106,168,255,.40)}
.help{color: var(--muted); font-size: 12px; margin:0}

/* Footer */
.site-footer{border-top:1px solid var(--border); background: rgba(0,0,0,.14)}
.site-footer{background: rgba(255,255,255,.65)}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 16px; padding: 26px 0}
.footer-grid h4{margin:0 0 8px}
.footer-grid a{color: rgb(38, 39, 41, 0.86)}
.footer-grid a:hover{text-decoration: underline}
.small{color: var(--muted); font-size: 13px}
.copyright{border-top:1px solid var(--border); padding: 14px 0; color: var(--muted); font-size: 13px}

/* Utilities */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.88);
  font-weight:800;
}
hr.sep{border:0; border-top:1px solid var(--border); margin: 18px 0}

.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border:1px solid var(--border);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  max-width: min(420px, calc(100% - 32px));
  display:none;
}
.toast.show{display:block}
.toast .t{font-weight:900}
.toast .d{color: var(--muted); font-weight:650; margin-top:4px; font-size: 13px}

.scroll-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.75);
  color: var(--text);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.scroll-top.show{display:flex}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .slider{min-height: 340px}
  .grid.cols-3{grid-template-columns: 1fr 1fr}
  .split{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr 1fr}
}

@media (max-width: 720px){
  .grid.cols-3, .grid.cols-2{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
  .hero-content{padding: 20px}
  .hero-metrics{grid-template-columns: 1fr;}
  .site-header .bar{padding: 8px 0}
  .brand .logo-img{max-height: 56px}
}