html{
scroll-behavior:smooth;
}
.hero-section {
position: relative;
min-height: 70vh;
overflow: hidden;
display: flex;
align-items: center;
background: #000;
padding-bottom: 60px;
}
/* Gambar Background */
.hero-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
url('/assets/img/illustrations/landing-hero.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
}
/* Overlay gelap supaya text jelas */
.hero-section::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.85) 30%,
rgba(0, 0, 0, 0.55) 60%,
rgba(0, 0, 0, 0.15) 100%
);
z-index: 2;
}
/* Content */
.hero-content {
position: relative;
z-index: 3;
max-width: 700px;
}
/* Title */
.hero-title {
font-size: 4.5rem;
font-weight: 800;
line-height: 1.1;
color: #fff;
margin-bottom: 1.5rem;
max-width:600px;
}
/* Description */
.hero-description {
font-size: 1.25rem;
color: rgba(255,255,255,.75);
margin-bottom: 2rem;
}
/* Stats */
.hero-stats {
margin-top: 2rem;
}
.hero-stats h3 {
color: #d4af37;
font-weight: 800;
margin-bottom: 0;
}
.hero-stats small {
color: rgba(255,255,255,.75);
}
/* Button */
.btn-gold {
background: #d4af37;
color: #fff;
border: none;
padding: 14px 30px;
border-radius: 12px;
font-weight: 600;
}
.btn-gold:hover {
background: #c39a25;
color: #fff;
}
/* Mobile */
@media (max-width: 991px) {
.hero-section {
min-height: 800px;
}
.hero-title {
font-size: 3rem;
}
.hero-section::after {
background:
linear-gradient(
180deg,
rgba(0,0,0,.85) 0%,
rgba(0,0,0,.75) 100%
);
}
}
.btn-purchase{
margin-top:10px;
background:#d4af37;
border:none;
color:#000;
font-weight:700;
border-radius:12px;
padding:14px 40px;
}
.gold-price-section {
margin-top: -90px;
position: relative;
z-index: 20;
}
.gold-price-card {
background:
linear-gradient(
135deg,
rgba(5,5,5,.98),
rgba(15,15,15,.98),
rgba(35,25,0,.98)
);
border-radius: 24px;
padding: 20px 40px;
border:1px solid rgba(212,175,55,.15);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 20px 60px rgba(0,0,0,.45);
backdrop-filter: blur(10px);
}
.gold-price-card .row{
margin-bottom:0;
}
.gold-block {
display: flex;
align-items: center;
gap: 20px;
}
.gold-price-card h3 {
font-size: 32px;
margin-bottom: 0;
font-weight: 700;
}
.gold-price-card h2 {
font-size: 36px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 6px;
}
.gold-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: #d4af37;
color: #000;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow:
0 0 20px rgba(212,175,55,.3);
}
.gold-price-card small {
font-size: 13px;
color: rgba(255,255,255,.65);
}
.btn-purchase {
background: #d4af37;
color: #000;
border: none;
font-weight: 700;
padding: 12px 30px;
border-radius: 10px;
transition: .3s;
}
.btn-purchase:hover {
background: #e3c04d;
transform: translateY(-2px);
}
@media(max-width:991px){
.gold-price-wrapper{
margin-top:20px;
}
.gold-block{
justify-content:center;
margin-bottom:30px;
}
}
.price-buy {
color:#69e323;
font-size:28px;
font-weight:800;
}
.price-sell {
color:#ff4d4d;
font-size:28px;
font-weight:800;
}
.why-card{
background:#fff;
border-radius:16px;
padding:40px 25px;
text-align:center;
height:100%;
border:1px solid #efefef;
box-shadow:0 4px 20px rgba(0,0,0,.05);
transition:.3s;
}
.why-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.why-icon{
font-size:56px;
color:#d4af37;
margin-bottom:20px;
display:block;
}
.why-card h5{
font-weight:700;
margin-bottom:15px;
line-height:1.4;
}
.why-card p{
color:#666;
margin-bottom:0;
line-height:1.8;
}
/* ==========================================
HOW IT WORKS
========================================== */
.how-it-works-section{
padding:80px 0;
background:
linear-gradient(
135deg,
#020202,
#080808,
#151000
);
}
.works-title{
color:#fff;
font-size:40px;
font-weight:800;
margin-bottom:15px;
}
.works-title span{
color:#d4af37;
}
.section-divider{
width:180px;
height:2px;
background:#d4af37;
margin:0 auto 40px;
position:relative;
}
.section-divider span{
width:14px;
height:14px;
border-radius:50%;
background:#d4af37;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.step-item{
position:relative;
text-align:center;
}
.step-number{
position:absolute;
top:-8px;
left:50%;
transform:translateX(-80px);
width:42px;
height:42px;
border-radius:50%;
background:#d4af37;
color:#000;
font-weight:700;
font-size:20px;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
}
.step-icon{
width:150px;
height:150px;
margin:0 auto 25px;
border-radius:50%;
border:2px solid rgba(212,175,55,.45);
display:flex;
align-items:center;
justify-content:center;
color:#d4af37;
font-size:50px;
transition:.3s;
}
.step-item:hover .step-icon{
border-color:#d4af37;
box-shadow:
0 0 30px rgba(212,175,55,.15);
}
.step-item h5{
color:#fff;
font-size:18px;
font-weight:700;
margin-bottom:12px;
}
.step-item p{
color:rgba(255,255,255,.70);
font-size:15px;
line-height:1.8;
max-width:220px;
margin:0 auto;
}
.step-arrow{
position:absolute;
top:55px;
right:-38px;
color:#d4af37;
font-size:36px;
opacity:.8;
}
.col-lg-3:last-child .step-arrow{
display:none;
}
@media(max-width:991px){
.works-title{
font-size:38px;
}
.section-divider{
margin-bottom:50px;
}
.step-item{
margin-bottom:50px;
}
.step-arrow{
display:none;
}
.step-number{
transform:translateX(-70px);
}
.step-icon{
width:130px;
height:130px;
font-size:42px;
}
}
.gti-section{
background:#fff;
padding:0;
}
.gti-section img{
width:100%;
display:block;
}
/* ==========================================
REFERRAL
========================================== */
.referral-section{
position:relative;
overflow:hidden;
padding:100px;
background:
linear-gradient(
90deg,
rgba(0,0,0,.92) 0%,
rgba(0,0,0,.75) 35%,
rgba(0,0,0,.20) 70%,
rgba(0,0,0,.05) 100%
),
url('/assets/img/illustrations/referral-network-bg.png');
background-size:cover;
background-position:center right;
background-repeat:no-repeat;
}
/* .referral-section::before{
content:'';
position:absolute;
inset:0;
background-image:
url('/assets/img/illustrations/referral-network.png');
background-position:right center;
background-repeat:no-repeat;
background-size:55%;
opacity:.35;
z-index:1;
} */
/* .referral-section::after{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.85) 40%,
rgba(0,0,0,.30) 100%
);
z-index:2;
} */
.referral-content{
position:relative;
z-index:3;
max-width:600px;
}
.referral-badge{
color:#d4af37;
font-weight:700;
letter-spacing:1px;
display:block;
margin-bottom:15px;
}
.referral-title{
color:#fff;
font-size:56px;
font-weight:800;
line-height:1.1;
margin-bottom:20px;
}
.referral-title span{
color:#d4af37;
}
.referral-description{
color:rgba(255,255,255,.75);
font-size:18px;
line-height:1.8;
margin-bottom:30px;
max-width:500px;
}
.btn-referral{
background:#d4af37;
color:#000;
border:none;
font-weight:700;
padding:14px 32px;
border-radius:12px;
}
.btn-referral:hover{
background:#e6c24b;
color:#000;
}
@media(max-width:991px){
.referral-section{
padding:70px 0;
}
.referral-section::before{
background-size:90%;
opacity:.15;
}
.referral-title{
font-size:38px;
}
}
/* FOOTER */
.footer-section{
background:
linear-gradient(
135deg,
#020202,
#080808,
#151000
);
padding:70px 0 30px;
border-top:1px solid rgba(212,175,55,.15);
}
.footer-description{
color:rgba(255,255,255,.70);
line-height:1.8;
max-width:320px;
}
.footer-title{
color:#d4af37;
font-weight:700;
margin-bottom:20px;
}
.footer-links{
list-style:none;
padding:0;
margin:0;
}
.footer-links li{
margin-bottom:12px;
}
.footer-links a{
color:rgba(255,255,255,.70);
text-decoration:none;
transition:.3s;
}
.footer-links a:hover{
color:#d4af37;
}
.footer-contact{
list-style:none;
padding:0;
margin:0;
}
.footer-contact li{
color:rgba(255,255,255,.70);
margin-bottom:15px;
}
.footer-contact i{
color:#d4af37;
margin-right:10px;
}
.footer-divider{
border-color:rgba(255,255,255,.08);
margin:20px 0 25px;
}
.footer-social a{
width:40px;
height:40px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(212,175,55,.08);
color:#d4af37;
text-decoration:none;
margin-left:10px;
transition:.3s;
}
.footer-social a:hover{
background:#d4af37;
color:#000;
}
/* ==========================================
MOBILE NAVBAR
========================================== */
@media(max-width:991px){
.navbar-collapse{
background:#252949;
padding:20px;
margin-top:10px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.navbar-nav{
gap:10px;
}
.navbar-nav .nav-link{
color:#fff !important;
padding:10px 0;
}
.navbar-nav .btn{
width:100%;
}
}