/* CMU Concrete: slab serif from the Computer Modern family (TeX). Self-hosted. Roman + Bold only, no italic. */@font-face {  font-family: "CMU Concrete";  font-style: normal;  font-weight: 400;  font-display: swap;  src: url("/fonts/cmu-concrete-roman.woff") format("woff");}@font-face {  font-family: "CMU Concrete";  font-style: normal;  font-weight: 700;  font-display: swap;  src: url("/fonts/cmu-concrete-bold.woff") format("woff");} @tailwind base;@tailwind components;@tailwind utilities; @layer base {  :root {    /* Synthetic Sciences warm-dark palette */    --background: 30 14% 7%;    --foreground: 42 32% 90%;     --primary: 44 45% 86%;    --primary-foreground: 30 14% 8%;     --secondary: 30 10% 13%;    --secondary-foreground: 42 32% 90%;     --muted: 30 10% 12%;    --muted-foreground: 38 12% 58%;     --accent: 36 55% 70%;    --accent-foreground: 30 14% 8%;     --border: 32 10% 17%;    --input: 32 10% 17%;    --ring: 44 45% 70%;     --radius: 0.75rem;     --contour: 38 14% 22%;     /* Coral accent for section labels and hot states. */    --accent-coral: 14 62% 66%;     --font-display: "CMU Concrete", "Computer Modern Concrete", ui-serif, Georgia, serif;    --font-body: "CMU Concrete", "Computer Modern Concrete", ui-serif, Georgia, serif;    --font-mono: "CMU Concrete", "Computer Modern Concrete", ui-serif, Georgia, serif;     /* Real terminal font for terminal mocks and data readouts only. */    --font-terminal: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;  }} @layer base {  * {    @apply border-border;    font-style: normal;  }   html {    scroll-behavior: smooth;    scroll-padding-top: 32px;  }   body {    @apply bg-background text-foreground;    font-family: var(--font-body);    font-style: normal;    font-feature-settings: "kern", "liga";    font-weight: 400;    -webkit-font-smoothing: antialiased;    text-rendering: optimizeLegibility;  }   /* Quiet warm scrollbar so the chrome matches the page. */  ::-webkit-scrollbar {    width: 10px;  }  ::-webkit-scrollbar-track {    background: hsl(var(--background));  }  ::-webkit-scrollbar-thumb {    background: hsl(var(--border));    border: 2px solid hsl(var(--background));  }  ::-webkit-scrollbar-thumb:hover {    background: hsl(var(--muted-foreground) / 0.5);  }   :focus-visible {    outline: 1px solid hsl(var(--ring) / 0.8);    outline-offset: 2px;  }   h1,  h2,  h3,  h4,  h5,  h6 {    font-family: var(--font-display);    font-style: normal;    font-weight: 400;    letter-spacing: -0.005em;  }   /* No italic anywhere. */  em,  i,  cite,  address,  var,  dfn {    font-style: normal;  }} @layer utilities {  .font-mono {    font-family: var(--font-mono);  }  .font-display {    font-family: var(--font-display);  }  .font-body {    font-family: var(--font-body);  }  .font-terminal {    font-family: var(--font-terminal);  }   /* Hero entrance: one orchestrated stagger on load. */  @keyframes rise-in {    from {      opacity: 0;      transform: translateY(18px);      filter: blur(5px);    }    to {      opacity: 1;      transform: translateY(0);      filter: blur(0);    }  }  .rise {    opacity: 0;    animation: rise-in 1100ms cubic-bezier(0.19, 1, 0.22, 1) forwards;  }  @media (prefers-reduced-motion: reduce) {    .rise {      animation: none;      opacity: 1;    }  }   /* One premium primary button. Cream on dark, with a quiet rest shadow that     deepens and lifts on hover. */  .btn-primary {    background: hsl(var(--primary));    color: hsl(var(--primary-foreground));    box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.55);    transition:      transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1),      box-shadow 300ms ease,      background-color 300ms ease;  }  .btn-primary:hover {    background: hsl(44 48% 90%);    transform: translateY(-1.5px);    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.85);  }  .btn-primary:active {    transform: translateY(0);    box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.55);  }  @media (prefers-reduced-motion: reduce) {    .btn-primary:hover {      transform: none;    }  }   /* Giant clipped footer wordmark. */  .footer-watermark {    font-family: var(--font-display);    font-size: clamp(64px, 12.5vw, 190px);    line-height: 0.72;    letter-spacing: -0.045em;    color: hsl(var(--foreground) / 0.05);    user-select: none;    pointer-events: none;    white-space: nowrap;  }   /* Paper grain noise. */  .grain::before {    content: "";    position: absolute;    inset: 0;    pointer-events: none;    opacity: 0.08;    mix-blend-mode: overlay;    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.72 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");  }   /* Faint cartographic graticule. */  .graticule {    background-image:      linear-gradient(hsl(var(--contour) / 0.35) 1px, transparent 1px),      linear-gradient(90deg, hsl(var(--contour) / 0.35) 1px, transparent 1px);    background-size: 80px 80px;    background-position: -1px -1px;  }   .text-balance {    text-wrap: balance;  }   /* ASCII art canvas: fixed-pitch, non-selectable. */  .ascii {    font-family: var(--font-terminal);    white-space: pre;    line-height: 1.05;    letter-spacing: 0;    user-select: none;    -webkit-user-select: none;  }   .vignette {    -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%);    mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%);  }   /* Hero text legibility without darkening the backdrop. */  .hero-text {    text-shadow:      0 1px 2px rgba(0, 0, 0, 0.85),      0 2px 12px rgba(0, 0, 0, 0.7);  }   /* Blinking terminal caret. */  @keyframes term-blink {    0%,    50% {      opacity: 1;    }    51%,    100% {      opacity: 0;    }  }  .terminal-cursor {    display: inline-block;    width: 8px;    height: 14px;    background-color: hsl(var(--foreground) / 0.85);    vertical-align: text-bottom;    margin-left: 2px;    animation: term-blink 1.1s steps(1) infinite;  }   /* Full-bleed marquee: edge-to-edge auto-scrolling strip. */  @keyframes marquee-x {    from {      transform: translateX(0);    }    to {      transform: translateX(-50%);    }  }  .marquee-mask {    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);    mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);  }  .marquee-track {    display: flex;    align-items: center;    width: max-content;    animation: marquee-x 80s linear infinite;  }  .marquee-track:hover {    animation-play-state: paused;  }  .marquee-group {    display: flex;    align-items: center;    gap: 44px;    padding-right: 44px;    flex-shrink: 0;  }  @media (prefers-reduced-motion: reduce) {    .marquee-track {      animation: none;    }  }   /* Graph-paper grids for product visual cards. */  .dot-grid {    background-image: radial-gradient(hsl(var(--foreground) / 0.07) 1px, transparent 1px);    background-size: 14px 14px;    background-position: 0 0;  }  .grid-paper {    background-image:      linear-gradient(hsl(var(--foreground) / 0.05) 1px, transparent 1px),      linear-gradient(90deg, hsl(var(--foreground) / 0.05) 1px, transparent 1px);    background-size: 22px 22px;    background-position: 0 0;  }   /* Stronger fractal-noise grain layer for visual cards. */  .grain-overlay {    position: relative;    isolation: isolate;  }  .grain-overlay::after {    content: "";    position: absolute;    inset: 0;    pointer-events: none;    opacity: 0.1;    mix-blend-mode: overlay;    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.72 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");    z-index: 1;  }  .grain-overlay > * {    position: relative;    z-index: 2;  }   /* Faint scanline texture. Subtle CRT vibe. */  .scanlines {    position: relative;  }  .scanlines::before {    content: "";    position: absolute;    inset: 0;    pointer-events: none;    background-image: repeating-linear-gradient(      to bottom,      transparent 0px,      transparent 2px,      hsl(var(--foreground) / 0.025) 2px,      hsl(var(--foreground) / 0.025) 3px    );    z-index: 1;  }   /* Pixelated/dithered gradient backdrops. Vivid radial mesh + SVG     fractal-noise dither for the "8-bit sunset" look. */  .dither-warm {    position: relative;    background:      radial-gradient(70% 130% at 100% 50%, hsl(15 80% 56% / 0.95) 0%, transparent 55%),      radial-gradient(60% 120% at 85% 60%, hsl(345 70% 55% / 0.85) 0%, transparent 55%),      radial-gradient(80% 140% at 100% 80%, hsl(280 60% 45% / 0.75) 0%, transparent 60%),      radial-gradient(90% 110% at 95% 30%, hsl(35 80% 60% / 0.6) 0%, transparent 50%), hsl(var(--background));    isolation: isolate;  }  .dither-warm::before {    content: "";    position: absolute;    inset: 0;    pointer-events: none;    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 9 -4'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");    mix-blend-mode: multiply;    opacity: 0.85;  }   .dither-red {    position: relative;    background:      radial-gradient(70% 90% at 50% 60%, hsl(8 80% 50% / 0.85) 0%, transparent 55%),      radial-gradient(50% 80% at 60% 50%, hsl(345 70% 55% / 0.7) 0%, transparent 50%),      radial-gradient(80% 100% at 50% 80%, hsl(20 70% 38% / 0.55) 0%, transparent 60%), hsl(var(--background));    isolation: isolate;  }  .dither-red::before {    content: "";    position: absolute;    inset: 0;    pointer-events: none;    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 9 -4'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");    mix-blend-mode: multiply;    opacity: 0.85;  }   .dither-purple {    position: relative;    background:      radial-gradient(70% 100% at 30% 60%, hsl(280 65% 55% / 0.85) 0%, transparent 55%),      radial-gradient(60% 80% at 50% 70%, hsl(255 55% 55% / 0.7) 0%, transparent 55%),      radial-gradient(80% 100% at 70% 50%, hsl(220 50% 35% / 0.55) 0%, transparent 60%), hsl(var(--background));    isolation: isolate;  }  .dither-purple::before {    content: "";    position: absolute;    inset: 0;    pointer-events: none;    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 9 -4'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");    mix-blend-mode: multiply;    opacity: 0.85;  }   .dither-blue {    position: relative;    background:      radial-gradient(70% 100% at 60% 60%, hsl(225 60% 50% / 0.85) 0%, transparent 55%),      radial-gradient(60% 80% at 30% 50%, hsl(280 50% 50% / 0.65) 0%, transparent 55%),      radial-gradient(80% 110% at 75% 75%, hsl(245 55% 35% / 0.6) 0%, transparent 60%), hsl(var(--background));    isolation: isolate;  }  .dither-blue::before {    content: "";    position: absolute;    inset: 0;    pointer-events: none;    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 9 -4'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");    mix-blend-mode: multiply;    opacity: 0.85;  }   /* Inner content above the dither overlay. */  .dither-content {    position: relative;    z-index: 1;  }   /* Typographic wordmark row items, single color, no boxes. */  .trust-wordmark {    font-family: var(--font-terminal);    font-size: 14px;    line-height: 1;    letter-spacing: 0.01em;    color: hsl(var(--foreground) / 0.45);    white-space: nowrap;    flex-shrink: 0;    transition: color 280ms ease;  }  .trust-wordmark:hover {    color: hsl(var(--foreground) / 0.85);  }  .trust-dot {    width: 4px;    height: 4px;    border-radius: 9999px;    background: hsl(var(--foreground) / 0.18);    flex-shrink: 0;  }   /* ATMOSPHERE: wispy backdrop for visual cards. Dark warm base + blurred     light smoke trails + grain. Optional star field via .atmosphere-stars. */  .atmosphere {    position: relative;    isolation: isolate;    overflow: hidden;    background:      radial-gradient(120% 80% at 30% 110%, hsl(28 18% 4% / 0.92) 0%, transparent 60%),      linear-gradient(180deg, hsl(28 12% 9%) 0%, hsl(28 14% 6%) 100%);  }  .atmosphere::before {    content: "";    position: absolute;    inset: -14%;    pointer-events: none;    z-index: 0;    background-image:      radial-gradient(ellipse 70% 9% at 22% 28%, hsl(40 12% 84% / 0.2) 0%, transparent 70%),      radial-gradient(ellipse 78% 8% at 78% 46%, hsl(40 12% 84% / 0.15) 0%, transparent 70%),      radial-gradient(ellipse 62% 7% at 32% 74%, hsl(40 12% 84% / 0.11) 0%, transparent 70%),      radial-gradient(ellipse 82% 6% at 75% 88%, hsl(40 12% 84% / 0.08) 0%, transparent 70%);    filter: blur(11px);    transform: rotate(-8deg);  }  .atmosphere::after {    content: "";    position: absolute;    inset: 0;    pointer-events: none;    z-index: 1;    opacity: 0.22;    mix-blend-mode: overlay;    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.72 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");  }  .atmosphere > * {    position: relative;    z-index: 2;  }   .atmosphere-stars {    background-image:      radial-gradient(circle at 8% 22%, hsl(0 0% 100% / 0.55) 0.5px, transparent 1.2px),      radial-gradient(circle at 22% 14%, hsl(0 0% 100% / 0.4) 0.5px, transparent 1.2px),      radial-gradient(circle at 38% 34%, hsl(0 0% 100% / 0.32) 0.5px, transparent 1.2px),

Lines 1–500 of 644. Load more