/* ============================================================
   Industry landing pages — shared page styles
   (financial.html · technology.html · insurance.html)

   Reuses the inspiration pages' design language WITHOUT touching the
   global design system:
     · bordered cards + hero graphic panel ........ from detect.css
     · glossy step markers + framed grids ......... from custom-agents.css
   All colour / spacing values resolve to the global --swatch--* /
   --site--* tokens defined in staging-trojai-environment.webflow.css.
   Layout + decoration only; typography comes from the global
   u-eyebrow / u-heading / u-text primitives composed in the markup.
   Loaded AFTER the global stylesheet.
   ============================================================ */

:root {
  --ind-stroke: rgba(255, 255, 255, 0.14);
  --ind-stroke-strong: rgba(255, 255, 255, 0.30);
  --ind-card-bg: rgba(255, 255, 255, 0.02);
  --ind-card-bg-hover: rgba(255, 255, 255, 0.045);
  --ind-radius: 16px;
  --ind-marker: radial-gradient(circle at 35% 30%, #7dffb0 0%, var(--swatch--colorp3) 48%, var(--swatch--colorp1) 100%);
}

/* ============================================================
   1 · HERO  — copy + bordered card (left) | graphic panel (right)
   ============================================================ */
.ind_hero {
  position: relative;
  overflow: hidden;
  background-color: var(--swatch--colorp4);
  background-image: url("../images/hero-background.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.ind_hero_container { position: relative; z-index: 1; }

.ind_hero_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.4rem);
  align-items: stretch;
}

/* ---- framed hero variant (financial / technology / insurance) ----
   No background image; instead a hairline frame: a rule top + bottom of
   the hero and a vertical divider between the two columns. Scoped via
   .is-framed so sibling pages keep their image-backed hero. */
.ind_hero.is-framed { background-image: none; }
.ind_hero.is-framed .ind_hero_grid {
  position: relative;
  padding-block: clamp(2.5rem, 4vw, 4.5rem);
}
/* full-bleed top + bottom rules — span the whole page width (clipped to the
   viewport by .ind_hero's overflow:hidden, so no horizontal scroll) */
.ind_hero.is-framed .ind_hero_container::before,
.ind_hero.is-framed .ind_hero_container::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 1px;
  background: var(--ind-stroke);
  pointer-events: none;
}
.ind_hero.is-framed .ind_hero_container::before { top: 0; }
.ind_hero.is-framed .ind_hero_container::after { bottom: 0; }
/* divider line in the gap between the two columns */
.ind_hero.is-framed .ind_hero_grid::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--ind-stroke);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 991px) {
  /* stacked: keep top/bottom rules, drop the (now meaningless) column divider */
  .ind_hero.is-framed .ind_hero_grid { padding-block: clamp(2rem, 6vw, 3rem); }
  .ind_hero.is-framed .ind_hero_grid::after { display: none; }
}

.ind_hero_left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 5vh, 4rem);
  min-width: 0;
}
.ind_hero_top { display: flex; flex-direction: column; gap: 1.75rem; }

/* bordered copy card (subhead + button) pinned to the column bottom */
.ind_hero_card {
  border: 1px solid var(--ind-stroke);
  border-radius: var(--ind-radius);
  padding: clamp(1.5rem, 2.4vw, 2.375rem);
  background: var(--ind-card-bg);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.4vw, 2.25rem);
}
.ind_hero_btns { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.ind_hero_right { display: flex; align-items: center; min-width: 0; }

/* ---- graphic panel (CSS-only plate: gradient + grid + floating mark) ---- */
.ind_panel {
  position: relative;
  width: 100%;
  max-width: 610px;
  margin-inline: auto;
  aspect-ratio: 610 / 596;
  border-radius: var(--ind-radius);
  border: 1px solid var(--ind-stroke);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 14%, rgba(0, 222, 100, 0.28) 0%, rgba(0, 222, 100, 0) 60%),
    linear-gradient(201deg, var(--swatch--colorp4) 38%, var(--swatch--colorp1) 128%);
}
/* faint engineering-grid overlay */
.ind_panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ind-stroke) 1px, transparent 1px),
    linear-gradient(90deg, var(--ind-stroke) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
  opacity: 0.5;
  pointer-events: none;
}
.ind_panel__pill {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 2; pointer-events: none;
}
.ind_panel__float {
  width: clamp(118px, 27%, 166px);
  animation: ind-float 4.5s ease-in-out infinite;
  will-change: transform;
}
.ind_panel__float svg { display: block; width: 100%; height: auto; }
/* round floating orb variant (financial/technology/insurance) — circle, no pill */
.ind_panel__float.is-orb { width: clamp(150px, 32%, 208px); }

@keyframes ind-float {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

/* frosted outcome marquee along the bottom edge */
.ind_panel__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(56px, 12.6%, 75px);
  display: flex; align-items: center;
  overflow: hidden; z-index: 3;
  background: rgba(0, 32, 23, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border-top: 1px solid var(--ind-stroke);
}
.ind_panel__marquee {
  display: flex;
  width: max-content;
  animation: ind-marquee 26s linear infinite;
  will-change: transform;
}
.ind_panel__track {
  display: flex; align-items: center; flex: 0 0 auto;
  gap: 1.5rem; padding-right: 1.5rem;
}
.ind_panel__sep { width: 17px; height: 17px; flex: 0 0 auto; display: block; }
.ind_panel__chip {
  color: var(--swatch--colors1);
  font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.01em; white-space: nowrap;
}
@keyframes ind-marquee { to { transform: translateX(-50%); } }

/* ============================================================
   2 · SECTION HEADER  (eyebrow + heading + intro)
   ============================================================ */
.ind_band { background-color: var(--swatch--colorp4); }
.ind_band--alt {
  background-image: linear-gradient(180deg, var(--swatch--colorp4) 0%, #00170f 100%);
}

.ind_head {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 46rem;
  margin-bottom: clamp(2.75rem, 4vw, 4rem);
}
.ind_head--center { margin-inline: auto; text-align: center; align-items: center; }
.ind_head_intro {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--swatch--light-100);
  opacity: 0.82;
  max-width: 42rem;
}

/* ============================================================
   3 · CARD GRID  (adoption 3-up · risks/outcomes 4-up)
   ============================================================ */
.ind_grid { display: grid; gap: clamp(1rem, 1.4vw, 1.5rem); }
.ind_grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ind_grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ind_grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ind_card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2vw, 2rem);
  border: 1px solid var(--ind-stroke);
  border-radius: var(--ind-radius);
  background: var(--ind-card-bg);
  overflow: hidden;
  transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
}
/* top accent hairline that warms to lime on hover */
.ind_card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--swatch--colorp3), transparent 70%);
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
.ind_card:hover {
  border-color: var(--ind-stroke-strong);
  background: var(--ind-card-bg-hover);
  transform: translateY(-3px);
}
.ind_card:hover::before { opacity: 1; }

.ind_card_marker {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ind-marker);
  box-shadow: 0 0 9px rgba(0, 222, 100, 0.55);
  flex: 0 0 auto;
}
.ind_card_title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--swatch--colors1);
}
.ind_card_desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--swatch--light-100);
  opacity: 0.82;
}

/* ============================================================
   4 · PILLARS  (3-up, numbered with glossy marker)
   ============================================================ */
.ind_pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.5vw, 1.75rem);
}
.ind_pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 2.2vw, 2.5rem);
  border: 1px solid var(--ind-stroke);
  border-radius: var(--ind-radius);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(0, 222, 100, 0.10) 0%, rgba(0, 222, 100, 0) 55%),
    var(--ind-card-bg);
}
.ind_pillar_num {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--swatch--light-100); opacity: 0.9;
}
.ind_pillar_num::before {
  content: "";
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ind-marker);
  box-shadow: 0 0 9px rgba(0, 222, 100, 0.55);
}
.ind_pillar_title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--swatch--colors1);
}
.ind_pillar_desc {
  margin: 0;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--swatch--light-100); opacity: 0.82;
}

/* ============================================================
   5 · PROOF MATRIX  (2-col table: Need | TrojAI Delivers)
   ============================================================ */
.ind_matrix {
  border: 1px solid var(--ind-stroke-strong);
  border-radius: var(--ind-radius);
  overflow: hidden;
  background-image: linear-gradient(201deg, var(--swatch--colorp4) 44%, var(--swatch--colorp1) 132%);
}
.ind_matrix_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
.ind_matrix_row + .ind_matrix_row { border-top: 1px solid var(--ind-stroke); }
.ind_matrix_cell {
  padding: clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.25rem, 2.4vw, 2.25rem);
  min-width: 0;
}
.ind_matrix_cell--need {
  border-right: 1px solid var(--ind-stroke);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.45;
  color: var(--swatch--colors1);
  font-weight: 500;
}
.ind_matrix_cell--deliver {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.9375rem; line-height: 1.5;
  color: var(--swatch--light-100); opacity: 0.9;
}
.ind_matrix_cell--deliver::before {
  content: "";
  margin-top: 0.45em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ind-marker);
  box-shadow: 0 0 7px rgba(0, 222, 100, 0.5);
  flex: 0 0 auto;
}
/* header row */
.ind_matrix_row--head .ind_matrix_cell {
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--swatch--colors1);
  opacity: 1;
}
.ind_matrix_row--head .ind_matrix_cell--deliver::before { display: none; }

/* ============================================================
   AGENT pages (third-party-agent / desktop-agent) — extras
   A centred lead + a pure-CSS "workflow" hub: an agent core node
   distributing down a rail to the integration nodes (no images).
   ============================================================ */
.ind_lead {
  max-width: 48rem;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.62;
  color: var(--swatch--light-100);
  opacity: 0.86;
}
.ind_lead--center { margin-inline: auto; text-align: center; }
.ind_flow + .ind_lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.ind_flow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2.25rem, 3.5vw, 3rem);
  border: 1px solid var(--ind-stroke);
  border-radius: var(--ind-radius);
  background:
    radial-gradient(55% 80% at 50% 0%, rgba(0, 222, 100, 0.12) 0%, rgba(0, 222, 100, 0) 62%),
    rgba(255, 255, 255, 0.015);
}
.ind_flow_label {
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--swatch--colorp3); font-weight: 600;
}
.ind_flow_core {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 1.4rem 0.6rem 0.6rem;
  border: 1px solid var(--ind-stroke-strong);
  border-radius: 999px;
  background: var(--swatch--colorp4);
}
.ind_flow_core_badge {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #0B845F 0%, #005D45 58%, #00402F 100%);
  border: 1px solid rgba(0, 222, 100, 0.45);
  display: grid; place-items: center; flex: 0 0 auto;
}
.ind_flow_core_badge svg { width: 21px; height: 21px; display: block; }
.ind_flow_core_label { font-weight: 600; color: var(--swatch--colors1); white-space: nowrap; }
.ind_flow_connector { width: 1px; height: clamp(1.75rem, 3vw, 2.5rem); background: var(--ind-stroke); }
.ind_flow_rail {
  position: relative; width: 100%;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem; padding-top: 1.5rem;
}
.ind_flow_rail::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%;
  height: 1px; background: var(--ind-stroke);
}
.ind_flow_node {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--ind-stroke);
  border-radius: 12px;
  background: var(--swatch--colorp4);
  font-size: 0.9375rem; line-height: 1.3; color: var(--swatch--colors1);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.ind_flow_node::before {
  content: ""; flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ind-marker); box-shadow: 0 0 7px rgba(0, 222, 100, 0.5);
}
.ind_flow_node:hover { border-color: var(--ind-stroke-strong); transform: translateY(-2px); }
@media (max-width: 767px) {
  .ind_flow_rail { flex-direction: column; align-items: stretch; }
  .ind_flow_rail::before { display: none; }
  .ind_flow_node { justify-content: flex-start; }
}

/* risk cards on the agent pages carry a bold-lead sentence, no separate title */
.ind_card_text { margin: 0; font-size: 0.9375rem; line-height: 1.58; color: var(--swatch--light-100); opacity: 0.88; }
.ind_card_text strong { color: var(--swatch--colors1); font-weight: 600; }

/* ============================================================
   6 · PREFOOTER CTA — reused from the home page (index.html)
   Same lime diagonal bands + guide lines + bottom glow as the
   home closing CTA, lifted out of its inline w-embed <style> into
   this shared sheet so the 3 industry pages share one copy.
   ============================================================ */
.ind_prefooter { position: relative; }
/* give the prefooter heading ~2× the default measure so it stops wrapping tight */
.ind_prefooter .u-heading { max-width: 22ch; margin-inline: auto; }

/* diagonal lime bands */
.cta-rect {
  position: absolute;
  width: 285px;
  height: 1800px;
  background-color: #D5FE70;
  pointer-events: none;
}
.cta-rect-left  { top: -50%; left: -10%;  transform: rotate(135deg) translateX(-50%); }
.cta-rect-right { top: -50%; right: -10%; transform: rotate(135deg) translateX(-100%); }

/* guide lines */
.cta-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cta-line { position: absolute; background: var(--swatch--light-100-o20); }
.cta-line--v { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.cta-line--ray {
  top: -12px; left: 50%;
  width: 15px; height: 220%;
  background: transparent;
  border-left: 1px solid var(--swatch--light-100-o20);
  border-right: 1px solid var(--swatch--light-100-o20);
  transform-origin: top center;
}

/* bottom glow */
.cta_glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cta_glow::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 110%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 100% at 50% 100%,
      rgba(40, 130, 95, 0.85) 0%,
      rgba(40, 130, 95, 0) 70%);
  mix-blend-mode: plus-lighter;
}

/* centred lead under the prefooter heading */
.ind_prefooter_text {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--swatch--light-100);
  opacity: 0.86;
}

@media screen and (max-width: 767px) {
  .cta-rect { display: none; }
}

/* ------------------------------------------------------------
   Legacy gradient CTA band (.ind_cta) — RETAINED: sibling pages
   (manufacturing / public-sector / blog, owned by another session)
   still use it. financial / technology / insurance now use the
   reused home prefooter above instead. Do not delete.
   ------------------------------------------------------------ */
.ind_cta_section { background-color: var(--swatch--colorp4); }
.ind_cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--ind-stroke-strong);
  border-radius: var(--ind-radius);
  background-image:
    radial-gradient(80% 120% at 50% 0%, rgba(0, 222, 100, 0.18) 0%, rgba(0, 222, 100, 0) 60%),
    linear-gradient(201deg, var(--swatch--colorp4) 40%, var(--swatch--colorp1) 130%);
}
.ind_cta_text {
  max-width: 44rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--swatch--light-100);
  opacity: 0.88;
}
.ind_cta .button_main_wrap { margin-top: 0.5rem; }

/* ============================================================
   7 · Reveal hook (.ind-reveal)
   Intentionally inert: content is ALWAYS visible. An earlier
   view-timeline reveal left below-the-fold sections at opacity:0
   on load (and blank to non-scrolling / no-JS contexts), so the
   gating was removed for reliability. The class is kept as a
   harmless styling hook for any future JS-gated entrance.
   ============================================================ */

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
  .ind_hero_grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }
  .ind_hero_left { justify-content: flex-start; }
  .ind_panel { max-width: 560px; }
  .ind_grid--3,
  .ind_grid--4,
  .ind_pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ind_matrix_row { grid-template-columns: 1fr; }
  .ind_matrix_cell--need { border-right: none; border-bottom: 1px solid var(--ind-stroke); }
  .ind_matrix_row--head { display: none; }   /* header labels redundant once stacked */
}
@media (max-width: 479px) {
  .ind_hero_btns { flex-direction: column; align-items: stretch; }
  .ind_hero_btns .button_main_wrap { width: 100%; }
  .ind_grid--3,
  .ind_grid--4,
  .ind_pillars { grid-template-columns: 1fr; }
}