
:root{
  --bg:#0a0b0f; --surface:#0f1218; --text:#f5f6f8; --muted:#a3a3ad;
  --gold:#d4af37; --line:#1c2230; --accent:#60a5fa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;border-radius:14px}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:20px}
/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(10,11,15,.72);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px}
.brand .name{font-weight:800;letter-spacing:.2px}
.nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap}
.nav a{font-weight:600}
/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{min-height:72vh;display:flex;align-items:center;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2)),url('assets/hero.jpg') center/cover no-repeat}
.hero h1{font-size:clamp(32px,7vw,64px);line-height:1.05;margin:0 0 10px}
.hero p{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:820px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.badge{display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:#e5e7eb}
.header-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--gold);color:#0c0c0c;font-weight:800}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
/* Section basics */
.section{padding:40px 0}
.title{font-size:28px;color:var(--gold);margin:0 0 10px}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.0));border:1px solid var(--line);border-radius:16px;padding:18px}
.card h3{margin:10px 0;color:var(--gold)}
/* Parallax band */
.band{background:url('assets/process.jpg') center/cover fixed;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .overlay{background:rgba(0,0,0,.45);padding:80px 0}
.band h2{font-size:34px;margin:0 0 8px}
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{background:rgba(15,18,24,.8);border:1px solid var(--line);border-radius:14px;padding:14px}
.step strong{color:var(--gold)}
/* Gallery */
.gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* Credentials */
.list{display:grid;gap:10px}
.list .row{display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;background:var(--gold);border-radius:50%}
/* Footer + mobile sticky */
.footer{border-top:1px solid var(--line);margin-top:50px}
.small{color:var(--muted);font-size:14px}
.sticky-cta{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:10px;background:rgba(10,11,15,.85);backdrop-filter:blur(8px);border:1px solid var(--line);padding:10px 12px;border-radius:14px}
@media (min-width:760px){.sticky-cta{display:none}}
/* Subtle shine animation on hero */
.hero::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
background:conic-gradient(from 0deg, transparent, rgba(212,175,55,.08), transparent 20%);
animation:spin 12s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
