*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary:#07070c;--bg-secondary:#12121a;--bg-card:#14141f;--bg-elevated:#232333;--accent:#a78bfa;--accent-hot:#f472b6;--accent-cool:#60a5fa;--accent-green:#1ed760;--text-primary:#f5f5fa;--text-secondary:#9999b3;--text-muted:#5c5c75;--border:#2a2a3a;--border-light:#3a3a4f;--accent-lol:#2563eb;--accent-lol-hot:#38bdf8;--accent-tft:#f59e0b;--accent-tft-hot:#c084fc;--accent-val:#ff4655;--accent-val-hot:#ff8f6b}body,html{font-family:Outfit,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(60px) saturate(135%);opacity:.85}.aurora-blob{position:absolute;width:46vw;height:46vw;min-width:360px;min-height:360px;border-radius:50%;mix-blend-mode:screen;will-change:transform}.aurora-blob.a1{top:-12%;left:-8%;background:radial-gradient(circle,rgba(167,139,250,.55),transparent 62%);animation:drift-1 18s ease-in-out infinite}.aurora-blob.a2{bottom:-16%;right:-10%;background:radial-gradient(circle,rgba(244,114,182,.42),transparent 62%);animation:drift-2 22s ease-in-out infinite}.aurora-blob.a3{top:30%;left:40%;background:radial-gradient(circle,rgba(96,165,250,.34),transparent 62%);animation:drift-3 26s ease-in-out infinite}@keyframes drift-1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(14vw,10vh) scale(1.18)}}@keyframes drift-2{0%,to{transform:translate(0) scale(1.05)}50%{transform:translate(-12vw,-8vh) scale(.9)}}@keyframes drift-3{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-35%,-12vh) scale(1.22)}}.wrapper{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:64px 24px;min-height:100vh;display:flex;flex-direction:column}.header{gap:16px;margin-bottom:48px}.header,.logo-icon{display:flex;align-items:center}.logo-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--accent),var(--accent-hot));border-radius:16px;justify-content:center;font-size:28px;box-shadow:0 8px 28px rgba(167,139,250,.4);flex-shrink:0;position:relative;overflow:hidden;animation:logo-pulse 3.6s ease-in-out infinite}.logo-icon:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,hsla(0,0%,100%,.55) 50%,transparent 65%);transform:translateX(-130%);animation:logo-shine 4.5s ease-in-out infinite}.logo-glyph{position:relative;z-index:1;display:block;animation:icon-float 4.5s ease-in-out infinite}@keyframes logo-pulse{0%,to{transform:translateY(0) rotate(0deg);box-shadow:0 8px 28px rgba(167,139,250,.4)}50%{transform:translateY(-3px) rotate(-4deg);box-shadow:0 16px 42px rgba(244,114,182,.55)}}@keyframes logo-shine{0%,70%,to{transform:translateX(-130%)}85%{transform:translateX(130%)}}.logo-text h1{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1;background:linear-gradient(120deg,#fff 20%,var(--accent) 50%,var(--accent-hot) 80%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:text-shimmer 6s linear infinite}@keyframes text-shimmer{to{background-position:200%}}.logo-text .tagline{font-size:12px;letter-spacing:1.5px;margin-top:6px;font-family:JetBrains Mono,monospace}.logo-text .tagline,.section-label{color:var(--text-muted);text-transform:uppercase}.section-label{font-size:11px;font-weight:700;letter-spacing:2px;margin-bottom:18px;display:flex;align-items:center;gap:10px}.section-label:before{content:"";width:4px;height:14px;background:linear-gradient(180deg,var(--accent),var(--accent-hot));border-radius:2px;box-shadow:0 0 12px var(--accent)}.cards{display:flex;flex-direction:column;gap:18px;perspective:1600px}.card{--glow:var(--accent);--glow-2:var(--accent-hot);--rx:0deg;--ry:0deg;--mx:50%;--my:0%;--s:1;display:flex;align-items:center;gap:20px;padding:24px;border-radius:20px;text-decoration:none;color:inherit;position:relative;overflow:hidden;isolation:isolate;transform-style:preserve-3d;background:linear-gradient(135deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,.005)),rgba(18,18,28,.55);-webkit-backdrop-filter:blur(12px) saturate(125%);backdrop-filter:blur(12px) saturate(125%);border:1px solid hsla(0,0%,100%,.065);box-shadow:0 8px 24px rgba(0,0,0,.4);transform:perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease;opacity:0;animation:card-in .7s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i, 0) * 95ms + .12s)}.card:before{content:"";inset:-1px;padding:1.4px;background:conic-gradient(from var(--angle,0deg),transparent 8%,var(--glow) 26%,var(--glow-2) 50%,var(--glow) 74%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .4s ease;animation:spin-angle 4s linear infinite;z-index:3}.card-spotlight,.card:before{position:absolute;border-radius:inherit;opacity:0;pointer-events:none}.card-spotlight{inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--glow-2) 55%,transparent),transparent 60%);mix-blend-mode:screen;transition:opacity .35s ease;z-index:1}.card-grid{background-image:linear-gradient(color-mix(in srgb,var(--glow) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--glow) 45%,transparent) 1px,transparent 1px);background-size:26px 26px;-webkit-mask:radial-gradient(180px circle at var(--mx) var(--my),#000 0,transparent 65%);mask:radial-gradient(180px circle at var(--mx) var(--my),#000 0,transparent 65%);opacity:0;transition:opacity .35s ease;z-index:1}.card-grid,.card-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.card-sheen{background:linear-gradient(115deg,transparent 25%,hsla(0,0%,100%,.1) 48%,hsla(0,0%,100%,.2) 50%,hsla(0,0%,100%,.1) 52%,transparent 75%);transform:translateX(-120%);z-index:2}.card-arrow,.card-content,.card-icon{position:relative;z-index:4}.card-icon{transform:translateZ(45px)}.card-content{transform:translateZ(26px)}.card-arrow{transform:translateZ(34px)}.card:focus-visible,.card:hover{--s:1.025;border-color:transparent;outline:none;box-shadow:0 30px 60px -16px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--glow) 35%,transparent),0 0 60px -12px color-mix(in srgb,var(--glow) 55%,transparent)}.card:focus-visible:before,.card:hover:before{opacity:1}.card:focus-visible .card-spotlight,.card:hover .card-spotlight{opacity:.9}.card:focus-visible .card-grid,.card:hover .card-grid{opacity:.5}.card:hover .card-sheen{animation:sheen .9s ease}.card:active{--s:0.995}.card-icon{width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}.card-icon:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,hsla(0,0%,100%,.55),transparent 40%);opacity:0;transition:opacity .4s ease;animation:spin 3.5s linear infinite}.card-icon:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,hsla(0,0%,100%,.45),transparent 45%);mix-blend-mode:overlay}.card-icon-glyph{position:relative;z-index:1;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));animation:icon-float 4.5s ease-in-out infinite;animation-delay:calc(var(--i, 0) * .4s)}.card:hover .card-icon{transform:translateZ(60px) rotate(-8deg) scale(1.12);box-shadow:0 16px 34px -6px color-mix(in srgb,var(--glow) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--glow-2) 35%,transparent)}.card:hover .card-icon:before{opacity:.85}.card:hover .card-icon-glyph{animation-play-state:paused}.card-icon.music{background:linear-gradient(135deg,var(--accent),var(--accent-hot))}.card-icon.rank-lol{background:linear-gradient(135deg,var(--accent-lol),var(--accent-lol-hot))}.card-icon.spotify{background:linear-gradient(135deg,var(--accent-green),#169c46)}.card-icon.portfolio{background:linear-gradient(135deg,var(--accent-cool),#6366f1)}.card-icon.rank-tft{background:linear-gradient(135deg,var(--accent-tft),var(--accent-tft-hot))}.card-icon.rank-valorant{background:linear-gradient(135deg,var(--accent-val),var(--accent-val-hot))}.card-icon.timer{background:linear-gradient(135deg,var(--accent),var(--accent-hot))}.card-content{flex:1 1;min-width:0}.card-title{position:relative;display:inline-block;font-size:18px;font-weight:700;margin-bottom:4px;letter-spacing:-.3px;background:linear-gradient(110deg,#fff 18%,var(--glow) 42%,var(--glow-2) 60%,#fff 82%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:text-shimmer 5.5s linear infinite;animation-delay:calc(var(--i, 0) * -.9s)}.card-title-glow{position:absolute;inset:0;background:linear-gradient(120deg,var(--glow),var(--glow-2));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transition:opacity .4s ease;text-shadow:0 0 18px color-mix(in srgb,var(--glow) 55%,transparent)}.card:focus-visible .card-title-glow,.card:hover .card-title-glow{opacity:1}.card-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.card-arrow{font-size:22px;color:var(--text-muted);flex-shrink:0;transition:transform .4s cubic-bezier(.16,1,.3,1),color .4s ease,text-shadow .4s ease}.card:focus-visible .card-arrow,.card:hover .card-arrow{color:var(--glow-2);transform:translateZ(34px) translateX(7px) scale(1.15);text-shadow:0 0 16px color-mix(in srgb,var(--glow-2) 75%,transparent)}.footer{margin-top:auto;padding-top:48px;text-align:center;font-size:12px;color:var(--text-muted);font-family:JetBrains Mono,monospace}.footer .dot{color:var(--accent);margin:0 8px}@media (max-width:560px){.wrapper{padding:40px 18px}.header{margin-bottom:36px}.logo-text h1{font-size:24px}.card{padding:18px;gap:14px}.card-icon{width:52px;height:52px;font-size:24px;transform:translateZ(30px)}.card-title{font-size:16px}}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes spin-angle{to{--angle:360deg}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes card-in{0%{opacity:0;transform:perspective(1600px) translateY(22px) scale(.97)}to{opacity:1;transform:perspective(1600px) translateY(0) scale(1)}}@keyframes sheen{0%{transform:translateX(-120%)}to{transform:translateX(120%)}}@keyframes icon-float{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(2deg)}}@media (prefers-reduced-motion:reduce){.aurora-blob,.card,.card-icon-glyph,.card-icon:before,.card-title,.card:before,.logo-glyph,.logo-icon,.logo-icon:after,.logo-text h1{animation:none!important}.card{opacity:1;transform:none}.card-title{background-position:0}.card-sheen{display:none}}