/*==================================================
  ZENTRIQ STUDIO
  Future-Ready Android Apps
==================================================*/

:root{

--bg:#070B14;
--bg2:#0E1525;
--card:rgba(255,255,255,.05);

--primary:#00D4FF;
--secondary:#7B2DFF;

--text:#FFFFFF;
--muted:#B6C2D1;

--border:rgba(255,255,255,.08);

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

--radius:22px;

--transition:.35s ease;

}

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

html{

scroll-behavior:smooth;

}

body{

font-family:Inter,sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

/*======================================
Scrollbar
======================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0d1320;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

border-radius:50px;

}

/*======================================
Selection
======================================*/

::selection{

background:var(--primary);

color:black;

}

/*======================================
Container
======================================*/

.container{

width:min(1180px,92%);

margin:auto;

}

/*======================================
Animated Aurora
======================================*/

.aurora{

position:fixed;

inset:0;

z-index:-3;

background:
radial-gradient(circle at 20% 20%,
rgba(0,212,255,.18),
transparent 30%),

radial-gradient(circle at 80% 30%,
rgba(123,45,255,.20),
transparent 35%),

radial-gradient(circle at 50% 90%,
rgba(0,212,255,.12),
transparent 30%),

#070B14;

animation:auroraMove 18s infinite alternate ease-in-out;

}

@keyframes auroraMove{

0%{

transform:scale(1);

}

100%{

transform:scale(1.15);

}

}

/*======================================
Grid Background
======================================*/

.grid{

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size:70px 70px;

opacity:.25;

z-index:-2;

mask-image:radial-gradient(circle,black 35%,transparent 100%);

}

/*======================================
Header
======================================*/

header{

position:sticky;

top:0;

backdrop-filter:blur(20px);

background:rgba(7,11,20,.65);

border-bottom:1px solid var(--border);

z-index:1000;

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

/*======================================
Logo
======================================*/

.logo{

display:flex;

align-items:center;

gap:16px;

}

.logo-icon{

width:58px;

height:58px;

border-radius:18px;
padding-right:15px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:700;

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

box-shadow:

0 0 25px rgba(0,212,255,.45);

}

.logo h2{

font-size:1.3rem;

font-family:"Space Grotesk",sans-serif;

}

.logo p{

color:var(--muted);

font-size:.9rem;

}

/*======================================
Navigation
======================================*/

nav{

display:flex;

align-items:center;

gap:30px;

}

nav a{

text-decoration:none;

color:white;

transition:var(--transition);

font-weight:500;

}

nav a:hover{

color:var(--primary);

}

.btn-nav{

padding:12px 24px;

border-radius:999px;

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white!important;

box-shadow:

0 10px 30px rgba(0,212,255,.30);

transition:var(--transition);

}

.btn-nav:hover{

transform:translateY(-3px);

}

/*======================================
Hero
======================================*/

.hero{

padding:110px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

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

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

color:var(--primary);

margin-bottom:25px;

font-weight:600;

}

.hero h1{

font-size:4rem;

font-family:"Space Grotesk",sans-serif;

line-height:1.05;

margin-bottom:25px;

}

.hero h1 span{

background:

linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.15rem;

color:var(--muted);

max-width:650px;

}

/*======================================
Buttons
======================================*/

.hero-buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.primary,
.secondary{

padding:16px 32px;

border-radius:999px;

font-weight:600;

text-decoration:none;

transition:var(--transition);

}

.primary{

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

box-shadow:

0 15px 40px rgba(0,212,255,.30);

}

.primary:hover{

transform:translateY(-5px);

}

.secondary{

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

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

color:white;

backdrop-filter:blur(20px);

}

.secondary:hover{

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

}

/*======================================
Hero Logo
======================================*/

.hero-logo{

display:flex;

justify-content:center;

align-items:center;

}

.glow-circle{

width:420px;

height:420px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

radial-gradient(circle,
rgba(0,212,255,.15),
transparent 70%);

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

}

.glow-circle img{


border-radius: 35%;

filter:

drop-shadow(0 0 35px rgba(0,212,255,.45));

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/*==================================================
SECTION TITLES
==================================================*/

section{
    padding:100px 0;
}

.section-title{
    text-align:center;
    font-family:"Space Grotesk",sans-serif;
    font-size:2.8rem;
    margin-bottom:60px;
}

.section-title::after{
    content:"";
    display:block;
    width:90px;
    height:4px;
    margin:18px auto 0;
    border-radius:999px;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
}

/*==================================================
STATS
==================================================*/

.stats .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-card{

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

    border:1px solid var(--border);

    backdrop-filter:blur(25px);

    border-radius:22px;

    text-align:center;

    padding:35px;

    transition:.35s;
}

.stat-card:hover{

transform:translateY(-10px);

border-color:rgba(0,212,255,.35);

box-shadow:
0 20px 50px rgba(0,212,255,.12);

}

.stat-card h2{

font-size:2.3rem;

font-family:"Space Grotesk",sans-serif;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:10px;

}

.stat-card p{

color:var(--muted);

}

/*==================================================
FEATURED APP
==================================================*/

.app-card{

display:grid;

grid-template-columns:360px 1fr;

gap:60px;

align-items:center;

padding:45px;

border-radius:28px;

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

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

backdrop-filter:blur(30px);

box-shadow:0 25px 60px rgba(0,0,0,.25);

transition:.35s;

}

.app-card:hover{

transform:translateY(-10px);

box-shadow:

0 35px 80px rgba(0,212,255,.12);

}

.app-image{

display:flex;

justify-content:center;

align-items:center;

}

.app-image img{

width:260px;

border-radius:60px;

transition:.4s;

filter:drop-shadow(0 0 30px rgba(0,212,255,.25));

}

.logo-icon img{	
border-radius:30%;

transition:.4s;

filter:drop-shadow(0 0 30px rgba(0,212,255,.25));

}

.app-card:hover .app-image img{

transform:scale(1.05);

}

.app-info h2{

font-family:"Space Grotesk";

font-size:2.5rem;

margin-bottom:10px;

}

.app-info h4{

font-size:1.1rem;

color:var(--primary);

margin-bottom:20px;

}

.app-info p{

color:var(--muted);

margin-bottom:30px;

font-size:1.05rem;

}

/*==================================================
FEATURE LIST
==================================================*/

.features{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-bottom:35px;

}

.features span{

padding:12px 18px;

border-radius:50px;

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

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

color:white;

font-size:.95rem;

transition:.3s;

}

.features span:hover{

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

transform:translateY(-4px);

}

.download{

display:inline-block;

padding:16px 34px;

border-radius:999px;

text-decoration:none;

font-weight:600;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

box-shadow:

0 15px 35px rgba(0,212,255,.25);

transition:.35s;

cursor:pointer;

}

.download:hover{

transform:translateY(-4px);

}

/*==================================================
ABOUT
==================================================*/

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

}

.glass{

padding:40px;

border-radius:25px;

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

backdrop-filter:blur(25px);

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

transition:.35s;

}

.glass:hover{

transform:translateY(-10px);

border-color:rgba(0,212,255,.25);

}

.glass h3{

font-size:1.6rem;

font-family:"Space Grotesk";

margin-bottom:20px;

}

.glass p{

color:var(--muted);

}

.glass ul{

margin-top:15px;

padding-left:22px;

}

.glass li{

margin-bottom:12px;

color:var(--muted);

}

/*==================================================
CONTACT
==================================================*/

.contact-card{

padding:80px;

text-align:center;

border-radius:30px;

background:

linear-gradient(
145deg,
rgba(0,212,255,.08),
rgba(123,45,255,.08)
);

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

backdrop-filter:blur(30px);

}

.contact-card h2{

font-size:2.5rem;

font-family:"Space Grotesk";

margin-bottom:18px;

}

.contact-card p{

max-width:700px;

margin:auto;

color:var(--muted);

margin-bottom:35px;

}

.email{

display:inline-block;

padding:18px 36px;

border-radius:999px;

text-decoration:none;

font-weight:600;

color:white;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

box-shadow:

0 20px 40px rgba(0,212,255,.25);

transition:.35s;

}

.email:hover{

transform:translateY(-5px);

}

/*==================================================
FOOTER
==================================================*/

footer{

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

padding:45px 0;

margin-top:70px;

}

.footer{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;

}

.footer h3{

font-family:"Space Grotesk";

margin-bottom:10px;

}

.footer p{

color:var(--muted);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1024px){

.hero-grid,
.app-card,
.about-grid{

grid-template-columns:1fr;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-logo{

margin-top:50px;

}

.stats .container{

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

}

.app-image{

margin-bottom:20px;

}

}

@media(max-width:768px){

nav{

display:none;

}

.hero h1{

font-size:2.8rem;

}

.section-title{

font-size:2.1rem;

}

.stats .container{

grid-template-columns:1fr;

}

.app-card{

padding:30px;

}

.app-image img{

width:220px;

}

.glow-circle{

width:300px;
height:300px;

}

.glow-circle img{

width:240px;

}

.contact-card{

padding:45px 25px;

}

.footer{

text-align:center;

justify-content:center;

}

}