@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap";:root{--dark:#080c14;--dark-mid:#0d1524;--red:#d90429;--red-bright:#ef233c;--red-glow:#d9042973;--white:#fff;--glass:#ffffff12;--glass-border:#ffffff26;--ease-expo:cubic-bezier(.87, 0, .13, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--dur:.65s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{background:var(--dark);color:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;font-family:Outfit,sans-serif;overflow:hidden}#root{flex-direction:column;height:100%;display:flex}.orb{pointer-events:none;will-change:transform;z-index:0;border-radius:50%;animation:14s ease-in-out infinite alternate orb-drift;position:fixed}.orb-1{filter:blur(70px);background:radial-gradient(circle,#19376e8c 0%,#0000 70%);width:600px;height:600px;animation-delay:0s;top:-180px;left:-150px}.orb-2{background:radial-gradient(circle, var(--red-glow) 0%, transparent 70%);filter:blur(65px);width:500px;height:500px;animation-delay:-6s;bottom:-150px;right:-120px}.orb-3{filter:blur(50px);background:radial-gradient(circle,#3264d233 0%,#0000 70%);width:350px;height:350px;animation-duration:10s;animation-delay:-3s;top:40%;left:40%}@keyframes orb-drift{0%{transform:translate(0)}to{transform:translate(40px,50px)}}.particles{pointer-events:none;z-index:1;position:fixed;inset:0;overflow:hidden}.particle{will-change:transform, opacity;border-radius:50%;animation:linear infinite particle-float;position:absolute;bottom:-20px}@keyframes particle-float{0%{opacity:0;transform:translateY(0)scale(.5)}10%{opacity:1}85%{opacity:.5}to{opacity:0;transform:translateY(-105vh)scale(1.2)}}.topbar{z-index:100;pointer-events:none;justify-content:center;align-items:center;padding:1rem 1.5rem;display:flex;position:fixed;top:0;left:0;right:0}.topbar-pill{-webkit-backdrop-filter:blur(20px);letter-spacing:.1em;text-transform:uppercase;color:#ffffffa6;animation:fade-down .8s var(--ease-spring) .1s both;white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:100px;align-items:center;gap:.6rem;padding:.45rem 1.2rem;font-size:.7rem;font-weight:600;display:inline-flex}.topbar-heart{width:14px;height:14px;fill:var(--red-bright);flex-shrink:0;animation:1.8s ease-in-out infinite heartbeat}@keyframes heartbeat{0%,to{transform:scale(1)}35%{transform:scale(1.3)}55%{transform:scale(.9)}}@keyframes fade-down{0%{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}.hint{z-index:100;letter-spacing:.12em;text-transform:uppercase;color:#ffffff59;pointer-events:none;white-space:nowrap;animation:fade-up .9s var(--ease-expo) 1.2s both;align-items:center;gap:.45rem;font-size:.65rem;font-weight:500;transition:opacity .4s;display:flex;position:fixed;bottom:1.6rem;left:50%;transform:translate(-50%)}.hint-dot{background:#ffffff59;border-radius:50%;width:3px;height:3px}@keyframes fade-up{0%{opacity:0;transform:translate(-50%)translateY(12px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.scene-desktop{flex:1;position:relative;overflow:hidden}.panel{width:100%;height:100%;color:var(--white);transition:clip-path var(--dur) var(--ease-expo), filter .5s ease;will-change:clip-path;justify-content:center;align-items:center;text-decoration:none;display:flex;position:absolute;inset:0;overflow:hidden}.panel-dark{background:radial-gradient(ellipse at 12% 45%, #1b2d52 0%, transparent 52%), radial-gradient(ellipse at 75% 85%, #090f1e 0%, transparent 55%), linear-gradient(140deg, #0e1b30 0%, var(--dark) 100%);z-index:2;clip-path:polygon(0 0,57% 0,43% 100%,0 100%)}.panel-dark:after{content:"";pointer-events:none;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:52px 52px;position:absolute;inset:0}.panel-red{z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);background:radial-gradient(at 88% 25%,#ff1a35 0%,#0000 50%),radial-gradient(at 15% 88%,#7a001a 0%,#0000 52%),linear-gradient(140deg,#bb0010 0%,#450008 100%)}.panel-red:after{content:"";pointer-events:none;background:repeating-linear-gradient(-48deg,#0000,#0000 28px,#ffffff06 28px 29px);position:absolute;inset:0}.scene-desktop:has(.panel-dark:hover) .panel-dark{clip-path:polygon(0 0,80% 0,62% 100%,0 100%)}.scene-desktop:has(.panel-dark:hover) .panel-red{filter:brightness(.3)saturate(.3)}.scene-desktop:has(.panel-red:hover) .panel-dark{clip-path:polygon(0 0,38% 0,24% 100%,0 100%);filter:brightness(.3)saturate(.3)}:is(.scene-desktop:has(.panel-dark:hover)~.hint,.scene-desktop:has(.panel-red:hover)~.hint){opacity:0}.panel-content{text-align:center;z-index:5;transition:left var(--dur) var(--ease-expo), top var(--dur) var(--ease-expo), transform var(--dur) var(--ease-expo);flex-direction:column;align-items:center;gap:1.3rem;padding:1.5rem;display:flex;position:absolute}.content-dark{width:clamp(200px,34vw,380px);top:50%;left:22%;transform:translate(-50%,-50%)}.content-red{width:clamp(200px,34vw,380px);top:50%;left:78%;transform:translate(-50%,-50%)}.scene-desktop:has(.panel-dark:hover) .content-dark{left:36%;transform:translate(-50%,-50%)scale(1.04)}.scene-desktop:has(.panel-red:hover) .content-red{left:64%;transform:translate(-50%,-50%)scale(1.04)}.divider{z-index:6;pointer-events:none;position:absolute;inset:0}.divider:after{content:"";width:2px;height:100%;transition:left var(--dur) var(--ease-expo);background:linear-gradient(#0000 0%,#ffffff4d 20%,#fff9 50%,#ffffff4d 80%,#0000 100%);position:absolute;top:0;left:50%;transform:skew(-11deg);box-shadow:0 0 14px #ffffff59}.scene-desktop:has(.panel-dark:hover) .divider:after{left:71%}.scene-desktop:has(.panel-red:hover) .divider:after{left:31%}.vs-badge{z-index:10;pointer-events:none;transition:opacity var(--dur) ease, transform var(--dur) var(--ease-expo);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vs-ring-outer{border:1px solid #ffffff2e;border-top-color:#ffffffa6;border-radius:50%;width:88px;height:88px;animation:9s linear infinite spin;position:absolute}.vs-ring-inner{-webkit-backdrop-filter:blur(24px);background:#0a0e1a80;border:1px solid #ffffff38;border-radius:50%;justify-content:center;align-items:center;width:62px;height:62px;display:flex;box-shadow:0 0 0 6px #ffffff0a,0 8px 36px #0000008c}.vs-text{letter-spacing:.06em;color:#ffffffe6;font-size:1rem;font-weight:900}@keyframes spin{to{transform:rotate(360deg)}}:is(.scene-desktop:has(.panel-dark:hover) .vs-badge,.scene-desktop:has(.panel-red:hover) .vs-badge){opacity:0;transform:translate(-50%,-50%)scale(.3)}.label-badge{letter-spacing:.18em;text-transform:uppercase;background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);border-radius:100px;align-items:center;gap:.45rem;padding:.3rem .9rem;font-size:.65rem;font-weight:700;display:inline-flex}.badge-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:2.2s ease-in-out infinite dot-pulse}.badge-dot-dark{background:#60a5fa;box-shadow:0 0 8px #60a5fa}.badge-dot-red{background:#fca5a5;box-shadow:0 0 8px #fca5a5}@keyframes dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.7)}}.panel-title{letter-spacing:-.04em;text-transform:uppercase;text-shadow:0 6px 30px #00000080;animation:slide-in .8s var(--ease-expo) 50ms both;font-size:clamp(2rem,4.5vw,3.6rem);font-weight:900;line-height:1.05}.panel-dark .panel-title,.card-dark .panel-title{background:linear-gradient(135deg,#e2e8f0 0%,#94a3b8 55%,#cbd5e1 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.panel-red .panel-title,.card-red .panel-title{background:linear-gradient(135deg,#fff 0%,#fecaca 65%,#fff 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}@keyframes slide-in{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}.panel-desc{opacity:.78;animation:slide-in .9s var(--ease-expo) .15s both;font-size:clamp(.82rem,1.3vw,1rem);font-weight:300;line-height:1.75}.cta-btn{letter-spacing:.13em;text-transform:uppercase;color:var(--white);background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(16px);cursor:pointer;transition:background .32s ease, color .32s ease, border-color .32s ease, transform .32s var(--ease-spring), box-shadow .32s ease;animation:slide-in 1s var(--ease-expo) .28s both;border-radius:100px;align-items:center;gap:.55rem;padding:.8rem 2rem;font-family:Outfit,sans-serif;font-size:.82rem;font-weight:700;display:inline-flex;position:relative;overflow:hidden}.cta-btn:before{content:"";background:linear-gradient(108deg,#0000 30%,#ffffff38 50%,#0000 70%);transition:transform .65s;position:absolute;inset:0;transform:translate(-130%)}.panel:hover .cta-btn:before,.card:active .cta-btn:before{transform:translate(130%)}.cta-arrow{transition:transform .3s var(--ease-spring);display:inline-block}.panel:hover .cta-arrow{transform:translate(6px)}.panel-dark:hover .cta-btn{background:var(--white);color:var(--dark);border-color:var(--white);transform:translateY(-4px);box-shadow:0 14px 40px #ffffff4d}.panel-red:hover .cta-btn{background:var(--white);color:var(--red);border-color:var(--white);transform:translateY(-4px);box-shadow:0 14px 40px #fff6}.scene-mobile{flex-direction:column;flex:1;display:none;position:relative;overflow:hidden}.card{text-align:center;color:var(--white);cursor:pointer;flex-direction:column;flex:0 0 50%;justify-content:center;align-items:center;gap:1rem;padding:2rem 1.5rem;text-decoration:none;display:flex;position:relative;overflow:hidden}.card-dark{background:radial-gradient(ellipse at 20% 30%, #1b2d52 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, #060a12 0%, transparent 55%), linear-gradient(160deg, #0e1b30 0%, var(--dark) 100%);border-bottom:1px solid #ffffff12}.card-dark:after{content:"";pointer-events:none;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:44px 44px;position:absolute;inset:0}.card-red{background:radial-gradient(at 80% 20%,#ff1a35 0%,#0000 50%),radial-gradient(at 15% 85%,#5a0010 0%,#0000 50%),linear-gradient(160deg,#b0000e 0%,#3a0007 100%);border-top:1px solid #ffffff12}.card-red:after{content:"";pointer-events:none;background:repeating-linear-gradient(-45deg,#0000,#0000 26px,#ffffff05 26px 27px);position:absolute;inset:0}.card-content{z-index:2;flex-direction:column;align-items:center;gap:.85rem;width:100%;max-width:340px;display:flex;position:relative}.card .cta-btn{opacity:1;padding:.72rem 1.8rem;font-size:.78rem;animation:none;transform:none}.card-dark:hover .cta-btn,.card-dark:active .cta-btn{background:var(--white);color:var(--dark);border-color:var(--white);box-shadow:0 10px 30px #ffffff40}.card-red:hover .cta-btn,.card-red:active .cta-btn{background:var(--white);color:var(--red);border-color:var(--white);box-shadow:0 10px 30px #ffffff59}.card:before{content:"";opacity:0;pointer-events:none;z-index:1;transition:opacity .35s;position:absolute;inset:0}.card-dark:before{background:radial-gradient(#60a5fa1f 0%,#0000 70%)}.card-red:before{background:radial-gradient(#ef233c2e 0%,#0000 70%)}.card:hover:before,.card:active:before{opacity:1}.card-content{transition:transform .35s var(--ease-spring)}.card:hover .card-content,.card:active .card-content{transform:scale(1.04)}.mobile-vs{z-index:50;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mobile-vs-pill{-webkit-backdrop-filter:blur(20px);letter-spacing:.15em;color:#ffffffe0;background:#080c14bf;border:1px solid #ffffff2e;border-radius:100px;align-items:center;gap:.6rem;padding:.4rem 1rem;font-size:.7rem;font-weight:900;transition:opacity .4s;display:flex;box-shadow:0 4px 20px #00000080}.mobile-vs-line{background:linear-gradient(90deg,#0000 0%,#ffffff40 20%,#ffffff80 50%,#ffffff40 80%,#0000 100%);height:1px;position:absolute;left:0;right:0}.card .panel-title{font-size:clamp(1.9rem,8vw,2.8rem)}.card .panel-desc{font-size:clamp(.78rem,3.5vw,.95rem)}.hint-mobile-text{display:none}.hint-desktop-text{display:inline}@media (width<=768px){.hint-mobile-text{display:inline}.hint-desktop-text,.scene-desktop{display:none}.scene-mobile{display:flex}.topbar-pill{letter-spacing:.08em;padding:.4rem 1rem;font-size:.62rem}.hint{font-size:.6rem;bottom:1.2rem}}@media (width<=360px){.card{gap:.75rem;padding:1.5rem 1.2rem}.card .panel-title{font-size:1.7rem}.card .panel-desc{font-size:.75rem}.card .cta-btn{padding:.65rem 1.5rem;font-size:.72rem}}@media (height<=480px) and (orientation:landscape){.scene-desktop{display:block}.scene-mobile{display:none}.panel-title{font-size:1.6rem}.panel-desc{display:none}.topbar{padding:.6rem 1rem}.hint{font-size:.58rem;bottom:.6rem}.content-dark,.content-red{gap:.8rem}}@media (width>=1440px){.panel-title{font-size:4.2rem}.panel-desc{font-size:1.1rem}}