:root{--teal:#0B3D46;--cream:#F1E7D0;--ink:#0a0f12;--muted:#d8e7ea}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
     line-height:1.4; color:var(--ink); background:#fff;}
.header{min-height:86vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:64px 20px; background:
  radial-gradient(1200px 600px at 50% 0%, var(--muted), #ffffff 60%);}
.logo{width:86px; height:86px; margin-bottom:16px}
.name{font-size: clamp(36px, 6vw, 68px); letter-spacing:0.08em; font-weight:800; color:var(--teal); margin:6px 0 8px}
.tag{font-size: clamp(16px, 2.4vw, 22px); color:#333; opacity:.9}
.cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:28px 0 0}
.btn{padding:12px 18px; border-radius:10px; border:2px solid var(--teal); text-decoration:none; font-weight:700}
.btn.primary{background:var(--teal); color:#fff}
.btn.ghost{background:transparent; color:var(--teal)}
.section{padding:56px 22px; max-width:980px; margin:0 auto}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.card{border:1px solid #e7eef0; border-radius:14px; padding:18px}
h2{font-size:28px; margin:0 0 12px; color:var(--teal)}
.footer{padding:28px 22px; text-align:center; color:#666}
.small{font-size:12px; color:#555}
hr{border:none; border-top:1px dashed #d8e7ea; margin:24px 0}
.embed{aspect-ratio:16/9; width:100%; border:0; border-radius:12px; background:#000}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#eef6f7; color:#0b3d46; font-size:12px; font-weight:700; letter-spacing:.06em}
.linklist a{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #e7eef0; border-radius:10px; text-decoration:none; color:#0b3d46}
.linklist a:hover{background:#f8fbfc}