/* ====== THEME ====== */
:root{
  --navy:#233746; --ink:#0F1F2A; --cream:#E8D9A9; --sage:#9EB088; --leaf:#7C9C6A;
  --field-bg:#ffffff14; --field-bd:#ffffff2b; --field-bd-hover:#ffffff40;
  --field-bd-focus:var(--cream); --field-text:#fff; --muted:#ffffffb3;
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; color:#fff; background:var(--navy)}
a{color:inherit}
img{max-width:100%; display:block}
.container{max-width:1100px; margin:auto; padding:0 20px}



/* ====== HERO ====== */
.hero{position:relative; overflow:hidden}
.hero .grid{position:absolute; inset:0; background-image:radial-gradient(#ffffff12 1px, transparent 1px);
  background-size:18px 18px; pointer-events:none}
.hero .wrap{padding:96px 0 34px; text-align:center}
h1{font-size:clamp(2rem, 4vw + 1rem, 3.2rem); line-height:1.1; margin:0}
.lead{max-width:900px; margin:16px auto 0; color:#e7e7e7; font-size:1.125rem}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid #ffffff2b; background:#ffffff10}

/* ====== CONTENT SECTIONS ====== */
.section{padding:60px 0}
.center{text-align:center}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }

/* ====== EMBED CARD ====== */
.embed-card{
  border:1px solid #ffffff1a; background:#0f1f2acc; backdrop-filter:blur(8px);
  border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.embed-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.embed-head h2{margin:0; font-size:1.25rem}
.muted{color:var(--muted)}
.embed-wrap{
  position:relative; border:1px solid #ffffff22; border-radius:14px; overflow:hidden;
  background:linear-gradient(90deg, #ffffff10, #ffffff08, #ffffff10);
}
.iframe-shell{width:100%; height:min(2000px, 85vh); border:0; display:block; background:#fff}
.embed-fallback{display:flex; align-items:center; justify-content:center; padding:14px; gap:10px; background:#ffffff10; border-top:1px solid #ffffff1a}
.skeleton{
  height:48px; margin:12px; border-radius:10px;
  background: linear-gradient(90deg, #ffffff12, #ffffff1f, #ffffff12);
  background-size:200% 100%; animation:shimmer 1.2s infinite linear;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ====== INFO CARDS ====== */
.card{
  border:1px solid #ffffff1a; background:#ffffff0d; border-radius:16px; padding:16px
}
.card h3{margin:0 0 6px}

/* ====== FOOTER ====== */
footer{border-top:1px solid #ffffff1a; margin-top:50px}
footer .grid{display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr}
@media (max-width:780px){ footer .grid{grid-template-columns:1fr} }
footer a{text-decoration:none}
.copy{color:#ffffff99; padding:16px 0; text-align:center}

/* ====== A11y 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}
.focus{outline:2px solid --cream; outline-offset:2px; border-radius:6px}

/* ====== Animations ====== */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(14px); animation:reveal .5s ease forwards}
  .reveal:nth-child(2){animation-delay:.06s}
  .reveal:nth-child(3){animation-delay:.12s}
  @keyframes reveal{to{opacity:1; transform:none}}
}