Developer Studio Feature Section

<section class="bg-[#151b23] text-slate-200 antialiased min-h-screen relative selection:bg-blue-500/30 font-sans">
<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}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.left-1\/4{left:25%}.top-0{top:0px}.bottom-0{bottom:0px}.left-0{left:0px}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.mt-8{margin-top:2rem}.-ml-4{margin-left:-1rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.flex{display:flex}.grid{display:grid}.h-\[1px\]{height:1px}.h-auto{height:auto}.h-full{height:100%}.h-\[80\%\]{height:80%}.h-8{height:2rem}.h-2{height:0.5rem}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-full{width:100%}.w-8{width:2rem}.w-\[150\%\]{width:150%}.w-2{width:0.5rem}.max-w-\[1280px\]{max-width:1280px}.max-w-\[220px\]{max-width:220px}.max-w-\[280px\]{max-width:280px}.flex-\[2\]{flex:2}.flex-\[1\]{flex:1}.flex-\[1\.2\]{flex:1.2}.flex-\[1\.8\]{flex:1.8}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.gap-1{gap:0.25rem}.overflow-hidden{overflow:hidden}.break-all{word-break:break-all}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-slate-400\/20{border-color:rgb(148 163 184 / 0.2)}.bg-\[\#151b23\]{--tw-bg-opacity:1;background-color:rgb(21 27 35 / var(--tw-bg-opacity, 1))}.bg-\[\#1e2631\]{--tw-bg-opacity:1;background-color:rgb(30 38 49 / var(--tw-bg-opacity, 1))}.bg-\[\#0b1120\]{--tw-bg-opacity:1;background-color:rgb(11 17 32 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.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-\[\#0b1120\]\/90{--tw-gradient-from:rgb(11 17 32 / 0.9) var(--tw-gradient-from-position);--tw-gradient-to:rgb(11 17 32 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-blue-500\/30{--tw-gradient-to:rgb(59 130 246 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(59 130 246 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-blue-500\/20{--tw-gradient-to:rgb(59 130 246 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(59 130 246 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#0b1120\]\/40{--tw-gradient-to:rgb(11 17 32 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(11 17 32 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-\[\#0b1120\]\/95{--tw-gradient-to:rgb(11 17 32 / 0.95) var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.object-center{object-position:center}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.font-light{font-weight:300}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}.leading-none{line-height:1}.tracking-\[0\.1em\]{letter-spacing:0.1em}.tracking-tight{letter-spacing:-0.025em}.tracking-widest{letter-spacing:0.1em}.tracking-tighter{letter-spacing:-0.05em}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-20{opacity:0.2}.opacity-\[0\.15\]{opacity:0.15}.opacity-\[0\.02\]{opacity:0.02}.opacity-40{opacity:0.4}.mix-blend-screen{mix-blend-mode:screen}.mix-blend-luminosity{mix-blend-mode:luminosity}.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.45\)\]{--tw-shadow:0 20px 60px rgba(0,0,0,0.45);--tw-shadow-colored:0 20px 60px 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\(59\2c 130\2c 246\2c 0\.8\)\]{--tw-shadow:0 0 10px rgba(59,130,246,0.8);--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)}.grayscale{--tw-grayscale:grayscale(100%);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)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;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}.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}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.duration-300{transition-duration:300ms}.duration-1000{transition-duration:1000ms}.selection\:bg-blue-500\/30 *::selection{background-color:rgb(59 130 246 / 0.3)}.selection\:bg-blue-500\/30::selection{background-color:rgb(59 130 246 / 0.3)}.after\:pointer-events-none::after{content:var(--tw-content);pointer-events:none}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:inset-0::after{content:var(--tw-content);inset:0px}.after\:rounded-3xl::after{content:var(--tw-content);border-radius:1.5rem}.after\:bg-gradient-to-br::after{content:var(--tw-content);background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.after\:from-slate-400\/20::after{content:var(--tw-content);--tw-gradient-from:rgb(148 163 184 / 0.2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(148 163 184 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.after\:from-slate-400\/10::after{content:var(--tw-content);--tw-gradient-from:rgb(148 163 184 / 0.1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(148 163 184 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.after\:to-transparent::after{content:var(--tw-content);--tw-gradient-to:transparent var(--tw-gradient-to-position)}.after\:p-\[1px\]::after{content:var(--tw-content);padding:1px}.after\:\[mask-clip\:content-box\2c border-box\]::after{content:var(--tw-content);-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box}.after\:\[mask-composite\:exclude\]::after{content:var(--tw-content);-webkit-mask-composite:xor;mask-composite:exclude}.after\:\[mask-image\:linear-gradient\(\#fff_0_0\)\2c linear-gradient\(\#fff_0_0\)\]::after{content:var(--tw-content);-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0)}.hover\:-translate-y-1:hover{--tw-translate-y:-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))}.hover\:after\:from-blue-500\/40:hover::after{content:var(--tw-content);--tw-gradient-from:rgb(59 130 246 / 0.4) var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:after\:from-blue-400\/30:hover::after{content:var(--tw-content);--tw-gradient-from:rgb(96 165 250 / 0.3) var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:-translate-y-0\.5{--tw-translate-y:-0.125rem;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\.5{--tw-translate-x:0.125rem;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\:rotate-90{--tw-rotate:90deg;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\:scale-105{--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))}.group:hover .group-hover\:border-blue-500\/30{border-color:rgb(59 130 246 / 0.3)}.group:hover .group-hover\:bg-blue-500\/10{background-color:rgb(59 130 246 / 0.1)}.group:hover .group-hover\:text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-50{opacity:0.5}@media (min-width: 768px){.md\:h-\[800px\]{height:800px}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:gap-6{gap:1.5rem}.md\:p-8{padding:2rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}}</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}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.left-1\/4{left:25%}.top-0{top:0px}.bottom-0{bottom:0px}.left-0{left:0px}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.mt-8{margin-top:2rem}.-ml-4{margin-left:-1rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.flex{display:flex}.grid{display:grid}.h-\[1px\]{height:1px}.h-auto{height:auto}.h-full{height:100%}.h-\[80\%\]{height:80%}.h-8{height:2rem}.h-2{height:0.5rem}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-full{width:100%}.w-8{width:2rem}.w-\[150\%\]{width:150%}.w-2{width:0.5rem}.max-w-\[1280px\]{max-width:1280px}.max-w-\[220px\]{max-width:220px}.max-w-\[280px\]{max-width:280px}.flex-\[2\]{flex:2}.flex-\[1\]{flex:1}.flex-\[1\.2\]{flex:1.2}.flex-\[1\.8\]{flex:1.8}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.gap-1{gap:0.25rem}.overflow-hidden{overflow:hidden}.break-all{word-break:break-all}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-slate-400\/20{border-color:rgb(148 163 184 / 0.2)}.bg-\[\#151b23\]{--tw-bg-opacity:1;background-color:rgb(21 27 35 / var(--tw-bg-opacity, 1))}.bg-\[\#1e2631\]{--tw-bg-opacity:1;background-color:rgb(30 38 49 / var(--tw-bg-opacity, 1))}.bg-\[\#0b1120\]{--tw-bg-opacity:1;background-color:rgb(11 17 32 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.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-\[\#0b1120\]\/90{--tw-gradient-from:rgb(11 17 32 / 0.9) var(--tw-gradient-from-position);--tw-gradient-to:rgb(11 17 32 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-blue-500\/30{--tw-gradient-to:rgb(59 130 246 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(59 130 246 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-blue-500\/20{--tw-gradient-to:rgb(59 130 246 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(59 130 246 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#0b1120\]\/40{--tw-gradient-to:rgb(11 17 32 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(11 17 32 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-\[\#0b1120\]\/95{--tw-gradient-to:rgb(11 17 32 / 0.95) var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.object-center{object-position:center}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.font-light{font-weight:300}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}.leading-none{line-height:1}.tracking-\[0\.1em\]{letter-spacing:0.1em}.tracking-tight{letter-spacing:-0.025em}.tracking-widest{letter-spacing:0.1em}.tracking-tighter{letter-spacing:-0.05em}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-20{opacity:0.2}.opacity-\[0\.15\]{opacity:0.15}.opacity-\[0\.02\]{opacity:0.02}.opacity-40{opacity:0.4}.mix-blend-screen{mix-blend-mode:screen}.mix-blend-luminosity{mix-blend-mode:luminosity}.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.45\)\]{--tw-shadow:0 20px 60px rgba(0,0,0,0.45);--tw-shadow-colored:0 20px 60px 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\(59\2c 130\2c 246\2c 0\.8\)\]{--tw-shadow:0 0 10px rgba(59,130,246,0.8);--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)}.grayscale{--tw-grayscale:grayscale(100%);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)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;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}.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}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.duration-300{transition-duration:300ms}.duration-1000{transition-duration:1000ms}.selection\:bg-blue-500\/30 *::selection{background-color:rgb(59 130 246 / 0.3)}.selection\:bg-blue-500\/30::selection{background-color:rgb(59 130 246 / 0.3)}.after\:pointer-events-none::after{content:var(--tw-content);pointer-events:none}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:inset-0::after{content:var(--tw-content);inset:0px}.after\:rounded-3xl::after{content:var(--tw-content);border-radius:1.5rem}.after\:bg-gradient-to-br::after{content:var(--tw-content);background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.after\:from-slate-400\/20::after{content:var(--tw-content);--tw-gradient-from:rgb(148 163 184 / 0.2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(148 163 184 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.after\:from-slate-400\/10::after{content:var(--tw-content);--tw-gradient-from:rgb(148 163 184 / 0.1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(148 163 184 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.after\:to-transparent::after{content:var(--tw-content);--tw-gradient-to:transparent var(--tw-gradient-to-position)}.after\:p-\[1px\]::after{content:var(--tw-content);padding:1px}.after\:\[mask-clip\:content-box\2c border-box\]::after{content:var(--tw-content);-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box}.after\:\[mask-composite\:exclude\]::after{content:var(--tw-content);-webkit-mask-composite:xor;mask-composite:exclude}.after\:\[mask-image\:linear-gradient\(\#fff_0_0\)\2c linear-gradient\(\#fff_0_0\)\]::after{content:var(--tw-content);-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0)}.hover\:-translate-y-1:hover{--tw-translate-y:-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))}.hover\:after\:from-blue-500\/40:hover::after{content:var(--tw-content);--tw-gradient-from:rgb(59 130 246 / 0.4) var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:after\:from-blue-400\/30:hover::after{content:var(--tw-content);--tw-gradient-from:rgb(96 165 250 / 0.3) var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.group:hover .group-hover\:-translate-y-0\.5{--tw-translate-y:-0.125rem;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\.5{--tw-translate-x:0.125rem;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\:rotate-90{--tw-rotate:90deg;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\:scale-105{--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))}.group:hover .group-hover\:border-blue-500\/30{border-color:rgb(59 130 246 / 0.3)}.group:hover .group-hover\:bg-blue-500\/10{background-color:rgb(59 130 246 / 0.1)}.group:hover .group-hover\:text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-50{opacity:0.5}@media (min-width: 768px){.md\:h-\[800px\]{height:800px}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:gap-6{gap:1.5rem}.md\:p-8{padding:2rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}}</style>

<canvas id="bg-canvas" class="fixed inset-0 pointer-events-none z-0 opacity-20 mix-blend-screen" width="1595" height="1219"></canvas>

<main class="relative z-10 w-full max-w-[1280px] mx-auto px-4 py-6 md:py-12 min-h-screen flex items-center justify-center">
        
        <!-- Instrumentation Grid -->
        <div class="w-full grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 h-auto md:h-[800px]">
            
            <!-- Column 1: Core Status -->
            <div class="flex flex-col gap-4 md:gap-6 h-full">
                <!-- Primary System Card -->
                <div class="group relative flex-[2] rounded-3xl bg-[#1e2631] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.45)] after:absolute after:inset-0 after:rounded-3xl after:p-[1px] after:bg-gradient-to-br after:from-slate-400/20 after:to-transparent after:[mask-image:linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] after:[mask-clip:content-box,border-box] after:[mask-composite:exclude] after:pointer-events-none transition-all duration-700 hover:-translate-y-1 hover:after:from-blue-500/40">
                    <!-- Edge Light -->
                    <div class="absolute top-0 left-1/4 w-1/2 h-[1px] bg-gradient-to-r from-transparent via-blue-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    
                    <div class="relative z-20 p-6 md:p-8 flex justify-between items-start">
                        <p class="text-xl md:text-2xl tracking-tight leading-snug font-normal text-white max-w-[220px]">
                            Architecture optimized.<br>
                            Latency minimized.<br>
                            Deployment ready.
                        </p>
                        <div class="flex items-center gap-2 text-xs uppercase tracking-[0.1em] font-light text-slate-400">
                            <iconify-icon icon="solar:cpu-linear" stroke-width="1.5" class="text-lg text-blue-400 transition-transform duration-700 group-hover:rotate-90"></iconify-icon>
                            <span>Status</span>
                        </div>
                    </div>
                    <!-- Abstract Tech Overlay -->
                    <img src="https://images.unsplash.com/photo-1652611059016-48c49aa6a573?ixid=M3w3NTc5NzN8MHwxfHNlYXJjaHw5fHxhYnN0cmFjdHxlbnwxfDJ8fHwxNzcyNTE2ODMwfDA&amp;ixlib=rb-4.1.0&amp;w=800&amp;fit=max&amp;auto=format&amp;q=80" alt="Abstract Data" class="absolute bottom-0 left-0 w-full h-[80%] object-cover object-center z-10 mix-blend-screen opacity-[0.15] grayscale transition-transform duration-700 group-hover:scale-105" style="mask-image: linear-gradient(transparent, black 40%);">
                </div>

                <!-- Network Node Card -->
                <div class="group relative flex-[1] rounded-3xl bg-[#0b1120] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.45)] after:absolute after:inset-0 after:rounded-3xl after:p-[1px] after:bg-gradient-to-br after:from-slate-400/10 after:to-transparent after:[mask-image:linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] after:[mask-clip:content-box,border-box] after:[mask-composite:exclude] after:pointer-events-none transition-all duration-700 hover:-translate-y-1 hover:after:from-blue-400/30">
                    <div class="p-6 md:p-8 flex flex-col justify-between h-full relative z-10">
                        <div class="flex justify-between items-start w-full">
                            <div class="flex items-center gap-2 text-xs uppercase tracking-[0.1em] font-light text-slate-400">
                                <iconify-icon icon="solar:server-square-linear" stroke-width="1.5" class="text-lg text-slate-500"></iconify-icon>
                                <span>Network</span>
                            </div>
                            <button class="w-8 h-8 rounded-full border border-slate-400/20 bg-[#1e2631] text-slate-300 flex items-center justify-center transition-all duration-300 group-hover:bg-blue-500/10 group-hover:border-blue-500/30 group-hover:text-blue-400">
                                <iconify-icon icon="solar:arrow-right-up-linear" stroke-width="1.5" class="text-lg transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"></iconify-icon>
                            </button>
                        </div>
                        <div class="flex flex-col gap-1 mt-8">
                            <span class="text-sm font-normal text-white transition-colors">us-east-cluster-01</span>
                            <p class="text-xs font-light text-slate-500">Uptime: 99.998% • Latency: 12ms</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Column 2: Telemetry & Logs -->
            <div class="flex flex-col gap-4 md:gap-6 h-full">
                <!-- Console Log Card -->
                <div class="group relative flex-[1.2] rounded-3xl bg-[#0b1120] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.45)] after:absolute after:inset-0 after:rounded-3xl after:p-[1px] after:bg-gradient-to-br after:from-slate-400/10 after:to-transparent after:[mask-image:linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] after:[mask-clip:content-box,border-box] after:[mask-composite:exclude] after:pointer-events-none transition-all duration-700 hover:-translate-y-1 hover:after:from-blue-400/30">
                    <div class="absolute top-0 left-1/4 w-1/2 h-[1px] bg-gradient-to-r from-transparent via-blue-500/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="p-6 md:p-8 flex flex-col justify-between h-full relative z-10">
                        <div class="flex flex-col gap-4">
                            <p class="text-base md:text-lg tracking-tight leading-relaxed font-light text-slate-300">
                                <span class="text-blue-400 font-normal">&gt;</span> Initialization sequence complete. All microservices responding within defined operational parameters. Handshake verified.
                            </p>
                            <p class="text-xs font-light text-slate-500 font-mono">sys_admin @ root — 10:42:05 UTC</p>
                        </div>
                        <div class="flex items-center gap-2 text-xs uppercase tracking-[0.1em] font-light text-slate-400 mt-8">
                            <iconify-icon icon="solar:code-square-linear" stroke-width="1.5" class="text-lg text-slate-500"></iconify-icon>
                            <span>Console</span>
                        </div>
                    </div>
                </div>

                <!-- Throughput Card -->
                <div class="group relative flex-[1.8] rounded-3xl bg-[#1e2631] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.45)] after:absolute after:inset-0 after:rounded-3xl after:p-[1px] after:bg-gradient-to-br after:from-slate-400/20 after:to-transparent after:[mask-image:linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] after:[mask-clip:content-box,border-box] after:[mask-composite:exclude] after:pointer-events-none transition-all duration-700 hover:-translate-y-1 hover:after:from-blue-500/40">
                    
                    <!-- Dither/Grid Background Effect -->
                    <div class="absolute inset-0 opacity-[0.15] pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, rgba(148, 163, 184, 0.4) 1px, transparent 0); background-size: 16px 16px;"></div>
                    
                    <!-- Repeating Data Stream Text -->
                    <div class="absolute inset-0 flex flex-wrap content-start overflow-hidden opacity-[0.02] pointer-events-none z-0 select-none font-mono" aria-hidden="true">
                        <script>
                            const streamText = "01101000 01100101 01111000 ";
                            document.write(`<p class="text-4xl md:text-5xl font-light leading-none tracking-widest break-all w-[150%] -ml-4 text-blue-400">${streamText.repeat(80)}</p>`);
                        </script><p class="text-4xl md:text-5xl font-light leading-none tracking-widest break-all w-[150%] -ml-4 text-blue-400">01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 </p><p class="text-4xl md:text-5xl font-light leading-none tracking-widest break-all w-[150%] -ml-4 text-blue-400">01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 01101000 01100101 01111000 </p>
                    </div>
                    
                    <div class="relative z-10 p-6 md:p-8 flex flex-col items-center justify-center h-full text-center">
                        <div class="flex flex-col items-center justify-center flex-grow transition-transform duration-700 group-hover:scale-105">
                            <h2 class="text-6xl md:text-7xl tracking-tighter font-normal text-white">4.8<span class="text-4xl text-blue-400 font-light">M</span></h2>
                            <p class="text-xs font-light uppercase tracking-[0.1em] text-slate-400 mt-4">Events Processed / Sec</p>
                        </div>
                        <div class="flex items-center gap-2 text-xs uppercase tracking-[0.1em] font-light text-slate-500 mt-auto pt-8">
                            <iconify-icon icon="solar:chart-square-linear" stroke-width="1.5" class="text-lg"></iconify-icon>
                            <span>Throughput</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Column 3: Workspace -->
            <div class="flex flex-col h-full">
                <!-- Environment Card -->
                <div class="group relative flex-1 rounded-3xl bg-[#0b1120] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.45)] after:absolute after:inset-0 after:rounded-3xl after:p-[1px] after:bg-gradient-to-br after:from-slate-400/20 after:to-transparent after:[mask-image:linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] after:[mask-clip:content-box,border-box] after:[mask-composite:exclude] after:pointer-events-none transition-all duration-700 hover:-translate-y-1 hover:after:from-blue-500/40">
                    
                    <img src="https://images.unsplash.com/photo-1491975474562-1f4e30bc9468?ixid=M3w3NTc5NzN8MHwxfHNlYXJjaHwxNHx8d29ya3NwYWNlfGVufDF8MXx8fDE3NzI1MjI3NTN8MA&amp;ixlib=rb-4.1.0&amp;w=800&amp;fit=max&amp;auto=format&amp;q=80" alt="Development Workspace" class="absolute inset-0 w-full h-full object-cover object-center z-0 opacity-40 mix-blend-luminosity transition-transform duration-1000 group-hover:scale-105 group-hover:opacity-50" style="">
                    
                    <div class="absolute inset-0 bg-gradient-to-b from-[#0b1120]/90 via-[#0b1120]/40 to-[#0b1120]/95 z-10"></div>

                    <div class="relative z-20 p-6 md:p-8 flex flex-col justify-between h-full text-white">
                        <div class="flex items-center justify-between gap-2 text-xs uppercase tracking-[0.1em] font-light text-slate-400 w-full">
                            <span>Environment</span>
                            <div class="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.8)]"></div>
                        </div>
                        
                        <div class="mt-auto">
                            <p class="text-sm md:text-base font-light text-slate-300 leading-relaxed max-w-[280px]">
                                Precision tooling engineered for modern development workflows. Build, test, and deploy with absolute clarity.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
                            const streamText = "01101000 01100101 01111000 ";
                            document.write(`<p class="text-4xl md:text-5xl font-light leading-none tracking-widest break-all w-[150%] -ml-4 text-blue-400">${streamText.repeat(80)}</p>`);
                        </script>
<script>
        const canvas = document.getElementById('bg-canvas');
        const ctx = canvas.getContext('2d');
        let width, height;
        let particles = [];

        function initCanvas() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            particles = [];
            const particleCount = Math.floor(width / 40); // Less dense
            
            for(let i = 0; i < particleCount; i++) {
                particles.push({
                    x: Math.random() * width,
                    y: Math.random() * height,
                    length: Math.random() * 80 + 20,
                    speed: Math.random() * 0.2 + 0.05, // Slower
                    opacity: Math.random() * 0.3 + 0.1
                });
            }
        }

        function animate() {
            ctx.clearRect(0, 0, width, height);
            
            particles.forEach(p => {
                p.y -= p.speed; // Drift upwards like data
                if(p.y < -p.length) p.y = height + p.length;
                
                const gradient = ctx.createLinearGradient(p.x, p.y + p.length, p.x, p.y);
                gradient.addColorStop(0, `rgba(96, 165, 250, 0)`); // Tailwind blue-400
                gradient.addColorStop(1, `rgba(96, 165, 250, ${p.opacity})`);
                
                ctx.beginPath();
                ctx.moveTo(p.x, p.y + p.length);
                ctx.lineTo(p.x, p.y);
                ctx.strokeStyle = gradient;
                ctx.lineWidth = 1;
                ctx.stroke();
            });
            
            requestAnimationFrame(animate);
        }

        window.addEventListener('resize', initCanvas);
        initCanvas();
        animate();
    </script>
</section>