/* ============================================================
  0) THEME TOKENS
  - Change accent color here
============================================================ */
:root{
  --ph-accent: #3B82F6;
  --ph-bg: #0B1220;

  --ph-surface: rgba(255,255,255,.06);
  --ph-border: rgba(255,255,255,.12);

  --ph-text: rgba(255,255,255,.92);
  --ph-muted: rgba(255,255,255,.72);
}

/* ============================================================
  1) BASE / GLOBAL
============================================================ */
body{
  background:
    radial-gradient(1200px 600px at 15% 5%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(99,102,241,.12), transparent 55%),
    var(--ph-bg);
  color: var(--ph-text);
}

.text-muted-2{ color: var(--ph-muted) !important; }

.section-pad{ padding: 5rem 0; }
@media (max-width: 991.98px){
  .section-pad{ padding: 3.5rem 0; }
}

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* ============================================================
  2) NAVBAR
============================================================ */
.nav-blur{
  background: rgba(11,18,32,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ph-border);
}

/* Nav link hover + active underline */
.navbar .nav-link{
  position: relative;
  color: rgba(255,255,255,.78);
  padding-left: .75rem;
  padding-right: .75rem;
  transition: color .15s ease;
}

.navbar .nav-link::after{
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .18rem;
  height: 2px;
  background: var(--ph-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease;
  opacity: .95;
}

.navbar .nav-link:hover{
  color: var(--ph-accent);
}
.navbar .nav-link:hover::after{
  transform: scaleX(1);
}

.navbar .nav-link.active{
  color: rgba(255,255,255,.92);
}
.navbar .nav-link.active::after{
  transform: scaleX(1);
}

.navbar .nav-link:focus-visible{
  outline: none;
  color: var(--ph-accent);
}
.navbar .nav-link:focus-visible::after{
  transform: scaleX(1);
}

/* ============================================================
  3) BRAND (TEXT LOGO)
============================================================ */
.ph-brand{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  text-decoration: none;
  user-select: none;
}

.ph-brand__pipeline,
.ph-brand__hero{
  font-size: 1.35rem;
}

.ph-brand__pipeline{ color: rgba(255,255,255,.95); }
.ph-brand__hero{
  color: var(--ph-accent);
  margin-left: .22rem;
}

@media (max-width: 575.98px){
  .ph-brand__pipeline,
  .ph-brand__hero{
    font-size: 1.2rem;
  }
}

/* ============================================================
  4) UI PRIMITIVES (buttons, cards, badges, links)
============================================================ */
/* Make semibold headings/text brighter on dark background */
.fw-semibold{
  color: rgba(255,255,255,.94);
}
.fw-bold{
  color: rgba(255,255,255,.94);
}

.accent-icon{ color: var(--ph-accent); }

.btn-accent{
  background: var(--ph-accent);
  border-color: var(--ph-accent);
  color: #071018;
  font-weight: 800;
}
.btn-accent:hover{ filter: brightness(.95); color:#071018; }

.btn-outline-accent{
  border-color: rgba(59,130,246,.55);
  color: var(--ph-text);
}
.btn-outline-accent:hover{
  border-color: var(--ph-accent);
  background: rgba(59,130,246,.12);
  color: var(--ph-text);
}

.card-dark{
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  border-radius: 18px;
}

.badge-accent{
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.40);
  color: var(--ph-text);
}

.link-accent{
  color: rgba(147,197,253,.95);
  text-decoration: none;
}
.link-accent:hover{ text-decoration: underline; }

/* Bright numbers / key metrics */
.text-bright{
  color: rgba(255,255,255,.97) !important;
  text-shadow: 0 0 18px rgba(59,130,246,.18);
}

/* ============================================================
  5) HERO MOCK (dashboard preview)
============================================================ */
.hero-mock{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--ph-border);
  border-radius: 22px;
  overflow: hidden;
}

.hero-mock-topbar{
  border-color: var(--ph-border) !important;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9rem;
  color: rgba(255,255,255,.78);
}

/* Traffic-light dots */
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot-red{ background:#ff5f57; }
.dot-yellow{ background:#febc2e; }
.dot-green{ background:#28c840; }

/* Progress */
.progress-dark{
  height: 10px;
  background: rgba(255,255,255,.06);
}
.progress-accent{ background: var(--ph-accent); }

/* ============================================================
  6) FORMS (dark inputs + dark dropdown options)
============================================================ */
.form-control,
.form-select,
textarea.form-control{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ph-border);
  color: var(--ph-text);
}

.form-control::placeholder{ color: rgba(255,255,255,.45); }

.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
  border-color: rgba(59,130,246,.60);
  box-shadow: 0 0 0 .25rem rgba(59,130,246,.18);
  background: rgba(255,255,255,.06);
  color: var(--ph-text);
}

/* Options list (works on most desktop browsers) */
.form-select option{
  background-color: var(--ph-bg);
  color: rgba(255,255,255,.92);
}

.form-select optgroup{
  background-color: var(--ph-bg);
  color: rgba(255,255,255,.75);
}

/* ============================================================
  7) CHIPS (tech stack)
============================================================ */
.chip{
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: .6rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-size: .95rem;
  cursor: default;

  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
}

.chip:hover{
  transform: translateY(-2px);
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.60);
  color: rgba(255,255,255,.95);
}

.chip:focus-visible{
  outline: none;
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 0 .25rem rgba(59,130,246,.18);
}

/* Form alert styling on dark background */
#formAlert{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

#formAlert.alert-success{
  border-color: rgba(34,197,94,.55);
}

#formAlert.alert-danger{
  border-color: rgba(239,68,68,.55);
}

/* Subtle loading state */
#contactSubmit.is-loading{
  opacity: .9;
}