/*
NOTE: @import yahan CSS ke top par render-blocking hota hai.
Best practice: is line ko hata kar HTML me directly daalo:
Filhaal @import rakha hai taaki CSS file standalone kaam kare.
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');
:root{
--navy-deep: #23262B; /* deep charcoal-gray, replaces navy */
--navy-mid: #2E323A;
--navy-soft: #3A3F47;
--gold: #F97316; /* primary orange */
--gold-bright: #EA580C; /* bright orange accent */
--ivory: #FFFFFF; /* white text */
--muted: #C7CBD1; /* light gray */
}
.hero-shell{
position:relative;
width:100%;
min-height:640px;
overflow:hidden;
isolation:isolate;
background:var(--navy-deep);
display:flex;
align-items:stretch;
}
/* ---------- Slides ---------- */
.slides{
position:absolute;inset:0;
display:flex;
transition:transform 900ms cubic-bezier(.65,0,.35,1);
will-change:transform;
}
.slide{
flex:0 0 100%;
min-width:100%;
overflow:hidden;
/* FIX: image load hone tak white flash na ho, dark background dikhe */
background:var(--navy-deep);
}
.slide img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.scrim{
position:absolute;inset:0;
background:
linear-gradient(180deg, rgba(8, 20, 38, 0.205) 0%, rgba(8, 20, 38, 0.178) 35%, rgba(8, 20, 38, 0.199) 100%),
linear-gradient(90deg, rgba(8, 20, 38, 0.25) 0%, rgba(8, 20, 38, 0.219) 42%, rgba(8,20,38,0.15) 75%);
z-index:1;
}
/* ---------- Hero content ---------- */
.hero-content{
position:relative; z-index:3;
display:flex; flex-direction:column; justify-content:center;
padding:70px 6vw;
max-width:760px;
width:100%;
}
.eyebrow{
display:flex; align-items:center; gap:12px;
margin-bottom:22px;
opacity:0; transform:translateY(14px);
/* FIX: delay 150ms -> 80ms, text jaldi dikhna start hoga */
animation:rise 700ms 80ms cubic-bezier(.2,.7,.3,1) forwards;
}
.eyebrow .rule{width:34px;height:2px;background:var(--gold);}
.eyebrow span{
font-family:'Inter'; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
color:var(--gold-bright); font-weight:600;
}
.hero-title{
font-family:'Fraunces', serif;
font-weight:600;
font-size:clamp(2.1rem, 4.4vw, 3.6rem);
line-height:1.08;
color:var(--ivory);
letter-spacing:-0.01em;
margin:0 0 20px;
opacity:0; transform:translateY(18px);
/* FIX: delay 280ms -> 160ms */
animation:rise 800ms 160ms cubic-bezier(.2,.7,.3,1) forwards;
}
.hero-title em{
font-style:italic; color:var(--gold-bright); font-weight:500;
}
.hero-subtitle{
font-size:clamp(1rem,1.3vw,1.15rem);
line-height:1.6;
color:white;
max-width:520px;
margin:0 0 34px;
opacity:0; transform:translateY(16px);
/* FIX: delay 420ms -> 240ms */
animation:rise 800ms 240ms cubic-bezier(.2,.7,.3,1) forwards;
}
.cta-row{
display:flex; gap:16px; flex-wrap:wrap;
opacity:0; transform:translateY(14px);
/* FIX: delay 560ms -> 320ms */
animation:rise 800ms 320ms cubic-bezier(.2,.7,.3,1) forwards;
margin-bottom:38px;
}
.btn-premium{
position:relative;
padding:15px 30px;
background:linear-gradient(135deg, var(--gold-bright), var(--gold));
color:var(--navy-deep);
font-weight:700; font-size:14.5px; letter-spacing:.02em;
text-decoration:none; border-radius:2px;
box-shadow:0 8px 24px -8px rgba(201,162,39,0.55);
transition:transform 220ms ease, box-shadow 220ms ease;
}
.btn-premium:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(201,162,39,0.7); }
.btn-outline-premium{
padding:15px 30px;
border:1px solid rgba(245,241,230,0.35);
color:var(--ivory);
font-weight:600; font-size:14.5px; letter-spacing:.02em;
text-decoration:none; border-radius:2px;
background:rgba(245,241,230,0.04);
backdrop-filter:blur(6px);
transition:border-color 220ms ease, background 220ms ease;
}
.btn-outline-premium:hover{ border-color:var(--gold-bright); background:rgba(245,241,230,0.09); }
/* ---------- Trust badge strip ---------- */
.badge-strip{
display:flex; gap:26px; flex-wrap:wrap;
padding-top:26px;
border-top:1px solid rgba(245,241,230,0.14);
opacity:0; transform:translateY(12px);
/* FIX: delay 700ms -> 400ms, poori chain ab ~1.2s ki jagah ~0.7s me complete */
animation:rise 800ms 400ms cubic-bezier(.2,.7,.3,1) forwards;
}
.badge{
display:flex; align-items:center; gap:9px;
}
.badge .dot{
width:6px;height:6px;border-radius:50%;background:var(--gold-bright);
box-shadow:0 0 0 3px rgba(232,196,88,0.18);
}
.badge span{
font-size:12.5px; color:var(--muted); letter-spacing:.03em; font-weight:500;
}
.badge strong{color:var(--ivory); font-weight:600;}
@keyframes rise{ to{opacity:1; transform:translateY(0);} }
/* ---------- Arrows ---------- */
.nav-arrow{
position:absolute; top:50%; transform:translateY(-50%);
z-index:4; width:44px; height:44px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:rgba(245,241,230,0.08);
border:1px solid rgba(245,241,230,0.22);
backdrop-filter:blur(8px);
cursor:pointer;
transition:background 200ms ease, border-color 200ms ease;
}
.nav-arrow:hover{ background:rgba(201,162,39,0.25); border-color:var(--gold-bright); }
.nav-arrow.prev{ left:24px; }
.nav-arrow.next{ right:24px; }
.nav-arrow svg{ width:20px; height:20px; stroke:var(--ivory); }
/* ---------- Dots ---------- */
.dots{
position:absolute; bottom:22px; right:6vw; z-index:4;
display:flex; gap:9px;
}
.dots button{
width:26px; height:3px; border:none; border-radius:2px;
background:rgba(245,241,230,0.28);
cursor:pointer; padding:0;
transition:background 250ms ease, width 250ms ease;
}
.dots button.active{ background:var(--gold-bright); width:38px; }
@media (max-width:640px){
.hero-shell{min-height:560px;}
.hero-content{padding:96px 24px; max-width:100%;}
.badge-strip{gap:16px 22px;}
.nav-arrow{width:38px;height:38px;}
.dots{right:24px;}
}