@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
:root {
  --blue: #007AFF;
  --char: #1d1d1f;
  --grey: #6e6e73;
  --glass: rgba(255,255,255,.08);
  --shadow: 0 8px 24px rgba(0,122,255,.18);
  --font: 'Inter', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);color:var(--char);background:linear-gradient(135deg,#f2f4f7,#fff);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Hero */
.hero{min-height:90vh;display:flex;align-items:center;justify-content:center}
.hero-glass{background:var(--glass);backdrop-filter:blur(12px);border-radius:24px;padding:60px 40px;box-shadow:var(--shadow);text-align:center;max-width:600px}
.logo{width:180px;height:auto;margin:0 auto 24px}
h1{font-weight:600;font-size:42px}
.sub{font-size:20px;color:var(--grey);margin:16px 0 32px}
.cta-button{display:inline-block;background:var(--blue);color:#fff;padding:16px 40px;border-radius:999px;font-weight:600;text-decoration:none;transition:.3s}
.cta-button:hover{transform:scale(1.03)}

/* How-it-works tiles */
section{padding:100px 0}
h2{text-align:center;font-size:36px;font-weight:600;margin-bottom:50px}
.tiles{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tile{background:var(--glass);backdrop-filter:blur(10px);border-radius:20px;padding:40px 30px;text-align:center;box-shadow:var(--shadow);transition:.3s}
.tile:hover{transform:translateY(-8px) rotateX(8deg);box-shadow:0 20px 40px rgba(0,122,255,.25)}

/* Benefits grid */
.benefits-section{background:#fff}
.benefits-grid{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
.benefit-card{background:var(--glass);backdrop-filter:blur(10px);border-radius:16px;padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:var(--shadow)}
.benefit-card .icon{font-size:32px}
.benefit-card .text{font-weight:600;font-size:16px;text-align:center}
@media(max-width:900px){.benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.benefits-grid{grid-template-columns:1fr}}

/* Customer */
.customer{position:relative;text-align:center}
.customer img{width:100%;display:block;border-radius:0}
.customer-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);padding:30px 40px;border-radius:12px;text-align:center}
.customer-overlay h3{font-size:32px;margin-bottom:10px}
.customer-overlay p{font-size:18px}

/* Form section */
#early-access{background:#f5f5f7}

/* Footer */
footer{padding:40px 0;text-align:center;background:#f5f5f7}
.footer-logo{width:100px;margin-bottom:12px}
footer p{font-size:14px;color:var(--grey)}