/* LOOM Landing v5 — Clean rewrite. Swiss Nerd aesthetic.
   SVG icons instead of ASCII (no unicode rendering issues).
   Module colors from Hub. Design skill audit applied. */

:root {
    --bg: #0e0e14;
    --bg2: #14141e;
    --bg3: #1a1a28;
    --bg4: #1e1e30;
    --border: #2a2a3a;
    --border2: #3a3a5a;
    --text: #c8c8d0;
    --dim: #777;
    --muted: #555;
    --accent: #7b68ee;
    --accent2: #5a4cbf;
    --glow: rgba(123,104,238,0.15);
    --ok: #4caf50;
    --ok2: #2e7d32;
    --font: 'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
    --mono: 'JetBrains Mono','Consolas',monospace;
    --max: 1100px;
    --r: 8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:#9b88ff}

/* ── NAV ──────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(14,14,20,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--accent);letter-spacing:3px;text-decoration:none}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--dim);font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.btn-nav{background:var(--accent)!important;color:#fff!important;padding:6px 16px;border-radius:var(--r);font-size:13px!important;font-weight:600!important}

/* ── BTN ──────────────────── */
.btn{display:inline-block;padding:12px 28px;border-radius:var(--r);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;border:none;text-align:center}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#9b88ff;color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border2);color:#fff}
.btn-lg{padding:16px 40px;font-size:17px}
.btn-block{width:100%}
.btn-xs{padding:6px 16px;font-size:12px}

/* ── HERO ─────────────────── */
.hero{padding:140px 24px 80px}
.hero-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-badge{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--accent);border:1px solid var(--accent2);padding:4px 12px;border-radius:20px;margin-bottom:20px}
.hero h1{font-size:46px;font-weight:700;line-height:1.1;letter-spacing:-1px;color:#fff;margin-bottom:20px}
.hero-sub{font-size:16px;color:var(--dim);max-width:480px;margin-bottom:32px}
.hero-actions{display:flex;gap:12px;margin-bottom:16px}
.hero-note{font-size:12px;color:var(--muted)}

/* Terminal */
.hero-terminal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;font-family:var(--mono);font-size:13px}
.term-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg3);border-bottom:1px solid var(--border)}
.term-dot{width:10px;height:10px;border-radius:50%}
.term-title{margin-left:auto;font-size:11px;color:var(--muted)}
.term-body{padding:16px}
.term-line{padding:3px 0;opacity:0;animation:fadeIn .3s ease forwards}
.term-line:nth-child(1){animation-delay:.2s}
.term-line:nth-child(2){animation-delay:.5s}
.term-line:nth-child(3){animation-delay:.8s}
.term-line:nth-child(4){animation-delay:1.1s}
.term-line:nth-child(5){animation-delay:1.4s}
.term-line:nth-child(6){animation-delay:1.7s}
.term-line:nth-child(7){animation-delay:2s}
.term-line:nth-child(8){animation-delay:2.3s}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ── PROOF ─────────────────── */
.proof{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 24px}
.proof-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:12px;font-family:var(--mono);color:var(--dim)}
.proof-dot{width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* ── SECTIONS ─────────────── */
.section{padding:100px 24px}
.section-dark{background:var(--bg2)}
.section-inner{max-width:var(--max);margin:0 auto}
.section-label{font-family:var(--mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:3px;margin-bottom:12px}
.section h2{font-size:36px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:20px}
.section-desc{font-size:16px;color:var(--dim);max-width:620px;margin-bottom:48px}

/* ── STINGER 1 ────────────── */
.stinger1{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;background:var(--bg3)}
.stinger1-bg{position:absolute;inset:0}
.stinger1-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.35)}
.stinger1-content{position:relative;z-index:1;text-align:center;padding:60px 24px;max-width:750px}
.stinger1-content h2{font-size:36px;color:#fff;margin-bottom:12px}
.stinger1-content p{font-size:16px;color:var(--text)}

/* ── STATS ─────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.stat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:24px 20px;text-align:center}
.stat-icon{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.stat-num{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--accent);margin-bottom:6px}
.stat-label{font-size:12px;color:var(--dim);line-height:1.4}

/* ── HUB ──────────────────── */
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;margin-top:32px}
.hub-left p{font-size:15px;color:var(--dim);margin-bottom:20px}
.hub-features{list-style:none}
.hub-features li{padding:6px 0 6px 20px;font-size:14px;color:var(--dim);position:relative}
.hub-features li::before{content:"+";position:absolute;left:0;color:var(--ok);font-family:var(--mono);font-weight:700}
.hub-right{background:var(--bg3);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hub-right img{width:100%;height:auto;display:block}
.img-ph{padding:40px;text-align:center;color:var(--muted);font-size:13px}
.img-ph code{font-size:11px;color:var(--accent2)}

/* ── MODULES ──────────────── */
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.module-card{--mc:var(--accent);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.module-card:hover{border-color:var(--mc);transform:translateY(-2px)}

.mc-head{display:flex;align-items:center;gap:14px;padding:20px 20px 12px}
.mc-icon{width:44px;height:44px;flex-shrink:0;color:var(--mc);opacity:.7}
.module-card:hover .mc-icon{opacity:1}
.mc-head h3{font-family:var(--mono);font-size:14px;font-weight:700;color:#fff;letter-spacing:1px;margin:0}
.mc-ver{font-family:var(--mono);font-size:10px;color:var(--muted);display:block;margin-top:2px}

.mc-skills{list-style:none;padding:0 20px 16px;flex:1}
.mc-skills li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);padding:3px 0}
.si{width:14px;height:14px;flex-shrink:0;fill:none;stroke:var(--mc);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

.mc-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.mc-price{font-family:var(--mono);font-size:24px;color:#fff;font-weight:700}
.mc-free{background:var(--ok2);color:#c8e6c9;font-size:10px;padding:2px 8px;border-radius:3px;font-family:var(--mono);margin-left:8px}
.mc-foot .btn-xs{margin-left:auto}

/* ── COMPARE ──────────────── */
.compare-table{width:100%;border-collapse:collapse;margin-top:32px;font-size:13px}
.compare-table th{text-align:left;padding:12px 16px;border-bottom:2px solid var(--border);color:var(--dim);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.compare-table td{padding:12px 16px;border-bottom:1px solid var(--border)}
.compare-table tr:hover td{background:rgba(123,104,238,.03)}

/* ── STINGER 2 ────────────── */
.stinger2{text-align:center;padding:80px 24px;background:var(--bg2)}
.stinger2-logo{font-family:var(--mono);font-size:64px;font-weight:700;color:var(--accent);letter-spacing:12px;margin-bottom:32px;opacity:.2}
.stinger2-quote{font-size:20px;color:var(--text);font-style:italic;max-width:600px;margin:0 auto 12px}
.stinger2-attr{font-size:13px;color:var(--muted)}

/* ── PRICING ──────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.price-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:32px 24px;display:flex;flex-direction:column;position:relative}
.price-featured{border-color:var(--accent);box-shadow:0 0 40px var(--glow)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.price-tier{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.price-amount{font-size:48px;font-weight:700;color:#fff;line-height:1;margin-bottom:4px}
.price-period{font-size:13px;color:var(--muted);margin-bottom:24px}
.price-list{list-style:none;margin-bottom:24px;flex:1}
.price-list li{padding:5px 0 5px 20px;font-size:13px;color:var(--dim);position:relative}
.price-list li::before{content:"+";position:absolute;left:0;color:var(--ok);font-family:var(--mono);font-weight:700}
.pricing-note{text-align:center;margin-top:24px;font-size:14px;color:var(--dim)}

/* ── FAQ ──────────────────── */
.faq-wrap{max-width:700px}
.faq-list{margin-top:32px}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0}
.faq-item summary{cursor:pointer;font-size:15px;font-weight:600;color:#fff;list-style:none;display:flex;align-items:center;justify-content:space-between}
.faq-item summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:20px}
.faq-item[open] summary::after{content:"-"}
.faq-item p{margin-top:12px;font-size:14px;color:var(--dim);max-width:600px}

/* ── CTA ──────────────────── */
.section-cta{padding:100px 24px;background:var(--bg3)}
.cta-inner{text-align:center;max-width:700px;margin:0 auto}
.cta-quote{font-size:18px;color:var(--text);font-style:italic;margin-bottom:32px}
.cta-inner h2{font-size:36px;font-weight:700;color:#fff;margin-bottom:12px}
.cta-sub{font-size:16px;color:var(--dim);margin-bottom:32px}

/* ── BACKSTAGE ────────────── */
.section-backstage{border-top:1px solid var(--border)}
.bs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;margin-top:40px}
.bs-item{text-align:center}
.bs-num{font-family:var(--mono);font-size:36px;font-weight:700;color:#fff;line-height:1;margin-bottom:8px}
.bs-label{font-size:13px;color:var(--dim);line-height:1.5}
.bs-label .t-dim{font-size:11px}

/* ── FOOTER ───────────────── */
.footer{border-top:1px solid var(--border);padding:32px 24px}
.footer-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-logo{font-family:var(--mono);font-weight:700;color:var(--accent);letter-spacing:3px;margin-right:12px}
.footer-copy{font-size:12px;color:var(--muted)}
.footer-left{display:flex;align-items:center;gap:12px}
.footer-right{display:flex;gap:20px}
.footer-right a{font-size:13px;color:var(--dim)}
.footer-right a:hover{color:var(--text)}

/* ── HELPERS ──────────────── */
.t-ok{color:var(--ok)}
.t-accent{color:var(--accent)}
.t-dim{color:var(--muted)}

/* ── RESPONSIVE ───────────── */
@media(max-width:900px){
    .module-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    .hero-inner{grid-template-columns:1fr;gap:40px}
    .hero h1{font-size:32px}
    .stats-row{grid-template-columns:repeat(2,1fr)}
    .module-grid{grid-template-columns:1fr}
    .pricing-grid{grid-template-columns:1fr}
    .hub-grid{grid-template-columns:1fr}
    .nav-links a:not(.btn-nav){display:none}
    .section h2{font-size:28px}
    .footer-inner{flex-direction:column;text-align:center}
    .bs-grid{grid-template-columns:repeat(2,1fr);gap:24px 16px}
    .bs-num{font-size:28px}
    .stinger1-content h2{font-size:24px}
    .stinger2-logo{font-size:40px}
}