@property --grad-angle{syntax: "<angle>"; initial-value: 135deg; inherits: false;}@property --primary-color{syntax: "<color>"; initial-value: #8b5cf6; inherits: true;}@property --secondary-color{syntax: "<color>"; initial-value: #06b6d4; inherits: true;}@property --accent-pink{syntax: "<color>"; initial-value: #f472b6; inherits: true;}:root{--hue: 0;--bg-color: oklch(.13 .01 calc(300 + var(--hue)));--surface-color: oklch(.19 .015 calc(300 + var(--hue)));--primary-color: oklch(.62 .22 calc(295 + var(--hue)));--secondary-color: oklch(.75 .13 calc(215 + var(--hue)));--accent-pink: oklch(.72 .19 calc(350 + var(--hue)));--primary-glow: color-mix(in oklab, var(--primary-color) 50%, transparent);--primary-glow-soft: color-mix(in oklab, var(--primary-color) 18%, transparent);--text-primary: #ffffff;--text-secondary: oklch(.72 .01 290);--font-main: "Inter", system-ui, -apple-system, sans-serif;--nav-height: 80px;--glass-bg: rgba(255, 255, 255, .03);--glass-bg-hover: rgba(255, 255, 255, .06);--glass-blur: 20px;--glass-border: rgba(255, 255, 255, .08);--glass-border-hover: rgba(255, 255, 255, .15);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .3);--glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, .4);--glass-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");color-scheme:dark;accent-color:var(--primary-color)}*{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-main);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:color-mix(in oklab,var(--primary-color) 55%,transparent);color:#fff}a{color:inherit;text-decoration:none;transition:color .2s ease}a:hover{color:var(--primary-color)}:focus-visible{outline:2px solid var(--secondary-color);outline-offset:2px;border-radius:4px}::view-transition-old(root){animation:vt-out .22s ease both}::view-transition-new(root){animation:vt-in .3s ease both}@keyframes vt-out{to{opacity:0;transform:translateY(-8px) scale(.995)}}@keyframes vt-in{0%{opacity:0;transform:translateY(10px) scale(.995)}}.reveal{opacity:1}@supports (animation-timeline: view()){.reveal{animation:revealUp both;animation-timeline:view();animation-range:entry 0% entry 60%;animation-delay:var(--d, 0s)}}@keyframes revealUp{0%{opacity:0;transform:translateY(36px) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--surface-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}.container{max-width:1200px;margin:0 auto;padding:0 20px}.gradient-text{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:24px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:var(--glass-shadow)}.glass-panel:before{content:"";position:absolute;inset:0;background:var(--glass-noise);opacity:.03;pointer-events:none;z-index:0}.glass-panel:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 20%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.2) 80%,transparent 100%);opacity:.6;pointer-events:none;z-index:1}.glass-panel:hover{transform:translateY(-6px);background:var(--glass-bg-hover);border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow-hover)}.glass-panel:hover:after{opacity:1}.glass-panel>*{position:relative;z-index:1}.glass-badge{display:inline-block;padding:.35rem 1rem;background:#ffffff14;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:100px;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);transition:all .3s ease}.glass-badge:hover{background:#ffffff1f;border-color:#fff3;color:var(--text-primary)}
