/* =========================================================
   SENSIA HERO V5.1 — OFFICIAL VISUAL FIDELITY LAYER
   ========================================================= */

body {
  background: #020813;
}

.sensia-page {
  background:
    radial-gradient(circle at 51% 24%, rgba(20, 86, 172, .19), transparent 32rem),
    linear-gradient(180deg, #020814 0%, #030b18 48%, #020711 100%);
}

/* Header */

.site-header {
  min-height: 76px;
  width: min(calc(100% - 54px), 1510px);
  border-bottom: 0;
}

.brand img {
  width: 34px;
  height: 52px;
  filter:
    drop-shadow(0 0 9px rgba(54, 138, 255, .22))
    drop-shadow(0 0 20px rgba(54, 138, 255, .08));
}

.brand-copy strong {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .12em;
}

.brand-copy small {
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(194, 211, 235, .62);
}

.primary-nav a {
  font-size: 11px;
  font-weight: 600;
  color: rgba(239, 245, 255, .82);
}

.header-explore {
  min-height: 38px;
  min-width: 112px;
  justify-content: center;
  border: 1px solid rgba(77, 139, 255, .56);
  background:
    linear-gradient(
      180deg,
      rgba(19, 44, 90, .65),
      rgba(9, 25, 55, .82)
    );
  color: #fff;
  box-shadow:
    inset 0 0 15px rgba(41, 100, 211, .08),
    0 0 24px rgba(42, 112, 236, .05);
}

/* Hero viewport */

.hero.hero-v51 {
  width: min(calc(100% - 54px), 1510px);
  min-height: 640px;
  height: calc(100vh - 204px);
  max-height: 770px;
  grid-template-columns:
    minmax(360px, .78fr)
    minmax(720px, 1.38fr);
  gap: 42px;
  padding: 24px 62px 68px 20px;
  overflow: visible;
}

/* Space background */

.hero-space {
  position: absolute;
  inset: -76px -10vw -90px;
  pointer-events: none;
  overflow: hidden;
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
}

.nebula-a {
  width: 900px;
  height: 310px;
  left: 28%;
  top: -90px;
  transform: rotate(-8deg);
  background:
    radial-gradient(
      ellipse,
      rgba(20, 102, 220, .23),
      rgba(10, 53, 120, .07) 44%,
      transparent 72%
    );
}

.nebula-b {
  width: 1000px;
  height: 360px;
  right: -320px;
  top: 185px;
  transform: rotate(-14deg);
  background:
    radial-gradient(
      ellipse,
      rgba(23, 88, 191, .25),
      rgba(12, 51, 120, .08) 44%,
      transparent 72%
    );
}

.nebula-c {
  width: 760px;
  height: 300px;
  left: -300px;
  bottom: -70px;
  background:
    radial-gradient(
      ellipse,
      rgba(21, 75, 157, .18),
      transparent 70%
    );
}

.starfield {
  position: absolute;
  inset: 0;
  opacity: .7;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(66,155,255,.88) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(145,196,255,.65) 0 .7px, transparent 1px);
}

.starfield-a {
  background-size: 137px 137px, 193px 193px, 251px 251px;
  background-position: 11px 31px, 79px 17px, 44px 109px;
}

.starfield-b {
  opacity: .32;
  background-size: 89px 89px, 159px 159px, 211px 211px;
  background-position: 63px 12px, 4px 81px, 101px 41px;
}

/* Hero copy */

.hero-copy {
  align-self: center;
  transform: translateY(-6px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  font-size: 8px;
  letter-spacing: .2em;
}

.eyebrow i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4ea1ff;
  box-shadow: 0 0 8px rgba(78,161,255,.7);
}

.eyebrow i:nth-of-type(2) {
  background: #d469f2;
}

.eyebrow i:nth-of-type(3) {
  background: #d69b70;
}

.hero-copy h1 {
  max-width: 570px;
  font-size: clamp(54px, 4.75vw, 78px);
  line-height: .98;
  letter-spacing: -.05em;
}

.hero-copy h1 span {
  font-style: italic;
  font-weight: 400;
  background:
    linear-gradient(
      100deg,
      #fff 5%,
      #9fcaff 60%,
      #69a7f5 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-description {
  max-width: 515px;
  margin-top: 25px;
  font-size: 13px;
  line-height: 1.68;
  color: rgba(225,234,246,.72);
}

.hero-actions {
  margin-top: 28px;
}

.button {
  min-height: 45px;
  padding: 0 23px;
  font-size: 11px;
}

.button-primary {
  background:
    linear-gradient(135deg, #0d6ff4, #0a55d1);
  color: white;
  box-shadow:
    0 8px 30px rgba(22,105,245,.24),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.button-primary span {
  margin-left: 9px;
}

.button-secondary {
  border-color: rgba(119,166,230,.30);
  background: rgba(5,17,37,.65);
}

.hero-signature {
  margin-top: 35px;
}

.thinking-line {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 27px;
  font-style: italic;
  letter-spacing: -.045em;
  transform: rotate(-2deg);
  transform-origin: left;
  color: rgba(245,249,255,.9);
}

.realization-line {
  margin-top: 6px;
  font-size: 7px;
  letter-spacing: .28em;
  color: rgba(170,202,241,.6);
}

/* Knowledge matrix */

.knowledge-system {
  min-height: 590px;
  height: 590px;
  grid-template-columns:
    minmax(235px, 1fr)
    126px
    minmax(235px, 1fr);
  gap: 22px;
  overflow: visible;
}

.cards-column {
  height: 560px;
  justify-content: space-between;
  position: relative;
  z-index: 4;
}

.cards-left,
.cards-right {
  padding: 0;
}

.cards-left .knowledge-card:nth-child(n),
.cards-right .knowledge-card:nth-child(n) {
  transform: none;
}

.knowledge-card {
  min-height: 94px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 13px;
  align-items: center;
  padding: 12px 15px 12px 13px;
  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(17,37,72,.90),
      rgba(7,19,40,.86)
    );

  border: 1px solid rgba(104,153,226,.34);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 26px rgba(32,92,177,.04),
    0 12px 38px rgba(0,0,0,.24);
}

.knowledge-card::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 50%;
  border-radius: 50%;
  background: #9fd1ff;
  box-shadow:
    0 0 5px #77b8ff,
    0 0 15px #2c8dff;
}

.cards-left .knowledge-card::after {
  right: -25px;
}

.cards-right .knowledge-card::after {
  left: -25px;
}

.card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}

.card-icon-svg {
  width: 39px;
  height: 39px;
  fill: none;
  stroke: #62b6ff;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 4px rgba(70,168,255,.65))
    drop-shadow(0 0 10px rgba(45,123,248,.20));
}

.card-content {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.card-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}

.card-number {
  position: static;
  color: #4ca7ff;
  font-size: 9px;
  font-weight: 600;
}

.card-title {
  font-size: 9px;
  letter-spacing: .035em;
  color: rgba(245,249,255,.93);
}

.card-description {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(226,235,248,.83);
}

/* Connectors */

.connector-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.connector {
  fill: none;
  stroke-width: 1;
  filter: url(#connectorGlow);
}

.connector.left {
  stroke: url(#connectorGradientLeft);
}

.connector.right {
  stroke: url(#connectorGradientRight);
}

/* Spine */

.spine {
  width: 126px;
  height: 575px;
  z-index: 5;
}

.spine-aura {
  inset: 0 -155%;
  filter: blur(20px);
  background:
    radial-gradient(
      ellipse,
      rgba(42,132,255,.34),
      rgba(20,72,167,.11) 36%,
      transparent 70%
    );
}

.spine-line {
  width: 4px;
  height: 90%;
  top: 4%;
  background:
    linear-gradient(
      to bottom,
      rgba(80,165,255,.12),
      #66b2ff 17%,
      #eff8ff 50%,
      #4ea1ff 82%,
      rgba(70,153,255,.08)
    );

  box-shadow:
    0 0 5px #9ed4ff,
    0 0 14px #5cabff,
    0 0 34px rgba(40,130,255,.85),
    0 0 70px rgba(24,104,241,.42);
}

.spine-node {
  --node-size: calc(35px + (var(--node-index) * .72px));

  height: 8px;
  background:
    linear-gradient(
      90deg,
      rgba(15,50,105,.2),
      rgba(183,220,255,.96) 50%,
      rgba(14,48,99,.18)
    );

  border: 1px solid rgba(151,202,255,.76);

  box-shadow:
    0 0 6px rgba(180,220,255,.72),
    0 0 19px rgba(53,147,255,.52),
    inset 0 0 8px rgba(255,255,255,.35);
}

.spine-halo {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 51px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(219,240,255,.94);
  box-shadow:
    0 0 9px white,
    0 0 22px #62b6ff,
    0 0 58px rgba(49,139,255,.8);
}

.spine-base-v51 {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 62px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(
      180deg,
      rgba(232,246,255,.92),
      rgba(104,166,234,.62) 40%,
      rgba(29,79,144,.45)
    );
  border: 1px solid rgba(192,224,255,.7);
  box-shadow:
    0 0 10px rgba(206,235,255,.65),
    0 0 35px rgba(57,148,255,.55);
}

.energy {
  width: 6px;
  height: 6px;
  background: #fff;
  box-shadow:
    0 0 8px #fff,
    0 0 17px #63b5ff,
    0 0 32px #217cff;
}

/* Center lower label */

.hero-index {
  bottom: 17px;
  left: 67%;
  transform: translateX(-50%);
}

.hero-index strong {
  font-size: 10px;
  letter-spacing: .31em;
  color: rgba(230,240,255,.85);
}

.hero-index span {
  font-size: 7px;
  letter-spacing: .25em;
  color: rgba(154,194,240,.68);
}

/* Right intelligence axis */

.impact-axis {
  right: -47px;
  top: 53%;
  width: 120px;
  gap: 29px;
  align-items: flex-start;
}

.impact-axis-words {
  display: grid;
  gap: 17px;
  padding-left: 18px;
  border-left: 1px solid rgba(90,150,221,.14);
}

.impact-axis-words span {
  writing-mode: initial;
  font-size: 8px;
  letter-spacing: .24em;
  color: rgba(158,194,236,.62);
}

.impact-signature {
  display: grid;
  gap: 8px;
  width: 115px;
  margin-left: -7px;
  margin-top: 8px;
}

.impact-signature em {
  font-family: "Source Serif 4", serif;
  font-size: 22px;
  font-style: italic;
  letter-spacing: .12em;
  transform: rotate(-8deg);
  color: rgba(235,242,250,.78);
}

.impact-signature i {
  width: 63px;
  height: 1px;
  margin-left: 14px;
  transform: rotate(-10deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(207,227,250,.62),
      transparent
    );
}

.impact-signature small {
  font-size: 6px;
  line-height: 1.7;
  letter-spacing: .22em;
  color: rgba(139,183,232,.63);
}

/* Benefit rail */

.benefit-rail {
  width: min(calc(100% - 54px), 1510px);
  min-height: 79px;
  border-top: 1px solid rgba(63,135,224,.35);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.benefit-rail > span {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  padding: 15px 24px;
  text-transform: none;
  font-size: 10px;
  letter-spacing: 0;
  color: rgba(247,250,255,.88);
}

.benefit-rail > span > i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-size: 14px;
  color: #b8dcff;
  background:
    radial-gradient(
      circle,
      rgba(31,112,228,.32),
      rgba(9,33,72,.56)
    );
  border: 1px solid rgba(86,155,240,.25);
}

.benefit-rail > span > span {
  display: grid;
  gap: 5px;
}

.benefit-rail b {
  font-size: 8px;
  font-weight: 400;
  color: rgba(181,201,228,.64);
}

/* Footer */

.site-footer {
  width: min(calc(100% - 54px), 1510px);
  min-height: 86px;
}

.footer-brand img {
  width: 28px;
  height: 42px;
}

.footer-brand strong {
  font-size: 15px;
}

.footer-brand span {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.site-footer nav a {
  font-size: 9px;
}

.footer-meta {
  font-size: 7px;
}

/* Hover polish */

.knowledge-card:hover {
  translate: 0 -2px;
  border-color: rgba(92,172,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 34px rgba(38,108,215,.07),
    0 15px 48px rgba(0,0,0,.28),
    0 0 24px rgba(35,124,245,.08);
}

/* Desktop scaling */

@media (min-width: 1500px) and (max-height: 950px) {
  .hero.hero-v51 {
    height: 645px;
    min-height: 645px;
  }

  .knowledge-system {
    transform: scale(.96);
    transform-origin: center;
  }
}

@media (max-width: 1280px) {
  .hero.hero-v51 {
    grid-template-columns:
      minmax(320px, .76fr)
      minmax(650px, 1.36fr);
    gap: 24px;
    padding-right: 35px;
  }

  .knowledge-system {
    grid-template-columns:
      minmax(205px, 1fr)
      100px
      minmax(205px, 1fr);
  }

  .impact-axis {
    right: -22px;
  }
}

/* Mobile keeps native V5 layout */

@media (max-width: 880px) {
  .hero.hero-v51 {
    width: min(calc(100% - 28px), var(--max-width));
    height: auto;
    max-height: none;
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 58px 0 80px;
  }

  .hero-space {
    inset: -74px -40px;
  }

  .knowledge-system {
    height: auto;
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .connector-layer {
    display: none;
  }

  .cards-column {
    height: auto;
  }

  .knowledge-card {
    grid-template-columns: 48px 1fr;
  }

  .impact-axis {
    display: none;
  }

  .hero-index {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nebula,
  .spine-aura,
  .spine-node,
  .energy {
    animation: none !important;
  }
}