:root{
  --bg: #0b0b0b;
  --bg-soft: #121212;
  --text: #efefef;
  --muted: #b7b7b7;
  --brand: #66edff;
  --accent: #8affc1;
  --card: #141414;
  --border: #262626;
  --focus: #7cd9ff;
  --radius: 16px;
  --container: 1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 800px at 80% -10%, #112 0, transparent 60%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
}

.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}

a{color:inherit}
a:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:8px}

.site-header{
  position:sticky; top:0; z-index:10;
  background: rgba(11,11,11,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .nav{
  display:flex; align-items:center; justify-content:space-between; padding:.8rem 0;
}
.brand{display:flex; gap:.6rem; align-items:center; text-decoration:none}
.brand .logo{
  display:grid; place-items:center; width:2.1rem; height:2.1rem;
  background:linear-gradient(135deg, var(--brand), #4ab9ff);
  border-radius:10px; color:#001; font-weight:800;
}
.brand-text{font-weight:700; letter-spacing:.2px}

.site-header nav{display:flex; gap:1rem; align-items:center}
.site-header nav a{padding:.4rem .6rem; text-decoration:none; color:var(--muted)}
.site-header nav a:hover{color:#fff}

.btn{
  display:inline-block; padding:.7rem 1rem; border:1px solid var(--border);
  border-radius:999px; text-decoration:none; color:#fff; background:transparent;
}
.btn:hover{border-color:var(--brand); color:var(--brand)}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--accent)); color:#001; border-color:transparent}
.btn-primary:hover{filter:brightness(1.05)}

.hero{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:2rem; padding:3.5rem 0 2rem;
}
.hero-text h1{font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.1; margin:0 0 .6rem; font-family: "Rock Salt", cursive}
.hero-text p{color:var(--muted); margin:.5rem 0 1.2rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem}
.social{display:flex; gap:.8rem; padding:0; list-style:none; margin:1rem 0 0}
.social a{display:grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid var(--border); border-radius:50%}
.social svg{width:1.2rem; height:1.2rem; fill:#cfcfcf}
.social a:hover svg{fill:#fff}
.hero-art img{width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); display:block; background:#0e0e0e}

section h2{font-size: clamp(1.4rem, 2.8vw, 2rem); margin:2rem 0 1rem}
.grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat( auto-fill, minmax(240px, 1fr) );
}
.card{
  display:block; padding:1rem; border:1px solid var(--border); background:var(--card);
  border-radius:var(--radius); text-decoration:none; transition: transform .15s ease, border-color .15s ease;
  min-height: 112px;
}
.card h3{margin:.25rem 0 .25rem; font-size:1.05rem}
.card p{margin:0; color:var(--muted)}
.card:hover{transform: translateY(-2px); border-color: var(--brand)}

.note{margin-top:1rem; color:var(--muted)}

.two-col{display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem}
.facts{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); padding:1rem}
.facts ul{margin:0; padding:0; list-style:none}
.facts li{padding:.35rem 0}

.contact .btn{margin-top:.5rem}

.site-footer{border-top:1px solid var(--border); margin-top:2.5rem}
.site-footer .container{padding:1.25rem 0}
.site-footer p{margin:.25rem 0}
.disclosure{color:#cfcfcf}

@media (max-width: 900px){
  .hero{grid-template-columns: 1fr; padding:2rem 0 1rem}
  .two-col{grid-template-columns: 1fr}
}