/* ============================================================
   MAIN.CSS — Pioneer Design
   ============================================================ */

/* TOKENS & RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:      #0d0f14;
  --bg2:     #13161e;
  --bg3:     #1a1e28;
  --accent:  #318ab2;
  --accent2: #e8a020;
  --text:    #e8eaf0;
  --muted:   #8892a4;
  --border:  #ffffff12;
  --font:    'Segoe UI', system-ui, -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background:             var(--bg);
  color:                  var(--text);
  font-family:            var(--font);
  font-size:              16px;
  line-height:            1.65;
  -webkit-font-smoothing: antialiased;
}

/* NAV
   ============================================================ */
nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 2.5rem;
  background:      rgba(13, 15, 20, 0.88);
  backdrop-filter: blur(12px);
  border-bottom:   1px solid var(--border);
}

.nav-logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  cursor:          pointer;
  z-index:         101;
}

.nav-logo img {
  height:         36px;
  width:          auto;
  mix-blend-mode: screen;
  display:        block;
}

.nav-logo-text {
  font-size:   1.1rem;
  font-weight: 700;
  color:       #fff;
}

.nav-logo-text span {
  color: var(--accent);
}

nav ul {
  list-style: none;
  display:    flex;
  gap:        2rem;
}

nav ul a {
  color:           var(--muted);
  text-decoration: none;
  font-size:       0.88rem;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  transition:      color 0.2s;
  cursor:          pointer;
}

nav ul a:hover  { color: var(--accent); }
nav ul a.active { color: var(--accent); }

/* HAMBURGER BUTTON */
.nav-toggle {
  display:          none;
  flex-direction:   column;
  justify-content:  center;
  gap:              5px;
  width:            36px;
  height:           36px;
  background:       none;
  border:           none;
  cursor:           pointer;
  padding:          4px;
  z-index:          101;
}

.nav-toggle span {
  display:          block;
  width:            100%;
  height:           2px;
  background:       var(--text);
  border-radius:    2px;
  transition:       transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

/* Animate to X when open */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* MOBILE NAV
   ============================================================ */
@media (max-width: 768px) {
  nav {
    padding:   1rem 1.25rem;
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: flex;
  }

  nav ul {
    display:        flex;
    flex-direction: column;
    gap:            0;
    width:          100%;
    /* Collapsed state */
    max-height:     0;
    overflow:       hidden;
    transition:     max-height 0.35s ease;
    border-top:     1px solid transparent;
    margin-top:     0;
  }

  nav ul.is-open {
    max-height:  400px;
    border-top:  1px solid var(--border);
    margin-top:  0.75rem;
    padding-top: 0.5rem;
  }

  nav ul li {
    width: 100%;
  }

  nav ul a {
    display:     block;
    padding:     0.9rem 0.25rem;
    font-size:   0.95rem;
    color:       var(--text);
    border-bottom: 1px solid var(--border);
  }

  nav ul li:last-child a {
    border-bottom: none;
  }

  nav ul a:hover,
  nav ul a.active {
    color: var(--accent);
  }
}

/* FOOTER
   ============================================================ */
footer {
  text-align:  center;
  padding:     2rem;
  font-size:   0.8rem;
  color:       var(--muted);
  border-top:  1px solid var(--border);
}

/* SHARED SECTION PRIMITIVES
   ============================================================ */
section {
  padding:   6rem 2rem;
  max-width: 1080px;
  margin:    0 auto;
}

.section-label {
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  0.75rem;
}

h2 {
  font-size:      clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  line-height:    1.2;
  margin-bottom:  1rem;
}

.section-intro {
  color:         var(--muted);
  max-width:     560px;
  font-size:     1.05rem;
  margin-bottom: 3rem;
}

/* SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

/* HERO
   ============================================================ */
#hero {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         7rem 2rem 4rem;
  position:        relative;
  overflow:        hidden;
  text-align:      left;
}

.hero-grid {
  position:           absolute;
  inset:              0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:    48px 48px;
  mask-image:         radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
}

.hero-glow {
  position:       absolute;
  top:            10%;
  right:          5%;
  left:           auto;
  transform:      none;
  width:          520px;
  height:         520px;
  background:     radial-gradient(ellipse, rgba(49, 138, 178, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.butterfly-wrap {
  position:       absolute;
  top:            50%;
  right:          4%;
  left:           auto;
  transform:      translateY(-52%);
  pointer-events: none;
  z-index:        0;
}

.butterfly-wrap img {
  width:            420px;
  opacity:          0.72;
  filter:           brightness(1.1) saturate(1.4) drop-shadow(0 0 40px rgba(49, 138, 178, 0.4));
  animation:        flutter 6s ease-in-out infinite;
  transform-origin: center center;
  mix-blend-mode:   screen;
}

@keyframes flutter {
  0%   { transform: scaleX(1)    translateY(0px); }
  20%  { transform: scaleX(0.92) translateY(-8px); }
  40%  { transform: scaleX(1)    translateY(-3px); }
  60%  { transform: scaleX(0.95) translateY(-10px); }
  80%  { transform: scaleX(1)    translateY(-4px); }
  100% { transform: scaleX(1)    translateY(0px); }
}

.hero-content {
  position:  relative;
  max-width: 620px;
  z-index:   1;
}

@media (max-width: 768px) {
  #hero { text-align: center; }
  .butterfly-wrap {
    top:       auto;
    bottom:    0;
    right:     50%;
    transform: translateX(50%);
    opacity:   0.35;
  }
  .butterfly-wrap img { width: 280px; }
  .hero-content { max-width: 100%; }
}

.hero-eyebrow {
  display:        inline-block;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--accent);
  background:     rgba(49, 138, 178, 0.1);
  border:         1px solid rgba(49, 138, 178, 0.25);
  padding:        0.3rem 0.9rem;
  border-radius:  100px;
  margin-bottom:  1.8rem;
}

h1 {
  font-size:      clamp(2.4rem, 5.5vw, 4rem);
  font-weight:    800;
  line-height:    1.13;
  letter-spacing: -0.02em;
  margin-bottom:  1.4rem;
}

h1 em {
  font-style: normal;
  color:      var(--accent);
}

.hero-sub {
  font-size:   1.15rem;
  color:       var(--muted);
  max-width:   520px;
  margin:      0 0 2.4rem;
  line-height: 1.7;
}

.hero-badge {
  margin-top:      3.5rem;
  display:         flex;
  justify-content: flex-start;
  gap:             2.5rem;
  flex-wrap:       wrap;
}

.badge-item {
  text-align: center;
}

.badge-num {
  display:        block;
  font-size:      1.7rem;
  font-weight:    800;
  color:          var(--text);
  letter-spacing: -0.03em;
}

.badge-label {
  font-size:      0.78rem;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge-sep {
  width:      1px;
  background: var(--border);
  align-self: stretch;
}

/* SERVICES
   ============================================================ */
#services {
  border-top: 1px solid var(--border);
}

.services-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   1.25rem;
}

.service-card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: 12px;
  padding:       1.75rem;
  transition:    border-color 0.2s, transform 0.2s;
}

.service-card:hover {
  border-color: rgba(49, 138, 178, 0.35);
  transform:    translateY(-2px);
}

.service-icon {
  font-size:     1.5rem;
  margin-bottom: 1rem;
}

.service-card h3 {
  font-size:     1rem;
  font-weight:   700;
  margin-bottom: 0.5rem;
  color:         var(--text);
}

.service-card p {
  font-size:   0.9rem;
  color:       var(--muted);
  line-height: 1.6;
}

/* CREDIBILITY
   ============================================================ */
.section-credibility {
  border-top: 1px solid var(--border);
}

.credibility-groups {
  display:        flex;
  flex-direction: column;
  gap:            2.5rem;
}

.pill-heading {
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  1rem;
}

.pill-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.6rem;
}

.pill {
  font-size:     0.82rem;
  color:         var(--muted);
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: 100px;
  padding:       0.38rem 1rem;
  transition:    color 0.2s, border-color 0.2s, background 0.2s;
  cursor:        default;
  white-space:   nowrap;
}

.pill:hover {
  color:        var(--accent);
  border-color: rgba(49, 138, 178, 0.4);
  background:   rgba(49, 138, 178, 0.06);
}

/* ABOUT
   ============================================================ */
.section-about {
  border-top:            1px solid var(--border);
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           center;
}

@media (max-width: 700px) {
  .section-about {
    grid-template-columns: 1fr;
    gap:                   2rem;
  }
}

.about-quote {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-left:   3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding:       1.5rem 1.75rem;
  margin-top:    2rem;
}

.about-quote p {
  font-size:   0.95rem;
  color:       var(--muted);
  font-style:  italic;
  line-height: 1.7;
}

.about-quote cite {
  display:     block;
  margin-top:  0.75rem;
  font-size:   0.8rem;
  color:       var(--accent);
  font-style:  normal;
  font-weight: 600;
}

.about-right p {
  color:         var(--muted);
  font-size:     1rem;
  line-height:   1.8;
  margin-bottom: 1rem;
}

/* CONTACT
   ============================================================ */
.section-contact {
  border-top: 1px solid var(--border);
  max-width:  640px;
}

.section-contact .freeform-form {
  margin-top: 2rem;
  text-align: left;
}

/* FREEFORM
   ============================================================ */
.freeform-row {
  margin-bottom: 1.25rem;
}

.freeform-label {
  display:        block;
  font-size:      0.82rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  0.5rem;
}

.freeform-label.freeform-required::after {
  content: ' *';
  color:   var(--accent);
}

.freeform-input {
  width:         100%;
  background:    var(--bg2);
  color:         var(--text);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       0.75rem 1rem;
  font-family:   var(--font);
  font-size:     0.95rem;
  line-height:   1.5;
  transition:    border-color 0.2s, box-shadow 0.2s;
  appearance:    none;
  outline:       none;
}

.freeform-input::placeholder {
  color:   var(--muted);
  opacity: 0.5;
}

.freeform-input:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(49, 138, 178, 0.12);
}

textarea.freeform-input {
  min-height: 140px;
  resize:     vertical;
}

.freeform-input.freeform-has-errors {
  border-color: #e05252;
}

ul.freeform-errors {
  list-style: none;
  margin-top: 0.4rem;
  padding:    0;
}

ul.freeform-errors li {
  font-size: 0.82rem;
  color:     #e05252;
}

[type="submit"].freeform-input,
button.freeform-input {
  width:          auto;
  background:     var(--accent);
  color:          #0d0f14;
  font-weight:    700;
  font-size:      0.9rem;
  letter-spacing: 0.04em;
  border:         none;
  padding:        0.8rem 2rem;
  border-radius:  8px;
  cursor:         pointer;
  transition:     opacity 0.2s;
  margin-top:     0.5rem;
}

[type="submit"].freeform-input:hover,
button.freeform-input:hover {
  opacity: 0.85;
}

/* INTERIOR PAGES
   ============================================================ */
.page-header {
  padding:       8rem 2rem 4rem;
  border-bottom: 1px solid var(--border);
  background:    linear-gradient(to bottom, var(--bg2), var(--bg));
}

.page-header-inner {
  max-width: 1080px;
  margin:    0 auto;
}

.page-header .section-label {
  margin-bottom: 0.5rem;
}

.page-header h1 {
  font-size:      clamp(2rem, 4.5vw, 3.2rem);
  font-weight:    800;
  line-height:    1.15;
  letter-spacing: -0.02em;
}

.page-wrap {
  min-height: 60vh;
}

.page-body {
  max-width:   760px;
  margin:      0 auto;
  padding:     4rem 2rem 6rem;
  color:       var(--muted);
  font-size:   1.05rem;
  line-height: 1.8;
}

.page-body h2 {
  color:         var(--text);
  margin-top:    2.5rem;
  margin-bottom: 0.75rem;
}

.page-body h3 {
  color:         var(--text);
  font-size:     1.1rem;
  font-weight:   700;
  margin-top:    2rem;
  margin-bottom: 0.5rem;
}

.page-body p {
  margin-bottom: 1.25rem;
}

.page-body a {
  color:           var(--accent);
  text-decoration: none;
  border-bottom:   1px solid transparent;
  transition:      border-color 0.2s;
}

.page-body a:hover {
  border-color: var(--accent);
}

.page-body ul,
.page-body ol {
  padding-left:  1.5rem;
  margin-bottom: 1.25rem;
}

.page-body li {
  margin-bottom: 0.4rem;
}

.page-body blockquote {
  border-left:   3px solid var(--accent);
  padding:       1rem 1.5rem;
  margin:        1.5rem 0;
  background:    var(--bg2);
  border-radius: 0 8px 8px 0;
  font-style:    italic;
}

.page-body hr {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     2.5rem 0;
}