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

body{
font-family:'Inter',sans-serif;
background:#020b16;
color:white;
line-height:1.6;
}

.hero{
padding:30px 7%;
background:
radial-gradient(circle at top,#0e3b72 0%,#041325 45%,#020b16 100%);
min-height:100vh;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:70px;
}

.brand{
display:flex;
align-items:center;
gap:14px;
font-size:1.5rem;
font-weight:800;
}

.feedback-intro h2 {
	
	color: white !important;
}

.brand img{
width:56px;
height:56px;
border-radius:16px;
box-shadow:0 0 30px rgba(0,162,255,.4);
}

.nav-links{
display:flex;
gap:28px;
}

.nav-links a{
color:#d5e6ff;
text-decoration:none;
font-weight:500;
}

.hero-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.badge{
display:inline-block;
padding:10px 18px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.04);
border-radius:999px;
margin-bottom:26px;
color:#80bfff;
}

.hero-text h1{
font-size:4rem;
line-height:1.05;
margin-bottom:24px;
max-width:700px;
}

.hero-text p{
font-size:1.15rem;
color:#b7c9dd;
max-width:650px;
margin-bottom:34px;
}

.hero-buttons{
display:flex;
gap:18px;
margin-bottom:28px;
}

.primary-btn,
.secondary-btn{
padding:16px 28px;
border-radius:14px;
text-decoration:none;
font-weight:700;
transition:.2s;
}

.primary-btn{
background:linear-gradient(135deg,#1fa2ff,#126dff);
color:white;
box-shadow:0 10px 30px rgba(0,119,255,.3);
}

.secondary-btn{
border:1px solid rgba(255,255,255,.12);
color:white;
background:rgba(255,255,255,.04);
}

.primary-btn:hover,
.secondary-btn:hover{
transform:translateY(-2px);
}

.hero-points{
display:flex;
flex-wrap:wrap;
gap:16px;
color:#82b8ff;
}

.hero-image img{
width:100%;
border-radius:24px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 40px 90px rgba(0,0,0,.55);
}

.section{
padding:60px 7%;
background-color: #ededed;
}

.section h2{
font-size:3rem;
margin-bottom:50px;
text-align:center;
	color: black;
}

.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
}

.card{
background:linear-gradient(180deg,#071524,#04101d);
border:1px solid rgba(90,140,255,.12);
padding:30px;
border-radius:24px;
box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.card h3{
margin-bottom:14px;
font-size:1.3rem;
}

.card p{
color:#9fb3c8;
}

.dark{
background:#030d19;
}

.dark h2 {
	color: white;
}

.screenshots{
display:grid;
grid-template-columns:1fr 1fr;
gap:34px;
}

.shot{
background:#071322;
padding:22px;
border-radius:24px;
border:1px solid rgba(255,255,255,.08);
}

.shot img{
width:100%;
border-radius:16px;
margin-bottom:16px;
}

.shot h3{
font-size:1.2rem;
}

.workflow-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
}

.workflow-grid div{
background:#071322;
padding:34px;
border-radius:24px;
border:1px solid rgba(255,255,255,.06);
}

.workflow-grid span{
font-size:3rem;
font-weight:800;
color:#1fa2ff;
display:block;
margin-bottom:12px;
}

.download{
text-align:center;
}

.download {

	background-color: #DADADA;
}

.download-card{
max-width:850px;
margin:20px auto 0;
background:#071322;
border-radius:28px;
padding:34px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
border:1px solid rgba(255,255,255,.08);
}

.download-card img{
width:90px;
border-radius:22px;
}

.download h2, p{
	margin-bottom: 0px !important;
}
.footer{
padding:50px 7%;
border-top:1px solid rgba(255,255,255,.08);
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-brand{
display:flex;
align-items:center;
gap:18px;
}

.footer-brand img{
width:60px;
border-radius:18px;
}

.copyright{
color:#7e92aa;
}

@media(max-width:980px){

.hero-content,
.screenshots,
.download-card{
grid-template-columns:1fr;
display:grid;
}

.hero-text h1{
font-size:3rem;
}

.nav{
flex-direction:column;
gap:20px;
}

.footer{
flex-direction:column;
gap:20px;
text-align:center;
}
}


.pro-hero{
padding:120px 7% 90px;
background:
radial-gradient(circle at top,#11427e 0%,#061525 40%,#020b16 100%);
position:relative;
overflow:hidden;
}

.pro-hero::before{
content:"";
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle,rgba(31,162,255,.18),transparent 70%);
top:-250px;
right:-120px;
}

.pro-hero-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:60px;
align-items:center;
position:relative;
z-index:2;
}

.pro-tag{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 18px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:#7fc8ff;
margin-bottom:24px;
}

.pro-hero h1{
font-size:4.5rem;
line-height:1;
margin-bottom:24px;
max-width:850px;
}

.pro-hero p{
font-size:1.18rem;
line-height:1.8;
color:#b6c7da;
max-width:760px;
}

.glass-card{
background:linear-gradient(180deg,rgba(14,29,49,.95),rgba(5,16,28,.95));
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
padding:38px;
backdrop-filter:blur(20px);
box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.metric-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:28px;
}

.metric{
padding:22px;
border-radius:20px;
background:#091827;
border:1px solid rgba(255,255,255,.06);
}

.metric strong{
display:block;
font-size:1.6rem;
margin-bottom:8px;
}

.content-section{
padding:110px 7%;
}

.content-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.pro-list{
display:flex;
flex-direction:column;
gap:16px;
margin-top:30px;
}

.pro-item{
padding:18px 22px;
border-radius:18px;
background:#071322;
border:1px solid rgba(255,255,255,.06);
}

.big-svg{
background:#071322;
border-radius:30px;
padding:20px;
border:1px solid rgba(255,255,255,.06);
box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.quote-box{
margin-top:28px;
padding:24px;
border-left:4px solid #1fa2ff;
background:rgba(255,255,255,.03);
border-radius:0 18px 18px 0;
color:#c8d7e7;
}

.cta-band{
padding:90px 7%;
text-align:center;
background:linear-gradient(180deg,#071322,#030d18);
}

.cta-band h2{
font-size:3rem;
margin-bottom:18px;
}

.cta-band p{
max-width:760px;
margin:auto;
color:#abc0d8;
margin-bottom:30px;
}

@media(max-width:950px){
.pro-hero-grid,.content-grid{
grid-template-columns:1fr;
}
.pro-hero h1{
font-size:3rem;
}
}