Загрузка...
Шаблон лендинга Finex Internet Optimizer. Современный дизайн для оптимизации интернет-трафика. Идеально для IT-компаний, сервисов.
<!DOCTYPE html>
<html lang="en" class="bg-[#020202] text-white antialiased"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finex - Internet Performance Optimizer</title>
<script src="https://unpkg.com/lucide@latest"></script>
<style id="aura-editor-visibility-style">
.invisible { visibility: hidden !important; }
</style>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.bg-stripes {
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 40px,
rgba(255, 255, 255, 0.015) 40px,
rgba(255, 255, 255, 0.015) 41px
);
}
.globe-glow {
background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
}
</style>
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; }
</style>
<style>
@keyframes aura-reveal {
0% { opacity: 0; transform: translateY(24px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.aura-reveal {
animation: aura-reveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-play-state: paused;
}
.aura-reveal.is-visible {
animation-play-state: running;
}
.flashlight-card {
position: relative;
--mouse-x: -999px;
--mouse-y: -999px;
}
.flashlight-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
z-index: 10;
mix-blend-mode: screen;
}
.flashlight-card:hover::after {
opacity: 1;
}
</style>
<style>
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-inset-4{inset:-1rem}.inset-0{inset:0px}.inset-10{inset:2.5rem}.inset-\[-200\%\]{inset:-200%}.left-0{left:0px}.top-0{top:0px}.-left-2{left:-0.5rem}.-top-6{top:-1.5rem}.bottom-0{bottom:0px}.left-1\/2{left:50%}.right-0{right:0px}.right-\[5\%\]{right:5%}.top-1\/2{top:50%}.top-6{top:1.5rem}.top-\[20\%\]{top:20%}.top-\[40vh\]{top:40vh}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.col-span-2{grid-column:span 2 / span 2}.mx-auto{margin-left:auto;margin-right:auto}.mb-0\.5{margin-bottom:0.125rem}.mb-1{margin-bottom:0.25rem}.mb-10{margin-bottom:2.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:0.5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:0.25rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-0\.5{margin-top:0.125rem}.mt-1{margin-top:0.25rem}.mt-4{margin-top:1rem}.mb-12{margin-bottom:3rem}.mt-24{margin-top:6rem}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/10\]{aspect-ratio:16/10}.h-\[800px\]{height:800px}.h-full{height:100%}.h-1\.5{height:0.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:0.5rem}.h-24{height:6rem}.h-3{height:0.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[1px\]{height:1px}.h-\[400\%\]{height:400%}.h-\[400px\]{height:400px}.h-\[40px\]{height:40px}.h-fit{height:-moz-fit-content;height:fit-content}.h-px{height:1px}.min-h-screen{min-height:100vh}.min-h-\[800px\]{min-height:800px}.min-h-\[300px\]{min-height:300px}.w-full{width:100%}.w-1\.5{width:0.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:0.5rem}.w-24{width:6rem}.w-3{width:0.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-\[100px\]{width:100px}.w-\[400\%\]{width:400%}.w-\[600px\]{width:600px}.w-fit{width:-moz-fit-content;width:fit-content}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-xs{max-width:20rem}.max-w-3xl{max-width:48rem}.max-w-lg{max-width:32rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-2{--tw-translate-x:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-40{gap:10rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-0{gap:0px}.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-white\/10 > :not([hidden]) ~ :not([hidden]){border-color:rgb(255 255 255 / 0.1)}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-none{border-radius:0px}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-x{border-left-width:1px;border-right-width:1px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-blue-500\/20{border-color:rgb(59 130 246 / 0.2)}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247 / var(--tw-border-opacity, 1))}.border-purple-500\/20{border-color:rgb(168 85 247 / 0.2)}.border-purple-500\/30{border-color:rgb(168 85 247 / 0.3)}.border-white\/10{border-color:rgb(255 255 255 / 0.1)}.border-white\/20{border-color:rgb(255 255 255 / 0.2)}.border-white\/5{border-color:rgb(255 255 255 / 0.05)}.border-zinc-800{--tw-border-opacity:1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1))}.bg-\[\#020202\]{--tw-bg-opacity:1;background-color:rgb(2 2 2 / var(--tw-bg-opacity, 1))}.bg-\[\#000000\]{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-\[\#050505\]{--tw-bg-opacity:1;background-color:rgb(5 5 5 / var(--tw-bg-opacity, 1))}.bg-\[\#0A0A0A\]{--tw-bg-opacity:1;background-color:rgb(10 10 10 / var(--tw-bg-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-black\/20{background-color:rgb(0 0 0 / 0.2)}.bg-black\/40{background-color:rgb(0 0 0 / 0.4)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-500\/10{background-color:rgb(59 130 246 / 0.1)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-purple-500\/10{background-color:rgb(168 85 247 / 0.1)}.bg-purple-600\/20{background-color:rgb(147 51 234 / 0.2)}.bg-purple-800\/20{background-color:rgb(107 33 168 / 0.2)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}.bg-white\/\[0\.01\]{background-color:rgb(255 255 255 / 0.01)}.bg-white\/\[0\.02\]{background-color:rgb(255 255 255 / 0.02)}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity, 1))}.bg-zinc-900\/20{background-color:rgb(24 24 27 / 0.2)}.bg-zinc-900\/60{background-color:rgb(24 24 27 / 0.6)}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27 / var(--tw-bg-opacity, 1))}.bg-\[url\(https\:\/\/cdn\.midjourney\.com\/a3840b63-36c4-4a6b-80dd-5c41d0f4a259\/0_0\.png\?w\=800\&q\=80\)\]{background-image:url(https://cdn.midjourney.com/a3840b63-36c4-4a6b-80dd-5c41d0f4a259/0_0.png?w=800&q=80)}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-l{background-image:linear-gradient(to left, var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-\[\#020202\]{--tw-gradient-from:#020202 var(--tw-gradient-from-position);--tw-gradient-to:rgb(2 2 2 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-black{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-white\/\[0\.02\]{--tw-gradient-from:rgb(255 255 255 / 0.02) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white{--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white\/40{--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(255 255 255 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-red-600{--tw-gradient-to:#dc2626 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white\/\[0\.02\]{--tw-gradient-to:rgb(255 255 255 / 0.02) var(--tw-gradient-to-position)}.to-zinc-500{--tw-gradient-to:#71717a var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-center{background-position:center}.object-cover{object-fit:cover}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-8{padding:2rem}.p-6{padding:1.5rem}.px-0{padding-left:0px;padding-right:0px}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:0.5rem}.pb-2\.5{padding-bottom:0.625rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:0.75rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pr-2{padding-right:0.5rem}.pr-4{padding-right:1rem}.pr-5{padding-right:1.25rem}.pr-6{padding-right:1.5rem}.pt-2{padding-top:0.5rem}.pt-2\.5{padding-top:0.625rem}.pt-24{padding-top:6rem}.pt-3{padding-top:0.75rem}.pt-32{padding-top:8rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-12{padding-top:3rem}.pt-20{padding-top:5rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[10px\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.text-\[11px\]{font-size:11px}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[0\.9\]{line-height:0.9}.leading-\[1\.1\]{line-height:1.1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-0.025em}.tracking-tighter{letter-spacing:-0.05em}.tracking-wide{letter-spacing:0.025em}.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-purple-200{--tw-text-opacity:1;color:rgb(233 213 255 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-zinc-300{--tw-text-opacity:1;color:rgb(212 212 216 / var(--tw-text-opacity, 1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170 / var(--tw-text-opacity, 1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122 / var(--tw-text-opacity, 1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91 / var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-20{opacity:0.2}.opacity-50{opacity:0.5}.opacity-0{opacity:0}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_10px_rgba\(34\2c 197\2c 94\2c 0\.5\)\]{--tw-shadow:0 0 10px rgba(34,197,94,0.5);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(255\2c 255\2c 255\2c 0\.7\)\]{--tw-shadow:0 0 15px rgba(255,255,255,0.7);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_8px_40px_rgba\(34\2c 197\2c 94\2c 0\.25\)\]{--tw-shadow:0 8px 40px rgba(34,197,94,0.25);--tw-shadow-colored:0 8px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-black\/50{--tw-shadow-color:rgb(0 0 0 / 0.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-purple-900\/20{--tw-shadow-color:rgb(88 28 135 / 0.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-white\/10{--tw-shadow-color:rgb(255 255 255 / 0.1);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.blur-2xl{--tw-blur:blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[120px\]{--tw-blur:blur(120px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[80px\]{--tw-blur:blur(80px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.\[animation\:rotate-gradient_var\(--speed\)_linear_infinite\]{animation:rotate-gradient var(--speed) linear infinite}.\[background\:conic-gradient\(from_calc\(270deg-\(var\(--spread\)\*0\.5\)\)\2c transparent_0\2c var\(--shimmer-color\)_var\(--spread\)\2c transparent_var\(--spread\)\)\]{background:conic-gradient(from calc(270deg - (var(--spread) * 0.5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread))}.\[background\:var\(--bg\)\]{background:var(--bg)}.\[inset\:var\(--cut\)\]{inset:var(--cut)}.selection\:bg-purple-500\/30 *::selection{background-color:rgb(168 85 247 / 0.3)}.selection\:bg-purple-500\/30::selection{background-color:rgb(168 85 247 / 0.3)}.placeholder\:text-black\/50::placeholder{color:rgb(0 0 0 / 0.5)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}.hover\:bg-white\/\[0\.03\]:hover{background-color:rgb(255 255 255 / 0.03)}.hover\:bg-white\/\[0\.04\]:hover{background-color:rgb(255 255 255 / 0.04)}.hover\:bg-zinc-200:hover{--tw-bg-opacity:1;background-color:rgb(228 228 231 / var(--tw-bg-opacity, 1))}.hover\:bg-zinc-800:hover{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-zinc-300:hover{--tw-text-opacity:1;color:rgb(212 212 216 / var(--tw-text-opacity, 1))}.hover\:shadow-\[0_0_40px_8px_rgba\(34\2c 197\2c 94\2c 0\.35\)\]:hover{--tw-shadow:0 0 40px 8px rgba(34,197,94,0.35);--tw-shadow-colored:0 0 40px 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\:-translate-y-2{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-white\/20{background-color:rgb(255 255 255 / 0.2)}.group:hover .group-hover\:text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 640px){.sm\:w-auto{width:auto}}@media (min-width: 768px){.md\:inset-16{inset:4rem}.md\:-left-12{left:-3rem}.md\:-top-8{top:-2rem}.md\:flex{display:flex}.md\:aspect-\[21\/9\]{aspect-ratio:21/9}.md\:w-80{width:20rem}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:divide-x > :not([hidden]) ~ :not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.md\:divide-y-0 > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(0px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(0px * var(--tw-divide-y-reverse))}.md\:border-b-0{border-bottom-width:0px}.md\:border-r{border-right-width:1px}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:pl-12{padding-left:3rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1024px){.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:col-span-5{grid-column:span 5 / span 5}.lg\:col-span-7{grid-column:span 7 / span 7}.lg\:col-span-9{grid-column:span 9 / span 9}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-auto{width:auto}.lg\:grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-end{align-items:flex-end}.lg\:divide-x > :not([hidden]) ~ :not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.lg\:divide-y-0 > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(0px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(0px * var(--tw-divide-y-reverse))}.lg\:pb-40{padding-bottom:10rem}.lg\:text-left{text-align:left}.lg\:text-right{text-align:right}.lg\:text-8xl{font-size:6rem;line-height:1}.lg\:text-5xl{font-size:3rem;line-height:1}}
</style>
<script src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js"></script>
<style id="cms-loading-styles">
@keyframes cms-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.cms-loading {
position: relative;
color: transparent !important;
/* Override any background-image (inline styles, Tailwind bg-[url(...)]) */
background-image: none !important;
background-color: transparent !important;
background: linear-gradient(90deg,
rgba(128, 128, 128, 0.1) 25%,
rgba(128, 128, 128, 0.2) 50%,
rgba(128, 128, 128, 0.1) 75%
) !important;
background-size: 200% 100% !important;
animation: cms-shimmer 1.5s infinite !important;
border-radius: 12px;
min-height: 1em;
min-width: 3em;
overflow: hidden;
}
.cms-loading * {
visibility: hidden !important;
}
.cms-loading img {
opacity: 0 !important;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<style>
.reveal-word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; } .reveal-word-inner { display: inline-block; transform: translateY(110%); will-change: transform; }
</style>
<style class="">
/*
Sequence animation intro. Usage:
1) Insert this code in the <head>
2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both]
*/
@keyframes animationIn {
0% {
opacity: 0;
transform: translateY(30px);
filter: blur(8px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
}
</style>
<script>
/*
Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:
1) Insert this code in the <head> along with the Animation Keyframe code.
2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll
*/
(function () {
// Inject CSS for paused/running states
const style = document.createElement("style");
style.textContent = `
/* Default: paused */
.animate-on-scroll { animation-play-state: paused !important; }
/* Activated by JS */
.animate-on-scroll.animate { animation-play-state: running !important; }
`;
document.head.appendChild(style);
const once = true;
if (!window.__inViewIO) {
window.__inViewIO = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("animate");
if (once) window.__inViewIO.unobserve(entry.target);
}
});
}, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
}
window.initInViewAnimations = function (selector = ".animate-on-scroll") {
document.querySelectorAll(selector).forEach((el) => {
window.__inViewIO.observe(el); // observing twice is a no-op
});
};
document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
})();
</script>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">
.font-newsreader { font-family: 'Newsreader', serif !important; }
</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">
.font-oswald { font-family: 'Oswald', sans-serif !important; }
</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-cormorant">
.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }
</style></head>
<body class="min-h-screen selection:bg-purple-500/30 relative overflow-x-hidden">
<!-- Background (component) added by Aura -->
<div class="aura-background-component fixed top-0 left-0 w-full h-[800px] z-0" style="mask-image: linear-gradient(to bottom, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent)">
<div class="relative w-full h-full">
<div data-us-project="bKN5upvoulAmWvInmHza" class="absolute inset-0"></div>
</div>
<script type="text/javascript" class="">
!function(){var e=function(){window.UnicornStudio&&!window.UnicornStudio.isInitialized&&(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)};window.UnicornStudio?e():(window.UnicornStudio={isInitialized:!1},function(){var n=document.createElement("script");n.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",n.onload=e,(document.head||document.body).appendChild(n)}())}();
</script>
</div>
<!-- Diagonal Background Pattern -->
<div class="fixed inset-0 bg-stripes pointer-events-none z-0"></div>
<!-- Radial Spotlight Effect -->
<!-- Floating Navigation -->
<nav class="fixed flex [animation:animationIn_0.8s_ease-out_0.1s_both] z-50 pr-4 pl-4 top-6 right-0 left-0 justify-center">
<nav class="fixed flex z-50 pr-4 pl-4 top-0 right-0 left-0 justify-center">
<div class="flex shadow-black/50 bg-black/50 w-full max-w-7xl border-white/10 border rounded-none pt-3 pr-3 pb-3 pl-3 shadow-2xl backdrop-blur-xl items-center justify-between">
<a href="/home" class="inline-flex items-center justify-center bg-center w-[100px] h-[40px] bg-[url(https://cdn.midjourney.com/a3840b63-36c4-4a6b-80dd-5c41d0f4a259/0_0.png?w=800&q=80)] bg-cover rounded"></a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-zinc-400">
<a href="/benefits" class="hover:text-white transition-colors">Benefits</a>
<a href="/features" class="hover:text-white transition-colors">Features</a>
<a href="/plans" class="hover:text-white transition-colors">Plans</a>
<a href="/contact" class="hover:text-white transition-colors">Contact</a>
</div>
<a href="/getstarted" class="hover:bg-zinc-200 transition-colors text-sm font-semibold text-black bg-white rounded-full px-6 py-2.5">
Get Started
</a>
</div>
</nav>
</nav>
<main class="z-10 relative">
<!-- Hero Header -->
<div class="container border-x flex flex-col [animation:animationIn_0.8s_ease-out_0.2s_both] text-center max-w-7xl border-white/10 mr-auto ml-auto pt-32 pr-6 pb-24 pl-6 gap-x-2 gap-y-2 items-center">
<!-- Badge -->
<div class="inline-flex gap-2 uppercase aura-reveal is-visible text-xs font-medium text-zinc-300 tracking-wider bg-white/5 border-white/10 border rounded-full mb-8 pt-1 pr-3 pb-1 pl-3 gap-x-2 gap-y-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
Version 2.0 Now Live
</div>
<!-- Main Title -->
<h1 class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tighter text-white mb-6 max-w-5xl mx-auto leading-[1.1] staggered-reveal">
Unleash Maximum
<br>
Internet Speed
</h1>
<!-- Subtitle -->
<p class="text-lg md:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed font-normal aura-reveal is-visible" style="animation-delay: 100ms;">
Optimize your connection with advanced routing, reduced latency, and
packet loss prevention for gaming and streaming.
</p>
<!-- Platform Icons -->
<a href="#" class="group isolate inline-flex cursor-pointer overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-[0_0_40px_8px_rgba(34,211,238,0.35)] aura-reveal is-visible rounded-full relative shadow-[0_8px_40px_rgba(34,211,238,0.25)]" style="--spread: 90deg; --shimmer-color: rgba(255,255,255,0.6); --radius: 9999px; --speed: 4s; --cut: 1px; --bg: rgba(255, 255, 255, 0.05); animation-delay: 200ms;">
<div class="absolute inset-0">
<div class="absolute inset-[-200%] w-[400%] h-[400%] [animation:rotate-gradient_var(--speed)_linear_infinite]">
<div class="absolute inset-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]"></div>
</div>
</div>
<div class="absolute rounded-full [background:var(--bg)] [inset:var(--cut)] backdrop-blur"></div>
<div class="z-10 flex gap-3 sm:w-auto overflow-hidden text-base font-medium text-white w-full pt-3 pr-4 pb-3 pl-4 relative items-center" style="border-radius: 9999px">
<div style="position: absolute; content: ' '; display: block; width: 200%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2), transparent); animation: borderBeamRotation 4s infinite linear; top: 50%; left: 50%; transform: translate(-50%, -50%);" class=""></div>
<div style="position:absolute;inset:1px;background:rgba(10,11,20,0.8);border-radius:9999px;backdrop-filter:blur(8px)" class=""></div>
<span class="relative z-10 whitespace-nowrap font-sans">
Boost Connection
</span>
<span class="relative z-10 inline-flex items-center justify-center w-7 h-7 rounded-full bg-white/10 ml-1 group-hover:bg-white/20 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</span>
<style>
@keyframes borderBeamRotation {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>
</div>
</a>
</div>
<div class="container border-x [animation:animationIn_0.8s_ease-out_0.3s_both] max-w-7xl border-white/10 border-b mr-auto ml-auto pt-0 pr-6 pb-24 pl-6 gap-x-8 gap-y-8">
<div class="flex flex-col overflow-hidden group font-sans bg-[#0A0A0A] h-full border-white/10 border rounded-xl relative shadow-2xl gap-x-8 gap-y-8">
<!-- Ambient Background Effects -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-cyan-500/5 blur-[120px] rounded-full pointer-events-none"></div>
<div class="absolute bottom-0 right-0 w-[600px] h-[400px] bg-purple-500/5 blur-[100px] rounded-full pointer-events-none"></div>
<!-- Header -->
<header class="flex z-20 border-white/5 border-b pt-5 pr-6 pb-5 pl-6 backdrop-blur-sm items-center justify-between">
<!-- Logo -->
<div class="flex items-center gap-3 select-none cursor-pointer group/logo">
<span class="group-hover/logo:text-cyan-50 transition-colors text-lg font-semibold text-white tracking-tight">
FINEX
</span>
</div>
<!-- Center Navigation Pill -->
<nav class="hidden md:flex items-center p-1 rounded-full bg-white/5 border border-white/5 backdrop-blur-md">
<button class="px-4 py-1.5 rounded-full text-xs font-medium text-white bg-white/10 shadow-sm transition-all hover:bg-white/15">
Dashboard
</button>
<button class="px-4 py-1.5 rounded-full text-xs font-medium text-zinc-400 hover:text-white transition-colors">
History
</button>
<button class="px-4 py-1.5 rounded-full text-xs font-medium text-zinc-400 hover:text-white transition-colors">
Settings
</button>
<button class="px-4 py-1.5 rounded-full text-xs font-medium text-zinc-400 hover:text-white transition-colors">
Network
</button>
</nav>
<!-- User Actions -->
<div class="flex items-center gap-5">
<div class="flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.02] hover:bg-white/[0.05] transition-colors cursor-pointer group/status">
<div class="relative">
<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
<div class="absolute inset-0 w-2 h-2 rounded-full bg-emerald-500 blur-[2px] opacity-50"></div>
</div>
<span class="text-xs font-medium text-zinc-400 group-hover/status:text-zinc-200">
Online
</span>
</div>
<div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-zinc-800 to-zinc-700 border border-white/10 flex items-center justify-center text-xs font-bold text-white shadow-inner cursor-pointer hover:border-zinc-500 transition-all">
N
</div>
</div>
</header>
<!-- Main Grid Content -->
<div class="grid grid-cols-1 lg:grid-cols-12 flex-1 z-10 lg:p-8 gap-8 pt-6 pr-6 pb-6 pl-6 relative gap-x-8 gap-y-8">
<!-- Left Sidebar: Connection Details -->
<div class="lg:col-span-3 flex flex-col h-full">
<div class="text-xs font-semibold text-zinc-500 uppercase tracking-widest mb-6 px-1">
Connection
</div>
<div class="flex flex-col gap-3">
<!-- Detail Item -->
<div class="group/item flex items-center gap-4 p-3 rounded-xl hover:bg-white/[0.03] border border-transparent hover:border-white/5 transition-all cursor-pointer">
<div class="w-10 h-10 rounded-lg bg-zinc-900 border border-white/5 flex items-center justify-center text-zinc-400 group-hover/item:text-cyan-400 group-hover/item:border-cyan-400/20 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<div class="">
<div class="text-white text-sm font-medium tracking-tight">
Frankfurt, DE
</div>
<div class="text-zinc-500 text-xs">Server Location</div>
</div>
</div>
<!-- Detail Item -->
<div class="group/item flex items-center gap-4 p-3 rounded-xl hover:bg-white/[0.03] border border-transparent hover:border-white/5 transition-all cursor-pointer">
<div class="w-10 h-10 rounded-lg bg-zinc-900 border border-white/5 flex items-center justify-center text-zinc-400 group-hover/item:text-cyan-400 group-hover/item:border-cyan-400/20 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
<line x1="6" x2="6.01" y1="6" y2="6"></line>
<line x1="6" x2="6.01" y1="18" y2="18"></line>
</svg>
</div>
<div class="">
<div class="text-white text-sm font-medium tracking-tight tracking-normal font-mono">
1.119.389.99
</div>
<div class="text-zinc-500 text-xs">Public IP Address</div>
</div>
</div>
<!-- Detail Item -->
<div class="group/item flex items-center gap-4 p-3 rounded-xl hover:bg-white/[0.03] border border-transparent hover:border-white/5 transition-all cursor-pointer">
<div class="w-10 h-10 rounded-lg bg-zinc-900 border border-white/5 flex items-center justify-center text-zinc-400 group-hover/item:text-cyan-400 group-hover/item:border-cyan-400/20 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"></path>
<path d="M8.5 8.5v.01"></path>
<path d="M16 15.5v.01"></path>
<path d="M12 12v.01"></path>
<path d="M11 17v.01"></path>
<path d="M7 14v.01"></path>
</svg>
</div>
<div class="">
<div class="text-white text-sm font-medium tracking-tight">
Starlink
</div>
<div class="text-zinc-500 text-xs">ISP Provider</div>
</div>
</div>
</div>
<!-- Bottom Chat/Support Card -->
<div class="mt-auto p-4 rounded-xl bg-gradient-to-br from-white/[0.03] to-transparent border border-white/5">
<div class="flex items-center gap-3 mb-2">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span class="text-xs font-medium text-white">
System Optimal
</span>
</div>
<p class="text-zinc-500 text-xs leading-relaxed">
Your connection routing is currently optimized for low-latency
gaming.
</p>
</div>
</div>
<!-- Center: Main Gauge -->
<div class="lg:col-span-6 flex flex-col relative items-center justify-center">
<!-- Glow behind gauge -->
<div class="blur-[60px] pointer-events-none transform bg-gradient-to-b from-cyan-500/5 to-transparent rounded-full absolute top-0 right-0 bottom-0 left-0 scale-75"></div>
<h1 class="text-sm font-medium text-zinc-400 uppercase tracking-[0.2em] mb-8 relative z-10">
Bandwidth Performance
</h1>
<!-- Modern Gauge Implementation -->
<div class="aspect-square flex z-10 w-full max-w-[420px] relative items-center justify-center">
<svg class="w-full h-full" viewBox="0 0 300 300">
<defs>
<linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.2"></stop>
<stop offset="50%" stop-color="#22d3ee" stop-opacity="0.8"></stop>
<stop offset="100%" stop-color="#22d3ee"></stop>
</linearGradient>
<filter id="needleGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="coloredBlur"></feGaussianBlur>
<feMerge>
<feMergeNode in="coloredBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- Background Arc -->
<circle cx="150" cy="150" r="130" fill="none" stroke="#27272a" stroke-width="1" stroke-dasharray="4 6" stroke-dashoffset="0" transform="rotate(135 150 150)" style="stroke-dasharray: 612, 1000;" class=""></circle>
<!-- Progress Arc -->
<circle id="gauge-progress" cx="150" cy="150" r="130" fill="none" stroke="url(#gaugeGradient)" stroke-width="5" stroke-linecap="round" stroke-dasharray="546 1000" transform="rotate(135 150 150)" class="drop-shadow-[0_0_15px_rgba(34,211,238,0.4)]" style="stroke-dasharray: 321.262, 1000;"></circle>
<!-- Ticks -->
<g transform="translate(150, 150)" class="">
<rect x="115" y="-1" width="8" height="1.5" fill="#3f3f46" transform="rotate(45)"></rect>
<rect x="115" y="-1" width="8" height="1.5" fill="#3f3f46" transform="rotate(90)" class=""></rect>
<rect x="115" y="-1" width="8" height="1.5" fill="#3f3f46" transform="rotate(135)"></rect>
<rect x="115" y="-1" width="8" height="1.5" fill="#3f3f46" transform="rotate(180)"></rect>
<rect x="115" y="-1" width="8" height="1.5" fill="#3f3f46" transform="rotate(225)" class=""></rect>
<rect x="115" y="-1" width="8" height="1.5" fill="#3f3f46" transform="rotate(270)"></rect>
<rect x="115" y="-1" width="8" height="1.5" fill="#3f3f46" transform="rotate(315)"></rect>
</g>
<!-- Needle -->
<g id="gauge-needle" transform="rotate(276.73336955670254 150 150)" filter="url(#needleGlow)" class="">
<line x1="150" y1="150" x2="270" y2="150" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.9" class=""></line>
<circle cx="150" cy="150" r="4" fill="white"></circle>
<circle cx="150" cy="150" r="2" fill="#020202"></circle>
</g>
</svg>
<div class="flex flex-col absolute bottom-[12%] left-0 right-0 items-center justify-end">
<div class="text-[64px] leading-none tabular-nums text-white tracking-tighter font-extralight drop-shadow-2xl">
<span id="speed-value" class="">524</span>
<span class="text-3xl text-zinc-500">
.
<span id="speed-decimal" class="">9</span>
</span>
</div>
</div>
</div>
<!-- CTA Buttons -->
<div class="flex flex-wrap gap-4 mt-8 items-center">
<button class="group/btn inline-flex hover:scale-105 transition-all duration-300 items-center gap-2 py-4 px-8 rounded-full bg-zinc-900 border border-white/10 hover:bg-zinc-800 shadow-[0_0_20px_rgba(255,255,255,0.05)]">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(255, 255, 255); width: 16px; height: 16px;" class="lucide lucide-square w-[16px] h-[16px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-solar="stop-circle-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
<path fill="#ffffff" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5"></path>
<path fill="#ffffff" d="M8.586 8.586C8 9.172 8 10.114 8 12s0 2.828.586 3.414S10.114 16 12 16s2.828 0 3.414-.586S16 13.886 16 12s0-2.828-.586-3.414S13.886 8 12 8s-2.828 0-3.414.586"></path>
</svg>
<span class="text-sm font-semibold text-white tracking-wide uppercase">
Stop Testing
</span>
</button>
<button class="group/btn inline-flex hover:scale-105 transition-all duration-300 items-center gap-2 py-4 px-8 rounded-full bg-cyan-500/10 border border-cyan-500/20 shadow-[0_0_20px_rgba(6,182,212,0.1)]">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(34, 211, 238); width: 16px; height: 16px" class="lucide lucide-download text-cyan-400 w-[16px] h-[16px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-solar="file-download-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
<path fill="#22d3ee" fill-rule="evenodd" d="M10 22h4c3.771 0 5.657 0 6.828-1.172S22 17.771 22 14v-.437c0-.873 0-1.529-.043-2.063h-4.052c-1.097 0-2.067 0-2.848-.105c-.847-.114-1.694-.375-2.385-1.066c-.692-.692-.953-1.539-1.067-2.386c-.105-.781-.105-1.75-.105-2.848l.01-2.834q0-.124.02-.244C11.121 2 10.636 2 10.03 2C6.239 2 4.343 2 3.172 3.172C2 4.343 2 6.229 2 10v4c0 3.771 0 5.657 1.172 6.828S6.229 22 10 22" clip-rule="evenodd" opacity=".5"></path>
<path fill="#22d3ee" d="M9.013 19.047a.75.75 0 0 1-1.026 0l-2-1.875a.75.75 0 0 1 1.026-1.094l.737.69V13.5a.75.75 0 0 1 1.5 0v3.269l.737-.691a.75.75 0 0 1 1.026 1.094zM11.51 2.26l-.01 2.835c0 1.097 0 2.066.105 2.848c.114.847.375 1.694 1.067 2.385c.69.691 1.538.953 2.385 1.067c.781.105 1.751.105 2.848.105h4.052q.02.232.028.5H22c0-.268 0-.402-.01-.56a5.3 5.3 0 0 0-.958-2.641c-.094-.128-.158-.204-.285-.357C19.954 7.494 18.91 6.312 18 5.5c-.81-.724-1.921-1.515-2.89-2.161c-.832-.556-1.248-.834-1.819-1.04a6 6 0 0 0-.506-.154c-.384-.095-.758-.128-1.285-.14z"></path>
</svg>
<span class="text-sm font-semibold text-cyan-400 tracking-wide uppercase">
Mbps Download
</span>
</button>
</div>
<script>
(function() {
const needle = document.getElementById('gauge-needle');
const progress = document.getElementById('gauge-progress');
const valEl = document.getElementById('speed-value');
const decEl = document.getElementById('speed-decimal');
const btn = document.getElementById('stop-test-btn');
const btnText = document.getElementById('stop-btn-text');
const btnIcon = document.getElementById('stop-btn-icon');
// Gauge Configuration
const MAX_SPEED = 1000;
const MAX_STROKE = 612; // 270 degrees arc length for r=130
const START_ANGLE = 135;
const RANGE_ANGLE = 270;
let isTesting = true;
let animationId;
let currentSmoothedSpeed = null; // For smoothing
function updateGauge(speed) {
// Clamp speed between 0 and MAX_SPEED
const clampedSpeed = Math.min(Math.max(speed, 0), MAX_SPEED);
const normalized = clampedSpeed / MAX_SPEED;
// Calculate rotation
const rotation = START_ANGLE + (normalized * RANGE_ANGLE);
// Apply transforms
if(needle) needle.setAttribute('transform', `rotate(${rotation} 150 150)`);
// Calculate stroke
const dash = normalized * MAX_STROKE;
if(progress) progress.style.strokeDasharray = `${dash} 1000`;
// Update Text
if(valEl) valEl.textContent = Math.floor(clampedSpeed);
if(decEl) decEl.textContent = Math.floor((clampedSpeed % 1) * 10);
}
function loop(timestamp) {
if (!isTesting) return;
// Continuous Sine Wave Animation for looping effect
const time = timestamp / 2000;
// Generate a wave that oscillates between 0 and 1
const wave = (Math.sin(time) + 1) / 2;
// Add randomized noise
const noise = (Math.random() * 10 - 5);
// Calculate current speed
let targetSpeed = (wave * MAX_SPEED) + noise;
// Initialize on first frame
if (currentSmoothedSpeed === null) currentSmoothedSpeed = targetSpeed;
// Apply linear interpolation for smoothing
currentSmoothedSpeed += (targetSpeed - currentSmoothedSpeed) * 0.05;
updateGauge(Math.max(0, Math.min(MAX_SPEED, currentSmoothedSpeed)));
animationId = requestAnimationFrame(loop);
}
// Button Event Listener
if(btn) {
btn.addEventListener('click', () => {
isTesting = !isTesting;
if (isTesting) {
// Start Testing State
btnText.textContent = 'Stop Testing';
// Pause Icon
if(btnIcon) btnIcon.innerHTML = '<rect x="6" y="4" width="4" height="16" rx="1" ry="1"></rect><rect x="14" y="4" width="4" height="16" rx="1" ry="1"></rect>';
// Resume/Start Loop
loop(performance.now());
} else {
// Stop Testing State (Paused)
btnText.textContent = 'Start New Test';
// Play Icon
if(btnIcon) btnIcon.innerHTML = '<polygon points="5 3 19 12 5 21 5 3"></polygon>';
// Stop Animation Loop (Pauses visual state)
if(animationId) cancelAnimationFrame(animationId);
}
});
}
// Initialize
loop(performance.now());
})();
</script>
</div>
<!-- Right Sidebar: Stats -->
<div class="lg:col-span-3 flex flex-col gap-6 justify-center">
<!-- Download Card -->
<div class="group/stat relative overflow-hidden bg-zinc-900/40 backdrop-blur-sm border border-white/5 hover:border-cyan-500/30 rounded-2xl p-5 transition-all duration-300 hover:bg-white/[0.02]">
<div class="flex justify-between items-start mb-4">
<div class="p-2 rounded-lg bg-cyan-500/10 text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" x2="12" y1="15" y2="3"></line>
</svg>
</div>
<span class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">
Download
</span>
</div>
<div class="flex items-baseline gap-1">
<span class="text-3xl font-light text-white tracking-tight tabular-nums">
892.4
</span>
<span class="text-xs text-zinc-500">Mbps</span>
</div>
<!-- Sparkline Visualization -->
<div class="h-8 mt-4 w-full opacity-50 group-hover/stat:opacity-100 transition-opacity">
<svg class="w-full h-full text-cyan-500/40" preserveAspectRatio="none" viewBox="0 0 100 24" fill="none">
<path d="M0 18 L10 14 L20 16 L30 10 L40 12 L50 8 L60 14 L70 10 L80 6 L90 8 L100 4" stroke="currentColor" stroke-width="1.5" vector-effect="non-scaling-stroke"></path>
<path d="M0 18 L10 14 L20 16 L30 10 L40 12 L50 8 L60 14 L70 10 L80 6 L90 8 L100 4 V 24 H 0 Z" fill="currentColor" fill-opacity="0.2" class=""></path>
</svg>
</div>
</div>
<!-- Upload Card -->
<div class="group/stat relative overflow-hidden bg-zinc-900/40 backdrop-blur-sm border border-white/5 hover:border-purple-500/30 rounded-2xl p-5 transition-all duration-300 hover:bg-white/[0.02]">
<div class="flex justify-between items-start mb-4">
<div class="p-2 rounded-lg bg-purple-500/10 text-purple-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" x2="12" y1="3" y2="15"></line>
</svg>
</div>
<span class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">
Upload
</span>
</div>
<div class="flex items-baseline gap-1">
<span class="text-3xl font-light text-white tracking-tight tabular-nums">
452.1
</span>
<span class="text-xs text-zinc-500">Mbps</span>
</div>
<div class="h-8 mt-4 w-full opacity-50 group-hover/stat:opacity-100 transition-opacity">
<svg class="w-full h-full text-purple-500/40" preserveAspectRatio="none" viewBox="0 0 100 24" fill="none">
<path d="M0 20 L15 18 L30 14 L45 16 L60 10 L75 12 L90 8 L100 12" stroke="currentColor" stroke-width="1.5" vector-effect="non-scaling-stroke"></path>
</svg>
</div>
</div>
<!-- Ping Card -->
<div class="group/stat relative overflow-hidden bg-zinc-900/40 backdrop-blur-sm border border-white/5 hover:border-emerald-500/30 rounded-2xl p-5 transition-all duration-300 hover:bg-white/[0.02]">
<div class="flex justify-between items-start mb-4">
<div class="p-2 rounded-lg bg-emerald-500/10 text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 12h5"></path>
<path d="M17 12h5"></path>
<path d="M7 12v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-5"></path>
<path d="M7 12V7a5 5 0 0 1 10 0v5"></path>
</svg>
</div>
<span class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">
Ping
</span>
</div>
<div class="flex items-baseline gap-1">
<span class="text-3xl font-light text-white tracking-tight tabular-nums">
4
</span>
<span class="text-xs text-zinc-500">ms</span>
</div>
<div class="w-full bg-zinc-800 h-1 mt-6 rounded-full overflow-hidden">
<div class="bg-emerald-500 h-full w-[15%] rounded-full shadow-[0_0_10px_rgba(16,185,129,0.5)]"></div>
</div>
</div>
</div>
</div>
<!-- Decorative Footer Line -->
<div class="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
</div>
</div>
<!-- IMAGE-BASED FEATURE SECTION (NO ROUNDED CORNERS) -->
<section class="container border-x [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl border-white/10 border-b mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
<!-- Section Header -->
<div class="flex flex-col lg:flex-row lg:items-end justify-between mb-16 gap-12">
<div class="flex-1">
<h2 class="md:text-7xl lg:text-8xl uppercase leading-[0.9] text-6xl text-white tracking-tight font-oswald staggered-reveal">
WIN ON EVERY MILLISECOND
</h2>
</div>
<div class="flex flex-col justify-end items-start lg:items-end lg:text-right max-w-md gap-12 aura-reveal" style="animation-delay: 100ms;">
<p class="leading-relaxed lg:text-left text-lg text-zinc-400 text-left">
lobal infrastructure, tuned for real-time performance.
</p>
<div class="w-full flex justify-end">
<span class="text-sm text-zinc-500 font-mono">001 — 003</span>
</div>
</div>
</div>
<!-- Main Feature Visual Area -->
<div class="grid grid-cols-1 lg:grid-cols-12 overflow-hidden divide-y lg:divide-y-0 lg:divide-x divide-white/10 [animation:animationIn_0.8s_ease-out_0.2s_both] animate-on-scroll bg-black/40 border-white/10 border rounded-none backdrop-blur-sm">
<div class="lg:col-span-7 flex flex-col flashlight-card aura-reveal is-visible" style="--mouse-x: 660px; --mouse-y: 443px;">
<div class="md:p-12 group bg-gradient-to-br from-white/[0.02] to-transparent border-white/10 border-b pt-8 pr-8 pb-8 pl-8 relative">
<div class="flex flex-col md:flex-row items-center gap-12 h-full">
<div class="relative w-full max-w-xs shrink-0">
<div class="bg-zinc-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-5 shadow-2xl relative z-20 group-hover:-translate-y-2 transition-transform duration-500 ease-out">
<div class="flex items-center justify-center w-12 h-12 bg-white rounded-xl mb-4 shadow-lg shadow-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check w-6 h-6 text-black">
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
<path d="m9 12 2 2 4-4"></path>
</svg>
</div>
<div class="text-sm font-medium text-white mb-0.5">
Optimized
</div>
<div class="text-xs text-zinc-500 mb-6 font-mono">
Ping: 14ms
</div>
<div class="flex items-center gap-3 pt-4 border-t border-white/5">
<div class="w-5 h-5 rounded-full bg-gradient-to-br from-blue-600 via-white to-red-600 shadow-inner"></div>
<div class="text-xs text-zinc-400">Frankfurt, DE</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-3 h-3 text-zinc-600 ml-auto">
<path d="m9 18 6-6-6-6"></path>
</svg>
</div>
</div>
<div class="absolute -inset-4 bg-white/5 blur-2xl rounded-full z-10 opacity-50"></div>
</div>
<div class="text-left">
<h3 class="text-2xl font-semibold tracking-tight text-white mb-3">
Low Latency
</h3>
<p class="text-base text-zinc-400 leading-relaxed mb-6">
Experience gaming and streaming without interruptions. Our
smart routing finds the shortest path to game servers.
</p>
<a href="#" class="inline-flex items-center text-sm font-medium text-white hover:text-zinc-300 transition-colors group">
See our plans
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-white/10 flex-grow">
<div class="md:p-10 overflow-hidden group bg-gradient-to-br from-transparent to-white/[0.02] pt-8 pr-8 pb-8 pl-8 relative">
<h3 class="text-xl font-semibold tracking-tight text-white mb-2 relative z-10">
Packet Loss Fix
</h3>
<p class="text-sm text-zinc-400 relative z-10">
Stabilize your connection instantly.
</p>
</div>
<div class="p-8 md:p-10 flex flex-col justify-center bg-black">
<div class="text-4xl md:text-5xl font-semibold tracking-tighter text-white mb-1">
-40%
</div>
<div class="text-sm text-zinc-400">Average Ping Reduction</div>
</div>
</div>
</div>
<div class="lg:col-span-5 md:p-12 flex flex-col flashlight-card aura-reveal is-visible bg-zinc-900/20 pt-8 pr-8 pb-8 pl-8 justify-between" style="animation-delay: 100ms; --mouse-x: 18.671875px; --mouse-y: 321px;">
<div class="">
<h3 class="text-3xl font-semibold tracking-tight text-white mb-4">
Competitive Edge In Every Game
</h3>
<p class="text-base text-zinc-400 leading-relaxed mb-10">
Don't let your ISP's bad routing cost you the match. Finex
ensures your packets take the most direct route.
</p>
<ul class="space-y-4 mb-10">
<li class="flex items-start gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-5 h-5 text-white shrink-0 mt-0.5">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
<span class="text-sm text-zinc-300">
Reduce Latency & Jitter
</span>
</li>
<li class="flex items-start gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield w-5 h-5 text-white shrink-0 mt-0.5">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" class=""></path>
</svg>
<span class="text-sm text-zinc-300">
DDoS Protection Included
</span>
</li>
<li class="flex items-start gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-route w-5 h-5 text-white shrink-0 mt-0.5">
<circle cx="6" cy="19" r="3"></circle>
<path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" class=""></path>
<circle cx="18" cy="5" r="3"></circle>
</svg>
<span class="text-sm text-zinc-300">
Smart Traffic Routing
</span>
</li>
</ul>
</div>
<button class="hover:bg-zinc-200 transition-colors text-sm font-semibold text-black bg-white w-fit rounded-full pt-2.5 pr-6 pb-2.5 pl-6">
Get Started
</button>
</div>
</div>
<!-- Feature Navigation Grid -->
</section>
<section class="container border-x [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl border-white/10 border-b mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
<!-- Section Header -->
<div class="flex flex-col lg:flex-row lg:items-end gap-12 mb-16 gap-x-12 gap-y-12 justify-between">
<div class="flex-1">
<h2 class="text-6xl md:text-7xl lg:text-8xl font-oswald uppercase tracking-tight leading-[0.9] text-white staggered-reveal">
WIN ON EVERY MILLISECOND
</h2>
</div>
<div class="flex flex-col justify-end items-start lg:items-end lg:text-right max-w-md gap-12 aura-reveal" style="animation-delay: 100ms;">
<p class="text-zinc-400 text-lg leading-relaxed text-left lg:text-left">
Your connection, supercharged by our global node network.
</p>
<div class="flex w-full justify-end">
<span class="text-sm text-zinc-500 font-mono">002 — 003</span>
</div>
</div>
</div>
<!-- Main Feature Visual Area -->
<div class="aspect-[16/10] md:aspect-[21/9] overflow-hidden group shadow-purple-900/20 aura-reveal [animation:animationIn_0.8s_ease-out_0.2s_both] animate-on-scroll bg-[#0A0A0A] w-full z-10 border-white/10 border mb-10 relative shadow-2xl">
<!-- Background ambient glow -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-purple-800/20 blur-[120px] rounded-full pointer-events-none"></div>
<!-- Dark overlay gradient -->
<div class="z-10 bg-gradient-to-t from-[#020202] via-transparent to-transparent absolute top-0 right-0 bottom-0 left-0"></div>
<!-- Abstract UI Interface (Sharp Edges) -->
<div class="absolute inset-10 md:inset-16 flex border border-white/5 bg-[#050505] shadow-2xl z-20">
<!-- Sidebar -->
<div class="w-16 border-r border-white/5 flex flex-col items-center py-6 gap-6 bg-black/20 backdrop-blur-md">
<div class="w-8 h-8 bg-zinc-800 flex items-center justify-center">
<svg class="w-4 h-4 text-zinc-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</div>
<div class="w-8 h-8 bg-purple-600/20 flex items-center justify-center border-l-2 border-purple-500">
<svg class="w-4 h-4 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
<path d="M2 12h20"></path>
</svg>
</div>
<div class="w-8 h-8 flex items-center justify-center opacity-50">
<svg class="w-4 h-4 text-zinc-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-8 relative overflow-hidden">
<!-- Header UI -->
<div class="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
<div class="flex items-center gap-3">
<div class="w-2 h-2 bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]"></div>
<span class="text-sm font-mono text-zinc-300 tracking-wider">
OPTIMIZATION_ACTIVE
</span>
</div>
<div class="flex gap-3">
<div class="px-3 py-1 border border-white/10 text-[10px] text-zinc-400 uppercase tracking-widest hover:bg-white/5 transition-colors cursor-pointer">
Protocol: Wireguard
</div>
<div class="px-3 py-1 border border-white/10 text-[10px] text-zinc-400 uppercase tracking-widest hover:bg-white/5 transition-colors cursor-pointer">
IP: 192.168.X.X
</div>
</div>
</div>
<!-- Main Stats Grid -->
<div class="grid grid-cols-2 gap-4 aura-reveal">
<!-- Card 1 -->
<div class="border border-white/10 bg-white/[0.02] p-4 group/card hover:bg-white/[0.04] transition-colors">
<div class="flex items-start justify-between mb-4">
<div class="p-2 bg-purple-500/10 border border-purple-500/20">
<svg class="w-5 h-5 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" class=""></path>
<path d="M3 5v14a2 2 0 0 0 2 2h16v-5" class=""></path>
<path d="M18 12a2 2 0 0 0 0 4h4v-4Z"></path>
</svg>
</div>
<span class="text-xs text-zinc-500 font-mono">
Reduced from 45ms
</span>
</div>
<div class="text-lg text-white font-medium">12ms</div>
<div class="text-xs text-zinc-500 mt-1">
Military grade standard
</div>
</div>
<!-- Card 2 -->
<div class="border border-white/10 bg-white/[0.02] p-4 group/card hover:bg-white/[0.04] transition-colors">
<div class="flex items-start justify-between mb-4">
<div class="p-2 bg-blue-500/10 border border-blue-500/20">
<svg class="w-5 h-5 text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"></path>
<path d="M8.5 8.5v.01"></path>
<path d="M16 15.5v.01"></path>
<path d="M12 12v.01"></path>
<path d="M11 17v.01"></path>
<path d="M7 14v.01"></path>
</svg>
</div>
<span class="text-xs text-zinc-500 font-mono">
No Packet Loss
</span>
</div>
<div class="text-lg text-white font-medium">100%</div>
<div class="text-xs text-zinc-500 mt-1">Latency: 14ms</div>
</div>
<!-- List Item -->
<div class="col-span-2 mt-4">
<div class="text-xs text-zinc-500 font-mono mb-3 uppercase tracking-wider">
Recent Activity
</div>
<div class="space-y-1">
<div class="flex items-center justify-between p-3 border border-white/5 bg-white/[0.01] hover:bg-white/[0.03]">
<div class="flex items-center gap-3">
<div class="w-1.5 h-1.5 bg-green-500"></div>
<span class="text-sm text-zinc-300">
Route Re-optimized
</span>
</div>
<span class="text-xs text-zinc-600 font-mono">
00:00:05
</span>
</div>
<div class="flex items-center justify-between p-3 border border-white/5 bg-white/[0.01] hover:bg-white/[0.03]">
<div class="flex items-center gap-3">
<div class="w-1.5 h-1.5 bg-blue-500"></div>
<span class="text-sm text-zinc-400">
Jitter Spike Mitigated
</span>
</div>
<span class="text-xs text-zinc-600 font-mono">
00:01:12
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Abstract Decorative Elements inside the main window -->
<div class="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-black via-transparent to-transparent z-30 pointer-events-none"></div>
<div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black via-transparent to-transparent z-30 pointer-events-none"></div>
<!-- Decorative floating squares (like reference image) -->
<div class="absolute right-[5%] top-[20%] w-24 h-24 border border-white/5 bg-white/[0.02] backdrop-blur-sm z-10 rotate-45 opacity-20"></div>
</div>
<!-- Feature Navigation Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 [animation:animationIn_0.8s_ease-out_0.3s_both] animate-on-scroll border-white/10 border-t">
<div class="group cursor-pointer pt-6 pr-4">
<h3 class="text-sm font-semibold text-white mb-2 group-hover:text-purple-300 transition-colors">
Smart Pathing
</h3>
<p class="text-xs text-zinc-500 leading-relaxed group-hover:text-zinc-400 transition-colors">
We find the fastest physical path to the game server.
</p>
</div>
<div class="relative pt-6 pr-4 px-0 md:px-4 cursor-pointer">
<div class="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-white to-transparent shadow-[0_0_15px_rgba(255,255,255,0.7)]"></div>
<h3 class="text-sm font-semibold text-white mb-2">FPS Boost</h3>
<p class="text-xs text-zinc-400 leading-relaxed">
Free up system resources and optimize network drivers.
</p>
</div>
<div class="group pt-6 pr-4 px-0 md:px-4 cursor-pointer">
<h3 class="text-sm font-semibold text-white mb-2 group-hover:text-purple-300 transition-colors">
Packet Loss Fix
</h3>
<p class="text-xs text-zinc-500 leading-relaxed group-hover:text-zinc-400 transition-colors">
Redundant data transmission ensures 0% packet loss.
</p>
</div>
<div class="group pt-6 px-0 md:px-4 cursor-pointer">
<h3 class="text-sm font-semibold text-white mb-2 group-hover:text-purple-300 transition-colors">
Game Support
</h3>
<p class="text-xs text-zinc-500 leading-relaxed group-hover:text-zinc-400 transition-colors">
Custom profiles for over 1000+ competitive titles.
</p>
</div>
</div>
</section>
<!-- TESTIMONIALS SECTION -->
<section class="container border-x [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl border-white/10 border-b mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
<style>
.testimonial-item {
transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
opacity: 0.15;
filter: blur(4px);
transform: scale(0.96) translateX(-10px);
}
.testimonial-item.active {
opacity: 1;
filter: blur(0);
transform: scale(1) translateX(0);
}
.avatar-indicator {
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
opacity: 0.3;
filter: grayscale(100%);
transform: scale(1);
border-color: rgba(255, 255, 255, 0.05);
box-shadow: none;
}
.avatar-indicator.active {
opacity: 1;
filter: grayscale(0%);
transform: scale(1.4);
border-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 40px -5px rgba(168, 85, 247, 0.4);
z-index: 20;
}
.avatar-indicator::after {
content: '';
position: absolute;
inset: 0;
border-radius: 9999px;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
</style>
<!-- Header -->
<div class="flex flex-col lg:flex-row lg:items-end justify-between mb-24 gap-12 relative z-10">
<div class="flex-1">
<h2 class="md:text-7xl lg:text-8xl uppercase leading-[0.9] text-6xl text-white tracking-tight font-oswald">
What They Said
</h2>
</div>
<div class="flex flex-col justify-end items-start lg:items-end lg:text-right max-w-md gap-12">
<p class="text-zinc-400 text-lg leading-relaxed text-left lg:text-left">
Voices of our satisfied clients from around the globe.
</p>
<div class="flex w-full justify-end">
<span class="text-sm text-zinc-500 font-mono">003 — 004</span>
</div>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 relative min-h-[800px]">
<!-- Left Column: Testimonial Quotes (Scrollable) -->
<div class="lg:col-span-9 flex flex-col gap-40 lg:pb-40 py-12">
<!-- Quote 1 -->
<div class="testimonial-item group relative aura-reveal" data-index="0">
<div class="md:pl-12 relative">
<!-- Big Quote Icon -->
<div class="absolute -left-2 -top-6 md:-left-12 md:-top-8 opacity-20">
<svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" class="text-white transform rotate-180">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z" class=""></path>
</svg>
</div>
<blockquote class="text-3xl md:text-5xl text-white font-light leading-[1.1] tracking-tight mb-8">
My ping dropped from 80ms to 35ms instantly. I can finally
compete at a high level without lag spikes.
</blockquote>
<div class="flex items-center gap-4">
<!-- Mobile Inline Avatar -->
<div class="lg:hidden w-10 h-10 rounded-full overflow-hidden border border-white/20">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=faces" class="w-full h-full object-cover">
</div>
<div class="flex flex-col">
<span class="text-sm text-white font-medium">
Alex Chen
</span>
<span class="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">
Semi-Pro Valorant Player
</span>
</div>
</div>
</div>
</div>
<!-- Quote 2 -->
<div class="testimonial-item group relative" data-index="1">
<div class="md:pl-12 relative">
<div class="absolute -left-2 -top-6 md:-left-12 md:-top-8 opacity-20">
<svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" class="text-white transform rotate-180">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path>
</svg>
</div>
<blockquote class="text-3xl md:text-5xl text-white font-light leading-[1.1] tracking-tight mb-8">
Incredible reliability and encryption standards. Highly
recommended for enterprise usage!
</blockquote>
<div class="flex items-center gap-4">
<div class="lg:hidden w-10 h-10 rounded-full overflow-hidden border border-white/20">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=faces" class="w-full h-full object-cover">
</div>
<div class="flex flex-col">
<span class="text-sm text-white font-medium">
Sarah Jenkins
</span>
<span class="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">
Director at Style Vision
</span>
</div>
</div>
</div>
</div>
<!-- Quote 3 -->
<div class="testimonial-item group relative" data-index="2">
<div class="md:pl-12 relative">
<div class="absolute -left-2 -top-6 md:-left-12 md:-top-8 opacity-20">
<svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" class="text-white transform rotate-180">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z" class=""></path>
</svg>
</div>
<blockquote class="text-3xl md:text-5xl text-white font-light leading-[1.1] tracking-tight mb-8">
Transformed our connectivity across borders into a seamless
experience. Superb!
</blockquote>
<div class="flex items-center gap-4">
<div class="lg:hidden w-10 h-10 rounded-full overflow-hidden border border-white/20">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=faces" class="w-full h-full object-cover">
</div>
<div class="flex flex-col">
<span class="text-sm text-white font-medium">
Marcus Thorne
</span>
<span class="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">
Freelance Journalist
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Sticky Avatars (Desktop) -->
<div class="hidden lg:flex lg:col-span-3 sticky top-[40vh] flex-col items-end gap-8 pr-4 h-fit">
<div class="relative w-16 h-16 rounded-full border border-white/10 overflow-hidden cursor-pointer avatar-indicator" data-target="0">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=faces" class="w-full h-full object-cover transition-all">
</div>
<div class="relative w-16 h-16 rounded-full border border-white/10 overflow-hidden cursor-pointer avatar-indicator" data-target="1">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=faces" class="w-full h-full object-cover transition-all">
</div>
<div class="relative w-16 h-16 rounded-full border border-white/10 overflow-hidden cursor-pointer avatar-indicator" data-target="2">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=faces" class="w-full h-full object-cover transition-all">
</div>
</div>
</div>
<script>
(function() {
// Intersection Observer with a tight margin to detect middle of viewport
const options = {
root: null,
rootMargin: '-45% 0px -45% 0px',
threshold: 0
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const index = entry.target.getAttribute('data-index');
updateActiveState(index);
}
});
}, options);
// Observe all testimonial items
const items = document.querySelectorAll('.testimonial-item');
items.forEach(item => observer.observe(item));
// Click to scroll functionality for avatars
const avatars = document.querySelectorAll('.avatar-indicator');
avatars.forEach(avatar => {
avatar.addEventListener('click', () => {
const targetIndex = avatar.getAttribute('data-target');
const targetItem = document.querySelector(`.testimonial-item[data-index="${targetIndex}"]`);
if (targetItem) {
targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
updateActiveState(targetIndex);
}
});
});
function updateActiveState(index) {
// Toggle active class on text items
items.forEach(item => {
if (item.getAttribute('data-index') === index) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
// Toggle active class on avatars
avatars.forEach(avatar => {
if (avatar.getAttribute('data-target') === index) {
avatar.classList.add('active');
} else {
avatar.classList.remove('active');
}
});
}
// Initialize first item as active
setTimeout(() => updateActiveState('0'), 100);
})();
</script>
</section><section class="container border-x [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl border-white/10 border-b mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
<!-- Section Header -->
<div class="flex flex-col lg:flex-row lg:items-end mb-16 gap-x-12 gap-y-12 justify-between">
<div class="flex-1">
<h2 class="text-6xl md:text-7xl lg:text-8xl font-oswald uppercase tracking-tight leading-[0.9] text-white staggered-reveal">
WIN ON EVERY MILLISECOND
</h2>
</div>
<div class="flex flex-col justify-end items-start lg:items-end lg:text-right max-w-md gap-12 aura-reveal" style="animation-delay: 100ms;">
<p class="text-zinc-400 text-lg leading-relaxed text-left lg:text-left">
No hourly rates. No surprise charges. No scope creep penalties. Just transparent pricing for transformational work.
</p>
<div class="flex w-full justify-end">
<span class="text-sm text-zinc-500 font-mono">004 — 004</span>
</div>
</div>
</div>
<!-- Main Feature Visual Area -->
<div class="container border-x [animation:animationIn_0.8s_ease-out_0.2s_both] animate-on-scroll max-w-7xl border-white/10 border border-b mr-auto ml-auto pt-0 pr-6 pb-0 pl-6">
<div class="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-white/10 border-white/10 border-b bg-black/20">
<!-- Monthly Pass Card -->
<div class="group relative flex flex-col md:p-12 p-8 h-full flashlight-card aura-reveal transition-all duration-300 ease-out hover:z-20 hover:scale-[1.01] hover:shadow-[0_0_40px_rgba(255,255,255,0.1)] hover:bg-zinc-900/80 bg-[#020202]" style="--mouse-x: 558px; --mouse-y: 307.609375px;">
<!-- Hover Glow Line -->
<div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
</div>
<div class="mb-16">
<h2 class="text-3xl font-normal mb-6 tracking-tight text-white/80 group-hover:text-white transition-colors">
Monthly Pass
</h2>
<p class="text-zinc-500 group-hover:text-zinc-400 transition-colors leading-relaxed max-w-lg">
Full access to our global infrastructure. Ideal for climbing
the ranks during a specific competitive season.
</p>
</div>
<div class="border-t border-white/10 pt-12 mt-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="">
<span class="block text-zinc-600 group-hover:text-zinc-500 text-sm mb-6 font-medium uppercase tracking-wider transition-colors">
Includes
</span>
<ul class="space-y-4 text-sm text-zinc-500 group-hover:text-zinc-300 transition-colors">
<li class="flex items-start gap-3">
<span class="text-zinc-700 group-hover:text-zinc-500 transition-colors">—</span>
AI Smart Path Routing
</li>
<li class="flex items-start gap-3">
<span class="text-zinc-700 group-hover:text-zinc-500 transition-colors">—</span>
50+ Global Node Locations
</li>
<li class="flex items-start gap-3">
<span class="text-zinc-700 group-hover:text-zinc-500 transition-colors">—</span>
Ultra-fast WireGuard Protocol
</li>
</ul>
<div class="mt-24">
<div class="text-4xl lg:text-5xl font-normal tracking-tight text-white/70 group-hover:text-white transition-colors duration-300">
$19.99
</div>
<span class="text-xs text-zinc-600 group-hover:text-zinc-500 font-mono transition-colors">
Billed monthly
</span>
</div>
</div>
<div class="flex flex-col h-full">
<div class="mb-10">
<span class="block text-zinc-600 group-hover:text-zinc-500 text-sm mb-2 font-medium uppercase tracking-wider transition-colors">
Activation
</span>
<div class="text-zinc-300 group-hover:text-white transition-colors">Instant Access</div>
</div>
<div class="mb-12">
<span class="block text-zinc-600 group-hover:text-zinc-500 text-sm mb-2 font-medium uppercase tracking-wider transition-colors">
Guarantee
</span>
<div class="text-zinc-300 group-hover:text-white leading-relaxed text-sm transition-colors">
30-Day Money Back Guarantee
</div>
</div>
<div class="mt-auto pt-6">
<button class="w-full rounded-full border border-white/10 bg-zinc-900 pt-4 pr-6 pb-4 pl-6 text-sm text-zinc-300 transition-all duration-300 group-hover:bg-white group-hover:text-black group-hover:shadow-[0_0_20px_rgba(255,255,255,0.2)] group-hover:border-transparent group-hover:scale-[1.02]">
Start Monthly Plan
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Annual Pro Card -->
<div class="group relative flex flex-col p-8 md:p-12 h-full flashlight-card aura-reveal transition-all duration-300 ease-out hover:z-20 hover:scale-[1.01] hover:shadow-[0_0_40px_rgba(6,182,212,0.15)] hover:bg-zinc-900/80 bg-[#020202]" style="animation-delay: 100ms; --mouse-x: 554px; --mouse-y: 498.609375px;">
<!-- Hover Glow Line -->
<div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
</div>
<div class="mb-16">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-normal tracking-tight text-white/80 group-hover:text-white transition-colors">
Annual Pro
</h2>
<!-- Badge -->
<span class="text-[10px] uppercase font-bold border px-2 py-0.5 rounded bg-zinc-900 border-white/10 text-zinc-500 group-hover:bg-cyan-400/10 group-hover:text-cyan-300 group-hover:border-cyan-400/20 transition-all duration-300">
Popular
</span>
</div>
<p class="text-zinc-500 group-hover:text-zinc-400 transition-colors leading-relaxed max-w-lg">
The ultimate choice for serious gamers. Includes high-priority
server nodes and early access to beta optimizations.
</p>
</div>
<div class="border-t border-white/10 pt-12 mt-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="">
<span class="block text-zinc-600 group-hover:text-zinc-500 text-sm mb-6 font-medium uppercase tracking-wider transition-colors">
Includes
</span>
<ul class="space-y-4 text-sm text-zinc-500 group-hover:text-zinc-300 transition-colors">
<li class="flex items-start gap-3">
<span class="text-zinc-700 group-hover:text-cyan-400/50 transition-colors">—</span>
<span class="group-hover:text-white text-zinc-400 transition-colors">Priority Node Access</span>
</li>
<li class="flex items-start gap-3">
<span class="text-zinc-700 group-hover:text-cyan-400/50 transition-colors">—</span>
<span class="group-hover:text-white text-zinc-400 transition-colors">
Zero Packet Loss Guarantee
</span>
</li>
<li class="flex items-start gap-3">
<span class="text-zinc-700 group-hover:text-cyan-400/50 transition-colors">—</span>
<span class="group-hover:text-white text-zinc-400 transition-colors">Multi-Device Support (3)</span>
</li>
</ul>
<div class="mt-24">
<div class="text-4xl lg:text-5xl font-normal tracking-tight text-white/70 group-hover:text-white transition-colors duration-300">
$199.99
</div>
<span class="text-xs text-zinc-600 group-hover:text-cyan-500/70 font-mono transition-colors">
Approx. $16.60/mo
</span>
</div>
</div>
<div class="flex flex-col h-full">
<div class="mb-10">
<span class="block text-zinc-600 group-hover:text-cyan-400/70 text-sm mb-2 font-medium uppercase tracking-wider transition-colors">
Savings
</span>
<div class="text-zinc-400 group-hover:text-cyan-400 transition-colors">Save over $40 yearly</div>
</div>
<div class="mb-12">
<span class="block text-zinc-600 group-hover:text-zinc-500 text-sm mb-2 font-medium uppercase tracking-wider transition-colors">
VIP Support
</span>
<div class="text-zinc-300 group-hover:text-white leading-relaxed text-sm transition-colors">
Dedicated Network Engineer, Priority Queue
</div>
</div>
<div class="mt-auto pt-6">
<button class="w-full rounded-full border border-white/10 bg-zinc-900 pt-4 pr-6 pb-4 pl-6 text-sm text-zinc-300 transition-all duration-300 group-hover:bg-white group-hover:text-black group-hover:shadow-[0_0_20px_rgba(255,255,255,0.2)] group-hover:border-transparent group-hover:scale-[1.02]">
Get Annual Access
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Feature Navigation Grid -->
</section>
<!-- PRICING SECTION -->
<section class="text-white bg-black w-full border-white/10 border-b relative">
<!-- Top Header Section -->
<div class="container border-x [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl border-white/10 mr-auto ml-auto pr-6 pl-6">
</div>
<!-- Pricing Grid -->
<section class="container border-x overflow-hidden [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-center max-w-7xl border-white/10 border-b mr-auto ml-auto pt-32 pr-6 pb-32 pl-6 relative">
<!-- Glow effect behind CTA -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-cyan-900/20 blur-[100px] rounded-full -z-10 pointer-events-none"></div>
<h2 class="text-5xl md:text-7xl font-bold tracking-tighter text-white mb-8 staggered-reveal"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner">Ready</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner">to</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner">feel</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner">the</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner"><span class="reveal-word-mask"><span class="reveal-word-inner">difference?</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></h2>
<p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto aura-reveal" style="animation-delay: 100ms;">
Stop blaming the lag. Start optimizing your connection today with
our 14-day money-back guarantee.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 aura-reveal" style="animation-delay: 100ms;">
<a href="#" class="group relative px-8 py-4 bg-white text-black text-lg font-bold rounded-full transition-transform hover:scale-105 hover:shadow-[0_0_40px_rgba(255,255,255,0.3)]">
<span class="relative z-10 flex items-center gap-2">
Get Started Now
<iconify-icon icon="solar:arrow-right-linear" width="20"></iconify-icon>
</span>
</a>
<a href="#" class="px-8 py-4 bg-transparent border border-white/10 text-white text-lg font-medium rounded-full hover:bg-white/5 transition-colors">
View Pricing
</a>
</div>
<p class="mt-8 text-xs text-zinc-600 font-mono">
NO CREDIT CARD REQUIRED FOR TRIAL • CANCEL ANYTIME
</p>
</section>
</section>
</main>
<footer class="overflow-hidden [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-white font-sans bg-black border-white/10 border-t relative">
<!-- Top Glow Effect -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-px bg-gradient-to-r from-transparent via-white/40 to-transparent"></div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-lg h-32 bg-white/5 blur-[80px] rounded-full pointer-events-none"></div>
<div class="max-w-7xl mx-auto border-x border-white/10 relative z-10">
<!-- Social Media Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 border-b border-white/10">
<!-- YouTube -->
<a href="#" class="group flex items-center justify-between p-6 border-b md:border-b-0 md:border-r border-white/10 hover:bg-white/[0.03] transition-colors">
<div class="flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-white">
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path>
</svg>
<span class="text-sm font-medium text-white">YouTube</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
<!-- Twitter -->
<a href="#" class="group flex items-center justify-between p-6 border-b md:border-b-0 md:border-r border-white/10 hover:bg-white/[0.03] transition-colors">
<div class="flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-white">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
</svg>
<span class="text-sm font-medium text-white">Twitter</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
<!-- Instagram -->
<a href="#" class="group flex items-center justify-between p-6 border-b md:border-b-0 md:border-r border-white/10 hover:bg-white/[0.03] transition-colors">
<div class="flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
<span class="text-sm font-medium text-white">Instagram</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
<!-- Facebook -->
<a href="#" class="group flex items-center justify-between p-6 border-b md:border-b-0 hover:bg-white/[0.03] transition-colors">
<div class="flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-white">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
<span class="text-sm font-medium text-white">Facebook</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Links Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 min-h-[300px]">
<!-- Column 1 -->
<div class="p-8 md:p-12 border-r border-white/10 border-b md:border-b-0">
<h4 class="text-xs font-semibold text-zinc-600 uppercase tracking-widest mb-8">
Product
</h4>
<ul class="space-y-4">
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Technology
</a>
</li>
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Integrations
</a>
</li>
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Releases
</a>
</li>
</ul>
</div>
<!-- Column 2 -->
<div class="p-8 md:p-12 border-r border-white/10 border-b md:border-b-0">
<h4 class="text-xs font-semibold text-zinc-600 uppercase tracking-widest mb-8">
Resources
</h4>
<ul class="space-y-4">
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Docs
</a>
</li>
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
API Reference
</a>
</li>
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Tutorials
</a>
</li>
</ul>
</div>
<!-- Column 3 -->
<div class="p-8 md:p-12 border-r border-white/10 border-b md:border-b-0">
<h4 class="text-xs font-semibold text-zinc-600 uppercase tracking-widest mb-8">
Company
</h4>
<ul class="space-y-4">
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Team
</a>
</li>
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Culture
</a>
</li>
<li class="">
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Jobs
</a>
</li>
</ul>
</div>
<!-- Column 4 -->
<div class="p-8 md:p-12">
<h4 class="text-xs font-semibold text-zinc-600 uppercase tracking-widest mb-8">
Legal
</h4>
<ul class="space-y-4">
<li>
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Imprint
</a>
</li>
<li>
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Data Policy
</a>
</li>
<li>
<a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
Cookie Policy
</a>
</li>
</ul>
</div>
</div>
<!-- Bottom Section -->
<div class="px-8 md:px-12 pb-24 pt-20 flex flex-col lg:flex-row items-start lg:items-end justify-between gap-12">
<div class="max-w-md">
<div class="flex items-center gap-3 mb-6">
<!-- Geometric Logo -->
<span class="text-3xl font-semibold tracking-tighter text-white">
FINEX.
</span>
</div>
<p class="text-sm text-zinc-500 leading-relaxed max-w-xs font-medium">
Optimizing the internet for the next generation of competitive
gaming.
</p>
</div>
<div class="lg:w-auto flex flex-col md:flex-row gap-0 w-full">
<div class="relative w-full md:w-80 group">
<input type="email" placeholder="GAMER@EMAIL.COM" class="placeholder:text-black/50 outline-none uppercase transition-colors text-xs font-medium text-black font-mono bg-white w-full h-full rounded-l-full pt-4 pr-5 pb-4 pl-6">
</div>
<button class="text-[11px] hover:bg-zinc-800 transition-colors uppercase whitespace-nowrap font-semibold text-white tracking-wide bg-zinc-900 border-zinc-800 border pt-4 pr-8 pb-4 pl-8 rounded-r-full">
Subscribe
</button>
</div>
</div>
</div>
</footer>
<script class="">
lucide.createIcons();
</script>
<script class="">
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, { rootMargin: '0px 0px -10% 0px', threshold: 0.1 });
document.querySelectorAll('.aura-reveal').forEach((el) => {
const parent = el.parentElement;
if (parent) {
const siblings = Array.from(parent.children).filter(c => c.classList.contains('aura-reveal'));
const index = siblings.indexOf(el);
if (index > 0) el.style.animationDelay = `${index * 100}ms`;
}
observer.observe(el);
});
document.querySelectorAll('.flashlight-card').forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
card.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`);
card.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
});
});
});
</script>
<script>
const initReveal=()=>{gsap.registerPlugin(ScrollTrigger);const t=document.querySelectorAll(".staggered-reveal");t.forEach(e=>{const r=document.createTreeWalker(e,NodeFilter.SHOW_TEXT,null,!1),n=[];let l;for(;l=r.nextNode();)l.textContent.trim().length>0&&n.push(l);n.forEach(r=>{const n=r.textContent.split(/\s+/).filter(e=>e.trim().length>0),l=document.createDocumentFragment();n.forEach((e,r)=>{const n=document.createElement("span");n.className="reveal-word-mask",n.innerHTML=`<span class="reveal-word-inner">${e}</span>`,l.appendChild(n),r<n.length-1&&l.appendChild(document.createTextNode(" "))}),r.parentNode.replaceChild(l,r)}),gsap.fromTo(e.querySelectorAll(".reveal-word-inner"),{y:"110%"},{y:"0%",duration:1,ease:"power4.out",stagger:.03,scrollTrigger:{trigger:e,start:"top 85%",toggleActions:"play none none reverse"}})})};const check=()=>{window.gsap&&window.ScrollTrigger?initReveal():setTimeout(check,50)};check();
</script>
</body></html>