/* ===========================================================
   The Khromas — Neumorphism layer (soft UI)
   Loaded AFTER site.css and page styles: overrides surfaces
   with soft extruded/inset shadows. Dark soft-UI on navy,
   light soft-UI on bone/lime bands.
   =========================================================== */

:root {
  --neu-r: 18px;
  --neu-r-sm: 12px;
  --neu-card: linear-gradient(145deg, #16283f, #0f1c2c);
  --neu-card-hover: linear-gradient(145deg, #182c44, #111f31);
  --neu-well: #0b1520;
  --neu-edge: rgba(110, 148, 192, 0.14);
  --neu-raised:
    -6px -6px 16px rgba(96, 134, 178, 0.10),
    10px 10px 24px rgba(3, 8, 14, 0.62);
  --neu-raised-lg:
    -8px -8px 22px rgba(96, 134, 178, 0.12),
    14px 14px 32px rgba(3, 8, 14, 0.68);
  --neu-raised-sm:
    -3px -3px 8px rgba(96, 134, 178, 0.10),
    5px 5px 12px rgba(3, 8, 14, 0.55);
  --neu-inset:
    inset 4px 4px 10px rgba(3, 8, 14, 0.60),
    inset -3px -3px 8px rgba(96, 134, 178, 0.10);
  --neu-inset-sm:
    inset 2px 2px 6px rgba(3, 8, 14, 0.55),
    inset -2px -2px 5px rgba(96, 134, 178, 0.09);
}

/* =========================================================
   Buttons — raised, pressed on :active
   ========================================================= */
.btn {
  border-radius: var(--neu-r-sm);
  box-shadow: var(--neu-raised-sm);
  transition: transform 0.15s ease, background 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: var(--neu-inset-sm); }
.btn-lime {
  box-shadow: var(--neu-raised-sm), 0 8px 22px -8px rgba(194, 247, 79, 0.35);
}
.btn-ghost {
  background: var(--neu-card);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--neu-card-hover); border-color: var(--neu-edge); }

/* Light bands (bone / lime) need light-mode shadows */
.cta-band .btn, .plt-cta .btn {
  box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.65), 6px 6px 14px rgba(140, 148, 130, 0.45);
}
.cta-band .btn:active, .plt-cta .btn:active {
  box-shadow: inset 3px 3px 8px rgba(120, 128, 110, 0.40), inset -3px -3px 8px rgba(255, 255, 255, 0.60);
}
.plt-cta .btn {
  box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.35), 6px 6px 14px rgba(94, 128, 22, 0.35);
}

/* =========================================================
   Pills — inset wells
   ========================================================= */
.lang-switch {
  border: 0;
  background: var(--neu-well);
  box-shadow: var(--neu-inset-sm);
}
.hero-tag {
  border: 0;
  background: var(--neu-card);
  box-shadow: var(--neu-raised-sm);
}
.compliance .chip,
.svc .tags span,
.feat .tags span {
  border: 0;
  background: var(--neu-well);
  box-shadow: var(--neu-inset-sm);
}

/* =========================================================
   Cards — raised soft surfaces
   ========================================================= */
.console {
  border-color: var(--neu-edge);
  border-radius: var(--neu-r);
  box-shadow: var(--neu-raised-lg), 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}
.arm {
  background: var(--neu-card);
  border-color: transparent;
  border-radius: var(--neu-r);
  box-shadow: var(--neu-raised);
  transition: border-color 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
}
.arm:hover {
  border-color: var(--neu-edge);
  transform: translateY(-3px);
  box-shadow: var(--neu-raised-lg);
}
.arm .arm-tag .glyph { box-shadow: var(--neu-raised-sm); }

.svc .deliver,
.svc-cta,
.form-card,
.aside-console {
  background: var(--neu-card);
  border-color: transparent;
  border-radius: var(--neu-r);
  box-shadow: var(--neu-raised);
}
.sector-img,
.sec-primary-img {
  border-color: var(--neu-edge);
  border-radius: var(--neu-r);
  box-shadow: var(--neu-raised);
}
.plt-screenshot-ph {
  border-color: var(--neu-edge);
  box-shadow: var(--neu-raised), 0 -20px 60px -10px rgba(53, 69, 214, 0.2);
}

/* Capabilities: divided band -> floating cards */
.caps { border: 0; gap: 18px; }
.caps .cap:nth-child(n) {
  border: 0;
  padding: 30px 28px;
  background: var(--neu-card);
  border-radius: var(--neu-r);
  box-shadow: var(--neu-raised);
}

/* Platform "for who": divided columns -> floating cards */
.for-grid { border: 0; gap: 18px; }
.for-grid .for-card:nth-child(n) {
  border: 0;
  padding: 32px 28px;
  background: var(--neu-card);
  border-radius: var(--neu-r);
  box-shadow: var(--neu-raised);
}

/* Platform features: hairline grid -> floating cards */
.feat-grid {
  gap: 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.feat {
  background: var(--neu-card);
  border-radius: var(--neu-r);
  box-shadow: var(--neu-raised);
}

/* Sectors "others": divided columns -> floating cards */
.sec-other-grid { border: 0; gap: 18px; }
.sec-other-grid .sec-other:nth-child(n) {
  border: 0;
  padding: 30px 28px;
  background: var(--neu-card);
  border-radius: var(--neu-r);
  box-shadow: var(--neu-raised);
}
.sec-other .icon {
  border: 0;
  background: var(--neu-well);
  box-shadow: var(--neu-inset-sm);
  border-radius: 10px;
}

/* =========================================================
   Inputs — pressed-in wells
   ========================================================= */
.field input, .field select, .field textarea {
  background: var(--neu-well);
  border-color: transparent;
  border-radius: var(--neu-r-sm);
  box-shadow: var(--neu-inset);
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--neu-well);
  border-color: var(--lime-line);
  box-shadow: var(--neu-inset), 0 0 0 3px rgba(194, 247, 79, 0.08);
}
.sso-btn {
  border-color: transparent;
  background: var(--neu-card);
  border-radius: var(--neu-r-sm);
  box-shadow: var(--neu-raised-sm);
}
.sso-btn:hover { background: var(--neu-card-hover); border-color: var(--neu-edge); }
.sso-btn:active { box-shadow: var(--neu-inset-sm); }