/* ==================================================================
   STYLES — dark-mode base + brand-agnostic components.
   Layout (spacing/grid/flex/breakpoints) is handled by Tailwind
   utility classes in index.html. Everything here is either global
   dark-theme chrome or a component whose color comes from the
   --accent custom property (set at runtime from js/config.js), so
   re-skinning never requires touching this file.
   ================================================================== */

:root {
  --accent: #22d3ee;
  --accent-rgb: 34, 211, 238;
  --accent-contrast: #04141a;
  --coal: #0a0a0d;
  --panel: #121216;
  --panel2: #17171c;
  --edge: #26262d;
  --silver: #c7c9cf;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--coal);
  color: var(--silver);
  font-family: 'Inter', sans-serif;
}

.font-display { font-family: 'Rajdhani', sans-serif; }

::selection { background: var(--accent); color: var(--accent-contrast); }

a { color: inherit; }

/* ---- Header ---- */
#site-header {
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}
#site-header.is-scrolled {
  background-color: rgba(10, 10, 13, 0.8);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--edge);
}
.nav-link { color: var(--silver); transition: color 0.2s ease; }
.nav-link:hover, .nav-link.active { color: var(--accent); }

.btn-accent {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent); color: var(--accent-contrast);
  font-weight: 700; letter-spacing: 0.02em;
  border-radius: 0.5rem;
  transition: box-shadow 0.2s ease;
}
.btn-accent:hover { box-shadow: 0 0 25px -5px rgba(var(--accent-rgb), 0.45); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--edge); color: #fff;
  font-weight: 700; border-radius: 0.5rem;
  transition: border-color 0.2s ease;
}
.btn-outline:hover { border-color: rgba(var(--accent-rgb), 0.6); }

/* ---- Hero ---- */
.grid-overlay {
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

.text-gradient-accent {
  background: linear-gradient(90deg, #ffffff 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes pulse-slow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .animate-pulse-slow { animation: none; }
}

.demo-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--edge);
  background: rgba(18, 18, 22, 0.6);
  backdrop-filter: blur(6px);
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--silver);
}
.demo-badge .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--accent); }

/* ---- Service cards (landing grid) ---- */
.service-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 1rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.service-card:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-4px); }

.service-badge {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent-contrast); background: var(--accent);
  padding: 0.25rem 0.5rem; border-radius: 0.25rem;
}

.service-icon {
  width: 3rem; height: 3rem; border-radius: 0.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.service-card h3 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.15rem; color: #fff; }
.service-card p { font-size: 0.85rem; color: rgba(199, 201, 207, 0.6); margin-top: 0.4rem; line-height: 1.5; }

.service-cta {
  margin-top: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.85rem;
  color: var(--accent); background: none; border: none; cursor: pointer;
}

/* ---- Estimator form ---- */
.step-num {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4), 0 0 18px -4px rgba(var(--accent-rgb), 0.6);
  background: var(--panel2); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}

.field-select, .field-input {
  width: 100%; background: var(--panel2); border: 1px solid var(--edge);
  border-radius: 0.5rem; padding: 0.75rem; font-size: 0.875rem; color: #fff;
  color-scheme: dark;
}
.field-select:focus, .field-input:focus {
  outline: none; border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4);
}
.field-select:disabled { opacity: 0.4; cursor: not-allowed; }

.service-checkbox {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--panel2); border: 1px solid var(--edge);
  border-radius: 0.5rem; padding: 0.75rem 1rem; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.service-checkbox:hover { border-color: rgba(var(--accent-rgb), 0.4); }
.service-checkbox:has(:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.05); }
.service-checkbox input { margin-top: 0.2rem; accent-color: var(--accent); }
.service-checkbox span { font-size: 0.875rem; color: #fff; }
.price-hint { font-size: 0.75rem; color: rgba(199, 201, 207, 0.5); }

.estimate-panel {
  background: linear-gradient(135deg, var(--panel2), var(--coal));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 0.75rem;
  box-shadow: 0 0 60px -10px rgba(var(--accent-rgb), 0.35);
}

.estimate-discount { color: var(--accent); font-size: 0.8rem; font-weight: 600; margin-top: 0.5rem; }

/* ---- Estimate gauge: a speedometer-style dial sweeping with the live
   estimate, so the price panel reads as an automotive instrument, not
   a bare number. Needle rotation is set inline by js/estimate-gauge.js. ---- */
.estimate-gauge-wrap { max-width: 220px; margin: 0 auto 0.25rem; }
#estimate-gauge { width: 100%; height: auto; display: block; }
#gauge-needle {
  transform-origin: 110px 108px;
  transform: rotate(-90deg);
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.24, 1);
}
.gauge-tick { stroke: rgba(199, 201, 207, 0.45); stroke-width: 2; }
.gauge-label { font-size: 7px; letter-spacing: 0.08em; fill: rgba(199, 201, 207, 0.5); text-transform: uppercase; font-family: 'Inter', sans-serif; }

/* Honeypot field — hidden from humans, visible to bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Preset switcher (hero) ---- */
.preset-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--panel); border: 1px solid var(--edge); color: var(--silver);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.85rem;
  padding: 0.5rem 1rem; border-radius: 9999px; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.preset-pill:hover { border-color: rgba(var(--accent-rgb), 0.5); color: #fff; }
.preset-pill.active {
  background: rgba(var(--accent-rgb), 0.12); border-color: var(--accent); color: #fff;
}
.preset-pill.active .preset-pill-dot { background: var(--accent); }
.preset-pill-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--edge); }

/* ---- Admin panel (example) ---- */
.admin-toggle {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--panel2); color: #fff; border: 1px solid var(--edge);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.9rem;
  padding: 0.7rem 1.1rem; border-radius: 9999px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.admin-toggle:hover { border-color: rgba(var(--accent-rgb), 0.6); transform: translateY(-2px); }
.admin-toggle i { color: var(--accent); }

.admin-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 70;
}
.admin-overlay.hidden { display: none; }

.admin-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(480px, 100vw);
  background: var(--panel); border-left: 1px solid var(--edge);
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,0.5);
}
.admin-panel.hidden { display: none; }

.admin-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--edge);
}
.admin-panel-header h3 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.2rem; color: #fff;
  display: flex; align-items: center; gap: 0.6rem;
}
.admin-example-tag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--accent-contrast); background: var(--accent);
  padding: 0.15rem 0.45rem; border-radius: 0.25rem;
}
.admin-close-btn {
  background: none; border: 1px solid var(--edge); color: var(--silver);
  width: 2rem; height: 2rem; border-radius: 0.4rem; cursor: pointer; flex-shrink: 0;
}
.admin-close-btn:hover { border-color: rgba(var(--accent-rgb), 0.6); color: #fff; }

.admin-panel-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }

.admin-section { margin-bottom: 1.75rem; }
.admin-section h4 {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; color: #fff;
}
.admin-hint { font-size: 0.75rem; color: rgba(199, 201, 207, 0.55); margin-top: 0.25rem; line-height: 1.5; }

.admin-table { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.admin-row {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--panel2); border: 1px solid var(--edge); border-radius: 0.4rem;
  padding: 0.5rem 0.6rem;
}
.admin-row-nested { margin-left: 0.75rem; background: var(--coal); }
.admin-row-label { flex: 1; font-size: 0.8rem; color: var(--silver); }
.admin-row-label-tight { flex: 0 0 auto; }

.admin-input {
  width: 5.5rem; background: var(--coal); border: 1px solid var(--edge); border-radius: 0.3rem;
  color: #fff; font-size: 0.85rem; padding: 0.35rem 0.5rem; color-scheme: dark;
}
.admin-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }

.admin-service-block {
  margin-top: 1rem; padding: 0.75rem; border: 1px solid var(--edge); border-radius: 0.5rem;
}
.admin-service-title { font-size: 0.85rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; }

.admin-remove-btn {
  background: none; border: none; color: rgba(199, 201, 207, 0.5);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
.admin-remove-btn:hover { color: var(--accent); }

.admin-add-btn {
  margin-top: 0.6rem; background: none; border: 1px dashed var(--edge); color: var(--silver);
  font-size: 0.8rem; padding: 0.5rem; border-radius: 0.4rem; cursor: pointer; width: 100%;
}
.admin-add-btn:hover { border-color: rgba(var(--accent-rgb), 0.6); color: #fff; }

.admin-panel-footer { border-top: 1px solid var(--edge); padding: 1rem 1.5rem 1.25rem; }
.admin-reset-btn {
  width: 100%; background: none; border: 1px solid var(--edge); color: var(--silver);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; padding: 0.6rem; border-radius: 0.4rem; cursor: pointer;
}
.admin-reset-btn:hover { border-color: rgba(var(--accent-rgb), 0.6); color: #fff; }

/* ---- Trust icons ---- */
.trust-icon {
  width: 4rem; height: 4rem; border-radius: 9999px;
  background: var(--panel2); border: 1px solid rgba(var(--accent-rgb), 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1.5rem;
  box-shadow: 0 0 25px -5px rgba(var(--accent-rgb), 0.45);
  margin: 0 auto 1.25rem;
}