/* ═══════════════════════════════════════════════════════════
   META3AGENTS — Design System
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#06070b;--bg-card:#0c0e15;--bg-elevated:#11141d;--bg-surface:#161923;
  --text:#e4e7f0;--text-muted:#8890a8;--text-dim:#585f78;
  --accent:#3ee8b5;--accent-soft:rgba(62,232,181,.1);--accent-glow:rgba(62,232,181,.2);
  --blue:#5b8aff;--blue-soft:rgba(91,138,255,.1);
  --amber:#f0b944;--amber-soft:rgba(240,185,68,.1);
  --rose:#f06292;--rose-soft:rgba(240,98,146,.1);
  --violet:#a78bfa;--violet-soft:rgba(167,139,250,.1);
  --border:#181c28;--border-light:#242838;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-display:'Instrument Serif',Georgia,serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --max-w:1240px;
  --radius:10px;
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:all .2s}a:hover{opacity:.85}
img{max-width:100%;display:block}

/* Noise */
body::after{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.5}

/* Layout */
.container{max-width:var(--max-w);margin:0 auto;padding:0 2rem}
section{padding:7rem 0}
.text-center{text-align:center}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 0;background:rgba(6,7,11,.88);backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid var(--border);transition:all .3s}
nav .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--font-mono);font-weight:500;font-size:.9rem;letter-spacing:.1em;color:var(--text);text-decoration:none}
.logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:.4rem}
.nav-links a{color:var(--text-muted);font-size:.82rem;font-weight:500;letter-spacing:.02em;padding:.5rem .9rem;border-radius:6px;transition:all .2s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.04);opacity:1}
.nav-links .dropdown{position:relative}
.nav-links .dropdown-trigger{cursor:pointer;display:flex;align-items:center;gap:.3rem}
.nav-links .dropdown-trigger::after{content:'▾';font-size:.6rem;opacity:.5}
.nav-links .dropdown-menu{position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%);background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:10px;padding:.5rem;min-width:220px;opacity:0;pointer-events:none;transition:all .25s;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.nav-links .dropdown:hover .dropdown-menu{opacity:1;pointer-events:all}
.nav-links .dropdown-menu a{display:block;padding:.6rem 1rem;border-radius:6px;color:var(--text-muted);font-size:.82rem;white-space:nowrap}
.nav-links .dropdown-menu a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-links .dropdown-menu .dm-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);padding:.4rem 1rem .2rem;font-weight:600}
.nav-cta{background:var(--accent)!important;color:var(--bg)!important;font-weight:600!important;padding:.5rem 1.2rem!important;border-radius:6px!important}
.nav-cta:hover{background:#35d4a4!important;opacity:1!important}

/* ── TYPOGRAPHY ── */
.section-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
.section-title{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:400;line-height:1.12;margin-bottom:1rem;letter-spacing:-.015em}
.section-title em{font-style:italic;color:var(--accent)}
.section-desc{color:var(--text-muted);font-size:1.05rem;max-width:620px;line-height:1.7}
.section-desc.center{margin-left:auto;margin-right:auto}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;font-weight:600;font-size:.88rem;border-radius:8px;border:none;cursor:pointer;transition:all .25s;letter-spacing:.01em;text-decoration:none}
.btn:hover{opacity:1}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border-light)}
.btn-ghost:hover{border-color:var(--text-muted);transform:translateY(-1px)}
.btn-sm{padding:.6rem 1.4rem;font-size:.82rem}

/* ── CARDS ── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem;transition:all .3s;position:relative;overflow:hidden}
.card:hover{border-color:var(--border-light);transform:translateY(-3px)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.card:hover::before{opacity:.6}

/* ── GRIDS ── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden}
.grid-4>*{background:var(--bg-card)}
.pixel-grid{display:grid;gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden}
.pixel-grid>*{background:var(--bg-card);padding:2rem 1.5rem;transition:background .2s}
.pixel-grid>*:hover{background:var(--bg-elevated)}

/* ── STATS ── */
.stat-bar{display:grid;gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden}
.stat-bar .stat{background:var(--bg-card);padding:2rem 1.5rem;text-align:center}
.stat .val{font-family:var(--font-mono);font-size:2.2rem;font-weight:500;letter-spacing:-.02em}
.stat .lbl{font-size:.72rem;color:var(--text-dim);margin-top:.4rem;letter-spacing:.06em;text-transform:uppercase}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:4rem 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand .logo{margin-bottom:1rem;display:inline-block}
.footer-brand p{font-size:.85rem;color:var(--text-dim);line-height:1.6;max-width:280px}
.footer-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin-bottom:1rem;font-weight:600}
.footer-col a{display:block;color:var(--text-muted);font-size:.85rem;padding:.3rem 0;transition:color .2s}
.footer-col a:hover{color:var(--accent);opacity:1}
.footer-bottom{border-top:1px solid var(--border);padding-top:2rem;display:flex;justify-content:space-between;align-items:center}
.footer-bottom p{font-size:.78rem;color:var(--text-dim)}

/* ── ANIMATIONS ── */
.fade-up{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}
.fade-up.visible{opacity:1;transform:translateY(0)}
[data-delay="1"]{transition-delay:.1s}[data-delay="2"]{transition-delay:.2s}[data-delay="3"]{transition-delay:.3s}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  section{padding:5rem 0}
}
@media(max-width:640px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stat-bar{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
}