/* ============================================================
   D. Anupam | Design System v4 "Institutional Blue"
   One language for every page. No per-page colour overrides.

   Ground is white. One saturated indigo carries the work and
   runs into a violet on every gradient, which ties back to the
   logo mark. Gold marks premium moments, mint marks data states
   only. Depth is a three step system, and every shadow is
   tinted with the ink rather than pure black.
   ============================================================ */

:root {
  /* Ground */
  --paper:      #FFFFFF;
  --paper-warm: #FAF9F7;
  --paper-alt:  #FCFCFD;

  /* Ink */
  --ink:      #0D0F2B;
  --ink-soft: #4B4E70;
  --muted:    #64677E;
  --faint:    #6E707F;

  /* Structure */
  --line:   #E6E7EF;
  --line-2: #E2E3EC;
  --line-3: #D4D6E4;

  /* Brand: one blue family, top to bottom. Nothing here hands off to a
     violet, which is what made every gradient read purple on the page. */
  --blue-950:   #060A1F;
  --blue-900:   #101C66;
  --blue-800:   #1B39B4;
  --indigo-700: #1B2ACB;
  --indigo-600: #2A3BE0;   /* the signal blue, primary */
  --indigo-500: #4356F0;
  --blue-400:   #3F63F2;
  --blue-300:   #5B8CF8;

  /* Premium accent */
  --gold:        #C79445;
  --gold-light:  #E8C98A;
  --gold-tint:   #FBF4E6;
  --gold-line:   #EBDCC0;
  --gold-ink:    #8A6620;

  /* Data signal */
  --mint:       #0D7D53;
  --mint-tint:  #E7F7F0;
  --mint-line:  #A9DCC6;
  --mint-panel: #F7FBF9;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #1B2ACB, #2A3BE0 55%, #3355EC);
  --grad-text:  linear-gradient(112deg, #1B2ACB 0%, #2A3BE0 32%, #3355EC 66%, #4A7BF4 100%);
  --grad-deep:  linear-gradient(140deg, #060A1F 0%, #101C66 44%, #17309C 76%, #284CC5 100%);
  --grad-gold:  linear-gradient(90deg, #C79445 0%, #E8C98A 28%, rgba(232,201,138,0) 70%);
  --grad-rule:  linear-gradient(90deg, rgba(42,59,224,0) 0%, rgba(42,59,224,0.45) 34%, rgba(67,86,240,0.45) 62%, rgba(67,86,240,0) 100%);
  --grad-hair:  linear-gradient(180deg, rgba(230,231,239,0), #E6E7EF, rgba(230,231,239,0));

  /* Depth: rest, raised, lifted, deep. Tinted with the ink. */
  --e-rest:   0 1px 2px rgba(13, 15, 43, 0.05);
  --e-raised: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(13, 15, 43, 0.05), 0 14px 34px -18px rgba(13, 15, 43, 0.16);
  --e-lifted: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(13, 15, 43, 0.05), 0 22px 50px -22px rgba(13, 15, 43, 0.20);
  --e-deep:   inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 64px -26px rgba(11, 13, 38, 0.66);
  --e-brand:  inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 14px 32px -12px rgba(42, 59, 224, 0.72);

  /* Shape: data is sharp, cards are soft, actions are pills */
  --r-data: 4px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-pill: 999px;

  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --shell: 1180px;
}

/* ---------- Base ---------- */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.66;
  position: relative;
  overflow-x: hidden;
}

.container { max-width: var(--shell); }

/* ---------- Type ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.hero-title {
  font-size: clamp(2.3rem, 4.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.042em;
}

.section-heading {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.042em;
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede  { color: var(--ink-soft); font-size: 1rem; line-height: 1.66; }
.prose { color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }

/* Legacy utility from the old dark theme, remapped */
.text-white-50 { color: var(--ink-soft) !important; }
.text-white    { color: var(--ink) !important; }
.text-purple   { color: var(--indigo-600) !important; }

/* Monospace carries labels, numerals and eyebrows: the engineered signal */
.mono,
.label-text,
.plan-label,
.step-label,
.primary-badge,
.band-text,
.console-chrome,
.stat-cap,
.addon-price,
.meta-cell {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Every label sits inside a container. Nothing floats. */
.label-text,
.plan-label,
.step-label,
.primary-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.82rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--paper), var(--paper-alt));
  box-shadow: var(--e-rest);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.label-text::before,
.primary-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--indigo-600);
  flex-shrink: 0;
}
.primary-badge {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, #FEFBF4, var(--gold-tint));
  color: var(--gold-ink);
}
.primary-badge::before { background: var(--gold); }

/* The old editorial rule is retired */
.label-line { display: none; }
.section-label { display: inline-flex; align-items: center; margin-bottom: 1rem; }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.34rem 0.9rem 0.34rem 0.4rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #FEFBF4, var(--gold-tint));
  box-shadow: 0 1px 2px rgba(138, 102, 32, 0.06);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow-pill .pill-tag {
  display: inline-flex;
  padding: 0.18rem 0.44rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold), #E0AE63);
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.status-dot {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  display: inline-block;
  flex-shrink: 0;
}
.status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(18, 168, 112, 0.32);
}

/* ---------- Navigation ---------- */

.navbar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  position: relative;
}
.navbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--grad-rule);
}
.navbar-brand {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink) !important;
}
.logo-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
  background: var(--grad-brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px -6px rgba(42, 59, 224, 0.7);
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; }

.navbar .nav-link {
  font-size: 0.845rem;
  font-weight: 500;
  color: var(--ink-soft) !important;
  padding: 0.35rem 0.8rem;
  border-radius: 7px;
  transition: color 0.22s var(--ease), background 0.22s var(--ease);
}
.navbar .nav-link:hover { color: var(--ink) !important; background: rgba(13, 15, 43, 0.04); }
.navbar .nav-link.active { color: var(--ink) !important; font-weight: 600; }

.lang-switch {
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 0.24rem 0.56rem;
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  transition: all 0.2s var(--ease);
}
.lang-switch:hover { border-color: var(--line-3); color: var(--ink); }
.lang-switch.is-active { color: var(--ink); background: var(--paper-alt); box-shadow: var(--e-rest); }

.navbar-toggler { border-color: var(--line-2); padding: 0.3rem 0.5rem; border-radius: 9px; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%230D0F2B' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */

.btn-purple {
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 0.76rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: var(--e-brand);
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.btn-purple:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 20px 42px -14px rgba(42, 59, 224, 0.8);
}

.btn-ghost,
.btn-outline-light {
  background: linear-gradient(180deg, var(--paper), var(--paper-alt));
  color: var(--ink);
  border: 1px solid var(--line-3);
  border-radius: var(--r-pill);
  padding: 0.76rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--e-rest);
  transition: all 0.24s var(--ease);
}
.btn-ghost:hover,
.btn-outline-light:hover {
  color: var(--ink);
  border-color: rgba(42, 59, 224, 0.35);
  transform: translateY(-2px);
  box-shadow: var(--e-raised);
}
.btn-sm { padding: 0.5rem 1.05rem; font-size: 0.78rem; }

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.76rem 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s var(--ease);
}
.link-quiet:hover { color: var(--ink); border-color: var(--line); background: var(--paper-alt); }

/* ---------- Panels ----------
   One recipe shared by every card on every page.               */

.panel,
.service-card, .plan-card, .addons-card, .addon-item,
.why-card, .traction-card, .testimonial-card, .step-card,
.partner-card, .expert-card, .strengths-card, .dashboard-card,
.contact-banner, .cta-banner, .intro-banner, .partner-primary,
.legal-content, .console, .meta-strip {
  background: linear-gradient(180deg, var(--paper), var(--paper-alt));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-raised);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}

.service-card, .why-card, .traction-card, .step-card,
.partner-card, .expert-card, .addon-item { padding: 1.6rem; }
.plan-card, .addons-card, .strengths-card, .testimonial-card,
.partner-primary, .cta-banner, .legal-content { padding: 1.9rem; }
.contact-banner, .intro-banner { padding: 2.4rem; }
.service-card { min-height: 178px; }

.service-card:hover, .plan-card:hover, .why-card:hover,
.traction-card:hover, .step-card:hover, .partner-card:hover,
.expert-card:hover, .testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--e-lifted);
  border-color: var(--line-2);
}

/* The deep surface. One per page, and it earns it. */
.panel-deep,
.plan-featured,
.intro-banner {
  position: relative;
  overflow: hidden;
  background: var(--grad-deep);
  border: none;
  color: #fff;
  box-shadow: var(--e-deep);
}
.panel-deep::before,
.plan-featured::before,
.intro-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
  z-index: 2;
}
/* Grain dithers the gradient so it does not band on 8 bit screens */
.panel-deep::after,
.plan-featured::after,
.intro-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel-deep > *,
.plan-featured > *,
.intro-banner > * { position: relative; z-index: 1; }

.panel-deep h1, .panel-deep h2, .panel-deep h3, .panel-deep h4, .panel-deep h5, .panel-deep h6,
.plan-featured h1, .plan-featured h2, .plan-featured h3, .plan-featured h4, .plan-featured h5,
.intro-banner h1, .intro-banner h2, .intro-banner h3, .intro-banner h4, .intro-banner h5 { color: #fff; }
.panel-deep .text-white-50,
.plan-featured .text-white-50,
.intro-banner .text-white-50 { color: rgba(255, 255, 255, 0.78) !important; }
.panel-deep .label-text,
.plan-featured .plan-label,
.intro-banner .label-text {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}
.panel-deep .label-text::before { background: var(--gold-light); }
/* The indigo gradient has no contrast on the deep surface, so it turns gold */
.panel-deep .gradient-text,
.intro-banner .gradient-text {
  background: linear-gradient(112deg, #E8C98A 0%, #F3DCAF 55%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gold corner brackets: the premium tell */
.bracket-tl, .bracket-br { position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 2; }
.bracket-tl { top: 18px; left: 18px; border-left: 1px solid rgba(232,201,138,0.5); border-top: 1px solid rgba(232,201,138,0.5); }
.bracket-br { bottom: 18px; right: 18px; border-right: 1px solid rgba(232,201,138,0.5); border-bottom: 1px solid rgba(232,201,138,0.5); }

/* Panel internals */
.panel-flush { padding: 0; overflow: hidden; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-alt), var(--paper-warm));
}
.panel-body { padding: 1.9rem; }

.cell-grid { display: grid; }
.cell-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell {
  padding: 1.5rem 1.4rem;
  border-right: 1px solid var(--line);
}
.cell:last-child { border-right: 0; }
.cell-idx {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-data);
  background: var(--paper-alt);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem; font-weight: 500;
  color: var(--indigo-600);
  margin-bottom: 0.9rem;
}
/* Names like "Detail-oriented" must not break at their hyphen */
.cell b {
  display: block;
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: -0.026em;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  white-space: nowrap;
}
@media (max-width: 1199px) { .cell b { white-space: normal; } }

.rule { height: 1px; background: var(--line); border: 0; opacity: 1; }
.rule-hair { height: 12px; width: 1px; background: var(--grad-hair); border: 0; }

/* ---------- Icon tiles ---------- */

.icon-box, .plan-icon, .expert-icon, .intro-icon, .dash-stat-icon {
  background: linear-gradient(180deg, rgba(42, 59, 224, 0.1), rgba(42, 59, 224, 0.04));
  border: 1px solid rgba(42, 59, 224, 0.16);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--indigo-600);
  flex-shrink: 0;
  box-shadow: var(--e-rest);
}
.icon-box, .plan-icon, .expert-icon, .intro-icon { width: 42px; height: 42px; font-size: 1rem; }
.intro-banner .intro-icon {
  background: rgba(232, 201, 138, 0.14);
  border-color: rgba(232, 201, 138, 0.42);
  color: var(--gold-light);
}

.strength-check, .check-circle, .plan-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mint-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.plan-featured .plan-check { background: rgba(232, 201, 138, 0.18); color: var(--gold-light); }

/* ---------- Numerals ---------- */

.price-value, .dash-stat-value, .stat-value {
  font-weight: 600;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price-value { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.stat-value  { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.plan-featured .price-value { color: #fff; }
.addon-price { font-size: 0.74rem; font-weight: 500; color: var(--indigo-600); background: none; padding: 0; }
.stat-cap, .console-chrome { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }

/* ---------- Product console (home) ---------- */

.console { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-lifted); }
.console-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-alt), var(--paper-warm));
}
.console-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.console-col { padding: 1.4rem; border-right: 1px solid var(--line); }
.console-col:last-child { border-right: 0; }
.console-label { font-size: 0.82rem; color: var(--ink-soft); }
.console-arrow { color: var(--indigo-600); font-size: 0.82rem; }

.dash-stat, .dashboard-health {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.9rem;
}
.dash-stat-icon { width: 26px; height: 26px; font-size: 0.68rem; }
.dash-stat-value { font-size: 1.4rem; }
.delta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem; font-weight: 500; color: var(--mint);
  font-variant-numeric: tabular-nums;
  padding: 0.16rem 0.4rem;
  border: 1px solid var(--mint-line);
  border-radius: var(--r-data);
  background: var(--mint-tint);
}

.health-bars { display: flex; gap: 9px; align-items: flex-end; justify-content: space-between; height: 92px; }
.health-bar {
  flex: 1; max-width: 15px;
  background: linear-gradient(180deg, var(--indigo-500) 0%, var(--indigo-700) 62%, rgba(27, 42, 203, 0.22) 100%);
  border-radius: 4px 4px 2px 2px;
}

.dash-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.88rem 0.1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.dash-item:last-child { border-bottom: 0; }
.tag-done, .tag-live, .tag-idle {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.1em;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-data);
  border: 1px solid transparent;
}
.tag-done { color: var(--mint); border-color: var(--mint-line); background: var(--mint-tint); }
.tag-live { color: var(--indigo-600); border-color: rgba(42,59,224,0.24); background: rgba(42,59,224,0.07); }
.tag-idle { color: var(--faint); border-color: var(--line-2); }

/* Contained replacement for loose lines of text */
.meta-strip { display: grid; grid-template-columns: auto 1fr; overflow: hidden; box-shadow: var(--e-rest); }
.meta-cell {
  padding: 0.85rem 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex; align-items: center; gap: 0.55rem;
}
.meta-cell + .meta-cell { border-left: 1px solid var(--line); }
.meta-strong { color: var(--ink); font-weight: 500; }

/* ---------- The figure ----------
   Built from real elements rather than a drawing, so the labels
   translate, reflow and stay selectable. The rules between them
   are pseudo elements, and they drop away when it stacks.       */

.figure {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 1rem 2.6rem;
  align-items: center;
  padding: 1.9rem 1.5rem 2.6rem;
}
.figure-col { display: flex; flex-direction: column; gap: 1rem; }
.figure-tag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.figure-out .figure-tag { text-align: right; }

.fchip {
  position: relative;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-3);
  border-radius: var(--r-data);
  background: var(--paper);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.38;
  color: var(--ink);
  box-shadow: var(--e-rest);
}
.fchip.is-out { background: var(--mint-panel); border-color: var(--mint-line); }

.figure-in .fchip::after,
.figure-out .fchip::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 2.6rem;
  height: 1px;
}
.figure-in .fchip::after {
  left: 100%;
  background: linear-gradient(90deg, rgba(199, 202, 218, 0.35), var(--indigo-600));
}
.figure-out .fchip::after {
  right: 100%;
  background: linear-gradient(90deg, var(--mint), rgba(190, 230, 213, 0.45));
}
.figure-in .fchip::before,
.figure-out .fchip::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -2px;
  border-radius: 50%;
}
.figure-in .fchip::before { left: calc(100% + 2.6rem - 3px); background: var(--indigo-600); }
.figure-out .fchip::before { right: calc(100% + 2.6rem - 3px); background: var(--mint); }

.figure-node {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #0F1A5E 0%, #18299A 52%, #284CC5 100%);
  color: #fff;
  padding: 1.5rem 1.6rem;
  box-shadow: var(--e-deep);
}
.figure-node::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  z-index: 2;
}
.figure-node::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.figure-node > * { position: relative; z-index: 1; }
.figure-node .node-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.figure-node h3 {
  margin: 0.7rem 0 0.9rem;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: #fff;
}
.figure-node .node-rule { height: 1px; background: rgba(255, 255, 255, 0.2); margin-bottom: 0.85rem; }
.figure-node .node-item { font-size: 0.82rem; color: rgba(255, 255, 255, 0.86); margin-bottom: 0.3rem; }
.node-chip {
  display: inline-flex;
  margin-top: 0.9rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(232, 201, 138, 0.45);
  border-radius: var(--r-data);
  background: rgba(232, 201, 138, 0.14);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* Registration marks frame the figure, and a bracket names the scope.
   The wrapper is taken out of flow so it does not consume a grid cell. */
.figure-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.figure-marks span {
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
.figure-marks span:nth-child(1) { top: 10px; left: 10px; border-left: 1px solid var(--line-3); border-top: 1px solid var(--line-3); }
.figure-marks span:nth-child(2) { top: 10px; right: 10px; border-right: 1px solid var(--line-3); border-top: 1px solid var(--line-3); }
.figure-marks span:nth-child(3) { bottom: 10px; left: 10px; border-left: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); }
.figure-marks span:nth-child(4) { bottom: 10px; right: 10px; border-right: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); }

.figure-scope {
  grid-column: 2;
  justify-self: center;
  margin-top: 0.2rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  position: relative;
  padding-top: 0.85rem;
  width: 100%;
  text-align: center;
}
.figure-scope::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  border: 1px dashed var(--line-3);
  border-bottom: 0;
}

@media (max-width: 991px) {
  .figure {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 1.4rem 1.1rem 1.8rem;
  }
  .figure-in .fchip::after, .figure-out .fchip::after,
  .figure-in .fchip::before, .figure-out .fchip::before { display: none; }
  .figure-out .figure-tag { text-align: left; }
  .figure-scope { grid-column: 1; }
}

/* Segmented switcher */
.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgba(13, 15, 43, 0.04);
}
.segmented button {
  border: 0; cursor: pointer;
  padding: 0.44rem 0.9rem;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s var(--ease);
}
.segmented button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ---------- Page specific pieces ---------- */

.popular-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #3A2708;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.32rem 0.9rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 16px -6px rgba(199, 148, 69, 0.8);
  border: none;
}

.quote-mark { font-size: 1.9rem; font-weight: 600; color: var(--indigo-500); line-height: 1; margin-bottom: 0.5rem; }

.step-num {
  position: absolute; top: 0.5rem; right: 1rem;
  font-size: 3.2rem; font-weight: 600;
  color: rgba(13, 15, 43, 0.05);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.client-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--paper), var(--paper-alt));
  padding: 0.55rem 1rem;
  font-size: 0.83rem; font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--e-rest);
  transition: all 0.22s var(--ease);
}
.client-tag:hover { border-color: rgba(42,59,224,0.3); color: var(--ink); box-shadow: var(--e-raised); }

.partner-logo-img { height: 28px; width: auto; object-fit: contain; filter: brightness(0); opacity: 0.55; transition: opacity 0.22s var(--ease); }
.partner-logo-img:hover { opacity: 0.9; }
.partner-logo-img.no-invert { filter: none; opacity: 1; }
.expert-card li { color: var(--ink-soft); font-size: 0.86rem; margin-bottom: 0.4rem; }
.expert-card li::before { content: '→ '; color: rgba(42, 59, 224, 0.45); }

/* Partner marks: an SVG where we have one, a monogram tile where we do not,
   so a missing logo never leaves a hole in the grid. */
.partner-mark {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--e-rest);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.partner-mark img { width: 100%; height: 100%; object-fit: contain; }
/* Wordmark variant: keeps the row's height so the cards still line up,
   but lets a wide logo be itself instead of being squashed into a square. */
.partner-mark.is-wide {
  width: auto;
  min-width: 42px;
  max-width: 158px;
  padding: 0 0.65rem;
}
.partner-mark.is-wide img { width: auto; height: 24px; }

.partner-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.028em; margin: 0; }
.partner-kind {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The checklist box inside a recommended solution */
.feature-box {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.9rem 1rem;
}
.feature-box span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.83rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.feature-box span:last-child { margin-bottom: 0; }

.section-tagline {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.di-lockup { display: inline-flex; align-items: center; gap: 1rem; text-align: left; }
.di-mark {
  width: 62px; height: 62px;
  background: var(--ink);
  border-radius: 13px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: var(--e-raised);
}
.di-mark-letters { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.di-mark-sub { font-size: 0.33rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin-top: 3px; }
.di-word { display: inline-flex; flex-direction: column; }
.di-word-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); text-transform: uppercase; white-space: nowrap; }
.di-word-tag { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
/* On the deep panel the lockup inverts, the way their letterhead prints it */
.panel-deep .di-mark { background: #F5F5F4; color: #0A0A0A; }
.panel-deep .di-word-name { color: #FFFFFF; }
.panel-deep .di-word-tag { color: rgba(255, 255, 255, 0.78); }

/* Legal pages */
.legal-content h2 { font-size: 1.15rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.7rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: 0.89rem; }
.legal-content a { color: var(--indigo-600); }

/* Forms */
.form-dark {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0.72rem 0.9rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  color: var(--ink);
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(13, 15, 43, 0.04);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-dark:focus {
  border-color: rgba(42, 59, 224, 0.5);
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 59, 224, 0.1);
}
.form-dark::placeholder { color: var(--faint); }
textarea.form-dark { min-height: 110px; resize: vertical; }
select.form-dark option { background: var(--paper); color: var(--ink); }
.form-label-mono {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.45rem;
}

/* ---------- Sections ---------- */

.section      { padding: 5rem 0; }
.section-tight{ padding: 0 0 5rem; }
.section-alt  { background: var(--paper-warm); position: relative; }
.section-alt::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(13, 15, 43, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.section-alt > * { position: relative; }

.hero { position: relative; padding: 4.5rem 0 3rem; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  top: -300px; left: 50%;
  width: 1440px; height: 820px;
  margin-left: -720px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36% 44% at 50% 54%, rgba(42, 59, 224, 0.13), rgba(255,255,255,0) 72%),
    radial-gradient(28% 36% at 76% 38%, rgba(63, 99, 242, 0.12), rgba(255,255,255,0) 74%);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* ---------- Footer ---------- */

footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  position: relative;
}
footer::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--grad-rule);
}
footer h6 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
footer a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s var(--ease);
}
footer a:hover { color: var(--ink); }
footer a.is-strong { color: var(--ink); font-weight: 600; }

/* ---------- Motion ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.75s var(--ease) both; }
.rise-1 { animation-delay: 0.04s; }
.rise-2 { animation-delay: 0.1s; }
.rise-3 { animation-delay: 0.16s; }
.rise-4 { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .hero { padding: 2.75rem 0 2rem; }
  .section { padding: 3.5rem 0; }
  .section-tight { padding: 0 0 3.5rem; }
  .console-grid { grid-template-columns: 1fr; }
  .console-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .console-col:last-child { border-bottom: 0; }
  .meta-strip { grid-template-columns: 1fr; }
  .meta-cell + .meta-cell { border-left: 0; border-top: 1px solid var(--line); }
  .panel-body { padding: 1.4rem; }
  .cell-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell-grid-4 > .cell:nth-child(2n) { border-right: 0; }
  .cell-grid-4 > .cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .navbar .nav-link { padding: 0.45rem 0; }
  .segmented { flex-wrap: wrap; }
}
@media (max-width: 575px) {
  .cell-grid-4 { grid-template-columns: 1fr; }
  .cell-grid-4 > .cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .cell-grid-4 > .cell:last-child { border-bottom: 0; }
  .btn-purple, .btn-ghost, .btn-outline-light { padding: 0.7rem 1.3rem; }
  .console-col { padding: 1.1rem; }
  .contact-banner, .intro-banner { padding: 1.5rem; }
  .plan-card, .addons-card, .strengths-card, .testimonial-card,
  .partner-primary, .cta-banner, .legal-content { padding: 1.4rem; }
}