/* ════════════════════════════════════════════════════════════════════════════════
   TARGEM & SOFTWARE PAGES - PREMIUM CSS 2026
   Dark minimalist aesthetic with subtle glass morphism
   ════════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────────
   COMMON HERO STYLES
   ─────────────────────────────────────────────────────────────────────────────── */

.hero-targem,
.hero-software {
  position: relative;
  padding: var(--spacing-8);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(5, 7, 13, 0.95) 0%, rgba(5, 7, 13, 0.98) 100%);
  border-bottom: 0.5px solid rgba(184, 244, 223, 0.05);
}

.hero-targem::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 60%, rgba(184, 244, 223, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

.hero-software::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 40%, rgba(184, 244, 223, 0.015) 0%, transparent 50%);
  pointer-events: none;
}

.hero-targem .hero-copy h1,
.hero-software .hero-copy h1 {
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--spacing-3);
  color: #fff;
}

.hero-targem .hero-lead,
.hero-software .hero-lead {
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--spacing-4);
  max-width: 480px;
}

/* ───────────────────────────────────────────────────────────────────────────────
   TARGEM BADGE
   ─────────────────────────────────────────────────────────────────────────────── */

.targem-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: var(--spacing-3);
  background: rgba(184, 244, 223, 0.08);
  border: 0.5px solid rgba(184, 244, 223, 0.15);
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #b8f4df;
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
}

.targem-badge-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: #b8f4df;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ───────────────────────────────────────────────────────────────────────────────
   TARGEM HERO VISUAL
   ─────────────────────────────────────────────────────────────────────────────── */

.targem-identity-card {
  background: rgba(20, 25, 35, 0.6);
  border: 0.5px solid rgba(184, 244, 223, 0.1);
  border-radius: 0.75rem;
  padding: 1.5rem;
  backdrop-filter: blur(20px);
}

.targem-identity-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.targem-identity-card .card-header .dot {
  width: 0.375rem;
  height: 0.375rem;
  background: #b8f4df;
  border-radius: 50%;
}

.targem-identity-card .card-header strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.targem-identity-card .card-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.identity-item {
  padding-bottom: 1rem;
  border-bottom: 0.5px solid rgba(184, 244, 223, 0.1);
}

.identity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.identity-item .label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

.identity-item strong {
  font-weight: 600;
  color: #b8f4df;
}

/* Premium identity panel: shared Tobaru ecosystem palette */
body.targem-page[data-theme] .targem-identity-card.intro-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(99, 230, 190, 0.22) !important;
  border-radius: 30px !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  background:
    radial-gradient(circle at 12% 14%, rgba(99, 230, 190, 0.16), transparent 15rem),
    radial-gradient(circle at 96% 12%, rgba(255, 211, 119, 0.10), transparent 13rem),
    radial-gradient(circle at 85% 88%, rgba(255, 130, 119, 0.07), transparent 15rem),
    linear-gradient(145deg, rgba(18, 46, 36, 0.92), rgba(18, 30, 25, 0.76) 50%, rgba(13, 17, 17, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 34px 90px rgba(0, 0, 0, 0.34),
    0 0 48px rgba(99, 230, 190, 0.08) !important;
}

body.targem-page[data-theme] .targem-identity-card.intro-panel.reveal {
  transform: translate3d(0, 42px, 0) rotateX(7deg) scale(0.965) !important;
  transform-origin: center top;
}

body.targem-page[data-theme] .targem-identity-card.intro-panel.reveal.is-visible {
  transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) !important;
}

body.targem-page[data-theme] .targem-identity-card.intro-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(99, 230, 190, 0.17), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%);
  opacity: 0.82;
}

body.targem-page[data-theme] .targem-identity-card.intro-panel::after {
  content: "";
  position: absolute;
  left: -42px;
  top: 34%;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(99, 230, 190, 0.48);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(99, 230, 190, 0.22), transparent 38%);
  box-shadow: 0 0 38px rgba(99, 230, 190, 0.16);
  opacity: 0.88;
  animation: targem-orb-vertical 4.6s ease-in-out infinite;
}

body.targem-page[data-theme] .targem-identity-card.intro-panel > * {
  position: relative;
  z-index: 1;
}

body.targem-page[data-theme] .targem-identity-card .card-header {
  margin: -0.25rem -0.25rem 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(99, 230, 190, 0.13);
  border-radius: 20px;
  background: rgba(3, 14, 11, 0.42);
  color: rgba(242, 251, 247, 0.72) !important;
}

body.targem-page[data-theme] .targem-identity-card .card-header .dot:nth-child(1) {
  background: #63e6be !important;
  box-shadow: 0 0 18px rgba(99, 230, 190, 0.55);
}

body.targem-page[data-theme] .targem-identity-card .card-header .dot:nth-child(2) {
  background: #ffd377 !important;
  box-shadow: 0 0 18px rgba(255, 211, 119, 0.4);
}

body.targem-page[data-theme] .targem-identity-card .card-header .dot:nth-child(3) {
  background: #ff8277 !important;
  box-shadow: 0 0 18px rgba(255, 130, 119, 0.38);
}

body.targem-page[data-theme] .targem-identity-card .card-header strong {
  color: rgba(242, 251, 247, 0.76) !important;
  font-weight: 850;
  letter-spacing: 0.05em;
}

body.targem-page[data-theme] .targem-identity-card .card-content {
  gap: 0.85rem;
}

body.targem-page[data-theme] .targem-identity-card .identity-item {
  padding: clamp(0.95rem, 2vw, 1.2rem);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.024);
}

body.targem-page[data-theme] .targem-identity-card .identity-item:nth-child(1) {
  background: linear-gradient(145deg, rgba(99, 230, 190, 0.13), rgba(99, 230, 190, 0.035));
  border-color: rgba(99, 230, 190, 0.18);
}

body.targem-page[data-theme] .targem-identity-card .identity-item:nth-child(2) {
  background: linear-gradient(145deg, rgba(255, 211, 119, 0.12), rgba(255, 211, 119, 0.027));
  border-color: rgba(255, 211, 119, 0.18);
}

body.targem-page[data-theme] .targem-identity-card .identity-item:nth-child(3) {
  background: linear-gradient(145deg, rgba(255, 130, 119, 0.10), rgba(99, 230, 190, 0.045));
  border-color: rgba(255, 130, 119, 0.15);
}

body.targem-page[data-theme] .targem-identity-card .identity-item .label {
  color: rgba(242, 251, 247, 0.58) !important;
  font-weight: 800;
}

body.targem-page[data-theme] .targem-identity-card .identity-item strong {
  color: #bfffe8 !important;
  font-weight: 850;
  text-shadow: 0 0 22px rgba(99, 230, 190, 0.16);
}

body.targem-page[data-theme] .targem-identity-card .identity-item:nth-child(2) strong {
  color: #ffe3a3 !important;
  text-shadow: 0 0 22px rgba(255, 211, 119, 0.13);
}

body.targem-page[data-theme] .targem-identity-card .identity-item:nth-child(3) strong {
  color: #ffc8c2 !important;
  text-shadow: 0 0 22px rgba(255, 130, 119, 0.13);
}

body.targem-page[data-theme] .targem-identity-card.intro-panel.reveal.is-visible .card-header {
  animation: panel-header-drop 760ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

body.targem-page[data-theme] .targem-identity-card.intro-panel.reveal.is-visible .identity-item {
  animation: panel-stat-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.targem-page[data-theme] .targem-identity-card.intro-panel.reveal.is-visible .identity-item:nth-child(2) {
  animation-delay: 140ms;
}

body.targem-page[data-theme] .targem-identity-card.intro-panel.reveal.is-visible .identity-item:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes targem-orb-vertical {
  0%,
  100% {
    transform: translate3d(0, -8px, 0);
  }
  50% {
    transform: translate3d(0, 10px, 0);
  }
}

/* ───────────────────────────────────────────────────────────────────────────────
   SOFTWARE HERO VISUAL / PANEL
   ─────────────────────────────────────────────────────────────────────────────── */

.software-panel {
  background: rgba(20, 25, 35, 0.6);
  border: 0.5px solid rgba(184, 244, 223, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.software-panel .panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(184, 244, 223, 0.03);
  border-bottom: 0.5px solid rgba(184, 244, 223, 0.05);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.software-panel .panel-header span {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  background: #b8f4df;
  border-radius: 50%;
}

.software-panel .panel-content {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
}

.stat-box {
  display: flex;
  flex-direction: column;
}

.stat-box span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

.stat-box strong {
  font-weight: 700;
  font-size: 1.5rem;
  color: #b8f4df;
}

.status-line {
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 0.5px solid rgba(184, 244, 223, 0.1);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ───────────────────────────────────────────────────────────────────────────────
   CONCEPT GRID
   ─────────────────────────────────────────────────────────────────────────────── */

.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.concept-card {
  padding: 2rem;
  background: rgba(184, 244, 223, 0.02);
  border: 0.5px solid rgba(184, 244, 223, 0.08);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.concept-card:hover {
  background: rgba(184, 244, 223, 0.04);
  border-color: rgba(184, 244, 223, 0.15);
  transform: translateY(-2px);
}

.concept-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #fff;
}

.concept-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────────
   FLOW VISUAL - TARGEM
   ─────────────────────────────────────────────────────────────────────────────── */

.targem-flow-section {
  background: rgba(5, 7, 13, 0.8);
  border-top: 0.5px solid rgba(184, 244, 223, 0.05);
  border-bottom: 0.5px solid rgba(184, 244, 223, 0.05);
}

.flow-title {
  text-align: center;
  margin-bottom: 3rem;
}

.flow-title h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}

.flow-title p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
}

.flow-visual {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.flow-input,
.flow-process,
.flow-output {
  padding: 1.5rem;
  background: rgba(20, 25, 35, 0.6);
  border: 0.5px solid rgba(184, 244, 223, 0.1);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
}

.flow-input strong,
.flow-process strong,
.flow-output strong {
  display: block;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b8f4df;
  margin-bottom: 0.75rem;
}

.flow-input ul,
.flow-process ul,
.flow-output ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flow-input li,
.flow-process li,
.flow-output li {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.flow-input .icon,
.flow-process .icon,
.flow-output .icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.flow-pipe {
  width: 2rem;
  height: 1px;
  background: linear-gradient(to right, transparent, #b8f4df, transparent);
}

@media (max-width: 768px) {
  .flow-visual {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .flow-pipe {
    width: 1px;
    height: 1rem;
    margin: 0.5rem 0;
  }
}

/* Override: On software pages, hover should scale buttons without translating them */
.software-page .button:hover,
.software-page .hero-actions .button:hover {
  transform: scale(1.02) !important;
  translate: none !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.software-page .button:active,
.software-page .hero-actions .button:active {
  transform: scale(0.995) !important;
}

/* Ensure base state has no translation so hover doesn't animate translate -> scale */
.software-page .hero-actions .button {
  transform: translateZ(0) scale(1) !important;
  transition: transform 200ms cubic-bezier(0.2,0.9,0.2,1) !important;
  will-change: transform !important;
  animation: none !important;
}

/* Disable scroll-cue bouncing on software page (stop the dot movement) */
.software-page .scroll-cue span {
  /* restore vertical bounce for the inner dot */
  animation: scroll-cue-drop 1.6s ease-in-out infinite !important;
  opacity: 1 !important;
}

/* Hover: keep the scroll-cue centered but enlarge on hover (no lateral movement) */
.software-page .scroll-cue:hover {
  transform: translateX(-50%) scale(1.06) !important;
}

.software-page .scroll-cue:active {
  transform: translateX(-50%) scale(0.995) !important;
}

/* On hover, increase the dot's vertical travel for a more noticeable cue */
@keyframes scroll-cue-drop-large {
  0%, 100% {
    transform: translateY(-18px);
    opacity: 0.35;
  }
  45% {
    transform: translateY(18px);
    opacity: 1;
  }
}

.software-page .scroll-cue:hover span {
  animation: scroll-cue-drop-large 1s ease-in-out infinite !important;
}

/* ───────────────────────────────────────────────────────────────────────────────
   CAPABILITY GRID
   ─────────────────────────────────────────────────────────────────────────────── */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.capability-card {
  padding: 2rem;
  background: rgba(184, 244, 223, 0.02);
  border: 0.5px solid rgba(184, 244, 223, 0.08);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.capability-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #b8f4df, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.capability-card:hover {
  background: rgba(184, 244, 223, 0.04);
  border-color: rgba(184, 244, 223, 0.15);
  transform: translateY(-2px);
}

.capability-card:hover::before {
  opacity: 1;
}

.cap-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #b8f4df;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}

.capability-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #fff;
}

.capability-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────────
   PHILOSOPHY
   ─────────────────────────────────────────────────────────────────────────────── */

.targem-philosophy {
  background: rgba(5, 7, 13, 0.8);
  border-top: 0.5px solid rgba(184, 244, 223, 0.05);
}

.philosophy-content {
  max-width: 900px;
  margin: 0 auto;
}

.philosophy-content h2 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
  line-height: 1.2;
}

.philosophy-content > p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.philosophy-pillar {
  padding: 1.5rem;
  background: rgba(184, 244, 223, 0.02);
  border: 0.5px solid rgba(184, 244, 223, 0.08);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
}

.philosophy-pillar strong {
  display: block;
  font-weight: 600;
  color: #b8f4df;
  margin-bottom: 0.75rem;
}

.philosophy-pillar p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────────
   POWERED BY / ECOSYSTEM
   ─────────────────────────────────────────────────────────────────────────────── */

.targem-powered {
  margin-top: 0;
}

.powered-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.powered-item {
  padding: 1.5rem;
  background: rgba(20, 25, 35, 0.6);
  border: 0.5px solid rgba(184, 244, 223, 0.1);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
}

.powered-item strong {
  display: block;
  font-weight: 600;
  color: #b8f4df;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.powered-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────────
   SOFTWARE PROMISE
   ─────────────────────────────────────────────────────────────────────────────── */

.software-promise {
  background: rgba(5, 7, 13, 0.8);
  border-top: 0.5px solid rgba(184, 244, 223, 0.05);
  border-bottom: 0.5px solid rgba(184, 244, 223, 0.05);
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.promise-card {
  padding: 2rem;
  background: rgba(184, 244, 223, 0.02);
  border: 0.5px solid rgba(184, 244, 223, 0.08);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
  text-align: center;
  transition: all 0.3s ease;
}

.promise-card:hover {
  background: rgba(184, 244, 223, 0.04);
  border-color: rgba(184, 244, 223, 0.15);
  transform: translateY(-2px);
}

.promise-card .number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #b8f4df;
  margin-bottom: 1rem;
}

.promise-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #fff;
}

.promise-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────────
   MODULES GRID
   ─────────────────────────────────────────────────────────────────────────────── */

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.module-card {
  padding: 1.5rem;
  background: rgba(184, 244, 223, 0.02);
  border: 0.5px solid rgba(184, 244, 223, 0.08);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
  text-align: center;
  transition: all 0.3s ease;
}

.module-card:hover {
  background: rgba(184, 244, 223, 0.04);
  border-color: rgba(184, 244, 223, 0.15);
  transform: translateY(-2px);
}

.module-icon {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.module-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff;
}

.module-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────────
   REAL FLOW TIMELINE
   ─────────────────────────────────────────────────────────────────────────────── */

.flow-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.flow-moment {
  padding: 1.5rem;
  background: rgba(20, 25, 35, 0.6);
  border-left: 2px solid #b8f4df;
  border-radius: 0.5rem;
  position: relative;
}

.flow-moment::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 1.5rem;
  width: 18px;
  height: 18px;
  background: rgba(5, 7, 13, 1);
  border: 2px solid #b8f4df;
  border-radius: 50%;
}

.moment-time {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b8f4df;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.flow-moment h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff;
}

.flow-moment p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────────
   DIFFERENTIALS
   ─────────────────────────────────────────────────────────────────────────────── */

.differentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.differential {
  padding: 1.5rem;
  background: rgba(184, 244, 223, 0.02);
  border: 0.5px solid rgba(184, 244, 223, 0.08);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.differential:hover {
  background: rgba(184, 244, 223, 0.04);
  border-color: rgba(184, 244, 223, 0.15);
}

.differential strong {
  display: block;
  font-weight: 600;
  color: #b8f4df;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.differential p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────────
   SOFTWARE VISION
   ─────────────────────────────────────────────────────────────────────────────── */

.software-vision {
  background: rgba(5, 7, 13, 0.8);
  border-top: 0.5px solid rgba(184, 244, 223, 0.05);
  border-bottom: 0.5px solid rgba(184, 244, 223, 0.05);
  text-align: center;
}

.vision-content {
  max-width: 800px;
  margin: 0 auto;
}

.vision-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}

.vision-content p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.vision-content p:last-child {
  margin-bottom: 0;
}

/* ───────────────────────────────────────────────────────────────────────────────
   PRICING
   ─────────────────────────────────────────────────────────────────────────────── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.price-card {
  padding: 2rem;
  background: rgba(184, 244, 223, 0.02);
  border: 0.5px solid rgba(184, 244, 223, 0.08);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
}

.price-card:hover {
  background: rgba(184, 244, 223, 0.04);
  border-color: rgba(184, 244, 223, 0.15);
  transform: translateY(-2px);
}

.price-card.best-seller {
  border-color: #b8f4df;
  background: rgba(184, 244, 223, 0.05);
  transform: scale(1.02);
}

.price-card.featured {
  border-color: #b8f4df;
  background: rgba(184, 244, 223, 0.08);
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .price-card.best-seller,
  .price-card.featured {
    transform: scale(1);
  }
}

.price-card > span:first-child {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b8f4df;
  margin-bottom: 1rem;
  font-weight: 600;
}

.price-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #fff;
}

.price-card strong {
  font-size: 2.5rem;
  font-weight: 700;
  color: #b8f4df;
  margin-bottom: 0;
}

.plan-note {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.5rem;
  border-bottom: 0.5px solid rgba(184, 244, 223, 0.1);
  padding-bottom: 1.5rem;
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.price-card li {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 1.5rem;
  position: relative;
}

.price-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #b8f4df;
  font-weight: bold;
}

.price-card .button {
  margin-top: 1.5rem;
}

/* ───────────────────────────────────────────────────────────────────────────────
   CTA SECTIONS
   ─────────────────────────────────────────────────────────────────────────────── */

.targem-finale,
.software-finale {
  background: rgba(5, 7, 13, 0.8);
  border-top: 0.5px solid rgba(184, 244, 223, 0.05);
  text-align: center;
}

.finale-content {
  max-width: 700px;
  margin: 0 auto;
}

.finale-content .eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b8f4df;
  margin-bottom: 1rem;
}

.finale-content h2 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}

.finale-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
}

/* ───────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hero-targem,
  .hero-software {
    padding: var(--spacing-4);
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .hero-copy h1 {
    font-size: 1.75rem;
  }

  .hero-lead {
    font-size: 0.95rem;
  }

  .concept-grid,
  .modules-grid,
  .promise-grid,
  .powered-grid,
  .capability-grid,
  .philosophy-grid,
  .differentials-grid,
  .pricing-grid,
  .flow-timeline {
    grid-template-columns: 1fr;
  }

  .flow-visual {
    grid-template-columns: 1fr;
  }

  .flow-pipe {
    width: 1px;
    height: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-targem,
  .hero-software {
    padding: var(--spacing-3);
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .hero-copy h1 {
    font-size: 1.5rem;
  }

  .targem-badge {
    flex-direction: column;
    align-items: flex-start;
  }

  .promise-card .number,
  .cap-number,
  .module-icon {
    font-size: 2rem;
  }

  .pricing-grid .price-card.featured {
    transform: scale(1);
  }
}