/* =============================================
 * CSS Variables — Dark Theme
 * ============================================= */
:root {
    --bg: #0D0D0F;
    --bg-warm: #111114;
    --bg-card: #18181C;
    --bg-dark: #0A0A0C;
    --bg-dark-card: #141418;
    --bg-dark-elevated: #1E1E24;

    --text: #F0EEF5;
    --text-secondary: #8A8799;
    --text-muted: #55545F;
    --text-on-dark: #F0EEF5;
    --text-on-dark-secondary: #8A8799;

    --accent: #6C8EFF;
    --accent-light: rgba(108,142,255,0.10);
    --accent-dark: #4F6FD9;

    --border: rgba(240,238,245,0.07);
    --border-dark: rgba(240,238,245,0.07);

    --font-sans: 'Satoshi', -apple-system, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================
 * Reset
 * ============================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:var(--font-sans); cursor:pointer; }
ul { list-style:none; }

/* =============================================
 * Navbar
 * ============================================= */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:60px; display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(20px, 4vw, 48px);
    background:rgba(13,13,15,0.88); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
    transition:all 0.3s var(--ease);
}
.nav-logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.05rem; letter-spacing:-0.03em; color:var(--text); }
.nav-logo svg { width:20px; height:20px; }
.nav-links { display:flex; gap:28px; }
.nav-links a { font-size:0.85rem; font-weight:500; color:var(--text-secondary); transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.nav-right { display:flex; align-items:center; gap:8px; }
.btn-text { font-size:0.85rem; font-weight:500; color:var(--text-secondary); background:none; border:none; padding:8px 14px; transition:color 0.2s; }
.btn-text:hover { color:var(--text); }
.btn-fill { font-size:0.85rem; font-weight:600; color:var(--bg); background:var(--accent); border:none; padding:9px 22px; border-radius:var(--radius-full); transition:all 0.25s var(--ease); }
.btn-fill:hover { background:var(--accent-dark); transform:translateY(-1px); }
.nav-mobile { display:none; background:none; border:none; padding:8px; color:var(--text); }

/* =============================================
 * Hero
 * ============================================= */
.hero {
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:140px 24px 60px; position:relative;
}
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 18px; border-radius:var(--radius-full);
    border:1px solid var(--border); background:var(--bg-card);
    font-size:0.8rem; font-weight:500; color:var(--text-secondary);
    margin-bottom:28px; opacity:0; animation:fadeUp 0.7s var(--ease-out) forwards 0.1s;
}
.hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; }
.hero h1 {
    font-family:var(--font-serif); font-size:clamp(3rem, 7vw, 5.5rem);
    font-weight:400; line-height:1.05; letter-spacing:-0.03em;
    max-width:780px; margin-bottom:20px;
    opacity:0; animation:fadeUp 0.8s var(--ease-out) forwards 0.25s;
}
.hero h1 em { font-style:italic; color:var(--accent); }
.hero-desc {
    font-size:1.05rem; line-height:1.7; color:var(--text-secondary);
    max-width:480px; margin-bottom:40px;
    opacity:0; animation:fadeUp 0.8s var(--ease-out) forwards 0.4s;
}
.hero-cta { display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; animation:fadeUp 0.8s var(--ease-out) forwards 0.55s; }
.btn-hero {
    font-size:0.95rem; font-weight:600; color:var(--bg); background:var(--accent);
    border:none; padding:15px 40px; border-radius:var(--radius-full);
    transition:all 0.3s var(--ease); letter-spacing:0.01em;
}
.btn-hero:hover { background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 12px 40px rgba(108,142,255,0.20); }
.hero-sub { font-size:0.8rem; color:var(--text-muted); }

/* =============================================
 * Hero Visual — Demo Panel
 * ============================================= */
.hero-visual {
    margin-top:56px; width:100%; max-width:880px; height:420px;
    border-radius:var(--radius-xl); background:var(--bg-dark);
    border:1px solid var(--border); overflow:hidden; position:relative;
    opacity:0; animation:fadeUp 1s var(--ease-out) forwards 0.7s;
}

/* Blur overlay — sits on top of everything */
.hero-visual-blur {
    position:absolute; inset:0; z-index:10;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    background:rgba(10,10,12,0.15);
    display:flex; align-items:center; justify-content:center;
}
.preview-label {
    margin-top:14px;
    font-size:0.75rem; font-weight:500; letter-spacing:0.1em;
    color:var(--text-muted); text-transform:uppercase;
    animation:previewPulse 3s ease-in-out infinite;
}
@keyframes previewPulse { 0%,100%{opacity:0.4} 50%{opacity:0.75} }
.preview-mobile { display:none; }
@media (max-width:900px) {
    .preview-mobile { display:inline; }
}

/* Demo panel — two columns behind the blur */
.demo-panel {
    display:flex; width:100%; height:100%;
}

/* LEFT — Terminal */
.demo-terminal {
    width:60%; height:100%; border-right:1px solid var(--border);
    background:var(--bg-dark); display:flex; flex-direction:column; overflow:hidden;
    /* subtle scanline feel */
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.012) 2px,
        rgba(255,255,255,0.012) 4px
    );
}
.terminal-header {
    display:flex; align-items:center; gap:6px; padding:12px 16px;
    border-bottom:1px solid var(--border); background:rgba(255,255,255,0.02);
    flex-shrink:0;
}
.t-dot {
    width:10px; height:10px; border-radius:50%;
    background:rgba(255,255,255,0.12);
}
.t-dot:nth-child(1) { background:#FF5F57; }
.t-dot:nth-child(2) { background:#FEBC2E; }
.t-dot:nth-child(3) { background:#28C840; }
.t-label {
    margin-left:8px; font-family:var(--font-mono); font-size:0.72rem;
    color:var(--text-muted); letter-spacing:0.04em;
}
.terminal-body {
    flex:1; display:flex; align-items:flex-start; padding:24px 20px;
    font-family:var(--font-mono); font-size:0.88rem; line-height:1.5;
    gap:6px;
}
.t-prefix { color:var(--accent); opacity:0.7; user-select:none; flex-shrink:0; }
.t-text { color:rgba(108,255,180,0.85); word-break:break-all; }
.t-cursor {
    color:var(--accent); opacity:0.9;
    animation:blink 1s step-end infinite; flex-shrink:0;
}

/* RIGHT — Wireframe viewer */
.demo-wireframe {
    width:40%; height:100%; display:flex; align-items:center; justify-content:center;
    background:var(--bg-dark); position:relative; overflow:hidden;
}
/* Grid floor */
.demo-wireframe::before {
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:28px 28px;
    opacity:0.5;
}

/* Three.js canvas container */
#wireframeCanvas {
    width: 100%;
    height: 100%;
}
#wireframeCanvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* =============================================
 * How It Works
 * ============================================= */
.how-section { padding:100px 24px; max-width:1100px; margin:0 auto; }
.section-label { font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent); margin-bottom:12px; }
.section-title { font-family:var(--font-serif); font-size:clamp(2rem, 3.5vw, 2.6rem); font-weight:400; letter-spacing:-0.02em; margin-bottom:16px; color:var(--text); }
.section-desc { font-size:0.95rem; color:var(--text-secondary); max-width:480px; margin-bottom:56px; }

.steps-track { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.step { background:var(--bg-card); padding:36px 28px; position:relative; transition:all 0.4s var(--ease); }
.step:hover { background:var(--accent-light); }
.step-num { font-size:0.75rem; font-weight:700; color:var(--accent); margin-bottom:16px; letter-spacing:0.05em; font-family:var(--font-mono); }
.step h3 { font-size:1.05rem; font-weight:600; margin-bottom:8px; letter-spacing:-0.01em; color:var(--text); }
.step p { font-size:0.85rem; color:var(--text-secondary); line-height:1.6; }
.step::after { content:''; position:absolute; top:50%; right:-1px; width:24px; height:2px; background:var(--accent); z-index:2; opacity:0.3; }
.step:last-child::after { display:none; }

/* =============================================
 * Waitlist
 * ============================================= */
.waitlist { padding:80px 24px 100px; display:flex; justify-content:center; }
.waitlist-card {
    width:100%; max-width:640px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:56px 52px;
    position:relative; overflow:hidden;
}
.waitlist-card::before {
    content:''; position:absolute; top:-80px; right:-80px; width:260px; height:260px;
    background:rgba(108,142,255,0.06); border-radius:50%; pointer-events:none;
}
.waitlist-card::after {
    content:''; position:absolute; bottom:-60px; left:-60px; width:180px; height:180px;
    background:rgba(108,142,255,0.04); border-radius:50%; pointer-events:none;
}
.wl-header { margin-bottom:36px; position:relative; z-index:1; }
.wl-header h2 { font-family:var(--font-serif); font-size:2rem; font-weight:400; color:var(--text); margin-bottom:10px; }
.wl-header p { font-size:0.9rem; color:var(--text-secondary); line-height:1.65; max-width:460px; }
.wl-form { display:flex; flex-direction:column; gap:18px; position:relative; z-index:1; }
.wl-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.wl-field { display:flex; flex-direction:column; gap:6px; }
.wl-field label { font-size:0.82rem; font-weight:600; color:var(--text-secondary); }
.wl-optional { font-weight:400; color:var(--text-muted); }
.wl-field input, .wl-field select {
    padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius-md);
    font-family:var(--font-sans); font-size:0.9rem; outline:none;
    background:var(--bg); color:var(--text); transition:border-color 0.2s;
    -webkit-appearance:none; appearance:none;
}
.wl-field input:focus, .wl-field select:focus { border-color:var(--accent); }
.wl-field input::placeholder { color:var(--text-muted); }
.wl-field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8799' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer; }
.wl-field select option { background:var(--bg-card); color:var(--text); }
.wl-submit {
    margin-top:8px; padding:15px; border:none; border-radius:var(--radius-md);
    font-family:var(--font-sans); font-size:0.95rem; font-weight:600;
    background:var(--accent); color:var(--bg-dark); cursor:pointer;
    transition:all 0.25s var(--ease); letter-spacing:0.01em;
}
.wl-submit:hover { background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 8px 28px rgba(108,142,255,0.20); }
.wl-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
.wl-success { display:none; font-size:0.95rem; color:var(--accent); font-weight:500; text-align:center; margin-top:4px; position:relative; z-index:1; }
.wl-privacy { font-size:0.75rem; color:var(--text-muted); text-align:center; margin-top:14px; position:relative; z-index:1; }

/* Honeypot — hidden from real users, bots fill it */
.wl-honeypot { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; }

/* =============================================
 * About — Founders
 * ============================================= */
.about { padding:100px 24px; background:var(--bg-dark); color:var(--text-on-dark); }
.about-inner { max-width:1100px; margin:0 auto; }
.about .section-label { color:var(--accent); }
.about .section-title { color:var(--text-on-dark); }
.about .section-desc { color:var(--text-on-dark-secondary); margin-bottom:64px; }

.founders-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:40px; }
.founder-card {
    background:var(--bg-dark-card); border:1px solid var(--border-dark);
    border-radius:var(--radius-lg); overflow:hidden; transition:all 0.4s var(--ease);
}
.founder-card:hover { border-color:rgba(108,142,255,0.2); transform:translateY(-4px); }
.founder-img { width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(40%); transition:filter 0.4s; }
.founder-card:hover .founder-img { filter:grayscale(0%); }
.founder-info { padding:28px; }
.founder-info h3 { font-family:var(--font-serif); font-size:1.4rem; font-weight:400; margin-bottom:4px; color:var(--text-on-dark); }
.founder-info .role { font-size:0.8rem; color:var(--accent); font-weight:500; margin-bottom:14px; display:block; }
.founder-info p { font-size:0.88rem; color:var(--text-on-dark-secondary); line-height:1.65; margin-bottom:16px; }
.founder-links { display:flex; gap:12px; flex-wrap:wrap; }
.founder-links a {
    font-size:0.8rem; font-weight:500; color:var(--text-on-dark-secondary);
    padding:6px 14px; border:1px solid var(--border-dark); border-radius:var(--radius-full);
    transition:all 0.2s;
}
.founder-links a:hover { color:var(--text-on-dark); border-color:rgba(108,142,255,0.3); }

/* =============================================
 * Footer
 * ============================================= */
.footer { border-top:1px solid var(--border); padding:48px clamp(20px,4vw,48px); background:var(--bg); }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; gap:40px; }
.footer-left { display:flex; flex-direction:column; gap:16px; }
.footer-socials { display:flex; gap:12px; }
.footer-socials a { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-sm); color:var(--text-muted); transition:color 0.2s; }
.footer-socials a:hover { color:var(--text); }
.footer-socials svg { width:16px; height:16px; }
.footer-cols { display:flex; gap:56px; }
.footer-col h4 { font-size:0.82rem; font-weight:600; margin-bottom:14px; color:var(--text); }
.footer-col ul { display:flex; flex-direction:column; gap:8px; }
.footer-col a { font-size:0.82rem; color:var(--text-muted); transition:color 0.2s; }
.footer-col a:hover { color:var(--text-secondary); }
.footer-bottom { max-width:1100px; margin:40px auto 0; padding-top:20px; border-top:1px solid var(--border); font-size:0.75rem; color:var(--text-muted); display:flex; justify-content:space-between; align-items:center; }
.calendly-link { font-size:0.82rem; font-weight:500; color:var(--accent); cursor:pointer; transition:color 0.2s; background:none; border:none; padding:0; }
.calendly-link:hover { color:var(--accent-dark); }

/* =============================================
 * Sign-In Modal
 * ============================================= */
.modal-overlay {
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(10,10,12,0.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    align-items:center; justify-content:center;
}
.modal-overlay.active { display:flex; }
.modal {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl);
    padding:44px 40px; width:100%; max-width:400px;
    position:relative; box-shadow:0 24px 80px rgba(0,0,0,0.4);
    animation:modalIn 0.35s var(--ease-spring);
}
@keyframes modalIn { from { opacity:0; transform:scale(0.92) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-close { position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-muted); padding:8px; cursor:pointer; transition:color 0.2s; }
.modal-close:hover { color:var(--text); }
.modal h2 { font-family:var(--font-serif); font-size:1.5rem; font-weight:400; margin-bottom:28px; text-align:center; color:var(--text); }
.modal-field { margin-bottom:16px; }
.modal-field label { display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--text-secondary); }
.modal-field input {
    width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius-md);
    font-family:var(--font-sans); font-size:0.9rem; outline:none; transition:border-color 0.2s;
    background:var(--bg); color:var(--text);
}
.modal-field input:focus { border-color:var(--accent); }
.modal-field input::placeholder { color:var(--text-muted); }
.btn-modal { width:100%; padding:13px; border:none; border-radius:var(--radius-md); font-size:0.9rem; font-weight:600; cursor:pointer; transition:all 0.2s; margin-bottom:12px; }
.btn-modal-dark { background:var(--accent); color:var(--bg-dark); }
.btn-modal-dark:hover { background:var(--accent-dark); }
.modal-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-muted); font-size:0.78rem; }
.modal-divider::before, .modal-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.btn-google {
    width:100%; padding:12px; border:1.5px solid var(--border); border-radius:var(--radius-md);
    background:var(--bg-card); font-size:0.9rem; font-weight:500;
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition:all 0.2s; color:var(--text);
}
.btn-google:hover { border-color:rgba(108,142,255,0.3); background:var(--bg-dark-elevated); }
.btn-google svg { width:18px; height:18px; }
.modal-terms { text-align:center; margin-top:20px; font-size:0.75rem; color:var(--text-muted); }
.modal-terms a { text-decoration:underline; color:var(--text-secondary); }

/* =============================================
 * Reveal Animations
 * ============================================= */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.reveal { opacity:0; transform:translateY(32px); transition:all 0.7s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* =============================================
 * About Page
 * ============================================= */
.about-page-hero { padding:140px 24px 80px; max-width:1100px; margin:0 auto; }
.about-page-hero .section-title { font-size:clamp(2.4rem, 4vw, 3.2rem); max-width:680px; margin-bottom:20px; }
.about-page-hero .section-desc { font-size:1rem; max-width:560px; margin-bottom:0; }

.expertise-section { padding:80px 24px; background:var(--bg-dark); }
.expertise-inner { max-width:1100px; margin:0 auto; }
.expertise-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px; }
.expertise-card {
    background:var(--bg-dark-card); border:1px solid var(--border-dark);
    border-radius:var(--radius-lg); padding:32px 28px; transition:all 0.4s var(--ease);
}
.expertise-card:hover { border-color:rgba(108,142,255,0.2); background:var(--bg-dark-elevated); }
.expertise-card h3 { font-size:0.95rem; font-weight:600; color:var(--text); margin-bottom:20px; letter-spacing:-0.01em; }
.expertise-card ul { display:flex; flex-direction:column; gap:10px; }
.expertise-card li { font-size:0.85rem; color:var(--text-secondary); padding-left:16px; position:relative; }
.expertise-card li::before { content:'—'; position:absolute; left:0; color:var(--accent); opacity:0.5; font-size:0.7rem; top:2px; }

.projects-section { padding:80px 24px 100px; max-width:1100px; margin:0 auto; }
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px; }
.projects-col h3 { font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:28px; }
.project-list { display:flex; flex-direction:column; gap:0; }
.project-item { padding:24px 0; border-bottom:1px solid var(--border); }
.project-item:last-child { border-bottom:none; }
.project-item h4 { font-size:0.95rem; font-weight:600; color:var(--text); margin-bottom:6px; letter-spacing:-0.01em; }
.project-item p { font-size:0.85rem; color:var(--text-secondary); line-height:1.6; }

/* =============================================
 * Responsive
 * ============================================= */
@media (max-width:900px) {
    .steps-track { grid-template-columns:repeat(2, 1fr); }
    .step::after { display:none; }
    .founders-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
    .expertise-grid { grid-template-columns:1fr; }
    .projects-grid { grid-template-columns:1fr; gap:32px; }

    /* Stack demo panel vertically: terminal top, wireframe bottom */
    .hero-visual { height:480px; }
    .demo-panel { flex-direction:column; }
    .demo-terminal {
        width:100%; height:180px; flex-shrink:0;
        border-right:none; border-bottom:1px solid var(--border);
    }
    .demo-wireframe {
        display:flex; /* override the desktop value — show it */
        width:100%; flex:1;
    }
}
@media (max-width:768px) {
    .nav-links { display:none; }
    .nav-mobile { display:block; }
    .hero { padding:110px 20px 50px; }
}
@media (max-width:600px) {
    .steps-track { grid-template-columns:1fr; }
    .waitlist-card { padding:36px 24px; }
    .wl-row { grid-template-columns:1fr; }
    .footer-inner { flex-direction:column; }
    .footer-cols { gap:32px; }
    .modal { margin:20px; padding:32px 24px; }
    .footer-bottom { flex-direction:column; gap:8px; }

    /* Slightly shorter on small phones */
    .hero-visual { height:420px; }
    .demo-terminal { height:150px; }
}