/* Electric82 — base styles */
:root {
  --bg: #F5F4F1;
  --dark: #1A1A1A;
  --graphite: #3D3D3D;
  --accent: #E8A020;
  --accent-2: #C4B49A;
  --white: #FFFFFF;
  --border: #E0DDD8;
}

html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--dark);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-bebas { font-family: 'Bebas Neue', 'Montserrat', sans-serif; letter-spacing: 0.01em; }
.font-mont  { font-family: 'Montserrat', system-ui, sans-serif; }

/* Eyebrow / micro label */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Animated dashed cable */
@keyframes dash {
  to { stroke-dashoffset: -120; }
}
.cable {
  stroke-dasharray: 6 6;
  animation: dash 18s linear infinite;
}
.cable.slow  { animation-duration: 28s; }
.cable.fast  { animation-duration: 12s; }

@keyframes pulseNode {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.node { animation: pulseNode 3.2s ease-in-out infinite; }
.node.d1 { animation-delay: 0.4s; }
.node.d2 { animation-delay: 0.8s; }
.node.d3 { animation-delay: 1.2s; }
.node.d4 { animation-delay: 1.6s; }
.node.d5 { animation-delay: 2.0s; }
.node.d6 { animation-delay: 2.4s; }

/* Light grid background pattern (drafting paper) */
.grid-paper {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.grid-paper-light {
  background-image:
    linear-gradient(rgba(26,26,26,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Reveal */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
.rise.d1 { animation-delay: 0.05s; }
.rise.d2 { animation-delay: 0.15s; }
.rise.d3 { animation-delay: 0.25s; }
.rise.d4 { animation-delay: 0.35s; }

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 2px;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer; border: 1px solid transparent;
}
.btn-accent      { background: var(--accent); color: #1A1A1A; }
.btn-accent:hover{ background: #d8901a; }
.btn-call {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(232,160,32,0.55);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-call:hover {
  background: var(--accent);
  color: #1A1A1A;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(232,160,32,0.25), 0 6px 22px -8px rgba(232,160,32,0.55);
}
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-outline-light:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline-dark  { background: transparent; color: var(--dark); border-color: rgba(26,26,26,0.25); }
.btn-outline-dark:hover  { border-color: var(--accent); color: var(--accent); }
.btn-ghost       { background: transparent; color: var(--dark); padding: 0; height: auto; letter-spacing: 0.08em; }
.btn-ghost:hover { color: var(--accent); }

/* Field */
.field {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(26,26,26,0.18);
  padding: 14px 16px;
  font: inherit; color: inherit;
  border-radius: 0;
  outline: none;
  transition: border-color .15s ease;
}
.field:focus { border-color: var(--accent); }
.field-dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.field-dark::placeholder { color: rgba(255,255,255,0.35); }
.field-dark:focus { border-color: var(--accent); }

/* Card */
.card {
  background: #fff;
  border: 1px solid var(--border);
  transition: border-color .15s ease, transform .2s ease;
}
.card:hover { border-color: rgba(232,160,32,0.55); }

/* Section divider line */
.rule {
  display: block; height: 1px; background: var(--accent); width: 40px;
}
.rule-vert {
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(232,160,32,0.45), transparent);
}

/* Section labels */
.section-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

/* Nav link */
.nav-link {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 0;
  transition: color .15s ease;
}
.nav-link.active { color: var(--accent); }
.nav-link:hover  { color: var(--accent); }
.nav-link.active::after,
.nav-link:hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
}

/* Mobile slide-in */
.slide-enter { transform: translateX(100%); }
.slide-active { transform: translateX(0); transition: transform .25s ease; }

/* Step circle */
.step-circle {
  width: 56px; height: 56px; border-radius: 999px;
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; color: var(--accent);
  background: var(--bg);
  position: relative; z-index: 1;
}

/* Photo placeholder */
.ph-photo {
  background:
    repeating-linear-gradient(135deg, rgba(26,26,26,0.04) 0 12px, rgba(26,26,26,0.07) 12px 24px);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: rgba(26,26,26,0.35);
}

/* Badge */
.badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  padding: 6px 10px;
  background: #fff; border: 1px solid var(--border); color: var(--dark);
}
.badge-accent { background: var(--accent); border-color: var(--accent); color: #1A1A1A; }
.badge-dark   { background: var(--dark); border-color: var(--dark); color: #fff; }

/* Subtle hover lift */
.lift { transition: transform .25s ease, border-color .15s ease; }
.lift:hover { transform: translateY(-3px); }

/* table */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td {
  padding: 18px 20px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.price-table th {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--graphite); font-weight: 600;
  background: #fff;
}
.price-table tbody tr { background: #fff; transition: background .15s ease; }
.price-table tbody tr:hover { background: #FBFAF7; }
.price-table td.price { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--dark); }
.price-table td.unit  { color: var(--graphite); font-size: 13px; }

/* Scrollbar tame */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #d8d4cd; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }