@import "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Exo+2:wght@600;700&display=swap";
:root{--bg:#f4f5f7;--bg-1:#f4f5f7;--bg-2:#fff;--bg-3:#eef0f3;--surface:#fff;--surface-hover:#f1f3f5;--surface-soft:#fafbfc;--surface-press:#e7eaef;--dark-surface:#14171c;--dark-surface-border:#232830;--ink-hover:#20242b;--ink:#14171c;--text:#14171c;--text-dark:#14171c;--text-color:#14171c;--text-muted:#5b6472;--text-faint:#676f7c;--white:#fff;--black:#14171c;--border:#e6e8ec;--border-color:#e6e8ec;--hairline:#eef0f3;--border-strong:#d6dae1;--border-hover:#dfe2e8;--border-soft:#b9c0ca;--accent:#14171c;--accent-hover:#232830;--accent-dark:#232830;--accent-light:#232830;--accent-secondary:#2f9e86;--electric-blue:#14171c;--electric-blue-glow:#14171c14;--neon-orange:#d98a4e;--neon-orange-glow:#d98a4e2e;--cyber-green:#2f9e86;--cyber-purple:#5b91c8;--cosmic-black:#fff;--deep-space:#f4f5f7;--dark-matter:#eef0f3;--c1:#2f9e86;--c2:#d98a4e;--c3:#5b91c8;--c4:#cf7d97;--c5:#b59257;--c1-deep:#1a8054;--c2-deep:#b06a2e;--c3-deep:#3f6aa3;--grad-accent:linear-gradient(102deg, #2f9e86 0%, #3f8fb8 52%, #5b91c8 100%);--grad-accent-180:linear-gradient(180deg, #2f9e86 0%, #3f8fb8 52%, #5b91c8 100%);--gray-900:#14171c;--gray-800:#232830;--gray-700:#3a4049;--gray-600:#5b6472;--gray-500:#6b727e;--gray-400:#9aa1ad;--gray-300:#c6cbd3;--gray-200:#d6dae1;--gray-100:#e6e8ec;--gray-50:#eef0f3;--success:#2f9e86;--cloud:#14171c0a;--font-display:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--font-hero:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--font-brand:"Exo 2", -apple-system, BlinkMacSystemFont, sans-serif;--weight-light:300;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--tracking-tighter:-.03em;--tracking-tight:-.022em;--tracking-normal:.01em;--tracking-wide:.025em;--tracking-widest:.12em;--text-11:11px;--text-12:12px;--text-12-5:12.5px;--text-13:13px;--text-13-5:13.5px;--text-14:14px;--text-14-5:14.5px;--text-15:15px;--text-16:16px;--text-17:17px;--text-18:18px;--text-20:20px;--text-22:22px;--text-24:24px;--text-26:26px;--text-28:28px;--text-32:32px;--text-34:34px;--text-36:36px;--text-40:40px;--text-48:48px;--glass-bg-subtle:#fff9;--glass-bg-medium:#fff;--glass-bg-strong:#fff;--glass-inset-white:#ffffffe6;--glass-inset-blue:#14171c0a;--shadow-card:0 1px 2px #10121d0a;--shadow-card-hover:0 18px 42px -22px #10121d4d;--shadow-float:0 1px 2px #10121d0a, 0 12px 40px -12px #10121d1f;--shadow-glow-blue:0 12px 40px -12px #10121d1f;--shadow-elevation-1:0 1px 2px #10121d0a;--shadow-elevation-2:0 12px 40px -12px #10121d1f;--shadow-elevation-3:0 24px 60px -30px #10121d24;--radius-card-xs:8px;--radius-card-sm:12px;--radius-card-md:16px;--radius-card:20px;--radius-card-lg:24px;--radius-pill:9999px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--space-7:56px;--space-8:64px;--space-9:72px;--space-10:80px;--space-12:96px;--space-14:112px;--space-15:120px;--space-16:128px;--space-18:144px;--space-20:160px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:var(--bg);color:var(--ink);min-height:100vh;font-family:var(--font-body);letter-spacing:.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-weight:400;line-height:1.6;position:relative;overflow-x:hidden}body>*{z-index:2;position:relative}body,p,span,div{color:var(--ink)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink);line-height:1.08}h1{letter-spacing:var(--tracking-tight);font-size:clamp(2.5rem,5vw,3.75rem);font-weight:300;line-height:1.05}h2{letter-spacing:var(--tracking-tight);font-size:clamp(1.875rem,4vw,2.5rem);font-weight:300}h3{letter-spacing:-.012em;font-size:clamp(1.125rem,2.4vw,1.375rem);font-weight:600}h4{letter-spacing:-.01em;font-size:1.125rem;font-weight:600}h5{font-size:1rem;font-weight:600}h6{letter-spacing:var(--tracking-widest);text-transform:uppercase;font-size:.8125rem;font-weight:600;font-family:var(--font-mono);color:var(--text-faint)}code,pre{font-family:var(--font-mono)}body,p,span,div,a,button,input,textarea,select,label,li,td,th{font-family:var(--font-body)}p{letter-spacing:.01em;color:var(--text-muted);margin-bottom:1.2em;line-height:1.6}a{color:inherit;text-decoration:none;transition:color .22s}#root{min-height:100vh;position:relative}.skip-link{z-index:100;background:var(--ink);color:#f4f5f7;font-size:var(--text-14);border-radius:var(--radius-card-xs);padding:10px 16px;font-weight:600;transition:transform .18s;position:fixed;top:8px;left:8px;transform:translateY(-150%)}.skip-link:focus{outline:2px solid var(--ink);outline-offset:2px;transform:translateY(0)}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}.container{max-width:1200px;padding:0 var(--space-4);margin:0 auto}.btn-primary{background:var(--ink);color:#f4f5f7;font-weight:600;font-size:var(--text-15);border-radius:var(--radius-pill);border:1px solid var(--ink);font-family:var(--font-body);letter-spacing:0;cursor:pointer;align-items:center;gap:8px;padding:13px 22px;text-decoration:none;transition:transform .24s cubic-bezier(.22,.61,.36,1),background .2s,box-shadow .25s,border-color .2s;display:inline-flex}.btn-primary:hover{color:#f4f5f7;background:#20242b;transform:translateY(-2px);box-shadow:0 12px 26px -12px #10121d8c}.btn-primary:active{transform:translateY(0)scale(.97);box-shadow:0 4px 12px -8px #10121d80}.btn-primary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.btn-large{font-size:var(--text-15);padding:14px 24px}.btn-secondary{color:var(--ink);font-weight:600;font-size:var(--text-15);border-radius:var(--radius-pill);border:1px solid var(--border-strong);font-family:var(--font-body);letter-spacing:0;cursor:pointer;background:#fff;align-items:center;gap:8px;padding:13px 20px;text-decoration:none;transition:transform .24s cubic-bezier(.22,.61,.36,1),background .2s,box-shadow .25s,border-color .2s;display:inline-flex}.btn-secondary:hover{color:var(--ink);border-color:#c6cbd3;transform:translateY(-2px);box-shadow:0 10px 22px -14px #10121d4d}.btn-secondary:active{transform:translateY(0)scale(.97)}.btn-secondary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.btn-cta{background:var(--accent);color:#f4f5f7;border:1px solid var(--ink);border-radius:var(--radius-pill);font-weight:600;font-size:var(--text-18);font-family:var(--font-body);cursor:pointer;padding:16px 32px;text-decoration:none;transition:all .3s;display:inline-block}.btn-cta:hover{background:var(--accent);opacity:.9;transform:translateY(-2px);box-shadow:0 12px 26px -12px #10121d8c}.btn-cta:active{transform:translateY(0)scale(.97)}.btn-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}@media (max-width:768px){.btn-cta--responsive{min-height:48px;padding:var(--space-3) var(--space-5);font-size:var(--text-16)}}@media (max-width:480px){.btn-cta--responsive{width:100%}}.btn-on-dark{font-size:var(--text-15);color:#14171c;border-radius:var(--radius-pill);cursor:pointer;background:#f4f5f7;align-items:center;gap:8px;padding:14px 24px;font-weight:600;text-decoration:none;transition:transform .24s cubic-bezier(.22,.61,.36,1),background .2s,box-shadow .25s;display:inline-flex}.btn-on-dark:hover{background:#e7eaef;transform:translateY(-2px);box-shadow:0 14px 30px -14px #00000080}.btn-on-dark:active{transform:translateY(0)scale(.97)}.btn-on-dark-ghost{font-size:var(--text-15);color:#f4f5f7;border-radius:var(--radius-pill);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;align-items:center;gap:8px;padding:14px 22px;font-weight:600;text-decoration:none;transition:transform .24s cubic-bezier(.22,.61,.36,1),background .2s;display:inline-flex}.btn-on-dark-ghost:hover{color:#f4f5f7;background:#ffffff1f;transform:translateY(-2px)}.btn-on-dark-ghost:active{transform:translateY(0)scale(.97)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-3);margin-bottom:var(--space-5);box-shadow:var(--shadow-card);transition:transform .42s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s;position:relative}.card:hover{box-shadow:var(--shadow-card-hover);border-color:#dfe2e8;transform:translateY(-4px)}.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.surface--hover{transition:transform .42s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}.surface--hover:hover{border-color:var(--border-hover);box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}.surface--lift{transition:transform .2s,box-shadow .2s}.surface--lift:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}.surface--r8{border-radius:var(--radius-card-xs)}.surface--r12{border-radius:var(--radius-card-sm)}.surface--r16{border-radius:var(--radius-card-md)}.surface--r18{border-radius:18px}.surface--r24{border-radius:var(--radius-card-lg)}.surface--soft{background:var(--surface-soft)}.surface--dark{background:var(--dark-surface);border-color:var(--dark-surface-border)}.card-nested,.card-nested-small{background:var(--bg-3);border:1px solid var(--border);padding:var(--space-3);margin:var(--space-3) 0;border-radius:14px}.card-code{background:var(--dark-surface);color:#e7eaef;border:1px solid var(--dark-surface-border);padding:var(--space-3);border-radius:14px}.card-accent-left{background:var(--surface-soft);border:1px solid var(--border-strong);border-radius:var(--radius-card);padding:var(--space-3);margin:var(--space-3) 0}.card-flat,.card-raised,.card-floating{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:transform .42s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}.card-raised:hover,.card-floating:hover{box-shadow:var(--shadow-card-hover);border-color:#dfe2e8;transform:translateY(-4px)}.text-gradient-primary,.text-gradient-secondary{color:var(--ink)}.text-glow,.text-glow-subtle{text-shadow:none}.text-link{color:var(--ink);font-weight:600;text-decoration:none}.text-link:hover{text-decoration:underline}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#d3d7dd padding-box padding-box;border:2px solid #0000;border-radius:6px}@keyframes rcRise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes rcBlink{50%{opacity:0}}@keyframes rcDash{to{stroke-dashoffset:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fadeIn{animation:.8s forwards fadeIn}.animate-fadeInUp{animation:.8s forwards fadeInUp}.animate-float{animation:6s ease-in-out infinite float}[data-reveal]{transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .42s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}@media (max-width:768px){.container{padding:0 var(--space-3)}.card{padding:var(--space-3)}}@media (max-width:640px){.container{padding:0 var(--space-3);max-width:100%}}@media (max-width:480px){.container{padding:0 var(--space-2)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.header{z-index:50;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#f4f5f7db;position:sticky;top:0}.header-inner{align-items:center;gap:22px;max-width:1200px;height:64px;margin:0 auto;padding:0 32px;display:flex}.logo{flex-shrink:0;align-items:center;gap:11px;display:flex}.logo-icon{flex-shrink:0;width:auto;height:30px;display:block}.logo-text{font-family:var(--font-brand);font-size:var(--text-20);letter-spacing:.01em;text-transform:uppercase;color:var(--ink);font-weight:600}.nav{align-items:center;gap:2px;margin-left:0;display:flex}.nav-link{font-size:var(--text-14);color:var(--text-muted);white-space:nowrap;border-radius:8px;padding:7px 10px;font-weight:500;transition:background .22s,color .22s}.nav-link:hover{background:var(--hairline);color:var(--ink)}.nav-link.active{background:var(--hairline);color:var(--ink);font-weight:600}.header-actions{align-items:center;gap:10px;margin-left:auto;display:flex}.header-gh-btn{font-size:var(--text-13-5);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);white-space:nowrap;align-items:center;gap:7px;padding:8px 13px;font-weight:600;transition:transform .24s cubic-bezier(.22,.61,.36,1),background .2s,box-shadow .25s,border-color .2s;display:flex}.header-gh-btn:hover{border-color:var(--gray-300);transform:translateY(-1px)}.header-gh-btn:active{transform:translateY(0)scale(.97)}.header-cta{font-size:var(--text-13-5);color:var(--bg);background:var(--ink);border-radius:var(--radius-pill);white-space:nowrap;padding:9px 16px;font-weight:600;transition:transform .24s cubic-bezier(.22,.61,.36,1),background .2s,box-shadow .25s}.header-cta:hover{background:var(--ink-hover);color:var(--bg);transform:translateY(-1px);box-shadow:0 10px 26px -12px #14171c4d}.header-cta:active{transform:translateY(0)scale(.97)}.mobile-menu-button{min-width:44px;min-height:44px;color:var(--ink);font-size:var(--text-20);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:6px;line-height:0;display:none}.mobile-menu{-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:49;opacity:0;visibility:hidden;pointer-events:none;background:#f4f5f7fa;max-height:80vh;transition:opacity .25s,transform .25s,visibility 0s linear .25s;display:none;position:fixed;top:64px;left:0;right:0;overflow-y:auto;transform:translateY(-8px)}.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s,transform .25s,visibility;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.mobile-menu{transition:opacity 10ms,visibility 0s linear 10ms;transform:none}.mobile-menu.open{transition:opacity 10ms,visibility}}.mobile-nav{flex-direction:column;gap:2px;padding:12px 24px 24px;display:flex}.mobile-nav-link{font-size:var(--text-15);color:var(--text-muted);border-bottom:1px solid var(--hairline);padding:12px 8px;font-weight:500;transition:color .2s}.mobile-nav-link:hover{color:var(--ink)}.mobile-nav-link.active{color:var(--ink);font-weight:600}.mobile-menu-overlay{z-index:48;background:#14171c2e;position:fixed;inset:64px 0 0}@media (max-width:980px){.nav{display:none}.mobile-menu-button{align-items:center;display:inline-flex}.mobile-menu{display:block}}@media (max-width:600px){.header-gh-btn{display:none}.header-inner{padding:0 20px}}
.footer{border-top:1px solid var(--border);background:var(--surface)}.footer-content{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto;padding:48px 32px 36px;display:grid}.footer-brand{max-width:280px}.footer-logo{align-items:center;gap:10px;margin-bottom:14px;display:flex}.footer-logo-icon{flex-shrink:0;width:auto;height:24px;display:block}.footer-logo-text{font-family:var(--font-brand);font-size:var(--text-16);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);font-weight:600}.footer-description{font-size:var(--text-13-5);color:var(--text-faint);max-width:240px;margin:0;line-height:1.6}.footer-heading{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:0 0 14px;font-weight:600}.footer-nav{flex-direction:column;gap:9px;display:flex}.footer-link{font-size:var(--text-13-5);color:var(--text-muted);transition:color .2s}.footer-link:hover{color:var(--ink)}.footer-bottom{border-top:1px solid var(--hairline);justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:18px 32px;display:flex}.footer-copyright{font-size:var(--text-12-5);color:var(--text-faint);margin:0}.footer-bottom-nav{gap:18px;display:flex}.footer-bottom-nav .footer-link{font-size:var(--text-12-5);color:var(--text-faint)}.footer-bottom-nav .footer-link:hover{color:var(--ink)}@media (max-width:760px){.footer-content{grid-template-columns:1fr 1fr;gap:28px}}@media (max-width:480px){.footer-content{grid-template-columns:1fr}}