openship 0.1.1 → 0.1.8

package/apps/web/src/styles/landing.css

@@ -1,951 +0,0 @@
-/*
- * ─────────────────────────────────────────────────────────────────
- *  OPENSHIP LANDING — ANIMATIONS & VISUAL FX
- *  Premium mesh-gradient blobs, grid, terminal, navbar pill.
- * ─────────────────────────────────────────────────────────────────
- *
- *  DESIGN LANGUAGE — LARGE ROUNDED
- *  ──────────────────────────────────────────────────────
- *  This project uses a consistently large border-radius style.
- *  Every surface — cards, tiles, icons, badges, sections —
- *  should feel soft and generously rounded.
- *
- *  Reference radii (keep these in sync when adding new elements):
- *    • Full-width sections (DarkSection)  → clamp(32px, 5vw, 56px)
- *    • Cards / visual containers          → 24px
- *    • Tiles / inner panels               → 16px
- *    • Icon badges / small elements       → 12px
- *    • Pills / status badges              → 999px  (full pill)
- *    • Circles (dots, avatars)            → 50%
- *
- *  When in doubt, round MORE, not less.
- * ─────────────────────────────────────────────────────────────────
- */
-
-
-/* ══════════════════════════════════════════════════════════════
-   NAVBAR — floating pill
-   ══════════════════════════════════════════════════════════════ */
-
-.nav-pill {
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-  background: rgba(255,255,255,.72);
-  box-shadow:
-    0 0 0 1px rgba(0,0,0,.03),
-    0 2px 8px rgba(0,0,0,.04);
-  transition: box-shadow .25s, background .25s;
-}
-.nav-pill:hover {
-  box-shadow:
-    0 0 0 1px rgba(0,0,0,.04),
-    0 4px 16px rgba(0,0,0,.06);
-}
-.nav-pill-item {
-  letter-spacing: 0.005em;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   HERO — clean bottom aurora glow
-   ══════════════════════════════════════════════════════════════ */
-
-.hero-section {
-  background-color: var(--th-bg-page);
-}
-
-/* ── Grain ───────────────────────────────────────────────────── */
-.hero-grain {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  background-size: 180px;
-  opacity: 0.018;
-  mix-blend-mode: multiply;
-  pointer-events: none;
-}
-
-/* ── Grid ────────────────────────────────────────────────────── */
-.hero-grid {
-  background-image:
-    linear-gradient(var(--th-on-05) 1px, transparent 1px),
-    linear-gradient(90deg, var(--th-on-05) 1px, transparent 1px);
-  background-size: 72px 72px;
-  mask-image: radial-gradient(ellipse 70% 45% at 50% 65%, rgba(0,0,0,.2) 0%, transparent 70%);
-  -webkit-mask-image: radial-gradient(ellipse 70% 45% at 50% 65%, rgba(0,0,0,.2) 0%, transparent 70%);
-  pointer-events: none;
-}
-
-/* ── Aurora container — sits at the bottom, bleeds beyond viewport ── */
-.hero-aurora {
-  position: absolute;
-  bottom: -6%;
-  left: -5%;
-  right: -5%;
-  height: 60%;
-  pointer-events: none;
-  overflow: visible;
-}
-
-/* ── Core glow — rich violet, vivid, centered ───────────────── */
-.hero-aurora-core {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 85%;
-  height: 100%;
-  transform: translateX(-50%);
-  background: radial-gradient(
-    ellipse 55% 75% at 50% 90%,
-    rgba(139, 92, 246, .55) 0%,
-    rgba(124, 58, 237, .35) 20%,
-    rgba(109, 40, 217, .15) 45%,
-    transparent 70%
-  );
-  filter: blur(45px);
-  animation: aurora-breathe 16s ease-in-out infinite;
-}
-
-/* ── Wings — flanking color accents ─────────────────────────── */
-.hero-aurora-wing {
-  position: absolute;
-  bottom: 0;
-  width: 55%;
-  height: 95%;
-  filter: blur(55px);
-}
-
-/* Left wing — warm amber / orange glow */
-.hero-aurora-wing--left {
-  left: -3%;
-  background: radial-gradient(
-    ellipse 60% 70% at 65% 85%,
-    rgba(245, 158, 11, .34) 0%,
-    rgba(251, 191, 36, .18) 30%,
-    rgba(234, 88, 12, .08) 55%,
-    transparent 72%
-  );
-  animation: aurora-sway-left 20s ease-in-out infinite;
-}
-
-/* Right wing — soft peach-yellow that bleeds into the violet core */
-.hero-aurora-wing--right {
-  right: -3%;
-  background: radial-gradient(
-    ellipse 60% 70% at 35% 85%,
-    rgba(251, 191, 36, .30) 0%,
-    rgba(253, 224, 71, .14) 30%,
-    rgba(167, 139, 250, .10) 55%,
-    transparent 72%
-  );
-  animation: aurora-sway-right 22s ease-in-out infinite;
-}
-
-/* ── Aurora keyframes ────────────────────────────────────────── */
-@keyframes aurora-breathe {
-  0%, 100% { transform: translateX(-50%) scale(1);     opacity: 1; }
-  50%      { transform: translateX(-50%) scale(1.05);   opacity: 0.88; }
-}
-@keyframes aurora-sway-left {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  33%      { transform: translate(18px, -8px) scale(1.05); }
-  66%      { transform: translate(-12px, 6px) scale(0.97); }
-}
-@keyframes aurora-sway-right {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  33%      { transform: translate(-16px, -6px) scale(1.04); }
-  66%      { transform: translate(14px, 5px) scale(0.97); }
-}
-
-/* ── Second headline ─────────────────────────────────────────── */
-.hero-headline-second {
-  color: var(--th-on-40);
-}
-
-/* ── Stack ticker ────────────────────────────────────────────── */
-.hero-ticker-mask {
-  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-}
-.hero-ticker {
-  animation: hero-ticker-scroll 30s linear infinite;
-}
-@keyframes hero-ticker-scroll {
-  0%   { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
-}
-
-/* ── Edge fades ──────────────────────────────────────────────── */
-.hero-edge-fade-top {
-  background: linear-gradient(to bottom, var(--th-bg-page), transparent);
-  pointer-events: none;
-}
-.hero-edge-fade-bottom {
-  background: linear-gradient(to top, var(--th-bg-page), transparent);
-  pointer-events: none;
-  z-index: 5;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   FADE-IN ANIMATIONS
-   ══════════════════════════════════════════════════════════════ */
-
-@keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(20px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-.animate-fade-in-up {
-  animation: fade-in-up 0.65s cubic-bezier(.16,1,.3,1) both;
-}
-.animate-delay-100 { animation-delay: 0.1s; }
-.animate-delay-200 { animation-delay: 0.2s; }
-.animate-delay-300 { animation-delay: 0.3s; }
-.animate-delay-400 { animation-delay: 0.4s; }
-.animate-delay-500 { animation-delay: 0.5s; }
-.animate-delay-600 { animation-delay: 0.6s; }
-
-
-/* ══════════════════════════════════════════════════════════════
-   TERMINAL MOCKUP
-   ══════════════════════════════════════════════════════════════ */
-
-/* Large rounded: terminal → 1.25rem (20px) */
-.terminal {
-  background-color: var(--th-terminal-bg);
-  border-radius: 1.25rem;
-  overflow: hidden;
-  box-shadow:
-    0 20px 60px rgba(0,0,0,.18),
-    0 4px 16px rgba(0,0,0,.10);
-}
-.terminal-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 12px 16px;
-  background-color: rgba(255,255,255,.04);
-  border-bottom: 1px solid rgba(255,255,255,.06);
-}
-.terminal-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-.terminal-dot-red    { background-color: #ff5f57; }
-.terminal-dot-yellow { background-color: #febc2e; }
-.terminal-dot-green  { background-color: #28c840; }
-.terminal-body {
-  padding: 20px;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  font-size: 13px;
-  line-height: 1.7;
-  color: var(--th-terminal-text);
-}
-.terminal-body .t-muted  { color: var(--th-terminal-muted); }
-.terminal-body .t-green  { color: var(--th-terminal-green); }
-.terminal-body .t-red    { color: var(--th-terminal-red); }
-.terminal-body .t-blue   { color: var(--th-terminal-blue); }
-.terminal-body .t-yellow { color: var(--th-terminal-yellow); }
-
-
-/* ══════════════════════════════════════════════════════════════
-   GRADIENT TEXT
-   ══════════════════════════════════════════════════════════════ */
-
-.gradient-text {
-  background: linear-gradient(135deg, var(--th-text-heading) 0%, var(--th-on-60) 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.accent-gradient-text {
-  background: linear-gradient(135deg, var(--th-accent-indigo), var(--th-accent-purple), var(--th-accent-pink));
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   SECTION UTILITIES
-   ══════════════════════════════════════════════════════════════ */
-
-.section-divider {
-  height: 1px;
-  background: linear-gradient(90deg, transparent 0%, var(--th-bd-default) 30%, var(--th-bd-default) 70%, transparent 100%);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   DARK SECTION — Reusable full-width dark container
-   Scroll-linked scale 0.88→1→0.88 with GSAP (desktop only).
-   ══════════════════════════════════════════════════════════════ */
-
-.dark-section {
-  position: relative;
-  z-index: 20;
-}
-
-/* Large rounded: DarkSection → clamp(32px, 5vw, 56px) */
-.dark-section__inner {
-  position: relative;
-  background: #09090b;
-  overflow: hidden;
-  border-radius: clamp(32px, 5vw, 56px);
-  box-shadow: 0 -20px 80px rgba(0,0,0,.18);
-  transform-origin: top center;
-}
-@media (max-width: 768px) {
-  .dark-section__inner {
-    border-radius: 0;
-    box-shadow: none;
-  }
-}
-
-/* Background texture image + black/80 overlay */
-.dark-section__inner::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background:
-    linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.95)),
-    url('https://oblien.com/textures/4.jpeg') center / cover no-repeat;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* All direct children sit above the texture */
-.dark-section__inner > * {
-  position: relative;
-  z-index: 2;
-}
-
-/* Top edge glow line */
-.dark-section__edge-glow {
-  position: absolute;
-  top: 0;
-  left: 10%;
-  right: 10%;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
-  z-index: 3;
-}
-
-
-
-/* ══════════════════════════════════════════════════════════════
-   HOW IT WORKS
-   ══════════════════════════════════════════════════════════════ */
-
-.hiw-card:hover {
-  border-color: var(--bdr-h) !important;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   FEATURES — Premium card layout with GSAP scrub
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── Section background — subtle tint band ───────────────────── */
-/* feat-outer provides spacing; DarkSection provides the dark bg */
-.feat-outer {
-  position: relative;
-  padding: 0 1rem;
-  margin-top: clamp(80px, 10vw, 140px);
-}
-@media (max-width: 768px) {
-  .feat-outer { padding: 0; margin-top: 64px; }
-}
-.feat-section {
-  /* background is now handled by DarkSection__inner */
-  position: relative;
-}
-.feat-edge-aurora-container {
-  opacity: 0.5;
-  position: fixed
-}
-/* ── Scroll-linked edge aurora — multi-shade, hero-style ──────── */
-.feat-edge-aurora {
-  position: fixed;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 420px;
-  height: 360px;
-  pointer-events: none;
-  z-index: 0;
-  opacity: 0;
-  will-change: opacity;
-}
-.feat-edge-aurora--left  { left: -180px; }
-.feat-edge-aurora--right { right: -180px; }
-
-/* Core glow — primary color, centered */
-.feat-edge-aurora__core {
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  filter: blur(90px);
-  transition: background 0.6s ease;
-  animation: edge-aurora-breathe 16s ease-in-out infinite;
-}
-.feat-edge-aurora--left .feat-edge-aurora__core {
-  background: radial-gradient(
-    ellipse 60% 70% at 65% 50%,
-    var(--lc, transparent) 0%,
-    transparent 72%
-  );
-}
-.feat-edge-aurora--right .feat-edge-aurora__core {
-  background: radial-gradient(
-    ellipse 60% 70% at 35% 50%,
-    var(--rc, transparent) 0%,
-    transparent 72%
-  );
-}
-
-/* Wings — offset accent blobs */
-.feat-edge-aurora__wing {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  transition: background 0.6s ease;
-}
-.feat-edge-aurora__wing--upper {
-  top: -15%;
-  left: 10%;
-  width: 75%;
-  height: 60%;
-}
-.feat-edge-aurora__wing--lower {
-  bottom: -10%;
-  right: 5%;
-  width: 70%;
-  height: 55%;
-}
-
-/* Left side wings */
-.feat-edge-aurora--left .feat-edge-aurora__wing--upper {
-  background: radial-gradient(
-    ellipse 55% 65% at 60% 55%,
-    var(--lu, transparent) 0%,
-    transparent 70%
-  );
-  animation: edge-sway-1 20s ease-in-out infinite;
-}
-.feat-edge-aurora--left .feat-edge-aurora__wing--lower {
-  background: radial-gradient(
-    ellipse 55% 65% at 50% 45%,
-    var(--ll, transparent) 0%,
-    transparent 70%
-  );
-  animation: edge-sway-2 22s ease-in-out infinite;
-}
-
-/* Right side wings */
-.feat-edge-aurora--right .feat-edge-aurora__wing--upper {
-  background: radial-gradient(
-    ellipse 55% 65% at 40% 55%,
-    var(--ru, transparent) 0%,
-    transparent 70%
-  );
-  animation: edge-sway-2 20s ease-in-out infinite;
-}
-.feat-edge-aurora--right .feat-edge-aurora__wing--lower {
-  background: radial-gradient(
-    ellipse 55% 65% at 50% 45%,
-    var(--rl, transparent) 0%,
-    transparent 70%
-  );
-  animation: edge-sway-1 22s ease-in-out infinite;
-}
-
-/* Keyframes */
-@keyframes edge-aurora-breathe {
-  0%, 100% { transform: scale(1);     opacity: 1;    }
-  50%      { transform: scale(1.06);   opacity: 0.85; }
-}
-@keyframes edge-sway-1 {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  33%      { transform: translate(14px, -10px) scale(1.05); }
-  66%      { transform: translate(-10px, 8px) scale(0.96); }
-}
-@keyframes edge-sway-2 {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  33%      { transform: translate(-12px, -6px) scale(1.04); }
-  66%      { transform: translate(10px, 5px) scale(0.97); }
-}
-
-@media (max-width: 768px) {
-  .feat-edge-aurora { width: 280px; height: 240px; }
-  .feat-edge-aurora--left  { left: -140px; }
-  .feat-edge-aurora--right { right: -140px; }
-  .feat-edge-aurora__core { filter: blur(65px); }
-  .feat-edge-aurora__wing { filter: blur(55px); }
-}
-
-/* ── Scroll-drawn SVG border ─────────────────────────────────── */
-/*
- * Two mirrored SVG paths that draw from center-top outward,
- * down both sides, and close at center-bottom on scroll.
- * JS sets strokeDasharray/strokeDashoffset in real pixels;
- * GSAP scrubs dashoffset to 0.
- */
-
-.feat-container {
-  position: relative;
-}
-
-.feat-draw-border {
-  /* sized by JS (90 vw), centered in the section */
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  pointer-events: none;
-  z-index: 0;
-  overflow: visible;
-}
-
-.feat-draw-border__path {
-  fill: none;
-  /* stroke set by JS STROKE_COLOR const in useDrawBorder hook */
-  stroke-width: 1;
-  vector-effect: non-scaling-stroke;
-  stroke-linecap: square;
-  stroke-linejoin: miter;
-}
-@media (max-width: 768px) {
-  .feat-draw-border {
-    display: none;
-  }
-}
-
-/* ── Card stack ──────────────────────────────────────────────── */
-.feat-cards-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-/* ── Each feature card — full-width, divider separated ───────── */
-/* Progressive enhancement — hidden ONLY while GSAP manages scroll-reveal.
-   Without JS (or if GSAP fails) the class is never added → content stays visible. */
-.feat-animated .feat-header,
-.feat-animated .feat-card,
-.feat-animated .feat-card-text,
-.feat-animated .feat-card-visual,
-.feat-animated .feat-build-item,
-.feat-animated .feat-bullets li {
-  opacity: 0;
-}
-
-.feat-card {
-  position: relative;
-  will-change: transform, opacity;
-  padding: 56px 0;
-}
-.feat-card:first-child {
-  /* no CSS border — SVG dividers handle all separators */
-}
-.feat-card:last-child {
-  padding-bottom: 48px;
-}
-
-/* ── Edge blobs — large ambient glows that bleed past container ─ */
-.feat-card::after {
-  content: "";
-  position: absolute;
-  width: 420px;
-  height: 320px;
-  border-radius: 50%;
-  filter: blur(90px);
-  opacity: 0;
-  pointer-events: none;
-  z-index: 0;
-  transition: opacity .6s ease;
-}
-.feat-card:hover::after {
-  opacity: 1;
-}
-/* Violet cards — blob on the visual side (right for even, left for odd) */
-.feat-card[data-accent="violet"]::after {
-  background: radial-gradient(circle, rgba(139,92,246,.10) 0%, rgba(124,58,237,.04) 50%, transparent 70%);
-  top: 10%;
-  right: -12%;
-}
-.feat-card[data-accent="violet"]:nth-child(odd)::after {
-  right: -12%;
-  left: auto;
-}
-.feat-card[data-accent="violet"]:nth-child(even)::after {
-  left: -12%;
-  right: auto;
-}
-/* Amber cards — opposite side blob */
-.feat-card[data-accent="amber"]::after {
-  background: radial-gradient(circle, rgba(245,158,11,.10) 0%, rgba(234,88,12,.04) 50%, transparent 70%);
-  top: 10%;
-}
-.feat-card[data-accent="amber"]:nth-child(odd)::after {
-  right: -12%;
-  left: auto;
-}
-.feat-card[data-accent="amber"]:nth-child(even)::after {
-  left: -12%;
-  right: auto;
-}
-.feat-card > * {
-  position: relative;
-  z-index: 1;
-}
-
-
-
-/* ── Card inner — two-column grid ────────────────────────────── */
-.feat-card-inner {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 56px;
-  align-items: start;
-}
-.feat-card-inner--reverse { direction: rtl; }
-.feat-card-inner--reverse > * { direction: ltr; }
-
-@media (max-width: 768px) {
-  .feat-card-inner,
-  .feat-card-inner--reverse {
-    grid-template-columns: 1fr;
-    direction: ltr;
-    gap: 28px;
-  }
-}
-
-/* ── Text block ──────────────────────────────────────────────── */
-.feat-card-text { min-width: 0; }
-
-/* ══════════════════════════════════════════════════════════════
-   VISUAL CARD — locked-width container with inner glow
-   ══════════════════════════════════════════════════════════════ */
-/* Large rounded: visual container → 24px */
-.feat-card-visual {
-  position: relative;
-  width: 100%;
-  max-width: 500px;
-  justify-self: center;
-  align-self: center;
-  padding: 6px 4px;
-  border-radius: 24px;
-  background: rgba(255,255,255,.04);
-  border: 1px solid rgba(255,255,255,.08);
-  overflow: hidden;
-  box-shadow: none;
-  transition: border-color .4s;
-}
-.feat-card:hover .feat-card-visual {
-  border-color: rgba(255,255,255,.16);
-}
-/* Background image layer — rendered behind overlay */
-.feat-card-visual::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  background: var(--v-bg-img, none) center / cover no-repeat;
-  pointer-events: none;
-  z-index: 1;
-}
-/* Overlay tint + backdrop-filter — sits on top of the image */
-.feat-card-visual:after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  background: var(--v-overlay, transparent);
-  backdrop-filter: var(--v-backdrop, none);
-  -webkit-backdrop-filter: var(--v-backdrop, none);
-  pointer-events: none;
-  z-index: 2;
-  backdrop-filter: blur(25px) grayscale(50%);
-}
-.feat-card-visual > * {
-  position: relative;
-  z-index: 3;
-}
-
-
-/* ── Dark-context overrides for tile system inside features ──── */
-.feat-section .feat-tile {
-  background: rgba(255,255,255,.04);
-  border-color: rgba(255,255,255,.08);
-}
-.feat-section .feat-tile--highlight {
-  box-shadow:
-    0 1px 4px rgba(0,0,0,.15),
-    0 4px 14px rgba(0,0,0,.2);
-  border-color: rgba(255,255,255,.10);
-}
-.feat-section .feat-tile--mono {
-  background: rgba(255,255,255,.06);
-  border-color: rgba(255,255,255,.08);
-}
-.feat-section .feat-icon-badge {
-  background: rgba(255,255,255,.08);
-  color: rgba(255,255,255,.50);
-}
-.feat-section .feat-badge {
-  color: rgba(255,255,255,.40);
-  background: rgba(255,255,255,.06);
-}
-.feat-section .feat-badge--green {
-  color: #4ade80;
-  background: rgba(34, 197, 94, .10);
-  border-color: rgba(34, 197, 94, .20);
-}
-.feat-section .feat-badge--violet {
-  color: #a78bfa;
-  background: rgba(139, 92, 246, .10);
-  border-color: rgba(139, 92, 246, .20);
-}
-.feat-section .feat-badge--amber {
-  color: #fbbf24;
-  background: rgba(245, 158, 11, .10);
-  border-color: rgba(245, 158, 11, .20);
-}
-.feat-section .feat-badge--action {
-  color: rgba(255,255,255,.40);
-  border-color: rgba(255,255,255,.10);
-}
-.feat-section .feat-badge--action:hover {
-  border-color: #a78bfa;
-  color: #a78bfa;
-}
-.feat-section .feat-idle-dot {
-  background: rgba(255,255,255,.16);
-}
-.feat-section .feat-stat-cell {
-  background: rgba(255,255,255,.03);
-  border-color: rgba(255,255,255,.06);
-}
-@media (max-width: 768px) {
-  .feat-card-visual {
-    max-width: 100%;
-    justify-self: stretch;
-  }
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   UNIFIED TILE DESIGN SYSTEM
-   Every child element inside the visual uses the same tile style.
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── Base tile ───────────────────────────────────────────────── */
-/* Large rounded: tile → 16px */
-.feat-tile {
-  padding: 13px 15px;
-  border-radius: 16px;
-  background: var(--th-bg-page);
-  border: 1px solid var(--th-bd-default);
-  transition: border-color .25s;
-}
-
-/* ── Tile variants ───────────────────────────────────────────── */
-
-/* Highlight — subtle elevation for primary items */
-.feat-tile--highlight {
-  box-shadow:
-    0 1px 4px rgba(0,0,0,.03),
-    0 4px 14px rgba(0,0,0,.04);
-  border-color: var(--th-bd-default);
-}
-
-/* Mono — code/command style */
-.feat-tile--mono {
-  background: var(--th-sf-03);
-  border-color: var(--th-bd-subtle);
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
-}
-
-/* Accent — violet-tinted for AI/special elements */
-.feat-tile--accent {
-  background: rgba(139, 92, 246, .04);
-  border-color: rgba(139, 92, 246, .14);
-}
-
-/* Amber accent — warm tint for amber sections */
-.feat-tile--amber {
-  background: rgba(245, 158, 11, .04);
-  border-color: rgba(245, 158, 11, .14);
-}
-
-/* Danger — red-tinted for errors */
-.feat-tile--danger {
-  background: rgba(239, 68, 68, .03);
-  border-color: rgba(239, 68, 68, .14);
-}
-
-/* Success — green-tinted */
-.feat-tile--success {
-  background: rgba(34, 197, 94, .03);
-  border-color: rgba(34, 197, 94, .18);
-}
-
-/* Compact — tighter padding for grid cells */
-.feat-tile--compact {
-  padding: 14px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border-color: var(--th-bd-default);
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   SHARED ATOMIC COMPONENTS
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── Icon badge — small rounded container for SVG icons ──────── */
-.feat-icon-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 12px; /* Large rounded: icon badge → 12px */
-  background: var(--th-sf-05);
-  color: var(--th-text-secondary);
-  flex-shrink: 0;
-}
-.feat-icon-badge--violet {
-  background: rgba(139, 92, 246, .10);
-  color: var(--th-accent-violet);
-}
-.feat-icon-badge--amber {
-  background: rgba(245, 158, 11, .10);
-  color: var(--th-accent-amber);
-}
-.feat-icon-badge--green {
-  background: rgba(34, 197, 94, .08);
-  color: #15803d;
-}
-.feat-icon-badge--red {
-  background: rgba(239, 68, 68, .08);
-  color: #dc2626;
-}
-
-/* ── Badge — inline status pill ──────────────────────────────── */
-.feat-badge {
-  display: inline-flex;
-  align-items: center;
-  font-size: 10px;
-  font-weight: 600;
-  padding: 2.5px 9px;
-  border-radius: 999px;
-  white-space: nowrap;
-  color: var(--th-text-hint);
-  background: var(--th-sf-04);
-  border: 1px solid transparent;
-}
-.feat-badge--green {
-  color: #15803d;
-  background: rgba(34, 197, 94, .08);
-  border-color: rgba(34, 197, 94, .15);
-}
-.feat-badge--violet {
-  color: var(--th-accent-violet);
-  background: rgba(139, 92, 246, .07);
-  border-color: rgba(139, 92, 246, .15);
-}
-.feat-badge--amber {
-  color: var(--th-accent-amber);
-  background: rgba(245, 158, 11, .07);
-  border-color: rgba(245, 158, 11, .15);
-}
-.feat-badge--action {
-  color: var(--th-text-muted);
-  background: transparent;
-  border: 1px solid var(--th-bd-default);
-  cursor: pointer;
-  transition: border-color .2s, color .2s;
-}
-.feat-badge--action:hover {
-  border-color: var(--th-accent-violet);
-  color: var(--th-accent-violet);
-}
-
-/* ── Live dot — pulsing circle ───────────────────────────────── */
-.feat-live-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #22c55e;
-  box-shadow: 0 0 0 0 rgba(34, 197, 94, .4);
-  animation: feat-pulse-green 2s ease-in-out infinite;
-  flex-shrink: 0;
-}
-.feat-live-dot--violet {
-  background: var(--th-accent-violet);
-  box-shadow: 0 0 0 0 rgba(139, 92, 246, .4);
-  animation: feat-pulse-violet 2s ease-in-out infinite;
-}
-.feat-live-dot--amber {
-  background: var(--th-accent-amber);
-  box-shadow: 0 0 0 0 rgba(245, 158, 11, .4);
-  animation: feat-pulse-amber 2s ease-in-out infinite;
-}
-@keyframes feat-pulse-green {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .4); }
-  50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
-}
-@keyframes feat-pulse-violet {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .4); }
-  50%      { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0); }
-}
-@keyframes feat-pulse-amber {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .4); }
-  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
-}
-
-/* ── Idle dot — muted circle ─────────────────────────────────── */
-.feat-idle-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--th-on-12);
-  flex-shrink: 0;
-}
-
-/* ── Stat cell (cloud metrics) ───────────────────────────────── */
-.feat-stat-cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1px;
-  padding: 8px 4px;
-  border-radius: 12px; /* Large rounded: stat cell → 12px */
-  background: var(--th-sf-02);
-  border: 1px solid var(--th-bd-subtle);
-}
-
-/* ── Typing cursor ──────────────────────────────────────────── */
-@keyframes cursor-blink {
-  0%, 100% { opacity: 1; }
-  50%      { opacity: 0; }
-}
-.typing-cursor::after {
-  content: '▋';
-  animation: cursor-blink 1s step-end infinite;
-  color: var(--th-terminal-text);
-  margin-left: 2px;
-}
-
-
-/* ══════════════════════════════════════════════════════════════
-   GSAP BUILD ITEMS — performance hint
-   ══════════════════════════════════════════════════════════════ */
-.feat-build-item {
-  will-change: transform, opacity;
-}