:root{
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --radius:14px;
  --glass: rgba(0,255,255,.08);
  --bg:#0a0a0a;
  --text:#eaffff;
  --muted:#b6f0ff;
  --primary:#4ea8ff;
  --focus:#4ea8ff;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background: #000;
  background-image: repeating-linear-gradient(45deg, rgba(0,255,255,.12) 0 2px, transparent 2px 6px);
  background-color:#000;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
header{position:sticky;top:0;z-index:5;display:grid;place-items:center;padding:var(--space-3) 0;background:rgba(0,0,0,.25);backdrop-filter:blur(6px) saturate(120%);border-bottom:1px solid rgba(255,255,255,.15)}
.brand{padding:.5rem .9rem;border-radius:999px;background:rgba(0,255,255,.15);border:1px solid rgba(0,255,255,.4);font-weight:700;color:#fff}
main{display:block}
.hero{width:min(92%,1100px);margin:0 auto;padding:var(--space-5) var(--space-4);display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-5);align-items:center;text-align:left;border-radius:var(--radius);background:rgba(0,0,0,.15)}
.hero h1{font-size:clamp(1.75rem,4vw+1rem,3rem);margin:0 0 .25rem;letter-spacing:.5px}
.subhead{color:var(--muted);font-size:clamp(1rem,2vw,1.125rem);margin:0}
.hero-media{display:grid;place-items:center}
.hero-media img{width:100%;max-width:820px;height:auto;border-radius:20px;border:1px solid rgba(255,255,255,.25);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.cta{display:inline-block;padding:1rem 1.75rem;border-radius:12px;background:linear-gradient(135deg,#00e5ff,#4f7fff);color:#02101a;font-weight:800;text-decoration:none;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 16px rgba(0,0,0,.25);margin:0.75rem 0;justify-self:start}
.cta:hover,.cta:focus-visible{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.32);text-decoration:underline}
.cta:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
footer{padding:var(--space-5) var(--space-4)}
.footer-ad{width:min(92%,1100px);margin:0 auto 1rem;padding:1rem;background:var(--glass);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);text-align:center}
.footer-ad a{color:#eaffff;text-decoration:none;font-weight:700}
.footer-ad a:hover,.footer-ad a:focus-visible{text-decoration:underline;color:#fff}
.closing-note{text-align:center;color:var(--muted);font-size:0.95rem}
@media (min-width:900px){
  .hero{grid-template-columns:1.1fr 0.9fr;gap:calc(var(--space-5)*1.2)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:var(--space-4)}
  .hero-media{order:-1}
  .cta{justify-self:center}
}
article p:first-of-type{margin:0 0var(--space-3)}
article p:first-of-type::first-letter{float:left;font-weight:700;line-height:1;margin-right:var(--space-2);font-size:clamp(3rem,6vw,5rem);text-transform:uppercase}
@media (max-width:359px){
  article p:first-of-type::first-letter{font-size:clamp(2.8rem,6vw,5rem)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}