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

/* ═══ THEME VARIABLES ═══ */
.lp{--lp-bg:#09090b;--lp-bg2:#111113;--lp-fg:#e4e4e7;--lp-fg2:#ffffff;--lp-muted:#71717a;--lp-muted2:#52525b;--lp-border:rgba(255,255,255,.04);--lp-border2:rgba(255,255,255,.06);--lp-nav:rgba(9,9,11,.85);--lp-card:rgba(255,255,255,.015);--lp-card-hover:rgba(255,255,255,.03);--lp-dot:rgba(39,39,42,.2);--lp-glow:.03;--lp-code-bg:#0c0c0f;--lp-orbit:rgba(255,255,255,.03);--lp-line:.08;--lp-stat:#fafafa;--lp-table-row:rgba(255,255,255,.03)}
:root:not(.dark) .lp{--lp-bg:#ffffff;--lp-bg2:#f8fafc;--lp-fg:#334155;--lp-fg2:#0f172a;--lp-muted:#64748b;--lp-muted2:#94a3b8;--lp-border:rgba(0,0,0,.06);--lp-border2:rgba(0,0,0,.08);--lp-nav:rgba(255,255,255,.9);--lp-card:rgba(0,0,0,.02);--lp-card-hover:rgba(0,0,0,.04);--lp-dot:rgba(0,0,0,.04);--lp-glow:.04;--lp-code-bg:#f1f5f9;--lp-orbit:rgba(0,0,0,.04);--lp-line:.06;--lp-stat:#0f172a;--lp-table-row:rgba(0,0,0,.02)}

/* ═══ BASE ═══ */
.lp{background:var(--lp-bg) !important;color:var(--lp-fg) !important;transition:background .3s,color .3s}
.lp,.lp p,.lp span,.lp li,.lp td,.lp th,.lp a,.lp div{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.lp pre,.lp pre *,.lp code,.lp .font-mono{font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace !important}
.lp h1,.lp h2,.lp h3{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;color:var(--lp-fg2) !important;-webkit-text-fill-color:var(--lp-fg2) !important}
.lp .glow-text{-webkit-text-fill-color:transparent !important}
.lp .lp-fg{color:var(--lp-fg) !important}
.lp .lp-fg2{color:var(--lp-fg2) !important}
.lp .lp-muted{color:var(--lp-muted) !important}
.lp .lp-muted2{color:var(--lp-muted2) !important}
.lp .lp-nav{background:var(--lp-nav) !important;backdrop-filter:blur(16px) !important;border-color:var(--lp-border) !important}
.lp .lp-card{background:var(--lp-card) !important;border-color:var(--lp-border2) !important}
.lp .lp-card:hover{background:var(--lp-card-hover) !important}
.lp .lp-code{background:var(--lp-code-bg) !important}
.lp .lp-border{border-color:var(--lp-border) !important}
.lp .lp-border2{border-color:var(--lp-border2) !important}
.lp .stat-num{font-variant-numeric:tabular-nums;color:var(--lp-stat) !important;-webkit-text-fill-color:var(--lp-stat) !important}
.lp .lp-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(251,191,36,.12),transparent)}
.lp .lp-table-row{border-color:var(--lp-border) !important}
.lp .lp-table-head{background:var(--lp-table-row) !important}
.lp .lp-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;opacity:var(--lp-glow);background:rgba(251,191,36,.5)}
.lp .lp-dot-bg{background-image:radial-gradient(var(--lp-dot) 1px,transparent 1px);background-size:32px 32px}

/* Theme toggle */
.lp .theme-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--lp-border2);background:var(--lp-card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--lp-muted)}
.lp .theme-btn:hover{border-color:rgba(251,191,36,.3);color:var(--lp-fg2);background:rgba(251,191,36,.08)}
.lp .theme-btn svg{width:16px;height:16px;transition:transform .3s}
.lp .theme-btn:hover svg{transform:rotate(15deg)}
.dark .lp .sun-icon{display:none}.dark .lp .moon-icon{display:block}
:root:not(.dark) .lp .sun-icon{display:block}:root:not(.dark) .lp .moon-icon{display:none}

/* ═══ ANIMATIONS ═══ */
@keyframes float-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes beacon{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.4)}70%{box-shadow:0 0 0 12px rgba(251,191,36,0)}}
@keyframes dash{to{stroke-dashoffset:-100}}
@keyframes orbit{from{transform:rotate(0deg) translateX(140px) rotate(0deg)}to{transform:rotate(360deg) translateX(140px) rotate(-360deg)}}
@keyframes orbit-reverse{from{transform:rotate(0deg) translateX(100px) rotate(0deg)}to{transform:rotate(-360deg) translateX(100px) rotate(360deg)}}
@keyframes ping-slow{75%,100%{transform:scale(2);opacity:0}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.up{animation:float-up .7s ease both}.up1{animation-delay:.1s}.up2{animation-delay:.2s}.up3{animation-delay:.3s}.up4{animation-delay:.4s}.up5{animation-delay:.5s}
.glow-text{background:linear-gradient(135deg,#fbbf24,#f59e0b,#d97706);-webkit-background-clip:text;-webkit-text-fill-color:transparent !important;background-clip:text}
.beacon{animation:beacon 2s infinite}
.card-glow:hover{box-shadow:0 0 40px -10px rgba(251,191,36,.08)}
pre{tab-size:2}

/* Syntax highlighting */
.syn-kw{color:#a855f7}.syn-str{color:#22c55e}.syn-fn{color:#d97706}.syn-prop{color:#0891b2}.syn-const{color:#3b82f6}.syn-obj{color:var(--lp-fg2)}
:root:not(.dark) .lp .syn-kw{color:#7c3aed}:root:not(.dark) .lp .syn-str{color:#16a34a}:root:not(.dark) .lp .syn-fn{color:#b45309}:root:not(.dark) .lp .syn-prop{color:#0e7490}:root:not(.dark) .lp .syn-const{color:#2563eb}

/* ═══ MESH GRAPHIC ═══ */
.hero-mesh{position:relative;width:100%;height:100%}
.node-hub{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(251,191,36,.2),rgba(251,191,36,.05));border:2px solid rgba(251,191,36,.4);color:rgba(251,191,36,.95);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:3;letter-spacing:.05em}
.node-hub::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(251,191,36,.12);animation:ping-slow 3s cubic-bezier(0,0,.2,1) infinite}
.node-hub::after{content:'';position:absolute;inset:-20px;border-radius:50%;border:1px solid rgba(251,191,36,.06);animation:ping-slow 3s cubic-bezier(0,0,.2,1) infinite;animation-delay:1.5s}
.orbit-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid var(--lp-orbit,rgba(255,255,255,.04));transform:translate(-50%,-50%)}
.orbit-ring-1{width:320px;height:320px}
.orbit-ring-2{width:220px;height:220px;border-style:dashed;border-color:rgba(251,191,36,.08)}
.orbit-ring-3{width:420px;height:420px;border-color:rgba(168,85,247,.04)}
.orbit-ring-4{width:160px;height:160px;border-color:rgba(251,191,36,.12);border-style:dotted}
.sat{position:absolute;top:50%;left:50%;width:0;height:0}
.sat-1{animation:orbit 20s linear infinite}
.sat-2{animation:orbit 25s linear infinite reverse}
.sat-3{animation:orbit 30s linear infinite}
.sat-4{animation:orbit-reverse 22s linear infinite}
.sat-5{animation:orbit-outer 35s linear infinite}
.sat-6{animation:orbit-outer 40s linear infinite reverse}
.sat-7{animation:orbit-outer 32s linear infinite;animation-delay:-10s}
.sat-8{animation:orbit-micro 12s linear infinite}
.sat-9{animation:orbit-micro 15s linear infinite reverse}
@keyframes orbit-outer{from{transform:rotate(0deg) translateX(210px) rotate(0deg)}to{transform:rotate(360deg) translateX(210px) rotate(-360deg)}}
@keyframes orbit-micro{from{transform:rotate(0deg) translateX(80px) rotate(0deg)}to{transform:rotate(360deg) translateX(80px) rotate(-360deg)}}
.sat-inner{width:44px;height:44px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;margin:-22px 0 0 -22px;backdrop-filter:blur(8px)}
.sat-inner-sm{width:32px;height:32px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;margin:-16px 0 0 -16px;backdrop-filter:blur(4px)}
.sat-inner-xs{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:-10px 0 0 -10px}
.connection-line{position:absolute;top:50%;left:50%;height:1px;transform-origin:left center;opacity:var(--lp-line,.08);background:linear-gradient(90deg,rgba(251,191,36,.4),transparent)}
.data-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(251,191,36,.6);filter:blur(1px)}
.dp-1{animation:particle-flow-1 4s linear infinite}
.dp-2{animation:particle-flow-2 5s linear infinite;animation-delay:-1.5s}
.dp-3{animation:particle-flow-3 3.5s linear infinite;animation-delay:-2s}
.dp-4{animation:particle-flow-4 4.5s linear infinite;animation-delay:-0.5s}
.dp-5{animation:particle-flow-5 6s linear infinite;background:rgba(168,85,247,.5)}
.dp-6{animation:particle-flow-6 5.5s linear infinite;animation-delay:-3s;background:rgba(59,130,246,.5)}
@keyframes particle-flow-1{0%{top:50%;left:50%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:28%;left:68%;opacity:0}}
@keyframes particle-flow-2{0%{top:50%;left:50%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:22%;left:32%;opacity:0}}
@keyframes particle-flow-3{0%{top:50%;left:50%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:72%;left:62%;opacity:0}}
@keyframes particle-flow-4{0%{top:50%;left:50%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:68%;left:28%;opacity:0}}
@keyframes particle-flow-5{0%{top:50%;left:50%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:15%;left:50%;opacity:0}}
@keyframes particle-flow-6{0%{top:50%;left:50%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:80%;left:45%;opacity:0}}
.mesh-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(251,191,36,.03) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 20%,transparent 70%)}
.feature-icon{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}