/* ============================================================
   about.css — About page + Blog + RFQ Form
   ============================================================ */

/* ─── About Page Hero ─── */
.page-hero--about { padding-top: 7rem; padding-bottom: var(--space-section); border-bottom: var(--border-hairline); }

.badge-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--ink-3);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mist);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
  margin-right: var(--space-2);
}

.about-hero__badge-stack {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* ─── Founder ─── */
.founder-section { border-top: var(--border-hairline); }

.founder-portrait__frame {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ink-3);
  border: var(--border-hairline);
  position: relative;
}

.founder-portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(20%) contrast(1.05);
  transition: filter var(--duration-slow);
}

.founder-portrait:hover .founder-portrait__frame img {
  filter: grayscale(0%) contrast(1);
}

.founder-portrait__caption {
  padding: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.founder-portrait__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--white);
}

.founder-portrait__role { margin-top: var(--space-1); }

.founder-portrait__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}

.founder-quote {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-style: italic;
  color: var(--white);
  line-height: var(--leading-snug);
  border-left: 2px solid var(--harvest);
  padding-left: var(--space-8);
  margin-top: var(--space-8);
  letter-spacing: var(--tracking-snug);
}

.tech-stack-panel {
  padding: var(--space-8);
  background: var(--ink-2);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

.tech-stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tech-chip {
  padding: var(--space-2) var(--space-4);
  background: var(--ink-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--harvest);
  letter-spacing: var(--tracking-wide);
}

/* ─── Timeline ─── */
.timeline-section { border-top: var(--border-hairline); }
.timeline { position: relative; }

.timeline-track {
  position: absolute;
  top: 12px; left: 0; right: 0;
  height: 1px;
  background: var(--ink-4);
}

.timeline-track__fill {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, var(--harvest), var(--harvest-muted));
}

.timeline-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
  position: relative;
}

@media (max-width: 768px) {
  .timeline-items { grid-template-columns: 1fr 1fr; row-gap: var(--space-10); }
  .timeline-track { display: none; }
}

.timeline-item { position: relative; padding-top: var(--space-8); }

.timeline-item__dot {
  position: absolute;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ghost);
  border: 1px solid var(--ink-4);
  transform: translateY(8px);
}

.timeline-item--complete .timeline-item__dot {
  background: var(--harvest);
  border-color: var(--harvest);
  box-shadow: 0 0 10px rgba(200,131,10,0.4);
}

.timeline-item--active .timeline-item__dot {
  background: #3DD68C;
  border-color: #3DD68C;
  box-shadow: 0 0 10px rgba(61,214,140,0.4);
  animation: blink 2s ease-in-out infinite;
}

.timeline-item__event {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--white);
  line-height: var(--leading-snug);
  margin: var(--space-2) 0 var(--space-3);
}

.timeline-item__desc {
  font-size: var(--text-sm);
  color: var(--mist);
  line-height: var(--leading-relaxed);
}

/* ─── Blog Filter Bar ─── */
.blog-filter-bar {
  position: sticky;
  top: 66px;
  z-index: var(--z-raised);
  background: rgba(8,12,8,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: var(--border-hairline);
}

.blog-filter-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-4) clamp(1.25rem, 3vw, 4rem);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}

.blog-filter-inner::-webkit-scrollbar { display: none; }

.blog-filters { display: flex; gap: var(--space-2); }

.blog-filter-btn {
  padding: var(--space-2) var(--space-5);
  background: transparent;
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mist);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-base) var(--ease-out-expo);
}

.blog-filter-btn:hover { color: var(--white); border-color: var(--ghost); }
.blog-filter-btn.is-active { background: var(--harvest); color: var(--ink); border-color: var(--harvest); }

/* ─── Blog Grid ─── */
.blog-grid { row-gap: var(--grid-gutter); align-items: start; }
.blog-card { height: 100%; }

.blog-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-10);
  background: var(--ink-2);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  text-decoration: none;
  height: 100%;
  transition: border-color var(--duration-base), background var(--duration-base), transform var(--duration-base) var(--ease-out-expo);
}

.blog-card__inner:hover {
  border-color: var(--ghost);
  background: var(--ink-3);
  transform: translateY(-2px);
}

.blog-card--featured .blog-card__inner {
  background: var(--field);
  border-color: var(--ink-4);
  min-height: 340px;
  justify-content: flex-end;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.blog-card__category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--harvest);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.blog-card__read {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ghost);
  letter-spacing: var(--tracking-wide);
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--white);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  flex: 1;
}

.blog-card__title--sm { font-size: var(--text-2xl); }

.blog-card__excerpt {
  font-size: var(--text-base);
  color: var(--mist);
  line-height: var(--leading-relaxed);
  max-width: 440px;
}

.blog-card__cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--harvest);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: auto;
}

.blog-card__arrow { transition: transform var(--duration-base) var(--ease-out-expo); }
.blog-card__inner:hover .blog-card__arrow { transform: translateX(4px); }

/* ─── RFQ Section ─── */
.rfq-section { border-top: var(--border-hairline); }

.rfq-context__details {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-10);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rfq-detail {
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rfq-detail:last-child { border-bottom: none; }
.rfq-detail__value { font-size: var(--text-sm); color: var(--fog); line-height: var(--leading-base); }
.rfq-detail__value a { color: var(--harvest); text-decoration: none; }
.rfq-detail__value a:hover { text-decoration: underline; }

.rfq-form-panel {
  background: var(--ink-2);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rfq-form__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  border-bottom: var(--border-hairline);
  background: var(--ink-3);
}

.rfq-form__id { color: var(--harvest); font-size: var(--text-xs); }

.rfq-form {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-row { display: flex; gap: var(--space-6); }
.form-row--2col > * { flex: 1; }

@media (max-width: 600px) { .form-row { flex-direction: column; } }

.form-field { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mist);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.form-input {
  background: var(--ink);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fog);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  width: 100%;
}

.form-input::placeholder { color: var(--ghost); }
.form-input:focus {
  border-color: var(--harvest-muted);
  box-shadow: 0 0 0 3px rgba(200,131,10,0.1);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A8A7A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 8px;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 600px) { .form-radio-group { grid-template-columns: 1fr; } }

.form-radio { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.form-radio input[type="radio"] { display: none; }

.form-radio__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--mist);
  transition: color var(--duration-fast);
  cursor: pointer;
}

.form-radio__label::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  border: var(--border-hairline);
  flex-shrink: 0;
  transition: all var(--duration-fast);
}

.form-radio input:checked + .form-radio__label { color: var(--white); }
.form-radio input:checked + .form-radio__label::before {
  background: var(--harvest);
  border-color: var(--harvest);
  box-shadow: 0 0 0 3px rgba(200,131,10,0.2);
}

.form-submit-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}

.form-disclaimer { color: var(--ghost); line-height: var(--leading-relaxed); }

/* RFQ Success */
.rfq-success {
  padding: var(--space-16) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.rfq-success__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(61,214,140,0.1);
  border: 1px solid rgba(61,214,140,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3DD68C;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
}

.rfq-success__title { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--white); }
.rfq-success__desc { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--harvest); }
.rfq-success__sub { font-size: var(--text-base); color: var(--mist); max-width: 400px; line-height: var(--leading-relaxed); }


/* ── Technical Milestone Timeline ────────────────────────────────────────────
   .vk-timeline — vertical list, left border rail, dot markers.
   Three states: done / active / upcoming.
   ─────────────────────────────────────────────────────────────────────────── */

.vk-timeline-section {
  border-top: 1px solid rgba(45, 122, 71, 0.12);
  padding: var(--space-20, 5rem) 0;
}

.vk-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  /* Left rail */
  border-left: 2px solid rgba(45, 122, 71, 0.3);
  padding-left: 0;
}

/* ── Item ── */
.vk-timeline__item {
  position: relative;
  padding: 0 0 2.5rem 2rem;
  display: flex;
  gap: 0;
}

.vk-timeline__item:last-child {
  padding-bottom: 0;
}

/* ── Dot marker ── */
.vk-timeline__marker {
  position: absolute;
  left: -7px; /* centres the 12px dot on the 2px rail */
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid;
  background: #0A0D0B;
  flex-shrink: 0;
}

.vk-timeline__item--done   .vk-timeline__marker { border-color: #2D7A47; background: #2D7A47; }
.vk-timeline__item--active .vk-timeline__marker { border-color: #C47B1A; background: #3D2E0A; }
.vk-timeline__item--upcoming .vk-timeline__marker { border-color: #4A5E4D; background: #0A0D0B; }

/* ── Body ── */
.vk-timeline__body {
  flex: 1;
  min-width: 0;
}

/* ── Meta row: date + badge ── */
.vk-timeline__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.vk-timeline__date {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #C8830A;
  text-transform: uppercase;
}

/* ── Status badges ── */
.vk-timeline__badge {
  display: inline-block;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.6;
}

.vk-timeline__badge--done {
  background: #1F5733;
  color: #3AAF63;
}

.vk-timeline__badge--active {
  background: #3D2E0A;
  color: #C47B1A;
}

.vk-timeline__badge--upcoming {
  background: #111612;
  color: #4A5E4D;
  border: 1px solid #4A5E4D;
}

/* ── Label (milestone name) ── */
.vk-timeline__label {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #E8EDE6;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.vk-timeline__item--upcoming .vk-timeline__label {
  color: #8FA891;
}

/* ── Description ── */
.vk-timeline__desc {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #8FA891;
  line-height: 1.65;
  margin: 0;
}

.vk-timeline__item--upcoming .vk-timeline__desc {
  color: #4A5E4D;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .vk-timeline-section {
    padding: var(--space-14, 3.5rem) 0;
  }

  .vk-timeline__item {
    padding-bottom: 2rem;
  }

  .vk-timeline__label {
    font-size: 0.95rem;
  }
}