@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:#9aa1ad;--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:#1f8a5c;--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}.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);border:1px solid var(--border);border-left:4px solid var(--ink);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{background:var(--grad-accent);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.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}}
