@import url(https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800,900&display=swap);

@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap);


/* Tailwind CSS — statically compiled, rebuilt against the full current page (no CDN runtime) */
*,:after,:before{--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:rgba(59,130,246,.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:rgba(59,130,246,.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.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-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}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}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}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-left-\[46px\]{left:-46px}.bottom-8{bottom:2rem}.left-1{left:.25rem}.left-1\/2{left:50%}.top-0{top:0}.top-2{top:.5rem}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-16{margin-bottom:4rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-8{height:2rem}.h-\[11px\]{height:11px}.h-full{height:100%}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-8{width:2rem}.w-\[11px\]{width:11px}.w-\[min\(1200px\2c calc\(100\%-48px\)\)\]{width:min(1200px,calc(100% - 48px))}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.max-w-\[480px\]{max-width:480px}.max-w-\[520px\]{max-width:520px}.max-w-\[620px\]{max-width:620px}.max-w-\[640px\]{max-width:640px}.max-w-\[760px\]{max-width:760px}.shrink-0{flex-shrink:0}.-translate-x-1{--tw-translate-x:-0.25rem}.-translate-x-1,.-translate-x-1\/2{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-1\/2{--tw-translate-x:-50%}.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))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-3{row-gap:.75rem}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.p-10{padding:2.5rem}.p-8{padding:2rem}.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}.\!px-4{padding-left:1rem!important;padding-right:1rem!important}.\!px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.\!py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.\!py-2\.5{padding-top:.625rem!important;padding-bottom:.625rem!important}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-16{padding-bottom:4rem}.pl-10{padding-left:2.5rem}.pt-24{padding-top:6rem}.pt-6{padding-top:1.5rem}.\!text-\[10px\]{font-size:10px!important}.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-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[0\.92\]{line-height:.92}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.opacity-40{opacity:.4}.opacity-70{opacity:.7}.outline{outline-style:solid}.filter{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{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.md\:-left-\[62px\]{left:-62px}.md\:mb-20{margin-bottom:5rem}.md\:ml-4{margin-left:1rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-\[200px_1fr\]{grid-template-columns:200px 1fr}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-10{gap:2.5rem}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-36{padding-top:9rem;padding-bottom:9rem}.md\:pb-20{padding-bottom:5rem}.md\:pl-14{padding-left:3.5rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-8xl{font-size:6rem;line-height:1}.md\:text-9xl{font-size:8rem;line-height:1}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-\[1\.4fr_0\.6fr\]{grid-template-columns:1.4fr .6fr}.lg\:flex-row{flex-direction:row}.lg\:items-end{align-items:flex-end}.lg\:justify-between{justify-content:space-between}.lg\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}



/* ---------- theme tokens ---------- */
:root, html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#0c1424; --surface:#131e33; --line:#22314d; --line-2:#33486e;
  --cyan:#00e5ff; --sky:#38bdf8; --txt:#e9eff8; --mut:#93a3bc;
  --card:rgba(19,30,51,0.45); --card-alt:rgba(23,36,60,0.6);
  --nav-bg:rgba(12,20,36,0.78);
  --glow-1:color-mix(in srgb, var(--sky) 9%, transparent);
  --glow-2:color-mix(in srgb, var(--cyan) 6%, transparent);
  --net-static:.65; --net-flow:.6; --net-flow2:.45;
}
html[data-theme="light"]{
  color-scheme:light;
  --ink:#eef3f7; --surface:#ffffff; --line:#d9e3ec; --line-2:#a9bfd0;
  --cyan:#0a8fb0; --sky:#0273b9; --txt:#12202e; --mut:#54677b;
  --card:rgba(255,255,255,0.72); --card-alt:rgba(255,255,255,0.88);
  --nav-bg:rgba(238,243,247,0.82);
  --glow-1:color-mix(in srgb, var(--sky) 13%, transparent);
  --glow-2:color-mix(in srgb, var(--cyan) 10%, transparent);
  --net-static:.9; --net-flow:.85; --net-flow2:.65;
}

/* ---------- smooth global theme cross-fade (color-only, never transform) ---------- */
*,*::before,*::after{
  transition-property:background-color,border-color,color;
  transition-duration:.16s;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}
/* decorative/high-node-count regions: skip per-node transition overhead, they read instantly with no visible lag */
svg *,.animate-marquee *{ transition:none; }
.text-outline{ transition:color .16s cubic-bezier(.4,0,.2,1), -webkit-text-stroke-color .16s cubic-bezier(.4,0,.2,1); }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }
body{
  margin:0; color:var(--txt);
  background-color:var(--ink);
  background-image:
    radial-gradient(950px 520px at 88% -6%, var(--glow-1), transparent 70%),
    radial-gradient(820px 520px at -8% 104%, var(--glow-2), transparent 70%);
  background-attachment:fixed;
  font-family:"IBM Plex Sans", sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{ background:var(--cyan); color:var(--ink); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; border:2px solid var(--ink); }

.font-display{ font-family:"Cabinet Grotesk", sans-serif; }
.mono{ font-family:"JetBrains Mono", monospace; }

/* utilities missing from the compiled layer */
.mt-12{ margin-top:3rem; } .pt-6{ padding-top:1.5rem; }
.text-3xl{ font-size:1.875rem; line-height:2.25rem; }
@media (min-width:768px){
  .md\:flex-row{ flex-direction:row; } .md\:items-center{ align-items:center; } .md\:justify-between{ justify-content:space-between; }
}
.hover\:accent:hover{ color:var(--cyan); }

.surface{ background:var(--nav-bg); border-color:var(--line); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }

/* ---------- cards + smooth cursor tilt + sheen ---------- */
.card{ position:relative; background:var(--card); border:1px solid var(--line);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transform:perspective(1000px) rotateX(0) rotateY(0) translateY(0) scale(1);
  transition-property:background-color,border-color,box-shadow;
  transition-duration:.16s,.16s,.35s; transition-timing-function:ease;
  will-change:transform; }
.card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--cyan) 11%, transparent), transparent 65%); }
.card:hover{ border-color:color-mix(in srgb, var(--cyan) 55%, transparent);
  box-shadow:0 18px 44px -18px color-mix(in srgb, var(--cyan) 22%, transparent); }
.card:hover::after{ opacity:1; }

.hairline{ border-color:var(--line); }
.txt-mut{ color:var(--mut); }
.txt-body{ color:color-mix(in srgb, var(--txt) 78%, var(--mut) 22%); }
.accent{ color:var(--cyan); }

.bg-blueprint{ background-image:
    linear-gradient(color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px);
  background-size:56px 56px; }
html[data-theme="light"] .bg-blueprint{ background-image:
    linear-gradient(color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px); }
.bg-blueprint-fine{ background-image:
    linear-gradient(color-mix(in srgb, var(--sky) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sky) 5%, transparent) 1px, transparent 1px);
  background-size:14px 14px; }

.text-solid{ color:var(--txt); }
.text-outline{ -webkit-text-stroke:1.5px color-mix(in srgb, var(--txt) 85%, transparent); color:transparent; }
html[data-theme="light"] .text-outline{ -webkit-text-stroke-color:color-mix(in srgb, var(--txt) 65%, transparent); }

.noise-overlay{ position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- scroll dynamics: top dim veil + reveals ---------- */
.scroll-dim{ position:fixed; top:0; left:0; right:0; height:34vh; z-index:40; pointer-events:none; opacity:0;
  background:linear-gradient(to bottom, var(--ink) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 48%, transparent 100%); }

/* ---------- shift the centered page content 2.5cm left on wide screens only ---------- */
@media (min-width: 1248px){
  .shell{ margin-left: calc(50% - 600px - 2.5cm) !important; margin-right: auto !important; }
}
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
[data-hero-inner]{ will-change:opacity,transform; }

/* ---------- network ---------- */
.net-static{ opacity:var(--net-static); } .net-flow{ opacity:var(--net-flow); } .net-flow2{ opacity:var(--net-flow2); }
.flow-line{ stroke-dasharray:5 16; animation:pipe-flow 7s linear infinite; }
@keyframes pipe-flow{ to{ stroke-dashoffset:-252; } }
.node-pulse{ animation:node-pulse 3.2s ease-in-out infinite; }
@keyframes node-pulse{ 0%,100%{opacity:.45;} 50%{opacity:1;} }
.animate-marquee{ animation:marquee 90s linear infinite; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.btn-primary{ display:inline-flex; align-items:center; gap:10px; background:var(--cyan); color:var(--ink);
  font-family:"JetBrains Mono", monospace; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--cyan); cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background-color .16s ease, color .16s ease, border-color .16s ease; }
html[data-theme="light"] .btn-primary{ color:#ffffff; }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 8px 28px color-mix(in srgb, var(--cyan) 30%, transparent); }
.btn-ghost{ display:inline-flex; align-items:center; gap:10px; background:color-mix(in srgb, var(--surface) 60%, transparent);
  color:var(--txt); font-family:"JetBrains Mono", monospace; font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--line); cursor:pointer;
  transition:transform .25s ease, border-color .25s ease, color .25s ease, background-color .16s ease; }
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--cyan); color:var(--cyan); }

.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--line); color:var(--txt); background:transparent; cursor:pointer; transition:border-color .2s ease,color .2s ease; }
.icon-btn:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ---------- flags ---------- */
.flag-slot{ display:inline-flex; }
.flag-slot svg{ width:20px; height:14px; display:block; border-radius:2px; box-shadow:0 0 0 1px var(--line-2); }
.lang-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:168px; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.25); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s, background-color .16s ease, border-color .16s ease; z-index:60; }
.lang-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-opt{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; background:transparent; border:0; color:var(--txt);
  font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.05em; cursor:pointer; text-align:left; }
.lang-opt:hover{ background:color-mix(in srgb, var(--cyan) 12%, transparent); }
.lang-opt.active{ color:var(--cyan); }

/* ---------- scroll hint pill (legible in both themes) ---------- */
.scroll-hint{ padding:9px 18px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--card-alt); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--txt); box-shadow:0 4px 18px color-mix(in srgb, var(--ink) 25%, transparent); }

@media (prefers-reduced-motion: reduce){
  .animate-marquee,.flow-line,.node-pulse{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}


.lf-progress {
  -webkit-appearance: none;
  -moz-apperance: none;
  width: 100%;
  /* margin: 0 10px; */
  height: 4px;
  border-radius: 3px;
  cursor: pointer;
}
.lf-progress:focus {
  outline: none;
  border: none;
}
.lf-progress::-moz-range-track {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}
.lf-progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  height: 13px;
  width: 13px;
  border: 0;
  border-radius: 50%;
  background: #0fccce;
  cursor: pointer;
}
.lf-progress::-moz-range-thumb {
  -moz-appearance: none !important;
  height: 13px;
  width: 13px;
  border: 0;
  border-radius: 50%;
  background: #0fccce;
  cursor: pointer;
}
.lf-progress::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.lf-progress::-ms-fill-lower {
  background: #ccc;
  border-radius: 3px;
}
.lf-progress::-ms-fill-upper {
  background: #ccc;
  border-radius: 3px;
}
.lf-progress::-ms-thumb {
  border: 0;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #0fccce;
  cursor: pointer;
}
.lf-progress:focus::-ms-fill-lower {
  background: #ccc;
}
.lf-progress:focus::-ms-fill-upper {
  background: #ccc;
}
.lf-player-container :focus {
  outline: 0;
}
.lf-popover {
  position: relative;
}

.lf-popover-content {
  display: inline-block;
  position: absolute;
  opacity: 1;
  visibility: visible;
  transform: translate(0, -10px);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.lf-popover-content.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0px);
}

.lf-player-btn-container {
  display: flex;
  align-items: center;
}
.lf-player-btn {
  cursor: pointer;
  fill: #999;
  width: 14px;
}

.lf-player-btn.active {
  fill: #555;
}

.lf-popover {
  position: relative;
}

.lf-popover-content {
  display: inline-block;
  position: absolute;
  background-color: #ffffff;
  opacity: 1;

  transform: translate(0, -10px);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
  padding: 10px;
}

.lf-popover-content.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0px);
}

.lf-arrow {
  position: absolute;
  z-index: -1;
  content: '';
  bottom: -9px;
  border-style: solid;
  border-width: 10px 10px 0px 10px;
}

.lf-left-align,
.lf-left-align .lfarrow {
  left: 0;
  right: unset;
}

.lf-right-align,
.lf-right-align .lf-arrow {
  right: 0;
  left: unset;
}

.lf-text-input {
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 3px;
  width: 60px;
  margin: 0;
}

.lf-color-picker {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 90px;
}

.lf-color-selectors {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lf-color-component {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  align-items: center;
  justify-content: center;
}

.lf-color-component strong {
  width: 40px;
}

.lf-color-component input[type='range'] {
  margin: 0 0 0 10px;
}

.lf-color-component input[type='number'] {
  width: 50px;
  margin: 0 0 0 10px;
}

.lf-color-preview {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-left: 5px;
}

.lf-preview {
  height: 60px;
  width: 60px;
}

.lf-popover-snapshot {
  width: 150px;
}
.lf-popover-snapshot h5 {
  margin: 5px 0 10px 0;
  font-size: 0.75rem;
}
.lf-popover-snapshot a {
  display: block;
  text-decoration: none;
}
.lf-popover-snapshot a:before {
  content: '⥼';
  margin-right: 5px;
}
.lf-popover-snapshot .lf-note {
  display: block;
  margin-top: 10px;
  color: #999;
}
.lf-player-controls > div {
  margin-right: 5px;
  margin-left: 5px;
}
.lf-player-controls > div:first-child {
  margin-left: 0px;
}
.lf-player-controls > div:last-child {
  margin-right: 0px;
}


.lf-progress {
  -webkit-appearance: none;
  -moz-apperance: none;
  width: 100%;
  /* margin: 0 10px; */
  height: 4px;
  border-radius: 3px;
  cursor: pointer;
}
.lf-progress:focus {
  outline: none;
  border: none;
}
.lf-progress::-moz-range-track {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}
.lf-progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  height: 13px;
  width: 13px;
  border: 0;
  border-radius: 50%;
  background: #0fccce;
  cursor: pointer;
}
.lf-progress::-moz-range-thumb {
  -moz-appearance: none !important;
  height: 13px;
  width: 13px;
  border: 0;
  border-radius: 50%;
  background: #0fccce;
  cursor: pointer;
}
.lf-progress::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.lf-progress::-ms-fill-lower {
  background: #ccc;
  border-radius: 3px;
}
.lf-progress::-ms-fill-upper {
  background: #ccc;
  border-radius: 3px;
}
.lf-progress::-ms-thumb {
  border: 0;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #0fccce;
  cursor: pointer;
}
.lf-progress:focus::-ms-fill-lower {
  background: #ccc;
}
.lf-progress:focus::-ms-fill-upper {
  background: #ccc;
}
.lf-player-container :focus {
  outline: 0;
}
.lf-popover {
  position: relative;
}

.lf-popover-content {
  display: inline-block;
  position: absolute;
  opacity: 1;
  visibility: visible;
  transform: translate(0, -10px);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.lf-popover-content.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0px);
}

.lf-player-btn-container {
  display: flex;
  align-items: center;
}
.lf-player-btn {
  cursor: pointer;
  fill: #999;
  width: 14px;
}

.lf-player-btn.active {
  fill: #555;
}

.lf-popover {
  position: relative;
}

.lf-popover-content {
  display: inline-block;
  position: absolute;
  background-color: #ffffff;
  opacity: 1;

  transform: translate(0, -10px);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
  padding: 10px;
}

.lf-popover-content.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0px);
}

.lf-arrow {
  position: absolute;
  z-index: -1;
  content: '';
  bottom: -9px;
  border-style: solid;
  border-width: 10px 10px 0px 10px;
}

.lf-left-align,
.lf-left-align .lfarrow {
  left: 0;
  right: unset;
}

.lf-right-align,
.lf-right-align .lf-arrow {
  right: 0;
  left: unset;
}

.lf-text-input {
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 3px;
  width: 60px;
  margin: 0;
}

.lf-color-picker {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 90px;
}

.lf-color-selectors {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lf-color-component {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  align-items: center;
  justify-content: center;
}

.lf-color-component strong {
  width: 40px;
}

.lf-color-component input[type='range'] {
  margin: 0 0 0 10px;
}

.lf-color-component input[type='number'] {
  width: 50px;
  margin: 0 0 0 10px;
}

.lf-color-preview {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-left: 5px;
}

.lf-preview {
  height: 60px;
  width: 60px;
}

.lf-popover-snapshot {
  width: 150px;
}
.lf-popover-snapshot h5 {
  margin: 5px 0 10px 0;
  font-size: 0.75rem;
}
.lf-popover-snapshot a {
  display: block;
  text-decoration: none;
}
.lf-popover-snapshot a:before {
  content: '⥼';
  margin-right: 5px;
}
.lf-popover-snapshot .lf-note {
  display: block;
  margin-top: 10px;
  color: #999;
}
.lf-player-controls > div {
  margin-right: 5px;
  margin-left: 5px;
}
.lf-player-controls > div:first-child {
  margin-left: 0px;
}
.lf-player-controls > div:last-child {
  margin-right: 0px;
}

/* ---------- explicit card navigation CTA ---------- */
.card-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan);
  transition:gap .2s ease, opacity .2s ease;
}

.card:hover .card-cta{
  gap:13px;
}

.card-link{
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}

.card-link:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
}

/* ---------- CTA clarity upgrade ---------- */
.card-cta{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:10px;
  margin-top:28px;
  padding:10px 15px;
  border:1px solid color-mix(in srgb, var(--cyan) 45%, var(--line));
  border-radius:999px;
  background:color-mix(in srgb, var(--cyan) 7%, transparent);
  color:var(--cyan);
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    gap .2s ease;
}

.card-cta:hover{
  transform:translateY(-2px);
  gap:14px;
  border-color:var(--cyan);
  background:color-mix(in srgb, var(--cyan) 13%, transparent);
}

.card-cta:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
}

/* ---------- CTA visual clarity: blue boxed style ---------- */
.card-cta{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:9px;

  margin-top:28px;
  padding:10px 16px;

  border:1px solid var(--cyan);
  border-radius:8px;

  background:color-mix(in srgb, var(--cyan) 12%, transparent);
  color:var(--cyan);

  text-decoration:none;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    gap .18s ease;
}

.card-cta:hover{
  background:color-mix(in srgb, var(--cyan) 22%, transparent);
  border-color:var(--cyan);
  box-shadow:0 6px 22px color-mix(in srgb, var(--cyan) 22%, transparent);
  transform:translateY(-2px);
  gap:13px;
}

.card-cta:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

/* ---------- unify CTA boxes with existing AI buttons ---------- */
.card-cta{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:9px;
  margin-top:28px;

  padding:10px 16px;

  border:1px solid var(--cyan);
  border-radius:8px;

  background:color-mix(in srgb, var(--cyan) 12%, transparent);
  color:var(--cyan);

  text-decoration:none;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .18s ease,
    border-color .18s ease,
    gap .18s ease;
}

.card-cta:hover{
  transform:translateY(-3px);
  gap:13px;

  background:color-mix(in srgb, var(--cyan) 18%, transparent);
  border-color:var(--cyan);

  box-shadow:
    0 8px 28px
    color-mix(in srgb, var(--cyan) 30%, transparent);
}


/* ---------- capabilities workflow ---------- */

.cap-workflow{
  margin-top:34px;
  padding:28px 30px 26px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--card-alt) 72%,transparent);
}

.cap-workflow-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
}

.cap-workflow-head > span:first-child{
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}

.cap-workflow-rule{
  display:block;
  width:100%;
  height:1px;
  background:var(--line-2);
}

.cap-workflow-steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:14px;
}

.cap-workflow-step{
  min-height:78px;
  padding:15px 16px;
  border:1px solid var(--line);
  background:var(--surface);
}

.cap-workflow-step span{
  display:block;
  margin-bottom:8px;
  font-size:9px;
  letter-spacing:.16em;
}

.cap-workflow-step strong{
  display:block;
  font-family:"Cabinet Grotesk",sans-serif;
  font-size:15px;
  line-height:1.25;
  color:var(--txt);
}

.cap-workflow-arrow{
  color:var(--cyan);
  font-family:"JetBrains Mono",monospace;
  font-size:18px;
}

.cap-workflow-result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.cap-workflow-result > span{
  max-width:640px;
  font-size:11px;
  line-height:1.7;
  letter-spacing:.04em;
}

.cap-workflow-result .card-cta{
  flex:0 0 auto;
  margin:0;
}

@media(max-width:900px){
  .cap-workflow-steps{
    grid-template-columns:1fr;
  }

  .cap-workflow-arrow{
    transform:rotate(90deg);
    justify-self:center;
  }

  .cap-workflow-result{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* Language selector links on static locale URLs */
.lang-opt{text-decoration:none;}