:root{
--bg: #0f1724;
--surface: rgba(255,255,255,0.04);
--muted: rgba(255,255,255,0.7);
--accent1: 210 100% 60%; /* HSL in CSS color-mix usage */
--glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background: radial-gradient(circle at 10% 10%, rgba(95,150,255,0.06), transparent 10%),
linear-gradient(120deg,#071023 0%, #0b1220 50%);
color:#eaf0ff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.45;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.header-grid{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0}
.brand{display:flex;gap:.6rem;align-items:center;color:inherit;text-decoration:none}
.brand-mark{color:#9fb7ff}
.brand-name{font-weight:700;letter-spacing:0.2px}
.nav a{color:var(--muted);text-decoration:none;margin-left:1rem;font-weight:500}
.nav a.btn-ghost{padding:.5rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,0.06)}


/* Hero */
.hero{padding:3.2rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:center}
.hero-content h1{font-size:2.1rem;margin:0 0 .6rem}
.lead{color:var(--muted);max-width:54ch}
.subscribe{display:flex;gap:.6rem;margin-top:1rem}
.subscribe input{flex:1;padding:.82rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.subscribe button{padding:.82rem 1.1rem;border-radius:12px;border:0;background:linear-gradient(90deg, rgba(99,102,241,0.95), rgba(79,70,229,0.95));color:white;font-weight:600;cursor:pointer}
.trust{display:flex;gap:1.1rem;color:var(--muted);margin-top:.9rem;list-style:none;padding:0}


/* Hero card */
.hero-card{justify-self:end}
.card-glass{backdrop-filter: blur(8px);background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:1.2rem;box-shadow:0 6px 20px rgba(2,6,23,0.6);max-width:340px}
.card-glass h3{margin:0 0 .4rem}
.card-stats{display:flex;gap:1rem;margin-top:1rem}
.card-stats div{background:var(--surface);padding:.6rem;border-radius:10px;text-align:center}
.card-stats strong{display:block;font-size:1.05rem}


/* Features */
.features{padding:2.2rem 1rem}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1.1rem;border-radius:12px}
.feature h3{margin-top:0}


/* About */
.about{padding:2.2rem 1rem}
.about-inner{display:flex;gap:2rem;align-items:center}
.quote{margin-left:auto;text-align:right}
.quote blockquote{margin:0;font-style:italic;color:var(--muted)}


/* Footer */
.site-footer{padding:1.2rem 0;margin-top:3rem;border-top:1px solid rgba(255,255,255,0.03)}
.footer-grid{display:flex;justify-content:space-between;align-items:center}
.footer-nav a{color:var(--muted);text-decoration:none;margin-left:1rem}


/* Accessibility helpers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}


/* Responsiveness */
@media (max-width:880px){
.hero-grid{grid-template-columns:1fr;}
.hero-card{order:-1}
.feature-grid{grid-template-columns:1fr}
.about-inner{flex-direction:column}
.footer-grid{flex-direction:column;gap:.6rem}
}


/* Subtle animations */
@keyframes floaty{from{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}
.card-glass{animation:floaty 6s ease-in-out infinite}


/* Small polish */
a{transition:opacity .18s ease}
a:hover{opacity:0.9}
button{transition:transform .12s ease}
button:active{transform:scale(.99)}