/* Raion Website Styles */
:root{
  --bg: #0b0b0c;
  --ink: #efeef2;
  --muted:#b7b6bf;
  --brand:#c10f16;
  --accent:#6a3bd1;
  --card:#111115;
  --line:#1e1e24;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg,#08080a 0%, #0d0d11 60%, #0b0b0c 100%);
}
h1,h2,h3{font-family: "Playfair Display", serif; letter-spacing:.4px}
h1{font-size: clamp(2.2rem, 4vw, 3.5rem); margin:0 0 .6rem}
h2{font-size: clamp(1.6rem, 3vw, 2.2rem); margin:0 0 .5rem}
h3{font-size: 1.05rem; margin:.25rem 0}
p{color:#d8d7de; line-height:1.65}
a{color:var(--ink); text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 20px}

/* Header */
.site-header{
  position: sticky; top:0; z-index: 10;
  backdrop-filter: blur(8px);
  background: rgba(8,8,10,.6);
  border-bottom: 1px solid #16161b;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:2px}
.brand .logo{
  font-family: "Playfair Display", serif;
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background: radial-gradient(60% 60% at 50% 40%, #d71f26, #6d0d11);
  color:#fff;
}
.brand .wordmark{font-size:.98rem; opacity:.9}
.site-header nav{display:flex; gap:18px; align-items:center}
.site-header nav a{opacity:.9; transition:opacity .2s}
.site-header nav a:hover{opacity:1}
.site-header nav .cta{padding:8px 14px; border:1px solid #2a2a33; border-radius:999px}

/* Hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid #141419}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; padding:64px 0}
.hero-copy .lead{color:#cfcfda}
.actions{display:flex; gap:12px; margin-top:18px}
.btn{border:1px solid #2b2b34; padding:10px 16px; border-radius:10px; background:#15151a; color:#fff; cursor:pointer}
.btn.primary{background: linear-gradient(135deg, var(--brand), #9a1116); border-color: #b8171d}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px; font-size:.9rem}
.hero-art img{width:100%; height:auto; border-radius:14px; background:#fff;}

/* Aura glow */
.hero .aura{
  position:absolute; inset:-20% -10% auto -20%;
  height:60vh; pointer-events:none;
  background: radial-gradient(35% 40% at 70% 50%, rgba(193,15,22,.28), transparent 60%),
              radial-gradient(40% 45% at 30% 60%, rgba(106,59,209,.25), transparent 60%);
  filter: blur(40px); opacity:.8;
}

/* Sections */
.section{padding:64px 0; border-top:1px solid #13131a; border-bottom:1px solid #13131a}
.sub{color:var(--muted); margin-top:-.2rem}
.grid{display:grid; grid-template-columns: repeat(5, 1fr); gap:16px; margin-top:22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px}
.card p{font-size:.95rem}
.swatch{width:100%; height:120px; border-radius:10px; border:1px solid #262630; margin-bottom:10px}
.swatch-nude{background: #b98666}
.swatch-red{background: #c41f25}
.swatch-pink{background: #e59aa3}
.swatch-berry{background: #7c233a}
.swatch-purple{background: #4a274f}

/* Split */
.split{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px}

/* Ethos */
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 2px}
.pill{border:1px solid #2a2a33; padding:8px 12px; border-radius:999px; background:#121217}
.note{color:var(--muted)}

/* CTA */
.signup{display:flex; gap:12px; margin-top:14px}
.signup input{flex:1; padding:12px 14px; border-radius:10px; border:1px solid #2b2b33; background:#101015; color:#fff}
.signup button{white-space:nowrap}

/* Footer */
.site-footer{padding:28px 0; background:#0a0a0d}
.footer-inner{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.site-footer nav{display:flex; gap:16px}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; padding:38px 0}
  .grid{grid-template-columns: repeat(2, 1fr)}
  .split{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .site-header nav{display:none}
}
/* Accessibility helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}