/* ============================
HERO
============================ */

.hero {

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background:
radial-gradient(circle at top right,rgba(200,164,93,.18),transparent 35%),
radial-gradient(circle at left bottom,rgba(255,255,255,.05),transparent 30%),
#050505;

padding-top:120px;

}

.hero::before {

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:rgba(200,164,93,.08);

filter:blur(140px);

right:-180px;

top:-180px;

}

.hero::after {

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(255,255,255,.03);

left:-150px;

bottom:-150px;

filter:blur(120px);

}

.hero-grid {

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:80px;

position:relative;

z-index:2;

}

.hero h1 {

margin:25px 0;

max-width:760px;

}

.hero p {

font-size:22px;

margin-bottom:35px;

max-width:700px;

line-height:1.8;

}

.hero-list {

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin:45px 0;

}

.hero-list div {

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

padding:18px;

border-radius:14px;

font-weight:600;

}

.hero-buttons {

display:flex;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.hero-image {

position:relative;

display:flex;

justify-content:center;

}

.hero-card {

width:460px;

background:linear-gradient(180deg,#181818,#101010);

border:1px solid rgba(255,255,255,.08);

border-radius:26px;

padding:35px;

box-shadow:0 30px 80px rgba(0,0,0,.45);

}

.hero-card h3 {

margin-bottom:25px;

font-size:30px;

}

.hero-card ul {

list-style:none;

display:flex;

flex-direction:column;

gap:18px;

}

.hero-card li {

padding-bottom:18px;

border-bottom:1px solid rgba(255,255,255,.08);

font-size:18px;

}

.hero-card li:last-child {

border:none;

}

.hero-card strong {

color:var(--gold);

}

.floating {

position:absolute;

background:#141414;

border:1px solid rgba(255,255,255,.08);

padding:18px 22px;

border-radius:16px;

box-shadow:0 15px 40px rgba(0,0,0,.35);

font-weight:700;

animation:float 5s ease-in-out infinite;

}

.floating.one {

top:40px;

left:-30px;

}

.floating.two {

bottom:30px;

right:-20px;

animation-delay:2s;

}

@keyframes float {

0% {

transform:translateY(0);

}

50% {

transform:translateY(-15px);

}

100% {

transform:translateY(0);

}

}

@media(max-width:1100px){

.hero-grid {

grid-template-columns:1fr;

}

.hero-image {

order:-1;

}

.hero-card {

width:100%;

max-width:500px;

}

}

@media(max-width:768px){

.hero-list {

grid-template-columns:1fr;

}

.hero p {

font-size:18px;

}

.hero-buttons {

flex-direction:column;

}
