/* ============ Page sections ============ */

/* ── Hero ─────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--d-text);
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 80% 40%, var(--gold-glow), transparent 46%);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-block: 96px 104px;
}
.hero__title {
  font: 600 clamp(34px, 6vw, 62px)/1.03 var(--font-head);
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.hero__sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--d-soft);
  margin: 0 0 38px;
  max-width: 470px;
}
.hero__cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.hero__stats {
  display: flex;
  gap: 30px;
  margin-top: 52px;
  font: 500 13px var(--font-mono);
  color: var(--text-dim);
}
.stat b { color: var(--d-text); font-size: 15px; font-weight: 600; }
.stat b.stat--gold { color: var(--gold); }

/* tech constellation */
.hero__visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bgd-float 7s ease-in-out infinite;
}
/* Constellation stage: keeps the 420:400 ratio and scales uniformly, so the
   SVG (viewBox 420x400, meet) fills it with no letterboxing. Chips are placed
   in percentages of this box, so every tag sits exactly on its line end at any
   column width — no fixed-pixel drift, no overflow on narrow columns. */
.hero__stage {
  position: relative;
  width: 420px;
  max-width: 100%;
  aspect-ratio: 420 / 400;
}
.hero__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__links g { animation: bgd-dash 1.3s linear infinite; }
.hero__core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 55px rgba(200, 160, 75, 0.5);
}
.hero__core span {
  font: 600 14px var(--font-head);
  color: var(--ink);
  text-align: center;
  line-height: 1.1;
}
.chip {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 9px 15px;
  background: var(--ink-elev);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  font: 600 13px var(--font-mono);
  white-space: nowrap;
}
.ping {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  animation: bgd-pulse 2.6s ease-in-out infinite;
}

/* tech strip */
.techstrip {
  position: relative;
  border-top: 1px solid var(--border-dark);
  background: rgba(0, 0, 0, 0.25);
}
.techstrip__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 18px;
  flex-wrap: wrap;
}
.techstrip__label {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-dim);
}
.techstrip__item { font: 500 13px var(--font-mono); color: var(--d-mute); }

/* ── Services ─────────────────────────────────── */
.services { padding-block: 104px 90px; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc {
  background: var(--surface);
  border: 1px solid var(--border-ink);
  border-radius: var(--r-lg);
  padding: 30px 28px 28px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(20, 19, 15, 0.28);
  border-color: var(--border-gold);
}
.svc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.svc__no { font: 600 13px var(--font-mono); color: var(--gold); }
.svc__icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.svc__title { font: 600 20px/1.2 var(--font-head); letter-spacing: -0.01em; margin: 0 0 10px; }
.svc__desc { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 18px; }

/* ── Cases ────────────────────────────────────── */
.cases {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-ink);
  border-bottom: 1px solid var(--border-ink);
  padding-block: 104px 96px;
}
.cases__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.cases__intro { max-width: 600px; }
.cases__intro .section__head { margin: 0; }
.cases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.case {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-ink);
  border-radius: var(--r-xl);
  padding: 28px 28px 24px;
  color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.case:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px -22px rgba(20, 19, 15, 0.32);
  border-color: var(--border-gold);
  color: var(--ink);
}
.case__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.case__cat {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.case__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px var(--font-mono);
  color: var(--text-soft);
  padding: 3px 10px;
  background: var(--bg-base);
  border-radius: var(--r-pill);
}
.case__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.case__title { font: 600 23px/1.15 var(--font-head); letter-spacing: -0.015em; margin: 0 0 10px; }
.case__desc { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; }
.case__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border-ink);
}
.case .tags { margin-bottom: 22px; }
.case__domain { font: 500 13px var(--font-mono); color: var(--ink); }
.case__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px var(--font-body);
  color: var(--gold-deep);
}

/* ── FAQ ──────────────────────────────────────── */
.faq { padding-block: 104px 96px; }
.faq__wrap { max-width: 840px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border-ink);
  border-radius: 12px;
  overflow: hidden;
}
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 26px;
  text-align: left;
  font: 600 17px/1.35 var(--font-head);
  letter-spacing: -0.01em;
  color: var(--text);
}
.faq-item__icon {
  flex: none;
  position: relative;
  width: 26px; height: 26px;
  color: var(--gold);
  transition: transform 0.25s var(--ease);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
}
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after  { width: 2px; height: 14px; }
.faq-item.is-open .faq-item__icon { transform: rotate(135deg); }

.faq-item__a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.28s var(--ease), opacity 0.28s var(--ease);
}
.faq-item.is-open .faq-item__a { max-height: 320px; opacity: 1; }
.faq-item__a p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  padding: 0 26px 24px;
}

/* ── CTA band ─────────────────────────────────── */
.ctaband {
  position: relative;
  background: var(--ink);
  color: var(--d-text);
  overflow: hidden;
}
.ctaband__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 120%, rgba(200, 160, 75, 0.16), transparent 55%);
}
.ctaband__inner {
  position: relative;
  max-width: 900px;
  padding-block: 88px;
  text-align: center;
}
.ctaband__title {
  font: 600 clamp(30px, 5vw, 46px)/1.08 var(--font-head);
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.ctaband__sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--d-soft);
  margin: 0 auto 34px;
  max-width: 520px;
}
.ctaband__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ───────────────────────────────────── */
.footer {
  background: var(--ink-deep);
  color: var(--d-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-block: 64px 40px;
}
.footer .brand { margin-bottom: 16px; }
.footer__about { font-size: 14px; line-height: 1.6; margin: 0; max-width: 280px; }
.footer__col { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.footer__label {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-dim);
  margin-bottom: 5px;
}
.footer__col a:hover { color: var(--gold); }
.footer__link-ic { display: flex; align-items: center; gap: 8px; }
.footer__hours { color: var(--d-dim); font: 500 12px var(--font-mono); }
.footer__bar {
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font: 500 12px var(--font-mono);
  color: var(--d-dim);
}