/* Crownstone Investments — custom styles */

:root {
  --navy-950: #070d1b;
  --navy-900: #0b132b;
  --gold-400: #c9a86a;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Hero background */
.hero-bg {
  background-image: linear-gradient(
      100deg,
      rgba(7, 13, 27, 0.96) 0%,
      rgba(7, 13, 27, 0.82) 42%,
      rgba(11, 19, 43, 0.55) 100%
    ),
    url('/static/img/hero.jpg');
  background-size: cover;
  background-position: center;
}

/* Subtle animated ticker */
.ticker {
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  gap: 3rem;
  animation: ticker 40s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Section reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Plan card hover */
.plan-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(11, 19, 43, 0.35);
}

/* Editable field styling */
[contenteditable='true'] {
  outline: none;
  border-radius: 6px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  cursor: text;
}
[contenteditable='true']:hover {
  background: rgba(201, 168, 106, 0.12);
}
[contenteditable='true']:focus {
  background: rgba(201, 168, 106, 0.16);
  box-shadow: 0 0 0 2px rgba(201, 168, 106, 0.5);
}

/* Faint grid texture for light sections */
.grid-texture {
  background-image: linear-gradient(rgba(11, 19, 43, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 19, 43, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Thin gold divider */
.gold-rule {
  height: 2px;
  width: 56px;
  background: linear-gradient(90deg, var(--gold-400), transparent);
}

/* Dashboard sidebar active */
.dash-link.active {
  background: rgba(201, 168, 106, 0.12);
  color: #fff;
  border-left-color: var(--gold-400);
}