@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-ring-offset-background: var(--background); --color-navy: var(--navy); --color-navy-deep: var(--navy-deep); --color-navy-soft: var(--navy-soft); --color-electric: var(--electric); --color-cyan: var(--cyan); --color-silver: var(--silver); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;}:root{--radius:.5rem;--navy-deep:oklch(24% .1 261);--navy:oklch(31% .11 260);--navy-soft:oklch(39% .1 259);--electric:oklch(58% .21 258);--cyan:oklch(50% .15 232);--silver:oklch(30% .045 258);--background:oklch(97.5% .012 250);--foreground:oklch(21% .05 262);--card:oklch(100% 0 0);--card-foreground:oklch(21% .05 262);--popover:oklch(100% 0 0);--popover-foreground:oklch(21% .05 262);--primary:oklch(53% .21 259);--primary-foreground:oklch(99% .005 250);--secondary:oklch(96% .012 250);--secondary-foreground:oklch(25% .05 262);--muted:oklch(96% .01 250);--muted-foreground:oklch(52% .03 255);--accent:oklch(94% .03 225);--accent-foreground:oklch(25% .06 258);--destructive:oklch(58% .22 25);--destructive-foreground:oklch(99% .005 250);--success:oklch(62% .15 155);--success-foreground:oklch(99% .005 250);--warning:oklch(75% .15 75);--warning-foreground:oklch(22% .05 262);--border:oklch(91% .012 250);--input:oklch(91% .012 250);--ring:oklch(58% .18 250);--chart-1:oklch(53% .21 259);--chart-2:oklch(78% .15 214);--chart-3:oklch(35% .09 262);--chart-4:oklch(62% .15 155);--chart-5:oklch(75% .15 75);--sidebar:oklch(99% .006 250);--sidebar-foreground:oklch(25% .06 262);--sidebar-primary:oklch(58% .21 258);--sidebar-primary-foreground:oklch(99% .005 250);--sidebar-accent:oklch(94% .025 240);--sidebar-accent-foreground:oklch(25% .07 260);--sidebar-border:oklch(90% .015 250);--sidebar-ring:oklch(60% .15 250);--gradient-brand:linear-gradient(135deg, var(--electric), var(--cyan));--gradient-navy:linear-gradient(165deg, oklch(99% .008 250), oklch(96.5% .018 248) 55%, oklch(94.5% .028 246));--gradient-metal:linear-gradient(120deg, oklch(45% .05 260), oklch(32% .07 260) 45%, oklch(50% .08 250));--glow-cyan:0 0 40px -8px color-mix(in oklab, var(--cyan) 55%, transparent);--glow-electric:0 0 60px -12px color-mix(in oklab, var(--electric) 65%, transparent);--shadow-card:0 18px 40px -24px color-mix(in oklab, var(--navy-deep) 55%, transparent);--transition-smooth:.3s cubic-bezier(.22, 1, .36, 1)}.dark{--background:oklch(24% .1 261);--foreground:oklch(97% .008 250);--card:oklch(29% .1 261);--card-foreground:oklch(97% .008 250);--popover:oklch(29% .1 261);--popover-foreground:oklch(97% .008 250);--primary:oklch(62% .19 255);--primary-foreground:oklch(99% .005 250);--secondary:oklch(34% .09 261);--secondary-foreground:oklch(97% .008 250);--muted:oklch(34% .09 261);--muted-foreground:oklch(72% .03 250);--accent:oklch(38% .1 252);--accent-foreground:oklch(97% .008 250);--border:oklch(100% 0 0/.12);--input:oklch(100% 0 0/.16);--ring:oklch(65% .15 245)}@layer base{*{border-color:var(--color-border)}html{scroll-behavior:smooth}body{background-color:var(--color-background);color:var(--color-foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:0}}@utility surface-navy{background: var(--gradient-navy); color: var(--foreground);}@utility section-tint{background: color-mix(in oklab, var(--secondary) 72%, transparent); border-block: 1px solid var(--border);}@utility section-shell{width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 1.5rem; }}@utility text-gradient-brand{background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;}@utility text-metal{background: var(--gradient-metal); -webkit-background-clip: text; background-clip: text; color: transparent;}@utility grid-overlay{background-image: linear-gradient(to right, color-mix(in oklab, var(--navy) 8%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--navy) 8%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 72%);}@utility glow-ring{box-shadow: var(--glow-electric);}@utility glass-panel{background: oklab(100% 0 0/.78); backdrop-filter: blur(14px); border: 1px solid color-mix(in oklab, var(--electric) 14%, transparent);}@utility card-tech{background: color-mix(in oklab, var(--card) 96%, var(--cyan) 4%); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth); &:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--cyan) 45%, transparent); box-shadow: var(--glow-cyan); }}@utility card-tech-dark{background: color-mix(in oklab, var(--card) 97%, var(--cyan) 3%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth); &:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--electric) 32%, transparent); box-shadow: var(--shadow-card); }}@utility reveal{opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); &[data-visible="true"] { opacity: 1; transform: none; }}@utility ambient-orb{position: absolute; border-radius: 9999px; filter: blur(110px); opacity: .16; pointer-events: none;}@keyframes brand-drift{0%,to{transform:translate(0)scale(1)}50%{transform:translate(3%,-4%)scale(1.08)}}@keyframes brand-sweep{0%{transform:translate(-120%)}to{transform:translate(120%)}}@utility animate-drift{animation: brand-drift 18s ease-in-out infinite;}@keyframes tech-float{0%,to{transform:translate(0)}25%{transform:translate(2px,-6px)}50%{transform:translate(-1px,-3px)}75%{transform:translate(1px,-5px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 0 0 color-mix(in oklab, var(--cyan) 25%, transparent)}50%{box-shadow:0 0 24px 4px color-mix(in oklab, var(--cyan) 12%, transparent)}}@keyframes gradient-shift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@utility animate-float{animation: tech-float 8s ease-in-out infinite;}@utility animate-pulse-glow{animation: pulse-glow 3s ease-in-out infinite;}@utility animate-gradient{background-size: 200% 200%; animation: gradient-shift 12s ease infinite;}@utility tech-scanline{position: relative; overflow: hidden; &::after { content: ""; position: absolute; inset: -100% 0 0 0; height: 8px; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--cyan) 18%, transparent), transparent); opacity: .35; animation: scanline 7s linear infinite; pointer-events: none; }}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(1200%)}}@keyframes neon-breathe{0%,to{opacity:.35;transform:scale(.94)}50%{opacity:.85;transform:scale(1.04)}}@utility logo-static{isolation: isolate; animation: none !important; transform: none !important; & img, & picture { animation: none !important; transform: none !important; transition: none !important; }}.logo-neon,.logo-neon .logo-neon-aura,.logo-neon .logo-neon-art,.logo-neon.is-breathing .logo-neon-art,.logo-neon.is-intense .logo-neon-art{animation:none!important;transform:none!important}@utility animate-neon{animation: neon-breathe 5.5s ease-in-out infinite;}@utility animate-sweep{animation: brand-sweep 6s linear infinite;}@keyframes grid-drift{0%{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}@keyframes trace-x{0%{opacity:0;transform:translate(-30%)}15%{opacity:.9}85%{opacity:.9}to{opacity:0;transform:translate(130%)}}@keyframes trace-y{0%{opacity:0;transform:translateY(-30%)}15%{opacity:.9}85%{opacity:.9}to{opacity:0;transform:translateY(130%)}}@keyframes border-light{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes signal-blink{0%,to{opacity:.35}50%{opacity:1}}@utility tech-grid{position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, color-mix(in oklab, var(--electric) 9%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--electric) 9%, transparent) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%); animation: grid-drift 40s linear infinite;}@utility tech-traces{position: absolute; inset: 0; overflow: hidden; pointer-events: none;}@utility tech-trace-h{position: absolute; left: 0; height: 1px; width: 38%; background: linear-gradient(to right, transparent, color-mix(in oklab, var(--cyan) 70%, transparent), transparent); animation: trace-x 11s cubic-bezier(.4, 0, .2, 1) infinite;}@utility tech-trace-v{position: absolute; top: 0; width: 1px; height: 38%; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--electric) 65%, transparent), transparent); animation: trace-y 13s cubic-bezier(.4, 0, .2, 1) infinite;}@utility tech-wash{position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, color-mix(in oklab, var(--electric) 7%, transparent), transparent 40%, color-mix(in oklab, var(--cyan) 6%, transparent) 70%, transparent); background-size: 220% 220%; animation: gradient-shift 28s ease-in-out infinite;}@utility border-light{position: relative; overflow: hidden; isolation: isolate; &::before { content: ""; position: absolute; inset: -60%; z-index: -2; background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in oklab, var(--cyan) 55%, transparent) 84%, color-mix(in oklab, var(--electric) 60%, transparent) 92%, transparent 100%); opacity: 0; transition: opacity .5s ease; animation: border-light 7s linear infinite; } &::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: var(--card); } &:hover::before, &:focus-within::before { opacity: 1; }}@utility signal-dot{display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: var(--cyan); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 18%, transparent); animation: signal-blink 2.6s ease-in-out infinite;}@utility lift{transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s cubic-bezier(.22, 1, .36, 1), border-color .32s ease; &:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px color-mix(in oklab, var(--electric) 45%, transparent); }}@utility icon-nudge{transition: transform .26s cubic-bezier(.22, 1, .36, 1); :where(a, button):hover > &, :where(a, button):focus-visible > & { transform: translateX(3px); }}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tech-grid,.tech-trace-h,.tech-trace-v,.tech-wash,.signal-dot,.border-light:before{animation:none!important}.tech-trace-h,.tech-trace-v{display:none}.reveal{opacity:1;transform:none}*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.site-public .bg-black\/20,.site-public .bg-black\/25,.site-public .bg-black\/30,.site-public .bg-black\/40{background-color:color-mix(in oklab, var(--secondary) 72%, transparent)}.site-public .border-white\/10,.site-public .border-white\/15,.site-public .border-white\/20{border-color:var(--border)}.site-public .text-silver,.site-public .text-white{color:var(--foreground)}.site-public .text-silver\/90,.site-public .text-silver\/85,.site-public .text-silver\/80,.site-public .text-silver\/75,.site-public .text-silver\/70,.site-public .text-silver\/65,.site-public .text-silver\/60,.site-public .text-silver\/55,.site-public .text-silver\/50,.site-public .text-silver\/40{color:var(--muted-foreground)}.site-public :is(a,button,input,select,textarea):focus-visible,.portal-shell :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--ring);outline-offset:3px}
