/* Feature-page alignment + icon system (appended helpers) */
.feat-hero {
  position: relative;
  padding: 3.25rem 2rem 4.25rem;
  text-align: center;
  background: var(--hero-grad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Soft fade so hero blends into the next section (behind copy/buttons) */
.feat-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7.5rem;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,252,248,.45) 35%,
    rgba(245,249,252,.85) 72%,
    #f5f9fc 100%
  );
}
.feat-hero::after {
  content: none;
}
.feat-hero.orange-glow::before {
  background: linear-gradient(
    180deg,
    rgba(255,252,248,0) 0%,
    rgba(255,247,237,.55) 30%,
    rgba(245,249,252,.88) 70%,
    #f5f9fc 100%
  );
}
.feat-hero.green-glow::before {
  background: linear-gradient(
    180deg,
    rgba(248,253,249,0) 0%,
    rgba(244,251,245,.5) 28%,
    rgba(255,255,255,.88) 68%,
    #ffffff 100%
  );
}
.feat-hero.purple-glow::before {
  background: linear-gradient(
    180deg,
    rgba(248,250,255,0) 0%,
    rgba(243,238,254,.45) 30%,
    rgba(255,255,255,.88) 70%,
    #ffffff 100%
  );
}
.feat-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.feat-hero .ui-preview,
.feat-hero .chat-mockup {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  margin: 2.25rem auto 0;
}
.feat-hero .hero-badge { margin-left: auto; margin-right: auto; }
.feat-hero h1 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.feat-hero p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.feat-hero .hero-actions {
  justify-content: center;
  width: 100%;
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
}

/* Content sections: consistent left alignment inside container */
section .container > .section-label,
section .container > .section-title,
section .container > .section-sub {
  text-align: left;
}
.cta-band .hero-actions {
  justify-content: center !important;
  display: flex !important;
  gap: .85rem;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

.cap-item {
  align-items: flex-start;
  min-height: 100%;
}
.cap-item > div { min-width: 0; }

.feature-card {
  height: 100%;
  text-align: left;
  align-items: flex-start;
}
.feat-icon-large {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--accent);
}
.feat-icon-large svg,
.feat-icon-large img {
  width: 30px;
  height: 30px;
  display: block;
}
.feat-icon-large img { object-fit: contain; }

.product-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.product-logo.lg { width: 36px; height: 36px; }

.ci-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0,115,187,.08);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ci-icon svg,
.ci-icon img {
  width: 28px;
  height: 28px;
  display: block;
}
.ci-icon img { object-fit: contain; }
.ci-icon img.product-logo {
  width: 32px;
  height: 32px;
}

/* STAC section — soft blue wash that blends into next band */
.stac-section {
  position: relative;
  overflow: hidden;
  border-top: none;
  margin-top: -2.5rem;
  padding-top: calc(4.5rem + 1.25rem);
  background: linear-gradient(
    180deg,
    #f7fafc 0%,
    #f3f7fa 35%,
    #f8fafc 70%,
    #ffffff 100%
  );
}
.stac-section::before,
.stac-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}
.stac-section::before {
  width: 420px;
  height: 420px;
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(0, 115, 187, .07) 0%, transparent 70%);
}
.stac-section::after {
  width: 360px;
  height: 360px;
  right: -120px;
  bottom: -180px;
  background: radial-gradient(circle, rgba(236, 114, 17, .05) 0%, transparent 72%);
}
.stac-section > .container {
  position: relative;
  z-index: 1;
}

/* STAC section cards — very soft wash */
.stac-cap-grid .cap-item {
  background: linear-gradient(165deg, #ffffff 0%, #f7fafc 100%);
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: none;
  border-radius: var(--radius, 10px);
  padding: 1.15rem;
}

/* Code block soft shell */
.stac-code-wrap {
  margin-top: 2rem;
  padding: 1.1rem;
  border-radius: calc(var(--radius, 10px) + 8px);
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.7) 0%,
    rgba(247,250,252,.85) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
}
.stac-code-wrap .code-block {
  margin: 0;
  box-shadow: 0 12px 36px rgba(15, 23, 42, .14);
}
.stac-routing-visual {
  margin: 1.25rem 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}
.stac-routing-visual img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: var(--radius-lg, 14px);
}
.stac-routing-visual figcaption {
  padding: .65rem 0 0;
  font-size: .82rem;
  color: var(--muted);
  border-top: none;
  background: none;
}

/* Database logos — equal large size (Postgres + Apache Arrow) */
.ci-icon--logo {
  width: 56px;
  height: 56px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
}
.ci-icon--logo img.product-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.fc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0,115,187,.08);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.fc-icon svg,
.fc-icon img {
  width: 24px;
  height: 24px;
  display: block;
}
.fc-icon img { object-fit: contain; }
/* Tech-stack logos: no box/bg, left-aligned, larger */
.stack-logo {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  display: block;
  margin: 0 0 .9rem;
  padding: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-self: flex-start;
}

.arch-box .icon-wrap {
  width: 36px;
  height: 36px;
  margin: 0 auto .55rem;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.arch-box .icon-wrap img,
.arch-box .icon-wrap svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Light-theme arch boxes on feature pages (non-dark sections) */
section:not(.section-dark) .arch-box {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}
section:not(.section-dark) .arch-box .label { color: var(--heading); }
section:not(.section-dark) .arch-box .sub { color: var(--muted); }
section:not(.section-dark) .arch-arrow { color: var(--accent); }

.catalog-card .cc-header { align-items: center; }
.catalog-card .cc-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,115,187,.08);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.catalog-card .cc-icon img,
.catalog-card .cc-icon svg {
  width: 22px; height: 22px; display: block;
}
.catalog-card .cc-cmd {
  background: #16191f !important;
  color: #7dcea0 !important;
}

.split-grid { align-items: start; }
@media (max-width: 900px) {
  .split-grid { grid-template-columns: 1fr !important; }
}

/* Chat mockup on light theme */
.chat-mockup {
  background: linear-gradient(165deg, #0b1220 0%, #111827 42%, #020617 100%) !important;
  border: 1px solid rgba(56,189,248,.35) !important;
  text-align: left;
  width: 100%;
  max-width: 720px;
  color: #f8fafc !important;
}
.chat-mockup .bubble {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important;
  border-color: rgba(148,163,184,.25) !important;
  color: #f1f5f9 !important;
}
.chat-mockup .bubble.user {
  background: linear-gradient(135deg, rgba(14,165,233,.5) 0%, rgba(99,102,241,.45) 55%, rgba(45,212,191,.35) 100%) !important;
  border-color: rgba(56,189,248,.5) !important;
  color: #ffffff !important;
  font-weight: 500;
}
.chat-mockup .bubble.ai strong {
  color: #67e8f9 !important;
}
.chat-mockup .sql-hint {
  background: rgba(2,6,23,.7) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(56,189,248,.2);
}
.avatar {
  display: grid !important;
  place-items: center;
}
.avatar img, .avatar svg { width: 17px; height: 17px; }

.ui-preview {
  border-color: #3f4b5b !important;
  width: 100%;
  max-width: 900px;
}

.nav-active { color: var(--accent) !important; font-weight: 600; }

code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--bg2);
  border: none;
  border-radius: 4px;
  padding: .1rem .35rem;
  color: var(--ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}