:root{
  --bg:#0b0b0f;--panel:#12131a;--border:#2a2c38;--text:#e9eef5;
  --muted:#a7b0c0;--accent1:#ffd54a;--accent2:#e53935;--white: #ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
a{color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter: blur(8px);border-bottom:1px solid #ffffff1a}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand img{width:40px;height:40px;object-fit:contain}
.brand h1{font-size:16px;margin:0;line-height:1}
.brand small{display:block;color:var(--muted)}
.menu a{padding:8px 10px;border-radius:12px;text-decoration:none;color:#e6e6e6}
.menu a:hover{background:#ffffff14}
.btn{display:inline-block;padding:12px 16px;border-radius:16px;font-weight:600;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#000}
.btn-ghost{border:1px solid #ffffff2a}
.hero{position:relative;overflow:hidden}
.hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:48px 0}
@media(max-width:900px){.hero .inner{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 10px 30px #00000040}
h2{margin:0 0 8px}
.eyebrow{color:var(--muted);text-transform:uppercase;font-size:12px;letter-spacing:.15em;margin-bottom:6px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff08;color:#cdd6e4;font-size:12px;margin-right:6px}
.hero-card{aspect-ratio:3/4;border-radius:24px;background:#000 url('assets/card-back.png') center/cover;border:1px solid #ffffff1a;box-shadow:0 15px 40px #00000080}
.section{margin:56px 0}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.card-grid{grid-template-columns:repeat(2,1fr)}}
.card-tile{border:1px solid #ffffff1a;border-radius:16px;overflow:hidden;background:#ffffff08}
.card-thumb{aspect-ratio:3/4;background:#000 center/cover}
.card-info{padding:8px 10px;font-size:12px;color:#cbd5e1;display:flex;justify-content:space-between;gap:6px}
.controls{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;margin-bottom:12px}
.controls input,.controls select{background:#ffffff0a;border:1px solid #ffffff1a;color:#fff;padding:10px;border-radius:12px}
.footer{border-top:1px solid #ffffff19;margin-top:56px;padding:24px 0;color:#98a3b5;text-align:center;font-size:12px}
.notice{color:#9bb1c9;font-size:12px;margin-top:8px}
.hero-logo-left {
  display: block;
  margin: 0 0 16px 0;   
  width: 100%;          
  max-width: 520px;     
  height: auto;
}

@media (min-width: 900px) {
  .hero-logo-left {
    max-width: 620px;   
  }
}
.hero .inner > div:first-child p {
  margin-top: 8px;    
  margin-bottom: 16px; 
  line-height: 1.5;   
}

.hero .inner > div:first-child .btn {
  margin-top: 8px;    
}
.tagline {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  margin: -20px 0 12px 0; 
  color: var(--muted);
}
select {
  background-color: #0b0b0f;
  color: #fff;        
  border: 1px solid #ffffff1a;
}

select option {
  background-color: #0b0b0f; 
  color: #fff;          
}
select {
  border-radius: 12px;
  padding: 10px;
}