@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --bg: #fafafa;
    --bg-dark: #111;
    --surface: #fff;
    --surface-alt: #f3f3f3;
    --border: rgba(0,0,0,0.08);
    --text: #1a1a1a;
    --text-muted: #888;
    --text-light: #bbb;
    --accent: #1a1a1a;
    --radius: 20px;
    --radius-sm: 12px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(0,0,0,0.08); color:#000; }

/* ========== LOADER ========== */
#loader {
    position:fixed; inset:0; z-index:9999;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    transition: opacity 0.5s, visibility 0.5s;
}
#loader.done { opacity:0; visibility:hidden; pointer-events:none; }

.loader-inner { text-align:center; }

.loader-glyphs {
    display:flex; gap:4px; justify-content:center; margin-bottom:20px;
}
.loader-glyphs span {
    font-family:'Space Grotesk',sans-serif;
    font-size:2rem; font-weight:700; color:#1a1a1a;
    opacity:0; animation:glyphIn 0.35s forwards;
}
.loader-glyphs span:nth-child(1){animation-delay:.1s}
.loader-glyphs span:nth-child(2){animation-delay:.2s}
.loader-glyphs span:nth-child(3){animation-delay:.3s}
.loader-glyphs span:nth-child(4){animation-delay:.4s}
.loader-glyphs span:nth-child(5){animation-delay:.5s}

@keyframes glyphIn { to{opacity:1;transform:translateY(0)} from{opacity:0;transform:translateY(8px)} }

.loader-bar {
    width:120px; height:1px; background:#eee;
    margin:0 auto 14px; overflow:hidden;
}
.loader-fill {
    height:100%; width:0; background:#1a1a1a;
    animation:fillBar 1.6s ease-in-out forwards;
}
@keyframes fillBar { to{width:100%} }

.loader-text { color:#bbb; font-size:0.65rem; letter-spacing:4px; text-transform:uppercase; }

/* ========== CURSOR GLOW ========== */
#cursor-glow { display:none; }

/* ========== PARTICLES ========== */
#particles { display:none; }

/* ========== NAV ========== */
#navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:12px 0;
    background:rgba(250,250,250,0.8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
}
.nav-inner {
    max-width:1100px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { text-decoration:none; display:flex; }
.logo-text {
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; color:#1a1a1a;
}
.logo-accent {
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem;
    color:#bbb;
}
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-link {
    color:var(--text-muted); text-decoration:none; font-size:0.85rem; font-weight:400;
    transition:color 0.2s;
}
.nav-link:hover { color:#1a1a1a; }
.nav-cta {
    color:#fff !important; background:#1a1a1a; font-weight:500;
    padding:8px 20px; border-radius:100px; font-size:0.82rem;
    transition:background 0.2s;
}
.nav-cta:hover { background:#333; color:#fff !important; }
.nav-toggle {
    display:none; background:none; border:none; cursor:pointer;
    flex-direction:column; gap:5px; padding:4px;
}
.nav-toggle span {
    display:block; width:20px; height:1.5px; background:#1a1a1a; transition:0.3s;
}

@media(max-width:768px){
    .nav-links {
        position:fixed; top:0; right:-100%; width:75%; height:100vh;
        background:#fff; flex-direction:column; justify-content:center;
        gap:36px; transition:right 0.35s ease; padding:40px;
        border-left:1px solid var(--border); box-shadow:-8px 0 30px rgba(0,0,0,0.05);
    }
    .nav-links.open { right:0; }
    .nav-toggle { display:flex; }
    .nav-link { font-size:1.1rem; color:#1a1a1a; }
}

/* ========== BUTTONS ========== */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 28px; border-radius:100px; font-weight:500; font-size:0.9rem;
    text-decoration:none; transition:all 0.2s; cursor:pointer; border:none;
    font-family:'Inter',sans-serif;
}
.btn-primary {
    background:#1a1a1a; color:#fff;
}
.btn-primary:hover {
    background:#333; transform:translateY(-1px);
}
.btn-ghost {
    background:transparent; color:var(--text-muted); border:1px solid var(--border);
}
.btn-ghost:hover { border-color:#ccc; color:#1a1a1a; }

/* ========== HERO ========== */
#hero {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:130px 24px 80px; position:relative; overflow:hidden;
    flex-wrap:wrap; gap:48px; max-width:1100px; margin:0 auto;
}
.hero-bg-grid { display:none; }

.hero-content { flex:1; min-width:320px; z-index:1; }
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:5px 14px; border-radius:100px;
    background:var(--surface-alt); border:1px solid var(--border);
    font-size:0.7rem; font-weight:500; letter-spacing:2px; text-transform:uppercase;
    color:var(--text-muted); margin-bottom:24px;
}
.badge-dot {
    width:5px; height:5px; border-radius:50%; background:#1a1a1a;
    animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero-title {
    font-family:'Space Grotesk',sans-serif; font-size:clamp(2.5rem,5vw,4rem);
    font-weight:700; line-height:1.08; margin-bottom:20px;
    letter-spacing:-1.5px; color:#1a1a1a;
}
.title-line { display:block; }
.title-gradient { color:#bbb; }
.hero-subtitle {
    font-size:1.05rem; color:var(--text-muted); line-height:1.7; max-width:440px;
    margin-bottom:32px; font-weight:400;
}
.highlight { color:#555; font-weight:500; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; }
.hero-stats { display:flex; align-items:center; gap:28px; }
.stat { text-align:left; }
.stat-number {
    display:block; font-family:'Space Grotesk',sans-serif;
    font-size:1.5rem; font-weight:600; color:#1a1a1a; letter-spacing:-0.5px;
}
.stat-label { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; }
.stat-divider { width:1px; height:32px; background:var(--border); }

.hero-visual { flex:1; min-width:300px; z-index:1; display:flex; justify-content:center; }
.glasses-container { position:relative; }
.hero-img {
    width:100%; max-width:460px; border-radius:var(--radius);
    animation:float 8s ease-in-out infinite;
    box-shadow:0 20px 60px rgba(0,0,0,0.08);
}
.glasses-glow { display:none; }

@keyframes float {
    0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}
}

.hero-scroll-indicator {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
}
.hero-scroll-indicator span {
    font-size:0.6rem; letter-spacing:4px; color:#ccc; text-transform:uppercase;
}
.scroll-line {
    width:1px; height:32px; background:linear-gradient(to bottom, #ccc, transparent);
    animation:scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ========== SECTIONS ========== */
.section-container { max-width:1100px; margin:0 auto; padding:100px 24px; }
.section-header { text-align:center; margin-bottom:64px; }
.section-tag {
    display:inline-block; font-size:0.7rem; font-weight:500;
    letter-spacing:3px; color:var(--text-muted); text-transform:uppercase; margin-bottom:12px;
    font-family:'Space Grotesk',sans-serif;
}
.section-title {
    font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,3.5vw,2.8rem);
    font-weight:600; line-height:1.15; margin-bottom:14px; letter-spacing:-0.8px;
}
.section-desc { font-size:1rem; color:var(--text-muted); max-width:500px; margin:0 auto; line-height:1.7; }

/* ========== FEATURES GRID ========== */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.feature-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:32px 24px; position:relative;
    transition:box-shadow 0.3s, transform 0.3s;
}
.feature-card:hover {
    box-shadow:0 8px 30px rgba(0,0,0,0.06);
    transform:translateY(-2px);
}
.feature-icon {
    width:44px; height:44px; border-radius:12px;
    background:var(--surface-alt); display:flex; align-items:center; justify-content:center;
    margin-bottom:18px; color:#666;
}
.feature-card:hover .feature-icon { color:#1a1a1a; }
.feature-tag {
    position:absolute; top:24px; right:24px;
    font-family:'Space Grotesk',sans-serif; font-size:0.75rem; font-weight:600;
    color:#eee;
}
.feature-title {
    font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:600; margin-bottom:8px;
    letter-spacing:-0.2px;
}
.feature-desc { font-size:0.88rem; color:var(--text-muted); line-height:1.6; }

/* ========== SHOWCASE SECTIONS ========== */
.feature-showcase { border-top:1px solid var(--border); background:var(--surface); }
.feature-showcase:nth-child(even) { background:var(--bg); }
.showcase-layout { display:flex; align-items:center; gap:64px; flex-wrap:wrap; }
.showcase-visual { flex:1; min-width:300px; }
.showcase-img-wrapper {
    position:relative; border-radius:var(--radius); overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,0.08);
}
.showcase-img { width:100%; display:block; transition:transform 0.5s ease; }
.showcase-img-wrapper:hover .showcase-img { transform:scale(1.02); }
.showcase-overlay { display:none; }
.showcase-content { flex:1; min-width:300px; }
.showcase-content .section-tag { margin-bottom:10px; }
.showcase-content .section-title { text-align:left; margin-bottom:14px; }
.showcase-content .section-desc { margin:0 0 24px; text-align:left; max-width:none; }
.showcase-list { list-style:none; display:flex; flex-direction:column; gap:0; }
.showcase-list li {
    display:flex; align-items:center; gap:14px;
    font-size:0.9rem; color:var(--text-muted); padding:14px 0;
    border-bottom:1px solid var(--border);
}
.showcase-list li:last-child { border-bottom:none; }
.list-icon { font-size:1.1rem; }

.showcase-reverse .showcase-layout { flex-direction:row-reverse; }
@media(max-width:768px){
    .showcase-reverse .showcase-layout { flex-direction:column; }
    .showcase-layout { gap:36px; }
}

/* ========== MARQUEE ========== */
#marquee-section {
    padding:32px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    overflow:hidden; background:var(--surface-alt);
}
.marquee-track { overflow:hidden; }
.marquee-content {
    display:flex; gap:48px; white-space:nowrap;
    animation:marquee 30s linear infinite;
    font-family:'Space Grotesk',sans-serif; font-size:0.9rem; font-weight:500;
    color:#ddd; text-transform:uppercase; letter-spacing:4px;
}
.marquee-dot { color:#ccc; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ========== STEPS ========== */
#how-it-works { background:var(--bg); }
.steps-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:0; border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; background:var(--surface);
}
.step-card {
    text-align:left; padding:36px 28px; position:relative;
    border-right:1px solid var(--border);
    transition:background 0.2s;
}
.step-card:last-child { border-right:none; }
.step-card:hover { background:var(--surface-alt); }
.step-number {
    font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700;
    color:#eee; margin-bottom:16px;
}
.step-line {
    width:28px; height:1px; background:#ddd; margin-bottom:16px;
}
.step-title {
    font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:600; margin-bottom:8px;
    letter-spacing:-0.2px;
}
.step-desc { font-size:0.88rem; color:var(--text-muted); line-height:1.6; }

@media(max-width:768px){
    .step-card { border-right:none; border-bottom:1px solid var(--border); }
    .step-card:last-child { border-bottom:none; }
}

/* ========== WAITLIST CTA ========== */
#waitlist { background:var(--bg-dark); padding:100px 24px; }
#waitlist .section-tag { color:#666; }
.cta-wrapper {
    text-align:center; padding:72px 40px; border-radius:var(--radius);
    background:#1a1a1a; border:1px solid rgba(255,255,255,0.06);
    position:relative; overflow:hidden;
    max-width:1100px; margin:0 auto;
}
.cta-bg-glow { display:none; }
.cta-title {
    font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,4vw,3rem);
    font-weight:700; line-height:1.1; margin:14px 0; letter-spacing:-1px;
    color:#fff;
}
.cta-title .title-gradient { color:#666; }
.cta-desc { font-size:1rem; color:#777; max-width:380px; margin:0 auto 32px; line-height:1.7; }
.cta-form { max-width:420px; margin:0 auto; }
.form-group {
    display:flex; gap:0; background:#222;
    border:1px solid rgba(255,255,255,0.08); border-radius:100px; padding:5px;
    transition:border-color 0.2s;
}
.form-group:focus-within { border-color:rgba(255,255,255,0.2); }
.form-group input {
    flex:1; background:transparent; border:none; outline:none;
    color:#fff; font-size:0.9rem; padding:10px 18px;
    font-family:'Inter',sans-serif;
}
.form-group input::placeholder { color:#555; }
.btn-submit {
    padding:10px 22px; font-size:0.82rem; white-space:nowrap;
    background:#fff; color:#1a1a1a;
}
.btn-submit:hover { background:#eee; }
.form-note { font-size:0.7rem; color:#555; margin-top:12px; }
.form-success {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:20px; font-size:0.9rem; color:#888;
}
.form-success.hidden { display:none; }
.success-icon {
    width:26px; height:26px; border-radius:50%;
    background:#fff; color:#1a1a1a; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.75rem;
}

/* ========== FOOTER ========== */
#footer {
    background:var(--bg-dark); border-top:1px solid rgba(255,255,255,0.06); padding:40px 24px;
}
.footer-inner {
    max-width:1100px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-brand .logo-text { color:#fff; }
.footer-brand .logo-accent { color:#555; }
.footer-tagline { color:#555; font-size:0.82rem; }
.footer-links { display:flex; gap:24px; }
.footer-links a {
    color:#555; text-decoration:none; font-size:0.82rem;
    transition:color 0.2s;
}
.footer-links a:hover { color:#fff; }
.footer-copy { color:#333; font-size:0.7rem; width:100%; text-align:center; margin-top:20px; }

/* ========== REVEAL ANIMATIONS ========== */
.reveal {
    opacity:0; transform:translateY(20px);
    transition:opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ========== RESPONSIVE ========== */
@media(max-width:768px){
    .features-grid { grid-template-columns: 1fr; }
    .showcase-layout { flex-direction: column; gap: 40px; }
    .showcase-reverse .showcase-layout { flex-direction: column; }
    .step-card { border-right:none; border-bottom:1px solid var(--border); }
    .step-card:last-child { border-bottom:none; }
}

@media(max-width:640px){
    #hero { padding-top: 120px; align-items: flex-start; }
    .hero-visual {
        position: absolute;
        top: 100px;
        right: -20px;
        width: 200px;
        min-width: 0;
        opacity: 0.95;
    }
    .hero-img { max-width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
    .hero-content { position: relative; z-index: 2; }
    .hero-title { font-size: 2.8rem; }
    .hero-scroll-indicator { display: none; }
    
    .hero-stats { flex-direction:column; gap:14px; align-items:flex-start; }
    .stat-divider { width:28px; height:1px; }
    .form-group { flex-direction:column; border-radius:var(--radius-sm); }
    .btn-submit { border-radius:100px; justify-content:center; }
    .footer-inner { justify-content:center; text-align:center; }
    .footer-links { justify-content:center; }
    .cta-wrapper { padding:48px 20px; }
    #waitlist { padding:60px 24px; }
}