/* assets/styles.css - refined luxury CSS for The Keeper Code */
:root{
  --bg:#060606;
  --panel:#0f0f0f;
  --muted:#a8a8a8;
  --accent:#b8871d;
  --glass: rgba(255,255,255,0.03);
  --max-width:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(184,135,29,0.04), transparent),
              linear-gradient(180deg, #060606 0%, #0b0b0b 100%);
  color:#eee;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Topbar */
.topbar{
  max-width:var(--max-width);
  margin:20px auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:64px;height:64px;border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #f3d28a 0%, #b8871d 100%); box-shadow:0 6px 18px rgba(184,135,29,0.14), inset 0 -4px 8px rgba(0,0,0,0.25);
}
.title{font-family:'Playfair Display', serif; font-weight:700; letter-spacing:0.6px; font-size:18px}
.subtitle{font-size:12px;color:var(--muted)}

/* nav */
.nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:600}
.nav a:hover{color:#fff}

/* Hero */
.hero-inner{
  max-width:var(--max-width);
  margin:20px auto; display:flex; gap:28px; padding:32px;
  align-items:flex-start;
}
.left{flex:1}
.right{width:360px}
h1{
  font-family:'Playfair Display', serif;
  font-size:44px; margin:0 0 8px 0; line-height:1.02;
  text-shadow: 0 6px 22px rgba(0,0,0,0.7);
}
.lead{color:var(--muted); max-width:700px; margin-top:8px; font-size:16px}
.cta-row{margin-top:22px; display:flex; gap:12px; align-items:center}
.btn{padding:12px 18px; border-radius:999px; font-weight:700; cursor:pointer; border:0; background:transparent}
.btn.primary{background:var(--accent); color:#111; box-shadow: 0 8px 24px rgba(184,135,29,0.14); transform:translateZ(0)}
.btn.ghost{border:1px solid rgba(255,255,255,0.06); color:var(--muted)}
.btn.outline{border:2px solid rgba(184,135,29,0.14); color:var(--accent); background:transparent; padding:10px 14px; width:100%}

/* preview */
.preview{margin-top:24px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.03)}
.excerpt-label{font-size:12px;color:var(--muted)}
.excerpt{font-family:'Playfair Display', serif; margin:8px 0 0 0; font-size:18px}
.excerpt .blur{filter:blur(2px); user-select:none}
.meta{margin-top:12px; color:var(--muted); font-size:13px}

/* card */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.03)}
.card-head{display:flex; justify-content:space-between; align-items:center}
.small{color:var(--muted); font-size:13px}
.big{font-size:18px; font-weight:700}
.price{font-size:26px; font-weight:900}
.features{margin-top:12px; list-style:none; padding:0; color:var(--muted)}
.features li{margin:8px 0}
.why{margin-top:12px; color:var(--muted); font-size:14px}

/* testimonials */
.testimonials{margin-top:16px; color:var(--muted)}
.testimonials blockquote{margin:10px 0; font-style:italic; color:#ddd}

/* rarity */
.rarity-section{max-width:var(--max-width); margin:18px auto; padding:28px}
.container h2{font-family:'Playfair Display', serif; font-size:28px; margin-bottom:8px}
.muted{color:var(--muted)}

/* tiles */
.cards{display:flex; gap:16px; margin-top:12px}
.tile{flex:1; background:var(--panel); padding:16px; border-radius:10px; border:1px solid rgba(255,255,255,0.03)}

/* footer */
.footer{max-width:var(--max-width); margin:18px auto; padding:18px; text-align:left; color:var(--muted)}

/* modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.75)); z-index:1200}
.modal[aria-hidden="false"]{display:flex}
.modal-dialog{background:linear-gradient(180deg, rgba(20,20,20,0.92), rgba(10,10,10,0.95)); padding:22px; border-radius:14px; width:90%; max-width:640px; border:1px solid rgba(255,255,255,0.03)}
.close{position:absolute; right:18px; top:12px; background:transparent; border:0; font-size:28px; color:#fff}
.apply-form label{display:block; margin:10px 0; font-size:14px}
.apply-form input[type="text"], .apply-form input[type="email"], .apply-form textarea{width:100%; padding:12px; border-radius:8px; border:1px solid #222; background:#080808; color:#fff}
.form-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
.agree{font-size:13px; color:var(--muted)}
.status{margin-top:10px; color:var(--muted)}

/* Footer layout */
.footer .container{max-width:1200px; margin:0 auto; padding:18px;}
.footer-grid{display:flex; gap:28px; align-items:flex-start; margin-bottom:18px;}
.f-col{flex:1}
.brandfoot{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.logo-small{width:40px;height:40px;border-radius:8px; overflow:hidden}
.brandname{font-family:'Playfair Display', serif; font-weight:700; letter-spacing:0.6px}
.f-title{font-weight:700; margin-bottom:6px}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,0.03); padding-top:12px; margin-top:12px; font-size:13px}

.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:#fff}

/* small responsive tweaks */
@media (max-width:900px){
  .hero-inner{flex-direction:column; padding:16px}
  .right{width:100%}
  .cards{flex-direction:column}
  .footer-grid{flex-direction:column}
  .footer-bottom{flex-direction:column; gap:8px; align-items:flex-start}
}