/* ───────── Global effects ───────── */
.fx-grain { position: fixed; inset: -50%; z-index: 300; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Cursor */
.fx-fine, .fx-fine * { cursor: none !important; }
.fx-fine input, .fx-fine textarea, .fx-fine [contenteditable] { cursor: text !important; }
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .3s; }
.fx-cursor.on { opacity: 1; }
.fx-cursor i { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.fx-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--primary); box-shadow: 0 0 10px rgba(var(--primary-rgb), .9); }
.fx-cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(var(--primary-rgb), .55); transition: width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), margin .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s; }
.fx-cursor.hover .fx-cursor-ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(var(--primary-rgb), .08); border-color: rgba(var(--primary-rgb), .9); }
.fx-cursor.down .fx-cursor-ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: rgba(var(--primary-rgb), .25); }
.fx-cursor.text .fx-cursor-ring { width: 4px; height: 26px; margin: -13px 0 0 -2px; border-radius: 3px; }
.fx-glow { position: fixed; left: 0; top: 0; z-index: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--primary-rgb), .07), transparent 62%); will-change: transform; }

/* Ripple */
.btn, .opt, .chip, .seg button, .icon-btn { position: relative; overflow: hidden; isolation: isolate; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: currentColor; opacity: .22; transform: scale(0); animation: ripple .65s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Primary button sheen */
.btn-primary::after, .btn-green::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 100% 0; transition: background-position .8s cubic-bezier(.2,.8,.2,1); }
.btn-primary:hover::after, .btn-green:hover::after { background-position: 0% 0; }
.btn { transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .25s, translate .35s cubic-bezier(.2,.8,.2,1); }

/* Spotlight */
.card, .lp-feat { position: relative; }
:is(.comp-card, .duel-card, .card, .lp-card, .lp-q, .pod, .lp-scard, .lp-feat, .lp-float)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--primary-rgb), .1), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
:is(.comp-card, .duel-card, .card, .lp-card, .lp-q, .pod, .lp-scard, .lp-feat, .lp-float):hover::after { opacity: 1; }
:is(.comp-card, .duel-card, .card, .lp-card, .lp-q, .pod, .lp-scard) > * { position: relative; z-index: 1; }
.pod > .num, .pod > .tag, .pod > .base { position: absolute; }
.comp-card, .duel-card, .lp-card, .lp-q, .pod { transition: border-color .3s, box-shadow .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.comp-card:hover, .lp-card:hover, .duel-card:hover { border-color: rgba(var(--primary-rgb), .35) !important; box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--primary-rgb), .08), 0 0 40px rgba(var(--primary-rgb), .07); }

/* Tilt */
.fx-fine .comp-card:hover, .fx-fine .pod:hover, .fx-fine .lp-float:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.fx-fine .lp-card.in:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateX(-4px); }
.fx-tilting { transition: border-color .3s, box-shadow .35s, transform .12s ease-out !important; }

/* Live cards: animated gradient border */
.comp-card.live { --edge: none; }
.comp-card.live::before { content: ""; position: absolute; inset: 0; height: auto; padding: 1px; border-radius: inherit; pointer-events: none; z-index: 2; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(74,222,128,.9) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 4s linear infinite; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spinBorder { to { --ang: 360deg; } }

/* Page transitions */
.fx-page-in { animation: pageIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes pageIn { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
.fx-stagger { animation: staggerIn .6s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--fx-i, 0) * 40ms + 60ms); }
@keyframes staggerIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }

/* Nav + tabs polish */
.nav-item { transition: background .2s, color .2s, padding-left .25s cubic-bezier(.2,.8,.2,1); }
.nav-item:hover { padding-left: 16px; }
.nav-item.active::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); box-shadow: 0 0 12px rgba(var(--primary-rgb), .8); animation: navBar .35s cubic-bezier(.2,.8,.2,1); }
@keyframes navBar { from { transform: scaleY(0); } }
.tabs button.on::after, .ob-tabs button.on::after, .type-tabs button.on::after, .hs-tabs button.on::after { animation: tabLine .35s cubic-bezier(.2,.8,.2,1); transform-origin: center; }
@keyframes tabLine { from { transform: scaleX(0); } }
.seg button.on { animation: segPop .3s cubic-bezier(.2,.8,.2,1); }
@keyframes segPop { from { transform: scale(.92); } }

/* Toast timer */
.toast { position: relative; overflow: hidden; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .5; transform-origin: left; animation: toastBar var(--ms, 3600ms) linear forwards; }
.toast.success::after { background: var(--green); } .toast.error::after { background: var(--red); } .toast.info::after { background: var(--primary); }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Modals */
.modal { animation: modalIn .38s cubic-bezier(.16,1.2,.3,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(4px); } }

/* ───────── Landing upgrades ───────── */
.lp-hero { position: relative; overflow: hidden; }
.lp-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1100px; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.lp-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; mix-blend-mode: screen; }
.lp-aurora i:nth-child(1) { width: 620px; height: 620px; left: 8%; top: -12%; background: radial-gradient(circle, rgba(74,222,128,.55), transparent 65%); animation: blobA 18s ease-in-out infinite alternate; }
.lp-aurora i:nth-child(2) { width: 520px; height: 520px; right: 4%; top: 20%; background: radial-gradient(circle, rgba(22,163,74,.55), transparent 65%); animation: blobB 22s ease-in-out infinite alternate; }
.lp-aurora i:nth-child(3) { width: 460px; height: 460px; left: 38%; bottom: -20%; background: radial-gradient(circle, rgba(163,230,53,.28), transparent 65%); animation: blobC 16s ease-in-out infinite alternate; }
@keyframes blobA { to { transform: translate(18vw, 12vh) scale(1.2); } }
@keyframes blobB { to { transform: translate(-22vw, -8vh) scale(.85); } }
@keyframes blobC { to { transform: translate(-10vw, -18vh) scale(1.25); } }
.lp-grid-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(var(--primary-rgb), .14) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-rgb), .14) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(500px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 80%); mask-image: linear-gradient(to top, #000 10%, transparent 80%); animation: floor 3s linear infinite; }
@keyframes floor { to { background-position: 0 60px, 0 0; } }

/* Hero title: per-character entrance + shine wave */
.lp-h1 { background: none !important; color: inherit; -webkit-text-fill-color: initial; animation: none !important; perspective: 900px; }
.lp-h1 > span { display: block; white-space: nowrap; }
.fx-ch { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%), linear-gradient(180deg, #ecfdf5 0%, #86efac 45%, #22c55e 100%);
  background-size: 400% 100%, 100% 100%; background-position: 140% 0, 0 0; background-repeat: no-repeat;
  animation: charIn 1s cubic-bezier(.2,.9,.25,1) backwards, shine 7s ease-in-out infinite;
  animation-delay: calc(var(--ci) * 45ms + 150ms), calc(var(--ci) * 70ms + 1.6s);
  transform-origin: 50% 100%; }
.lp-h1 > span:last-child .fx-ch { background-image: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%), linear-gradient(180deg, #4ade80 0%, #16a34a 100%); }
.fx-sp { width: .28em; }
@keyframes charIn { from { opacity: 0; transform: translateY(70%) rotateX(-80deg) scale(.9); filter: blur(10px); } }
@keyframes shine { 0%, 55% { background-position: 140% 0, 0 0; } 75%, 100% { background-position: -40% 0, 0 0; } }
.lp-hero-inner .lp-pill, .lp-sub, .lp-stats, .lp-hero-inner > .row, .lp-ticker { animation: heroUp .9s cubic-bezier(.2,.8,.2,1) backwards; }
.lp-hero-inner .lp-pill { animation-delay: .05s; }
.lp-sub { animation-delay: .75s; }
.lp-stats { animation-delay: .9s; }
.lp-hero-inner > .row { animation-delay: 1.05s; }
.lp-ticker { animation-delay: 1.2s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }
.lp-pill { position: relative; overflow: hidden; }
.lp-pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(var(--primary-rgb), .35) 50%, transparent 70%); transform: translateX(-100%); animation: pillSweep 3.5s ease-in-out infinite 2s; }
@keyframes pillSweep { 60%, 100% { transform: translateX(100%); } }

.lp-stats > div { position: relative; padding: 10px 6px; border-radius: 12px; transition: background .3s, transform .3s; }
.lp-stats > div:hover { background: rgba(var(--primary-rgb), .06); transform: translateY(-3px); }
.lp-stats b { text-shadow: 0 0 24px rgba(var(--primary-rgb), .45); }
.lp-stats > div + div::before { content: ""; position: absolute; left: -10px; top: 20%; bottom: 20%; width: 1px; background: linear-gradient(transparent, var(--border-3), transparent); }

/* CTA: rotating glow border */
.btn-primary.lp-cta { overflow: visible; isolation: auto; }
.btn-primary.lp-cta .fx-ripple { z-index: 1; }
.btn-primary.lp-cta::after { z-index: 1; pointer-events: none; }
.btn-primary.lp-cta::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--ang, 0deg), #4ade80, #bbf7d0, #16a34a, #4ade80); filter: blur(8px); opacity: .7; animation: spinBorder 3s linear infinite; }
.btn-primary.lp-cta::after { border-radius: inherit; }
.btn-primary.lp-cta { background: linear-gradient(180deg, #6ee7a0, #22c55e); }

/* Floating live widgets */
.lp-float { position: absolute; z-index: 3; width: 230px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(160deg, rgba(52,58,64,.55), rgba(28,31,34,.55)); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); text-align: left; animation: floatIn 1.2s cubic-bezier(.2,.8,.2,1) backwards; }
.lp-float > * { position: relative; z-index: 1; }
.lp-float-wrap { position: absolute; z-index: 3; animation: bob 6s ease-in-out infinite; }
.lp-float-wrap.a { left: max(24px, calc(50% - 700px)); top: 22%; }
.lp-float-wrap.b { right: max(24px, calc(50% - 700px)); top: 30%; animation-delay: -2s; animation-duration: 7s; }
.lp-float-wrap.c { left: max(60px, calc(50% - 620px)); bottom: 16%; animation-delay: -4s; animation-duration: 8s; }
.lp-float-wrap .lp-float { position: relative; }
.lp-float-wrap.a .lp-float { animation-delay: 1.3s; }
.lp-float-wrap.b .lp-float { animation-delay: 1.5s; }
.lp-float-wrap.c .lp-float { animation-delay: 1.7s; width: 250px; }
@keyframes bob { 50% { transform: translateY(-14px); } }
@keyframes floatIn { from { opacity: 0; transform: translateY(30px) scale(.9); filter: blur(8px); } }
.lp-float .big { font-family: var(--font-mono); font-size: 20px; font-weight: 700; margin: 4px 0 2px; transition: color .3s; }
.lp-lb-row { display: grid; grid-template-columns: 18px 22px 1fr auto; align-items: center; gap: 8px; font-size: 12px; padding: 5px 0; }
.lp-feed-item { display: flex; align-items: center; gap: 8px; font-size: 12px; animation: feedIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes feedIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.px-flash-up { animation: pxUp .8s; } .px-flash-down { animation: pxDown .8s; }
@keyframes pxUp { from { color: #86efac; text-shadow: 0 0 16px rgba(74,222,128,.9); } }
@keyframes pxDown { from { color: #fca5a5; text-shadow: 0 0 16px rgba(248,113,113,.9); } }

/* Word-by-word heading reveal */
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--wi) * 70ms); }
.lp-h2.in .fx-w > span { transform: none; }
.lp-h2 .teal { background: linear-gradient(90deg, #4ade80, #bbf7d0, #22c55e, #4ade80); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradMove 6s linear infinite; }
.lp-h2 .teal .fx-w > span { color: transparent; background: inherit; -webkit-background-clip: text; background-clip: text; }
@keyframes gradMove { to { background-position: 300% 0; } }

/* Scroll-linked marquee bands */
.lp-band { position: relative; z-index: 1; overflow: hidden; padding: 18px 0; border-block: 1px solid var(--border); background: rgba(0,0,0,.12); }
.lp-band + .lp-band { border-top: 0; }
.lp-band-track { display: flex; gap: 40px; width: max-content; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6vw, 84px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; will-change: transform; }
.lp-band-track span { color: transparent; -webkit-text-stroke: 1.2px rgba(var(--primary-rgb), .45); }
.lp-band-track span.fill { color: var(--primary); -webkit-text-stroke: 0; text-shadow: 0 0 30px rgba(var(--primary-rgb), .35); }
.lp-band-track i { font-style: normal; color: var(--primary); opacity: .6; font-size: .5em; align-self: center; }

/* Preview window: glowing rotating border */
.lp-preview { position: relative; }
.lp-preview::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: 5; pointer-events: none; background: conic-gradient(from var(--ang, 0deg), transparent 0 60%, #4ade80 75%, #bbf7d0 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 5s linear infinite; }
.lp-preview-bar::before { content: ""; display: inline-flex; width: 42px; height: 10px; margin-right: 10px; background: radial-gradient(circle at 5px 5px, #f87171 4px, transparent 4.5px), radial-gradient(circle at 21px 5px, #facc15 4px, transparent 4.5px), radial-gradient(circle at 37px 5px, #4ade80 4px, transparent 4.5px); }
.lp-preview-bar { justify-content: flex-start; gap: 0; }
.lp-preview-bar > span:last-child { margin-left: auto; }
.lp-preview .comp-card { pointer-events: auto; }

/* Features */
.lp-feat { padding: 14px; margin: -14px; border-radius: 14px; transition: background .3s; }
.lp-feat:hover { background: rgba(255,255,255,.025); }
.lp-feat:hover .lp-ic, .lp-card:hover .lp-ic { transform: rotate(-8deg) scale(1.12); box-shadow: 0 0 22px rgba(var(--primary-rgb), .35); border-color: rgba(var(--primary-rgb), .5); }
.lp-ic { transition: transform .45s cubic-bezier(.2,1.4,.3,1), box-shadow .3s, border-color .3s; }

/* Steps progress rail */
.lp-steps::after { content: ""; position: absolute; left: 15px; top: 20px; width: 1px; height: calc((100% - 40px) * var(--prog, 0)); background: linear-gradient(var(--primary), #bbf7d0); box-shadow: 0 0 10px rgba(var(--primary-rgb), .8); transition: height .3s ease-out; }
.lp-num { z-index: 1; }
.lp-step.on .lp-num { animation: numPop .5s cubic-bezier(.2,1.5,.3,1); }
@keyframes numPop { 50% { transform: scale(1.25); } }

/* Reveal variants */
.lp-reveal { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease; filter: blur(6px); }
.lp-reveal.in { filter: none; }
.lp-q.lp-reveal { transform: translateY(22px) scale(.98); }
.lp-q.lp-reveal.in { transform: none; }

/* Final CTA orb */
.lp-final { position: relative; overflow: hidden; }
.lp-final::before { content: ""; position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(var(--primary-rgb), .22), transparent 60%); animation: orb 5s ease-in-out infinite; }
.lp-final::after { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; z-index: -1; border: 1px dashed rgba(var(--primary-rgb), .25); animation: spin 40s linear infinite; }
@keyframes orb { 50% { transform: scale(1.15); opacity: .7; } }

/* Nav link hover underline */
.lp-links button::after, .lp-links a:not(.lp-x)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--primary); transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.lp-links button:hover::after, .lp-links a:not(.lp-x):hover::after, .lp-links button.on::after { transform: scaleX(1); }
.lp-nav { animation: heroUp .8s cubic-bezier(.2,.8,.2,1) backwards; }

@media (max-width: 1180px) { .lp-float-wrap { display: none; } }
@media (max-width: 860px) {
  .lp-grid-floor { height: 40%; }
  .lp-aurora i { filter: blur(60px); opacity: .4; }
  .lp-band-track { font-size: 40px; }
  .fx-grain { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .fx-w > span { transform: none; }
  .fx-grain, .fx-cursor, .fx-glow { display: none; }
}