/*
  Global styles for the quant portfolio site.  The palette leans
  heavily into dark tones with electric teal and purple accents,
  evoking a luxury quant trading desk.  Responsive flex layouts
  ensure the simulator remains usable on all devices.
*/

:root {
  --bg: #05060b;
  --overlay-bg: rgba(5, 6, 11, 0.55);
  --primary: #22e6ff;
  --secondary: #a855f7;
  --text: #e5e7eb;
  --muted: #9ca3af;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
}

section {
  padding: 4rem 2rem;
}

/* Hero section styles */
.hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.network-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-bg);
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-size: 2.5rem;
  text-align: center;
  color: var(--primary);
}

.hero-subtitle {
  text-align: center;
  color: var(--muted);
  max-width: 600px;
  margin-bottom: 2rem;
}

.dashboard {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.chart-container,
.control-container {
  background: rgba(5, 6, 11, 0.8);
  border: 1px solid rgba(34, 230, 255, 0.3);
  box-shadow: 0 0 15px rgba(34, 230, 255, 0.25);
  border-radius: 12px;
  padding: 1rem;
}

.chart-container {
  flex: 1 1 500px;
  max-width: 700px;
}

/* Boxed container for the equity curve below the price/volume chart.  Gives
   the curve its own panel with a subtle border and padding to stand
   apart from the main chart. */
.equity-container {
  background: rgba(5, 6, 11, 0.8);
  border: 1px solid rgba(34, 230, 255, 0.3);
  border-radius: 8px;
  padding: 0.5rem;
  margin-top: 1rem;
}
.equity-container canvas {
  width: 100%;
  height: 150px;
  display: block;
}
.equity-container .curve-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.control-container {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
}

#priceVolumeCanvas {
  width: 100%;
  height: 300px;
  display: block;
  margin-bottom: 1rem;
}

#equityCurveCanvas {
  width: 100%;
  height: 180px;
  display: block;
  margin-bottom: 1rem;
}

/* Wrap the equity curve in its own container so it reads as a separate
   card.  This container echoes the styling of other panels with a
   translucent background, border and subtle glow. */
.equity-container {
  background: rgba(5, 6, 11, 0.8);
  border: 1px solid rgba(34, 230, 255, 0.3);
  box-shadow: 0 0 10px rgba(34, 230, 255, 0.15);
  border-radius: 8px;
  padding: 0.5rem;
  margin-top: 1rem;
}
.equity-container canvas {
  width: 100%;
  height: 160px;
  display: block;
}
.equity-container .curve-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

/* Label for the equity curve */
.curve-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.25rem 0;
  text-align: left;
}

#donutCanvas {
  width: 100%;
  height: 160px;
  display: block;
  margin-top: 1rem;
}

.control-group {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
}

.control-group label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

input[type='range'] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #1f2937;
  border-radius: 5px;
  outline: none;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

select {
  padding: 0.5rem;
  background: #1f2937;
  color: var(--text);
  border: 1px solid var(--primary);
  border-radius: 6px;
  font-size: 0.9rem;
}

button#runBacktest {
  width: 100%;
  padding: 0.7rem;
  margin-top: 0.5rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: var(--bg);
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

button#runBacktest:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.metric {
  flex: 1 1 45%;
  background: #0a0c17;
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
  border: 1px solid rgba(34, 230, 255, 0.3);
}

.metric h3 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--primary);
}

.metric p {
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted);
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1f2937;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--primary);
  transition: 0.4s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: #1f2937;
}
.switch input:checked + .slider:before {
  transform: translateX(18px);
}

/* Services section */
.services-section {
  background: var(--bg);
  text-align: center;
}
.services-section h2 {
  margin-bottom: 2rem;
  color: var(--primary);
  font-size: 2rem;
}
.services-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  max-width: 1100px;
  margin: 0 auto;
}
.service-card {
  background: #0a0c17;
  border: 1px solid rgba(34, 230, 255, 0.3);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(34, 230, 255, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.service-card h3 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.service-card .subtitle {
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.service-card .sparkline {
  width: 100%;
  height: 60px;
  display: block;
}

/* Modal overlay for service descriptions */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
  visibility: visible;
  opacity: 1;
}
.modal-content {
  background: #0a0c17;
  border: 1px solid rgba(34, 230, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(34, 230, 255, 0.3);
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  color: var(--text);
  position: relative;
}
.modal-content h3 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.modal-content p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Style for optional image inside modal */
.modal-img {
  width: 100%;
  margin-top: 1rem;
  border-radius: 8px;
  max-height: 300px;
  object-fit: contain;
}

/* Style for optional video inside modal */
.modal-video {
  width: 100%;
  margin-top: 1rem;
  border-radius: 8px;
  max-height: 320px;
  background-color: #0a0c17;
}

/* Generic button style for calls to action.  Applies the same gradient
   and padding as our contact buttons so that buttons outside the
   contact section (such as the Send button in the email form) are
   consistent with the rest of the UI. */
.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: var(--bg);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}

/* Email modal specific styles */
.email-modal h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}
.email-modal .form-group {
  margin-bottom: 1rem;
}
.email-modal label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.email-modal input,
.email-modal textarea {
  width: 100%;
  padding: 0.5rem;
  background: #0d1321;
  border: 1px solid #1f2937;
  border-radius: 4px;
  color: var(--text);
  font-size: 0.9rem;
}
.email-modal input:focus,
.email-modal textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.donut-label {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Styles for the time picker within the call booking form */
.time-selects {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.time-selects select {
  flex: 1;
  padding: 0.4rem;
  background: #0d1321;
  border: 1px solid #1f2937;
  border-radius: 4px;
  color: var(--text);
  font-size: 0.9rem;
}
.time-separator {
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
}
.donut-label {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
}
.modal-close:hover {
  color: var(--primary);
}

/* Contact section */
.contact-section {
  background: #0a0c17;
  text-align: center;
}
.contact-section h2 {
  color: var(--primary);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.contact-section p {
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.contact-buttons .btn {
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s;
}
.contact-buttons .btn:hover {
  transform: translateY(-2px);
}