body
{
margin:0;
background: radial-gradient(circle at center, #0b1440 0%, #070b1a 60%, #040611 100%);
color:white;
font-family: "Times New Roman", serif; letter-spacing: 1px;
overflow:hidden;
}

.hero
{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}

.space
{
position:relative;
width:500px;
height:500px;
}

.globe
{
width:100%;
position:absolute;
top:0;
left:0;
}

.tractor
{
width:120px;
position:absolute;
top:50%;
left:50%;
transform-origin:-200px center;
}

.logo
{
width:200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
opacity:0;
}

.text
{
position:absolute;
bottom:80px;
text-align:center;
opacity:0;
}

h1
{
font-size:48px;
margin:0;
}

p
{
color:#aaa;
font-size:18px;
}

.orbit
{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}

.tractor
{
width:90px;
position:absolute;
top:50%;
left:50%;
transform-origin:-250px center;
}

.space
{
position:relative;
width:500px;
height:500px;
margin:auto;
}

.globe
{
width:100%;
position:absolute;
top:0;
left:0;
}

.orbit-path
{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}

.tractor
{
width:100px;
position:absolute;
top:50%;
left:-100px;   /* start exactly outside left edge */
transform:translateY(-50%);
z-index:5;
}

.final-logo
{
width:100%;
position:absolute;
top:0;
left:0;
opacity:0;
}

.text
{
margin-top:40px;
text-align:center;
opacity:0;
}

.stars,
.stars2,
.stars3
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
}

/* Small stars */
.stars
{
background-image:
radial-gradient(1px 1px at 5% 10%, white, transparent),
radial-gradient(1px 1px at 15% 80%, white, transparent),
radial-gradient(1px 1px at 25% 30%, white, transparent),
radial-gradient(1px 1px at 35% 60%, white, transparent),
radial-gradient(1px 1px at 45% 20%, white, transparent),
radial-gradient(1px 1px at 55% 90%, white, transparent),
radial-gradient(1px 1px at 65% 40%, white, transparent),
radial-gradient(1px 1px at 75% 70%, white, transparent),
radial-gradient(1px 1px at 85% 15%, white, transparent),
radial-gradient(1px 1px at 95% 55%, white, transparent);
animation: twinkle1 3s infinite alternate;
opacity:0.6;
}

/* Medium stars */
.stars2
{
background-image:
radial-gradient(2px 2px at 10% 50%, white, transparent),
radial-gradient(2px 2px at 30% 15%, white, transparent),
radial-gradient(2px 2px at 50% 75%, white, transparent),
radial-gradient(2px 2px at 70% 25%, white, transparent),
radial-gradient(2px 2px at 90% 65%, white, transparent);
animation: twinkle2 5s infinite alternate;
opacity:0.5;
}

/* Large glitter stars */
.stars3
{
background-image:
radial-gradient(3px 3px at 20% 20%, white, transparent),
radial-gradient(3px 3px at 60% 60%, white, transparent),
radial-gradient(3px 3px at 80% 30%, white, transparent);
animation: twinkle3 7s infinite alternate;
opacity:0.8;
}

/* Twinkle animations */

@keyframes twinkle1
{
0% {opacity:0.3;}
50% {opacity:0.9;}
100% {opacity:0.4;}
}

@keyframes twinkle2
{
0% {opacity:0.2;}
50% {opacity:0.7;}
100% {opacity:0.3;}
}

@keyframes twinkle3
{
0% {opacity:0.4;}
50% {opacity:1;}
100% {opacity:0.5;}
}


.main-header
{
position:fixed;
top:20px;
left:30px;
opacity:0;
z-index:100;
}

.main-header a
{
color:white;
margin-right:20px;
text-decoration:none;
font-size:18px;
}

.social-icons
{
position:fixed;
bottom:20px;
left:30px;
opacity:0;
z-index:100;
}

.social-icons img
{
width:22px;
filter:brightness(0) invert(1);
opacity:0.7;
}

.social-icons img:hover
{
opacity:1;
transform:scale(1.2);
}

.dropdown
{
position:relative;
display:inline-block;
}

.dropdown-content
{
display:none;
position:absolute;
background:rgba(10,15,40,0.95);
min-width:280px;
padding:15px;
border-radius:8px;
backdrop-filter: blur(10px);
}

.dropdown-content a
{
display:block;
padding:10px;
color:white;
font-size:16px;
}

.dropdown:hover .dropdown-content
{
display:block;
}

.next-section
{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
color:white;
font-size:28px;
text-align:center;
opacity:0;
}

.legacy-section
{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:100px 50px;
position:relative;
z-index:10;
}

.legacy-wrapper
{
display:flex;
max-width:1200px;
width:100%;
align-items:center;
justify-content:space-between;
gap:60px;
}

.legacy-left
{
flex:1;
color:white;
}

.legacy-left h2
{
font-size:48px;
margin-bottom:30px;
}

.legacy-left p
{
font-size:20px;
margin-bottom:20px;
opacity:0.8;
}

.trusted-line
{
font-size:24px;
margin-top:30px;
font-weight:bold;
}

.legacy-right
{
flex:1;
display:flex;
justify-content:center;
}

.generation-svg
{
width:350px;
opacity:0.9;
}

.brand-logos
{
display:flex;
flex-wrap:wrap;
gap:30px;
margin-top:30px;
}

.brand-logos img
{
height:50px;
opacity:0.6;
transition:0.4s;
}

.brand-logos img:hover
{
opacity:1;
transform:scale(1.1);
}

.brands-section
{
width:100%;
padding:80px 0;
overflow:hidden;
}

.brands-section h3
{
margin-left:60px;
margin-bottom:40px;
color:white;
}

.logo-strip
{
width:100%;
overflow:hidden;
}

.logo-track
{
display:flex;
align-items:center;
gap:40px;
padding-left:60px;
padding-right:60px;
animation: scrollLogos 25s linear infinite;
}

.logo-track img
{
height:50px;
opacity:0.8;
transition:0.3s;
}

.logo-track img:hover
{
opacity:1;
transform:scale(1.1);
}

@keyframes scrollLogos
{
0%
{
transform:translateX(0);
}

100%
{
transform:translateX(-50%);
}
}

.logo-card
{
display:flex;
align-items:center;
justify-content:center;

background:white;

padding:12px 28px;

border-radius:6px;

min-width:160px;
height:70px;

box-shadow:
0 0 8px rgba(255,255,255,0.15),
0 0 20px rgba(255,255,255,0.08);

transition:all 0.3s;
}

.logo-card img
{
max-height:45px;
max-width:140px;
object-fit:contain;
}

.logo-card:hover
{
transform:translateY(-5px) scale(1.05);

box-shadow:
0 0 12px rgba(255,255,255,0.3),
0 0 30px rgba(255,255,255,0.15);
}

html
{
scroll-behavior: smooth;
}

#about
{
scroll-margin-top: 100px;
}