/* ==========================================================================
   CodeStash — Landing page custom styles
   Extends Tailwind utilities for a few things that are easier in plain CSS:
   - Hero mesh / gradient background
   - Code-block syntax token colours
   - Subtle marquee for the logo cloud
   - Soft custom shadows
   ========================================================================== */

:root {
  --brand-50:  #ECFAF1;
  --brand-100: #D1F4DD;
  --brand-200: #A4E8BC;
  --brand-300: #6FD895;
  --brand-400: #3FC476;
  --brand-500: #1FAB5C;
  --brand-600: #15924A;
  --brand-700: #11733B;
  --brand-800: #0E5A30;
  --brand-900: #0A3F22;

  --ink-900: #0B1320;
  --ink-800: #131C2E;
  --ink-700: #2A3447;
  --ink-500: #586173;
  --ink-400: #8B94A6;
  --ink-300: #C5CCD8;
  --ink-100: #EEF1F5;
  --ink-50:  #F7F8FA;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--ink-800);
  background: #FFFFFF;
}

.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

/* ----- Hero soft gradient ------------------------------------------------- */
.hero-bg {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(31, 171, 92, 0.18), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(111, 216, 149, 0.18), transparent 55%),
    linear-gradient(180deg, #EEF8F1 0%, #F4FAF6 60%, #FFFFFF 100%);
}

.cta-glow {
  background:
    radial-gradient(600px 300px at 80% 20%, rgba(111, 216, 149, 0.30), transparent 60%),
    radial-gradient(500px 300px at 10% 80%, rgba(63, 196, 118, 0.25), transparent 60%);
}

/* ----- Soft shadow used on cards & product mock --------------------------- */
.shadow-card {
  box-shadow:
    0 1px 2px rgba(11, 19, 32, 0.04),
    0 4px 12px rgba(11, 19, 32, 0.04),
    0 24px 48px -12px rgba(11, 19, 32, 0.08);
}
.shadow-product {
  box-shadow:
    0 1px 2px rgba(11, 19, 32, 0.06),
    0 8px 24px rgba(11, 19, 32, 0.08),
    0 40px 80px -20px rgba(11, 19, 32, 0.18);
}

/* ----- Gradient text ------------------------------------------------------ */
.text-gradient-brand {
  background: linear-gradient(135deg, #15924A 0%, #1FAB5C 50%, #3FC476 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Decorative grid / dot pattern -------------------------------------- */
.bg-dots {
  background-image: radial-gradient(circle, rgba(11, 19, 32, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ----- Code-rain background (à la openhands.dev) -------------------------
   Faint columns of code/numbers used as ambient decoration. The mask fades
   the centre so it reads cleanly behind hero/CTA copy. */
.code-rain {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.85;
  color: rgba(212, 244, 221, 0.10);  /* mint, very faint, on dark bg */
  white-space: pre;
  overflow: hidden;
  user-select: none;
  padding: 28px 36px;
  column-count: 6;
  column-gap: 36px;
  column-fill: auto;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at center, transparent 18%, rgba(0,0,0,0.55) 60%, black 95%);
          mask-image: radial-gradient(ellipse 65% 60% at center, transparent 18%, rgba(0,0,0,0.55) 60%, black 95%);
}
@media (min-width: 768px) {
  .code-rain { column-count: 9; font-size: 12px; }
}

/* Hero readability bloom — sits above the code-rain, below the content,
   so the headline area stays crisp while the corners keep their texture. */
.hero-bloom {
  background: radial-gradient(
    ellipse 62% 42% at center 26%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.80) 22%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.00) 80%
  );
}

/* Hero variant: dark-green tokens on mint, edge-to-edge coverage,
   gradually fading from visible at the top to invisible at the bottom. */
.code-rain--hero {
  color: rgba(11, 95, 48, 0.20);
  /* Balance content across all columns instead of filling left-first —
     hero is tall enough that `auto` leaves the right side empty. */
  column-fill: balance;
  -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 12%,
    rgba(0,0,0,0.55) 50%,
    transparent 92%);
          mask-image: linear-gradient(to bottom,
    black 0%,
    black 12%,
    rgba(0,0,0,0.55) 50%,
    transparent 92%);
}

/* ----- Logo cloud marquee ------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__track > * {
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----- Code-block syntax tokens (mock product UI & feature) --------------- */
.code-pane {
  background: #0B1320;
  color: #E6EAF2;
}
.tok-key   { color: #FF8AC7; }
.tok-fn    { color: #6FD895; }
.tok-str   { color: #FFD580; }
.tok-num   { color: #FFB084; }
.tok-com   { color: #5C6680; font-style: italic; }
.tok-var   { color: #8AB4FF; }
.tok-type  { color: #A4E8BC; }
.tok-punct { color: #C5CCD8; }

/* ----- Window dots (mock browser/window chrome) --------------------------- */
.dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.dot-r { background: #FF6058; }
.dot-y { background: #FFBD2E; }
.dot-g { background: #28CA41; }

/* ----- Underline-on-hover for nav links ----------------------------------- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--brand-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
  border-radius: 2px;
}
.nav-link:hover::after { transform: scaleX(1); }

/* ----- Float animation for hero badge ------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.float-slow { animation: float 6s ease-in-out infinite; }

/* ----- Tag pill colours mirroring Showcase.png --------------------------- */
.pill-pro     { background: #FFE4D6; color: #B85A1F; }
.pill-react   { background: #DDF1FF; color: #1860A8; }
.pill-docker  { background: #DDE8FF; color: #2853C2; }
.pill-php     { background: #E8DEFB; color: #5A2DA8; }
.pill-next    { background: #ECEEF2; color: #1A1F2E; }
.pill-go      { background: #D6F2F4; color: #137680; }
.pill-bash    { background: #FFE0E0; color: #A8332A; }
.pill-custom  { background: #E6EAF2; color: #4A5568; }
.pill-accent  { background: #D1F4DD; color: #0E5A30; }

/* ----- Scrollbar polish for product mock --------------------------------- */
.product-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.product-scroll::-webkit-scrollbar-thumb { background: rgba(11,19,32,0.15); border-radius: 8px; }

/* ----- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .float-slow { animation: none; }
  html { scroll-behavior: auto; }
}