@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
--bg:#07141a;
--bg-soft:#10252d;
--panel:rgba(8,24,31,0.82);
--panel-solid:#112129;
--text:#f5efe3;
--muted:#d6c9b3;
--accent:#e7bf6d;
--accent-strong:#ffd98d;
--line:rgba(231,191,109,0.14);
--shadow:0 24px 80px rgba(0,0,0,0.28);
}

*{box-sizing:border-box;}

body{
margin:0;
font-family:"Manrope","Segoe UI",sans-serif;
background:radial-gradient(circle at top,#123340 0%,#07141a 55%,#050b0f 100%);
color:var(--text);
line-height:1.7;
}

a{color:inherit;}

header{
position:sticky;
top:0;
z-index:20;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
flex-wrap:wrap;
padding:16px 8%;
background:rgba(7,20,26,0.88);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}

.brand{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
}

.brand-title{
margin:0;
font-family:"Cormorant Garamond",serif;
font-size:34px;
letter-spacing:0.04em;
color:var(--accent);
}

.top-links{
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
row-gap:10px;
}

.top-links a{
text-decoration:none;
font-weight:700;
color:var(--muted);
}

.top-links a:hover{color:var(--accent-strong);}

.header-actions{
display:flex;
align-items:center;
gap:12px;
margin-left:18px;
flex-wrap:wrap;
}

.header-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 18px;
border-radius:12px;
text-decoration:none;
font-weight:800;
}

.header-btn-primary{
background:var(--accent);
color:#08141a;
}

.header-btn-secondary{
border:1px solid rgba(231,191,109,0.22);
background:rgba(231,191,109,0.08);
color:var(--text);
}

main{padding:42px 8% 90px;}

.hero{
display:grid;
grid-template-columns:minmax(280px,460px) minmax(0,1fr);
gap:34px;
align-items:center;
margin-top:24px;
}

.panel{
background:var(--panel);
border:1px solid var(--line);
border-radius:28px;
box-shadow:var(--shadow);
}

.hero-card{
padding:28px;
text-align:center;
}

.hero-card img{
width:100%;
max-width:390px;
display:block;
margin:0 auto;
}

.hero-copy{padding:36px;}

.eyebrow{
display:inline-flex;
padding:8px 16px;
border-radius:999px;
border:1px solid rgba(231,191,109,0.22);
background:rgba(231,191,109,0.12);
color:var(--accent-strong);
font-size:14px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
}

h1{
margin:18px 0 12px;
font-family:"Cormorant Garamond",serif;
font-size:68px;
line-height:0.95;
}

.lead{
margin:0;
font-size:20px;
color:var(--muted);
max-width:700px;
}

.cta-row{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:28px;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:12px;
text-decoration:none;
font-weight:800;
}

.btn-primary{
background:var(--accent);
color:#08141a;
}

.btn-secondary{
border:1px solid rgba(231,191,109,0.22);
background:rgba(231,191,109,0.08);
color:var(--text);
}

.facts{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
margin-top:26px;
}

.fact{
padding:18px;
background:var(--panel-solid);
border:1px solid var(--line);
border-radius:18px;
}

.fact span{
display:block;
font-size:13px;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--accent-strong);
margin-bottom:8px;
}

.fact strong{font-size:18px;}

.layout{
display:grid;
grid-template-columns:minmax(0,1.5fr) minmax(280px,0.8fr);
gap:24px;
margin-top:34px;
}

.content-block,
.side-block{
padding:28px;
background:var(--panel-solid);
border:1px solid var(--line);
border-radius:24px;
}

h2{
margin:0 0 14px;
font-family:"Cormorant Garamond",serif;
font-size:42px;
color:var(--accent);
}

h3{
margin:24px 0 10px;
font-size:24px;
color:var(--text);
}

p{
margin:0 0 16px;
color:var(--muted);
font-size:18px;
}

ul{
margin:0;
padding-left:20px;
color:var(--muted);
}

li{margin-bottom:10px;}

.slot-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-top:18px;
}

.slot-card{
padding:18px;
background:rgba(7,20,26,0.62);
border:1px solid var(--line);
border-radius:18px;
}

.slot-card strong{
display:block;
margin-bottom:8px;
color:var(--text);
}

footer{
padding:40px 8%;
text-align:center;
color:var(--muted);
}

@media (max-width: 980px){
.hero,
.layout{grid-template-columns:1fr;}
.facts{grid-template-columns:repeat(2,minmax(0,1fr));}
.hero-card img{max-width:420px;}
header{
align-items:flex-start;
}
}

@media (max-width: 860px){
header{
padding:14px 18px;
flex-direction:column;
align-items:flex-start;
}

.top-links{
width:100%;
justify-content:flex-start;
gap:14px;
}

.header-actions{
margin-left:0;
width:100%;
}

.header-btn{
flex:1 1 180px;
}

main{padding:26px 18px 70px;}
h1{font-size:46px;}
.lead,p{font-size:17px;}
.hero-copy,
.hero-card,
.content-block,
.side-block{padding:22px;}
.facts,
.slot-grid{grid-template-columns:1fr;}
}

@media (max-width: 560px){
header{padding:14px 18px;}
.brand-title{font-size:28px;}
.top-links{
gap:12px;
font-size:15px;
}
.header-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.header-btn{
width:100%;
padding:12px 14px;
}
h1{font-size:38px;}
.hero{
gap:20px;
}
.hero-card{
padding:18px;
}
.hero-copy,
.content-block,
.side-block{padding:18px;}
.facts{
grid-template-columns:1fr;
gap:12px;
}
.fact{
padding:16px;
}
.slot-grid{
grid-template-columns:1fr;
}
}