* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;
overflow-x: hidden;

 
font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

color: #fff;

background:
    radial-gradient(
        circle at 50% 0%,
        rgba(90, 120, 255, 0.18),
        transparent 35%
    ),
    radial-gradient(
        circle at 20% 80%,
        rgba(120, 80, 255, 0.08),
        transparent 30%
    ),
    #050509;
 

}


.stars {
position: fixed;
inset: 0;
z-index: -1;

 
pointer-events: none;

opacity: .7;

background-image:
    radial-gradient(
        circle,
        rgba(255,255,255,.8) 1px,
        transparent 1px
    ),
    radial-gradient(
        circle,
        rgba(255,255,255,.45) 1px,
        transparent 1px
    );

background-size:
    140px 140px,
    220px 220px;

background-position:
    20px 30px,
    80px 100px;

mask-image:
    linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
 

}



.hero {
min-height: 88vh;

 
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

text-align: center;

padding: 80px 20px;
 

}

.logo {
width: min(360px, 65vw);
height: auto;

 
margin-bottom: 28px;

filter:
    drop-shadow(
        0 0 25px rgba(120,150,255,.18)
    )
    drop-shadow(
        0 0 70px rgba(80,100,255,.08)
    );

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

}

.hero h1 {
max-width: 900px;

 
font-size:
    clamp(2.5rem, 7vw, 5.5rem);

line-height: 1;

letter-spacing: -.055em;

font-weight: 600;

background:
    linear-gradient(
        180deg,
        #fff,
        #d9d9e4 55%,
        #888896
    );

-webkit-background-clip: text;
background-clip: text;

color: transparent;
 

}

.hero-subtitle {
max-width: 600px;

 
margin: 25px auto 32px;

color: #92929f;

font-size: 17px;

line-height: 1.6;
 

}

.version {
display: block;

 
margin-top: 14px;

font-size: 12px;

color: #62626d;
 

}



.download-link {
text-decoration: none;
display: flex;
justify-content: center;
}

.download-link button {
display: flex;
align-items: center;
gap: 10px;

 
padding: 14px 23px;

border: 1px solid rgba(255,255,255,.16);
border-radius: 14px;

color: white;

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

font-size: 15px;
font-weight: 600;

cursor: pointer;

backdrop-filter: blur(18px);

box-shadow:
    0 10px 35px rgba(0,0,0,.3),
    inset 0 1px rgba(255,255,255,.08);

transition:
    .25s ease;
 

}

.download-link button:hover {
transform: translateY(-3px);

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

border-color:
    rgba(255,255,255,.3);

box-shadow:
    0 15px 45px rgba(0,0,0,.4),
    0 0 35px rgba(100,120,255,.12);
 

}

.download-link button:active {
transform: translateY(0);
}



.showcase {
width: min(1400px, 92%);

margin:
    0 auto 140px;

position: relative;
 

}

.showcase::before {
content: "";

 
position: absolute;

inset: -50px;

background:
    radial-gradient(
        ellipse,
        rgba(100,120,255,.14),
        transparent 65%
    );

filter: blur(40px);

z-index: -1;
 

}

.showcase img {
display: block;

 
width: 100%;

border-radius: 20px;

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

box-shadow:
    0 40px 120px rgba(0,0,0,.6);

transition: .5s ease;
 

}

.showcase img:hover {
transform: translateY(-6px);
}



.section {
width: min(1100px, 90%);

 
margin:
    0 auto 180px;
 

}

.section-heading {
text-align: center;

 
max-width: 700px;

margin: 0 auto 65px;
 

}

.eyebrow {
display: block;

 
margin-bottom: 15px;

color: #747482;

font-size: 11px;

font-weight: 700;

letter-spacing: .18em;
 

}

.section h2 {
font-size:
clamp(2rem, 5vw, 3.5rem);

 
letter-spacing: -.04em;

line-height: 1.1;
 

}

.section-heading h2 span {
color: #70707d;
}

.section-heading p {
margin-top: 20px;

 
color: #858590;

line-height: 1.7;
 

}

/* FEATURES */

.feature-grid {
display: grid;

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

gap: 16px;
 

}

.feature-card {
padding: 32px;

 
min-height: 220px;

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

border-radius: 22px;

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.07),
        rgba(255,255,255,.025)
    );

backdrop-filter: blur(15px);

transition: .3s ease;
 

}

.feature-card:hover {
transform: translateY(-5px);

 
border-color:
    rgba(255,255,255,.18);

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

}

.feature-icon {
font-size: 27px;

 
margin-bottom: 25px;
 

}

.feature-card h3 {
font-size: 21px;

 
margin-bottom: 10px;
 

}

.feature-card p {
color: #80808c;

 
line-height: 1.6;
 

}

/* WHY */

.why {
display: grid;

 
grid-template-columns:
    1fr 1fr;

align-items: center;

gap: 80px;
 

}

.why-content h2 {
font-size:
clamp(2.5rem, 5vw, 4rem);
}

.why-content p {
max-width: 520px;

 
margin-top: 22px;

color: #858590;

line-height: 1.7;
 

}

.why-visual {
display: flex;

 
justify-content: center;

padding: 50px;
 

}

.why-visual img {
width: min(300px, 80%);

 
filter:
    drop-shadow(
        0 0 70px rgba(100,120,255,.15)
    );

opacity: .9;
 

}

/* PRIVACY */

.privacy-card {
display: grid;

 
grid-template-columns: 100px 1fr;

gap: 35px;

padding: 55px;

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

border-radius: 28px;

background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.075),
        rgba(255,255,255,.025)
    );

backdrop-filter: blur(20px);
 

}

.privacy-icon {
width: 70px;
height: 70px;

 
display: grid;
place-items: center;

border-radius: 20px;

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

font-size: 28px;
 

}

.privacy-card h2 {
margin-bottom: 15px;
}

.privacy-card p {
color: #858590;

 
line-height: 1.6;
 

}

.privacy-list {
margin-top: 28px;

 
display: grid;

gap: 12px;

color: #aaaab4;

font-size: 14px;
 

}

.privacy-list span {
margin-right: 10px;

 
color: #fff;
 

}

/* DOWNLOAD */

.download-section {
text-align: center;

 
padding:
    140px 20px;

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

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

background:
    radial-gradient(
        circle at center,
        rgba(100,120,255,.1),
        transparent 55%
    );
 

}

.download-logo {
width: 150px;

 
margin-bottom: 30px;

opacity: .9;
 

}

.download-section h2 {
font-size:
clamp(2.3rem, 6vw, 4.5rem);

 
letter-spacing: -.05em;
 

}

.download-section p {
margin:
20px auto 32px;

 
max-width: 500px;

color: #858590;

line-height: 1.6;
 

}

/* FOOTER */

footer {
width: min(1100px, 90%);

 
margin: 0 auto;

padding:
    70px 0 30px;
 

}

.footer-main {
display: flex;

 
justify-content: space-between;

gap: 50px;
 

}

.footer-brand img {
width: 130px;

 
margin-bottom: 12px;
 

}

.footer-brand p {
color: #666671;

 
font-size: 14px;
 

}

.footer-links {
display: flex;

 
gap: 90px;
 

}

.footer-links h4 {
margin-bottom: 18px;

 
font-size: 13px;
 

}

.footer-links a {
display: block;

 
margin-bottom: 11px;

color: #70707b;

text-decoration: none;

font-size: 13px;

transition: .2s ease;
 

}

.footer-links a:hover {
color: white;
}

.footer-bottom {
display: flex;

 
justify-content: space-between;

margin-top: 70px;

padding-top: 25px;

border-top:
    1px solid rgba(255,255,255,.07);

color: #555560;

font-size: 12px;
 

}

.footer-bottom a {
color: #777782;

 
text-decoration: none;
 

}

.footer-bottom a:hover {
color: white;
}

/* ANIMATION */

@keyframes logoFloat {

 
0%,
100% {
    transform: translateY(0);
}

50% {
    transform: translateY(-7px);
}
 

}

/* MOBILE */

@media (max-width: 700px) {

 
.hero {
    min-height: 80vh;
}

.feature-grid {
    grid-template-columns: 1fr;
}

.why {
    grid-template-columns: 1fr;

    gap: 30px;
}

.why-visual {
    order: -1;
}

.privacy-card {
    grid-template-columns: 1fr;

    padding: 35px;
}

.footer-main {
    flex-direction: column;
}

.footer-links {
    gap: 50px;
}

.footer-bottom {
    gap: 20px;
}
 

}

@media (prefers-reduced-motion: reduce) {

 
*,
*::before,
*::after {
    animation: none !important;
    transition: none !important;
}
 

}