:root {
    --bg: #030303;
    --bg-elev: #08080a;
    --bg-card: rgba(255,255,255,0.02);
    --surface: rgba(255,255,255,0.03);
    --accent: #4f46e5;
    --accent-glow: rgba(79,70,229,0.3);
    --accent-sec: #06b6d4;
    --text: #f5f5f5;
    --text-sec: #a1a1aa;
    --text-dim: #52525b;
    --border: rgba(255,255,255,0.05);
    --border-light: rgba(255,255,255,0.09);
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 2px;
    --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    touch-action:manipulation;
}

/* ─── Canvas ─── */
#bgCanvas {
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5;
}

/* ─── Code Rails (21:9 side zones) ─── */
.code-rail {
    position:fixed; top:0; bottom:0;
    width:56px; z-index:2; pointer-events:none;
    overflow:hidden; opacity:0;
    font-family:var(--font-mono);
    font-size:0.625rem; line-height:1.6;
    color:var(--accent);
    display:flex; flex-direction:column;
    mask-image:linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.code-rail-left { left:0; }
.code-rail-right { right:0; color:var(--accent-sec); opacity:0; }
.code-line {
    padding:0.25rem 0.5rem; white-space:nowrap;
    opacity:0; transition:opacity 0.8s ease;
    text-shadow:0 0 6px currentColor;
}

/* ─── Glass ─── */
.glass {
    background:var(--surface);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--border);
    position:relative;
}
.glass::before {
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 45%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none; border-radius:inherit;
}

/* ─── Container ─── */
.container {
    width:100%;
    margin:0 auto;
    padding:0 1.25rem;
}

/* ─── Navbar ─── */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:100;
    border-bottom:1px solid var(--border);
}
.nav-inner {
    display:flex; align-items:center; justify-content:space-between;
    height:3.5rem;
}
.nav-brand {
    display:flex; align-items:center; gap:0.625rem;
    color:var(--text); text-decoration:none;
}
.brand-name {
    font-size:clamp(1.125rem, 1.5vw, 1.25rem);
    font-weight:800; letter-spacing:-0.04em;
}
.nav-toggle {
    display:flex; flex-direction:column; gap:4px;
    width:28px; height:20px; background:none; border:none;
    cursor:pointer; padding:0;
}
.nav-toggle span {
    display:block; height:2px; width:100%;
    background:var(--text-sec); border-radius:var(--radius);
    transition:var(--transition);
}
.nav-menu {
    display:none; position:fixed; inset:3.5rem 0 auto 0;
    background:var(--bg-elev); border-bottom:1px solid var(--border);
    padding:1rem 1.25rem; flex-direction:column; gap:1rem;
}
.nav-menu.open { display:flex; }
.nav-link {
    font-size:0.875rem; font-weight:500; color:var(--text-sec);
    text-decoration:none; transition:var(--transition);
}
.nav-link:hover { color:var(--text); }
.nav-auth { display:flex; gap:0.5rem; margin-top:0.5rem; }

/* ─── Buttons ─── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.5rem 1rem; font-family:var(--font); font-size:0.8125rem;
    font-weight:600; border:none; cursor:pointer; transition:var(--transition);
    text-decoration:none; border-radius:var(--radius); touch-action:manipulation;
}
.btn-accent {
    background:var(--accent); color:#fff;
    box-shadow:0 0 16px var(--accent-glow);
}
.btn-accent:hover {
    background:#4338ca; transform:translateY(-1px);
    box-shadow:0 0 24px var(--accent-glow);
}
.btn-minimal {
    background:transparent; color:var(--text-sec); border:1px solid var(--border);
}
.btn-minimal:hover {
    color:var(--text); border-color:var(--border-light);
    background:rgba(255,255,255,0.03);
}
.btn-large {
    padding:0.75rem 1.5rem; font-size:0.875rem; width:100%;
}

/* ─── Hero ─── */
.hero {
    position:relative; z-index:1;
    padding:6rem 0 3rem;
    min-height:100vh; display:flex; align-items:center;
}
.hero-grid {
    display:grid; gap:2.5rem;
}
.hero-text { max-width:100%; }
.eyebrow {
    display:flex; align-items:center; gap:0.75rem; margin-bottom:1.25rem;
}
.eyebrow-line {
    width:20px; height:1px; background:var(--accent);
    box-shadow:0 0 6px var(--accent-glow);
}
.eyebrow-text {
    font-family:var(--font-mono); font-size:0.625rem;
    color:var(--accent); text-transform:uppercase; letter-spacing:0.1em;
}
.hero-title {
    font-size:clamp(2.25rem, 6vw, 4rem);
    font-weight:800; line-height:1.05; letter-spacing:-0.03em;
    margin-bottom:1.25rem;
}
.gradient-text {
    background:linear-gradient(135deg, var(--text) 0%, var(--accent) 50%, var(--accent-sec) 100%);
    background-size:200% auto; -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
    animation:shimmer 5s linear infinite;
}
@keyframes shimmer {
    to { background-position:200% center; }
}
.hero-desc {
    font-size:clamp(0.9375rem, 1.2vw, 1.125rem);
    color:var(--text-sec); line-height:1.7; margin-bottom:1.75rem;
}
.hero-actions {
    display:flex; flex-direction:column; gap:0.625rem; margin-bottom:2.5rem;
}
.hero-metrics {
    display:flex; gap:1.5rem; flex-wrap:wrap;
}
.metric { display:flex; flex-direction:column; gap:0.125rem; }
.metric-num {
    font-family:var(--font-mono); font-size:clamp(1.25rem, 2vw, 1.75rem);
    font-weight:500; color:var(--text); line-height:1;
}
.metric-unit {
    font-family:var(--font-mono); font-size:0.75rem;
    color:var(--accent); margin-top:-0.125rem;
}
.metric-label {
    font-size:0.625rem; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.05em;
}

/* ─── Hero Visual / App Window ─── */
.hero-visual {
    position:relative; display:flex; justify-content:center;
}
.app-window {
    width:100%; max-width:100%; border-radius:var(--radius);
    overflow:hidden; box-shadow:0 30px 60px -15px rgba(0,0,0,0.5);
    transition:transform 0.1s;
}
.window-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.625rem 0.75rem; background:rgba(0,0,0,0.2);
    border-bottom:1px solid var(--border);
}
.window-dots { display:flex; gap:0.375rem; }
.window-dots span {
    width:8px; height:8px; border-radius:50%; background:var(--text-dim);
}
.window-dots span:nth-child(1){background:#52525b;}
.window-dots span:nth-child(2){background:#71717a;}
.window-dots span:nth-child(3){background:#a1a1aa;}
.window-title {
    font-family:var(--font-mono); font-size:0.625rem;
    color:var(--text-dim); letter-spacing:0.05em;
}
.window-ctrl { display:flex; gap:0.375rem; }
.window-ctrl span { width:8px; height:8px; background:var(--text-dim); }
.window-body {
    display:flex; height:280px; background:rgba(0,0,0,0.15);
}
.sidebar { display:flex; width:120px; background:rgba(0,0,0,0.2); }
.server-list {
    width:44px; display:flex; flex-direction:column;
    align-items:center; padding:0.5rem 0; gap:0.5rem;
    border-right:1px solid var(--border);
}
.server-item {
    width:32px; height:32px; background:var(--surface);
    border-radius:var(--radius); transition:var(--transition); cursor:pointer;
}
.server-item.active {
    background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
}
.server-divider { width:18px; height:1px; background:var(--border); }
.server-add {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    color:var(--accent); font-size:1rem; cursor:pointer; transition:var(--transition);
}
.server-add:hover { color:var(--text); }
.channel-list {
    flex:1; padding:0.625rem; display:flex; flex-direction:column; gap:0.25rem;
}
.channel-cat {
    font-size:0.5625rem; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.08em;
    margin-top:0.625rem; margin-bottom:0.25rem;
}
.channel {
    font-size:0.75rem; color:var(--text-sec); padding:0.25rem 0.5rem;
    border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition);
}
.channel:hover, .channel.active { background:rgba(255,255,255,0.03); color:var(--text); }

.chat-area { flex:1; display:flex; flex-direction:column; }
.chat-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.625rem 0.75rem; border-bottom:1px solid var(--border);
    font-size:0.75rem; font-weight:600; color:var(--text-sec);
}
.pill {
    font-size:0.625rem; padding:0.125rem 0.5rem;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    border-radius:100px; color:var(--text-dim);
}
.messages {
    flex:1; padding:0.75rem; display:flex; flex-direction:column; gap:0.75rem; overflow:hidden;
}
.msg {
    display:flex; gap:0.625rem;
    animation:msgIn 0.5s ease forwards; opacity:0;
}
.msg:nth-child(1){animation-delay:0.1s;}
.msg:nth-child(2){animation-delay:0.25s;}
.msg:nth-child(3){animation-delay:0.4s;}
@keyframes msgIn {
    from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);}
}
.msg-avatar { width:28px; height:28px; border-radius:var(--radius); flex-shrink:0; }
.msg-name { font-size:0.6875rem; font-weight:600; color:var(--text); margin-bottom:0.125rem; }
.msg-text { font-size:0.75rem; color:var(--text-sec); line-height:1.4; }
.dot {
    display:inline-block; width:4px; height:4px; background:var(--text-dim);
    border-radius:50%; margin-right:3px; animation:dotPulse 1.4s infinite;
}
.dot:nth-child(2){animation-delay:0.2s;}
.dot:nth-child(3){animation-delay:0.4s;}
@keyframes dotPulse {
    0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-3px);}
}
.input-area { padding:0.625rem 0.75rem; border-top:1px solid var(--border); }
.input-box {
    font-size:0.75rem; color:var(--text-dim); padding:0.5rem 0.75rem;
    background:rgba(0,0,0,0.25); border-radius:var(--radius); border:1px solid var(--border);
}

.orb {
    position:absolute; border-radius:50%; filter:blur(80px); z-index:-1; opacity:0.3;
}
.orb-1 { width:200px; height:200px; background:var(--accent); top:-40px; right:-40px; animation:orbFloat 7s ease-in-out infinite; }
.orb-2 { width:160px; height:160px; background:var(--accent-sec); bottom:-30px; left:-30px; animation:orbFloat 9s ease-in-out infinite reverse; }
@keyframes orbFloat {
    0%,100%{transform:translate(0,0);} 50%{transform:translate(20px,-20px);}
}

/* ─── Sections ─── */
section { position:relative; z-index:1; padding:4rem 0; }
.section-head { text-align:center; margin-bottom:2.5rem; }
.section-tag {
    display:inline-block; font-family:var(--font-mono); font-size:0.625rem;
    color:var(--accent); text-transform:uppercase; letter-spacing:0.1em;
    margin-bottom:0.75rem; padding:0.375rem 0.75rem;
    border:1px solid var(--border); background:rgba(79,70,229,0.05);
}
.section-title {
    font-size:clamp(1.75rem, 4vw, 2.5rem);
    font-weight:800; letter-spacing:-0.02em; line-height:1.15;
}

/* ─── Features ─── */
.features-grid {
    display:grid; grid-template-columns:1fr; gap:0.875rem;
}
.feature {
    padding:1.5rem; border-radius:var(--radius); transition:var(--transition);
}
.feature:hover {
    transform:translateY(-3px); border-color:var(--border-light);
    box-shadow:0 16px 32px rgba(0,0,0,0.25);
}
.feature-icon {
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:var(--radius); color:var(--accent); margin-bottom:1rem;
    transition:var(--transition);
}
.feature:hover .feature-icon { border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.feature h3 { font-size:0.9375rem; font-weight:700; margin-bottom:0.375rem; }
.feature p { font-size:0.8125rem; color:var(--text-sec); line-height:1.6; }

/* ─── Preview ─── */
.preview { text-align:center; }
.preview-desc {
    color:var(--text-sec); margin:0.75rem auto 2.5rem;
    font-size:clamp(0.9375rem, 1.2vw, 1.0625rem); max-width:50ch;
}
.preview-showcase { display:flex; justify-content:center; }
.showcase-window {
    width:100%; max-width:100%; height:280px; display:flex;
    border-radius:var(--radius); overflow:hidden;
    box-shadow:0 30px 60px -15px rgba(0,0,0,0.4);
}
.showcase-sidebar {
    width:48px; background:rgba(0,0,0,0.2); border-right:1px solid var(--border);
    display:flex; flex-direction:column; align-items:center; padding:0.625rem 0; gap:0.5rem;
}
.s-avatar { width:32px; height:32px; background:var(--surface); border-radius:var(--radius); transition:var(--transition); }
.s-avatar.active { background:var(--accent); box-shadow:0 0 10px var(--accent-glow); }
.showcase-main { flex:1; display:flex; flex-direction:column; }
.s-header { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); font-size:0.75rem; font-weight:600; color:var(--text-sec); }
.s-messages { flex:1; padding:0.75rem; display:flex; flex-direction:column; gap:0.75rem; }
.s-msg { display:flex; align-items:center; gap:0.625rem; }
.s-a { width:24px; height:24px; background:var(--surface); border-radius:var(--radius); flex-shrink:0; }
.s-line { height:6px; background:rgba(255,255,255,0.06); border-radius:var(--radius-sm); }
.showcase-panel { width:160px; border-left:1px solid var(--border); padding:0.75rem; }
.panel-user { display:flex; align-items:center; gap:0.625rem; }
.pu-avatar { width:32px; height:32px; background:var(--surface); border-radius:var(--radius); }
.pu-name { font-size:0.8125rem; font-weight:600; color:var(--text); }
.pu-status { font-size:0.625rem; color:var(--accent); font-family:var(--font-mono); }

/* ─── Download ─── */
.download { background:linear-gradient(180deg, transparent, rgba(79,70,229,0.03), transparent); }
.download-grid { display:grid; grid-template-columns:1fr; gap:0.75rem; margin-top:2rem; }
.dl-card {
    display:flex; flex-direction:column; align-items:center; gap:0.5rem;
    padding:1.5rem 1rem; border-radius:var(--radius); text-decoration:none;
    color:inherit; transition:var(--transition);
}
.dl-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 0 24px rgba(79,70,229,0.08); }
.dl-card svg { color:var(--accent); transition:var(--transition); }
.dl-card:hover svg { filter:drop-shadow(0 0 6px var(--accent-glow)); }
.dl-name { font-size:0.9375rem; font-weight:700; color:var(--text); }
.dl-meta { font-size:0.625rem; color:var(--text-dim); font-family:var(--font-mono); }

/* ─── Footer ─── */
.footer { border-top:1px solid var(--border); padding:2.5rem 0; background:var(--bg-elev); }
.footer-grid { display:flex; flex-direction:column; gap:2rem; }
.footer-brand { display:flex; flex-direction:column; gap:0.5rem; color:var(--text); }
.footer-brand span { font-size:1.125rem; font-weight:800; letter-spacing:-0.02em; }
.footer-brand p { font-size:0.8125rem; color:var(--text-dim); }
.footer-links { display:flex; flex-wrap:wrap; gap:2.5rem; }
.f-col { display:flex; flex-direction:column; gap:0.5rem; }
.f-col h4 { font-size:0.75rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem; }
.f-col a { font-size:0.8125rem; color:var(--text-sec); text-decoration:none; transition:var(--transition); }
.f-col a:hover { color:var(--accent); }

/* ─── Glitch Utilities ─── */
.glitch-soft {
    position:relative;
}
.glitch-soft::before,
.glitch-soft::after {
    content:attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%;
    background:var(--bg); pointer-events:none; opacity:0;
}
.glitch-soft.active::before {
    opacity:0.85; left:2px; text-shadow:-2px 0 var(--accent-sec);
    clip-path:inset(0 0 0 0); animation:glitch-slice-1 0.3s steps(3) 1;
}
.glitch-soft.active::after {
    opacity:0.85; left:-2px; text-shadow:2px 0 var(--accent);
    clip-path:inset(0 0 0 0); animation:glitch-slice-2 0.3s steps(3) 1;
}
@keyframes glitch-slice-1 {
    0%{clip-path:inset(20% 0 75% 0); transform:translate(-3px);} 
    50%{clip-path:inset(60% 0 15% 0); transform:translate(3px);} 
    100%{clip-path:inset(35% 0 50% 0); transform:translate(0);}
}
@keyframes glitch-slice-2 {
    0%{clip-path:inset(65% 0 20% 0); transform:translate(3px);} 
    50%{clip-path:inset(15% 0 70% 0); transform:translate(-3px);} 
    100%{clip-path:inset(45% 0 35% 0); transform:translate(0);}
}
.scramble-char { color:var(--accent-sec); text-shadow:0 0 8px rgba(6,182,212,0.4); }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

/* Small phones landscape / large phones */
@media (min-width: 480px) {
    .container { padding:0 1.5rem; }
    .btn-large { width:auto; }
    .hero-actions { flex-direction:row; }
    .features-grid { grid-template-columns:repeat(2,1fr); }
    .download-grid { grid-template-columns:repeat(2,1fr); }
}

/* Tablet */
@media (min-width: 768px) {
    .container { padding:0 2rem; }
    .nav-menu {
        display:flex !important; position:static;
        flex-direction:row; align-items:center;
        background:transparent; border:none; padding:0; margin-left:auto;
    }
    .nav-toggle { display:none; }
    .nav-auth { margin-top:0; margin-left:1.5rem; }
    .hero { padding:7rem 0 4rem; }
    .hero-grid { grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
    .app-window { max-width:480px; }
    .window-body { height:340px; }
    .sidebar { width:140px; }
    .showcase-window { max-width:640px; height:320px; }
    section { padding:5rem 0; }
    .footer-grid { flex-direction:row; justify-content:space-between; }
}

/* Desktop */
@media (min-width: 1024px) {
    .container { max-width:1100px; padding:0 2.5rem; }
    .hero-grid { gap:3rem; }
    .hero-title { font-size:clamp(2.5rem, 3.5vw, 3.5rem); }
    .app-window { max-width:520px; }
    .window-body { height:380px; }
    .features-grid { grid-template-columns:repeat(4,1fr); gap:1rem; }
    .download-grid { grid-template-columns:repeat(4,1fr); gap:1rem; }
    .showcase-window { max-width:720px; height:360px; }
    .showcase-panel { width:180px; }
}

/* Large desktop */
@media (min-width: 1440px) {
    .container { max-width:1280px; }
    .app-window { max-width:560px; }
    .window-body { height:400px; }
    .code-rail { opacity:0.2; }
}

/* Ultrawide 21:9 */
@media (min-width: 1920px) {
    .container { max-width:1400px; }
    .code-rail { width:72px; opacity:0.25; font-size:0.75rem; }
    .app-window { max-width:600px; }
}