:root{--glass-white: rgba(255, 255, 255, .05);--glass-white-strong: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .2);--glass-border-strong: rgba(255, 255, 255, .3);--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--gradient-purple-blue: linear-gradient(135deg, #5B47E5 0%, #7C3AED 25%, #6366F1 50%, #3B82F6 75%, #06B6D4 100%);--shadow-soft: 0 .5rem 2rem rgba(0, 0, 0, .1);--shadow-medium: 0 .5rem 2rem rgba(0, 0, 0, .15);--shadow-strong: 0 1rem 3rem rgba(0, 0, 0, .2);--shadow-inset: inset 0 .0625rem .1875rem rgba(255, 255, 255, .2);--blur-light: blur(.25rem);--blur-medium: blur(.5rem);--blur-heavy: blur(1.25rem);--space-xs: .5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--space-3xl: 6rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .8);--text-tertiary: rgba(255, 255, 255, .6);--text-dark: #1a1a1a}*{margin:0;padding:0;box-sizing:border-box}::selection{background-color:var(--accent-primary);color:#fff}::-moz-selection{background-color:var(--accent-primary);color:#fff}body{font-family:var(--font-body);color:var(--text-primary);line-height:1.6;overflow-x:hidden;position:relative;min-height:100vh;background:#1a1a2e}.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(135deg,#1e3a8a,#3730a3,#6366f1,#8b5cf6,#a855f7);overflow:hidden}.background:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(99,102,241,.3) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(168,85,247,.3) 0%,transparent 50%),radial-gradient(circle at 40% 90%,rgba(59,130,246,.2) 0%,transparent 40%)}.blob{position:absolute;border-radius:50%;filter:blur(3.75rem);opacity:.6;animation:blob-float 20s ease-in-out infinite;pointer-events:none}.blob-1{width:25rem;height:25rem;background:radial-gradient(circle,#6366f1cc,#8b5cf666);top:10%;left:20%;animation-delay:0s;animation-duration:25s}.blob-2{width:31.25rem;height:31.25rem;background:radial-gradient(circle,#a855f7b3,#ec48994d);top:50%;right:10%;animation-delay:-7s;animation-duration:30s}.blob-3{width:28.125rem;height:28.125rem;background:radial-gradient(circle,#3b82f699,#6366f166);bottom:15%;left:40%;animation-delay:-15s;animation-duration:28s}@keyframes blob-float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(3.125rem,-5rem) scale(1.1)}50%{transform:translate(-1.875rem,3.125rem) scale(.9)}75%{transform:translate(5rem,1.875rem) scale(1.05)}}.glass-container{background:var(--glass-white);backdrop-filter:var(--blur-medium);-webkit-backdrop-filter:var(--blur-medium);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft);position:relative;overflow:hidden}.glass-container:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%);opacity:0;transform:translate(-100%) translateY(-100%) rotate(45deg);transition:opacity .3s ease;pointer-events:none}.glass-container:hover:before{animation:shimmer 1.5s ease-in-out}@keyframes shimmer{0%{transform:translate(-100%) translateY(-100%) rotate(45deg);opacity:0}50%{opacity:1}to{transform:translate(100%) translateY(100%) rotate(45deg);opacity:0}}.glass-card{background:#ffffff0f;backdrop-filter:blur(.375rem);-webkit-backdrop-filter:blur(.375rem);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);transition:all .4s cubic-bezier(.4,0,.2,1)}.glass-card:hover{box-shadow:0 .75rem 2.5rem #0003;border-color:var(--glass-border-strong)}.glass-micro{background:#ffffff0a;backdrop-filter:blur(.375rem);-webkit-backdrop-filter:blur(.375rem);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm)}.glass-nav{position:fixed;top:var(--space-lg);left:50%;transform:translate(-50%);z-index:1000;width:calc(100% - 4rem);max-width:75rem}.nav-content{background:var(--glass-white);backdrop-filter:var(--blur-medium);-webkit-backdrop-filter:var(--blur-medium);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--space-sm) var(--space-lg);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-soft);animation:navFloat 3s ease-in-out infinite}@keyframes navFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-.25rem)}}.nav-logo{font-size:1.25rem;font-weight:700;letter-spacing:.1em;background:linear-gradient(135deg,#fff,#ffffffb3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-links{display:flex;gap:var(--space-lg)}.nav-link{color:var(--text-secondary);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .3s ease;position:relative}.nav-link:hover,.nav-link.active{color:var(--text-primary)}.nav-link.active:after{content:"";position:absolute;bottom:-.25rem;left:0;right:0;height:.125rem;background:var(--text-primary);border-radius:.125rem}.container{max-width:87.5rem;margin:0 auto;padding:7.5rem 2rem 4rem}.hero-section{text-align:center;padding:var(--space-3xl) 0;margin-bottom:var(--space-3xl)}.glass-badge{display:inline-block;padding:var(--space-xs) var(--space-md);background:#ffffff0f;backdrop-filter:blur(.375rem);-webkit-backdrop-filter:blur(.375rem);border:1px solid var(--glass-border);border-radius:3.125rem;font-size:.875rem;font-weight:500;margin-bottom:var(--space-lg);box-shadow:var(--shadow-soft);animation:badgePulse 2s ease-in-out infinite}@keyframes badgePulse{0%,to{transform:scale(1);box-shadow:var(--shadow-soft)}50%{transform:scale(1.02);box-shadow:0 .625rem 2.25rem #00000026}}.hero-title{font-size:clamp(2.5rem,6vw,5rem);font-weight:700;line-height:1.1;margin-bottom:var(--space-md);letter-spacing:-.02em}.hero-description{font-size:1.25rem;color:var(--text-secondary);max-width:43.75rem;margin:0 auto;line-height:1.8}.philosophy-main{margin-bottom:var(--space-3xl);padding:var(--space-3xl)}.philosophy-grid-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:var(--space-2xl);margin-top:var(--space-xl)}.philosophy-column h3{font-size:1.5rem;font-weight:600;margin-bottom:var(--space-md)}.philosophy-column p{color:var(--text-secondary);line-height:1.8;margin-bottom:var(--space-md)}.principles-section{margin-bottom:var(--space-3xl)}.principles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:var(--space-lg)}.principle-card{padding:var(--space-xl);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column}.principle-card:after{content:"";position:absolute;inset:-.125rem;border-radius:var(--radius-xl);background:linear-gradient(45deg,#6366f166,#a855f766,#ec489959,#3b82f666,#6366f166);background-size:300% 300%;opacity:0;z-index:-1;transition:opacity .4s ease;animation:gradient-rotate 4s linear infinite;filter:blur(.75rem)}.principle-card:hover:after{opacity:1}@keyframes gradient-rotate{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.principle-card:hover{transform:translateY(-.5rem) scale(1.02);box-shadow:var(--shadow-medium),0 0 1.875rem #6366f133;border-color:var(--glass-border-strong)}.principle-number{width:3rem;height:3rem;background:#ffffff1a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;margin-bottom:var(--space-md);transition:all .3s ease;border:1px solid rgba(255,255,255,.15)}.principle-card:hover .principle-number{transform:rotate(360deg) scale(1.1);background:#fff3;border-color:#ffffff4d}.principle-card h3{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-sm)}.principle-card p{color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-md)}.principle-example{margin-top:auto;padding:var(--space-md);background:#0003;border-radius:var(--radius-sm)}.blur-demo{display:flex;gap:var(--space-sm);justify-content:space-around;flex-wrap:wrap}.blur-sample{flex:1;min-width:5.625rem;padding:var(--space-sm);background:#ffffff26;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);text-align:center;font-size:.875rem}.blur-none{-webkit-backdrop-filter:none;backdrop-filter:none}.blur-light{-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem)}.blur-heavy{-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem)}.layer-demo{position:relative;height:7.5rem}.layer{position:absolute;padding:var(--space-sm) var(--space-md);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);font-size:.875rem}.layer-1{background:#ffffff0d;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);top:0;left:0;z-index:1}.layer-2{background:#ffffff1a;-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);top:1.875rem;left:1.875rem;z-index:2}.layer-3{background:#ffffff26;-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);top:3.75rem;left:3.75rem;z-index:3}.border-demo{display:flex;gap:var(--space-md)}.border-sample{flex:1;padding:var(--space-md);background:#ffffff1a;-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);border-radius:var(--radius-sm);text-align:center;font-size:.875rem}.border-subtle{border:1px solid rgba(255,255,255,.15)}.border-bright{border:1px solid rgba(255,255,255,.4)}.principle-note{margin-top:auto;padding:var(--space-md);background:#ffffff0d;border-radius:var(--radius-sm);font-size:.9rem;color:var(--text-secondary)}.principle-note strong{color:var(--text-primary)}.gradient-samples{display:flex;gap:var(--space-sm)}.gradient-sample{flex:1;height:3.75rem;border-radius:var(--radius-sm)}.gradient-1{background:linear-gradient(135deg,#667eea,#764ba2)}.gradient-2{background:linear-gradient(135deg,#f093fb,#f5576c)}.gradient-3{background:linear-gradient(135deg,#4facfe,#00f2fe)}.usage-section{margin-bottom:var(--space-3xl);padding:var(--space-3xl)}.usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:var(--space-lg);margin-top:var(--space-xl)}.usage-card{padding:var(--space-xl);background:#ffffff0d;-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg)}.usage-icon{width:3.5rem;height:3.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin-bottom:var(--space-md)}.usage-icon-good{background:#22c55e33;color:#4ade80}.usage-icon-caution{background:#fbbf2433;color:#fbbf24}.usage-icon-avoid{background:#ef444433;color:#f87171}.usage-card h3{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-md)}.usage-list{list-style:none}.usage-list li{position:relative;padding-left:var(--space-md);margin-bottom:var(--space-sm);color:var(--text-secondary);font-size:.95rem}.usage-list li:before{content:"•";position:absolute;left:0;color:var(--text-primary)}.examples-section{margin-bottom:var(--space-3xl)}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:var(--space-lg)}.example-card{padding:var(--space-xl);transition:all .4s cubic-bezier(.4,0,.2,1)}.example-card:hover{transform:translateY(-.5rem) scale(1.02);box-shadow:var(--shadow-strong),0 0 2.5rem #8b5cf640;border-color:var(--glass-border-strong)}.example-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.example-header h3{font-size:1.25rem;font-weight:600}.example-tag{padding:.25rem .75rem;font-size:.75rem;font-weight:500}.example-card p{color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-md)}.example-features{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.feature-tag{padding:.25rem .625rem;font-size:.75rem}.best-practices-section{margin-bottom:var(--space-3xl);padding:var(--space-3xl)}.practices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:var(--space-lg);margin-top:var(--space-xl)}.practice-item{padding:var(--space-xl);background:#ffffff0d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg)}.practice-icon{width:3.5rem;height:56px;background:#ffffff1a;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md)}.practice-icon svg{color:var(--text-primary)}.practice-item h3{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-sm)}.practice-item p{color:var(--text-secondary);line-height:1.7;font-size:.95rem}.features-section{margin-bottom:var(--space-3xl)}.section-title{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:var(--space-xl);letter-spacing:-.02em}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-lg)}.feature-card{padding:var(--space-xl);transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative}.feature-card:after{content:"";position:absolute;inset:-2px;border-radius:var(--radius-xl);background:linear-gradient(60deg,#a855f759,#ec489959,#3b82f666,#6366f166,#a855f759);background-size:300% 300%;opacity:0;z-index:-1;transition:opacity .4s ease;animation:gradient-rotate 5s linear infinite;filter:blur(12px)}.feature-card:hover:after{opacity:1}.feature-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-strong),0 0 40px #a855f740;border-color:var(--glass-border-strong)}.feature-icon-box{width:64px;height:64px;background:var(--glass-white);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border:1px solid var(--glass-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md);box-shadow:var(--shadow-soft);transition:all .3s ease}.feature-card:hover .feature-icon-box{transform:scale(1.1) rotate(5deg);background:var(--glass-white-strong);box-shadow:0 12px 40px #6366f14d}.feature-icon-box svg{transition:transform .3s ease}.feature-card:hover .feature-icon-box svg{transform:scale(1.15)}.feature-icon-box svg{color:var(--text-primary)}.feature-title{font-size:1.5rem;font-weight:600;margin-bottom:var(--space-sm)}.feature-description{color:var(--text-secondary);line-height:1.7}.showcase-section{margin-bottom:var(--space-3xl)}.showcase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg)}.showcase-card{padding:var(--space-xl);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative}.showcase-card:after{content:"";position:absolute;inset:-2px;border-radius:var(--radius-xl);background:linear-gradient(90deg,#3b82f666,#6366f166,#a855f759,#3b82f666);background-size:300% 300%;opacity:0;z-index:-1;transition:opacity .4s ease;animation:gradient-rotate 6s linear infinite;filter:blur(12px)}.showcase-card:hover:after{opacity:1}.showcase-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-strong),0 0 40px #3b82f640;border-color:var(--glass-border-strong)}.showcase-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.showcase-header h3{font-size:1.25rem;font-weight:600}.showcase-tag{padding:4px 12px;background:#ffffff1a;border-radius:50px;font-size:.75rem;font-weight:500}.showcase-description{color:var(--text-secondary);margin-bottom:var(--space-lg);line-height:1.7}.showcase-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.stat-item{text-align:center;padding:var(--space-md);background:#ffffff0d;border-radius:var(--radius-sm);transition:all .3s ease;border:1px solid transparent}.showcase-card:hover .stat-item{background:#ffffff1a;border-color:#ffffff26;transform:scale(1.05)}.stat-value{font-size:2rem;font-weight:700;margin-bottom:4px}.stat-label{font-size:.875rem;color:var(--text-tertiary)}.showcase-example{display:flex;justify-content:center;padding:var(--space-lg) 0}.mini-glass-card{width:120px;height:80px;background:#ffffff1a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);padding:var(--space-sm)}.mini-card-header{width:100%;height:8px;background:#ffffff4d;border-radius:4px;margin-bottom:var(--space-xs)}.mini-card-body{width:70%;height:6px;background:#fff3;border-radius:3px}.showcase-nav-demo{display:flex;gap:var(--space-xs);padding:var(--space-md) 0}.demo-nav-item{width:40px;height:6px;background:#ffffff4d;border-radius:3px}.showcase-metrics{display:flex;gap:var(--space-sm)}.metric-box{flex:1;padding:var(--space-md);text-align:center}.metric-number{font-size:1.5rem;font-weight:700;margin-bottom:4px}.metric-label{font-size:.75rem;color:var(--text-tertiary)}.philosophy-badge{display:inline-block;padding:4px 12px;background:#ffffff1a;border-radius:50px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-md)}.philosophy-title{font-size:2rem;font-weight:700;margin-bottom:var(--space-lg)}.philosophy-list{list-style:none}.philosophy-list li{position:relative;padding-left:var(--space-lg);margin-bottom:var(--space-md);color:var(--text-secondary);line-height:1.7}.philosophy-list li:before{content:"→";position:absolute;left:0;color:var(--text-primary)}.philosophy-list li strong{color:var(--text-primary)}.tech-section{margin-bottom:var(--space-3xl);padding:var(--space-xl)}.tech-title{font-size:1.5rem;font-weight:600;margin-bottom:var(--space-sm)}.tech-description{color:var(--text-secondary);margin-bottom:var(--space-lg)}.code-example{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:var(--space-lg);margin-bottom:var(--space-lg);overflow-x:auto}.code-example pre{margin:0}.code-example code{font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:.875rem;line-height:1.6;color:#e0e0e0}.tech-notes{display:grid;gap:var(--space-md)}.tech-note{padding:var(--space-md);background:#ffffff0d;border-radius:var(--radius-sm);font-size:.9rem;color:var(--text-secondary)}.tech-note strong{color:var(--text-primary)}.glass-footer{position:relative;z-index:2;padding:0 0 var(--space-3xl)}.back-link-container{margin-top:var(--space-3xl);display:flex;justify-content:center}.back-link{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);color:var(--text-primary);text-decoration:none;font-weight:500;transition:all .4s cubic-bezier(.4,0,.2,1)}.back-link:hover{transform:translate(-4px);box-shadow:var(--shadow-medium);border-color:var(--glass-border-strong)}.back-link svg{transition:transform .3s ease}.back-link:hover svg{transform:translate(-4px)}.back-link svg{color:var(--text-primary)}.cursor-spotlight{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.15) 0%,rgba(168,85,247,.1) 30%,transparent 70%);pointer-events:none;transform:translate(-50%,-50%);z-index:9999;mix-blend-mode:screen;transition:opacity .3s ease}@keyframes float-particle{0%{transform:translateY(0) translate(0) scale(1);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh) translate(var(--drift-x, 0)) scale(.5);opacity:0}}.star-trail{position:fixed;width:4px;height:4px;background:#fff;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(1px);box-shadow:0 0 8px #fff,0 0 4px var(--glass-border)}.particle{position:fixed;width:3.5rem;height:6px;border-radius:50%;background:#fff;pointer-events:none;z-index:-1;filter:blur(.2px);box-shadow:0 0 12px #fff,0 0 6px var(--glass-border)}@media(max-width:768px){.container{padding:100px 1rem 2rem}.glass-nav{width:calc(100% - 2rem);top:var(--space-md)}.nav-content{flex-direction:column;gap:var(--space-md);padding:var(--space-md)}.nav-links{gap:var(--space-md)}.hero-title{font-size:2.5rem}.hero-description{font-size:1rem}.pricing-modal{padding:var(--space-xl) var(--space-md)}.pricing-title{font-size:2rem}.pricing-grid{grid-template-columns:1fr}.section-title{font-size:2rem}.features-grid,.showcase-grid{grid-template-columns:1fr}.philosophy-section,.tech-section{padding:var(--space-xl)}.principle-card{padding:var(--space-lg)}}@media(max-width:480px){.container{padding:100px 1.5rem 2rem}.hero-title{font-size:2rem}}:focus-visible{outline:2px solid white;outline-offset:4px}a:focus-visible{text-decoration:underline;text-underline-offset:4px;border-radius:4px}