/* =============================================================================
   KDB DocVault front office — product-surface layer.

   The pages are inline-styled (they came from a design export), so this file
   overrides rather than defines. `!important` appears deliberately and only
   where an inline declaration has to lose: adding a class to 900 elements by
   hand would be worse in every way than a scoped override sheet.

   What changed conceptually: the original was EDITORIAL — serif headlines,
   hairline rules, flat surfaces, everything on one plane. That reads as a
   considered essay. A software product reads differently: one geometric
   typeface, depth through elevation rather than rules, colour used to point
   at the next action, and motion that responds to the cursor.
   ============================================================================= */

/* --- Type ------------------------------------------------------------------
   Poppins throughout. Its geometry is friendly at large sizes and its lower
   weights get muddy on dark backgrounds, so body copy sits at 400 and never
   below, while display sizes go to 700 with tight tracking. */
body,
input, select, button, textarea {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3 { text-wrap: balance; }

h1 { letter-spacing: -.035em !important; }
h2 { letter-spacing: -.025em !important; }

/* Poppins renders optically larger than Instrument Sans at the same size;
   easing line-height back stops paragraphs feeling loose. */
p { letter-spacing: -.005em; }

/* The headline accent. A gradient on the phrase that carries the promise —
   the most recognisable product-page device there is, and it replaces an
   italic serif that Poppins cannot do convincingly. */
.grad {
  background: linear-gradient(100deg, #38BDF8 0%, #7DD3FC 45%, #A78BFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  /* Descenders clip against a tight line-height when the box is exactly the
     glyph height. */
  padding-bottom: .08em;
}

/* --- Rhythm ----------------------------------------------------------------
   Sections were separated by 1px rules. Space and surface do that job now;
   the rule is a magazine convention that makes software look like a document. */
.s-band {
  position: relative;
  border-bottom: 0 !important;
}
.s-band + .s-band { border-top: 1px solid rgba(148, 163, 184, .08); }

.s-alt {
  background: #0B1120 !important;
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(56, 189, 248, .07), transparent 70%) !important;
}

.s-light {
  background: #F5F3EF !important;
  color: #101828 !important;
  border-bottom: 0 !important;
}

/* --- Depth -----------------------------------------------------------------
   One elevation, used consistently: a hairline border, a lifted surface, and
   a shadow that reads on near-black. Two shadows because a single large blur
   on a dark background looks like fog rather than height. */
.card {
  border-radius: 16px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .35),
    0 12px 32px -12px rgba(0, 0, 0, .55);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, .32) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .35),
    0 20px 44px -16px rgba(2, 132, 199, .35);
}

/* --- Actions ---------------------------------------------------------------
   The primary CTA is the only gradient surface on the page. If everything
   glows, nothing is the next step. */
.btn-primary {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 8px 20px -8px rgba(37, 99, 235, .75);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .16) inset,
    0 12px 26px -8px rgba(37, 99, 235, .9);
}

.btn-primary:active { transform: translateY(0); }

/* Secondary links get an underline that grows from the left on hover rather
   than a permanent one — quieter at rest, clearly interactive on approach. */
main a[href^="#"]:not(.btn-primary),
main a[href^="./"]:not(.btn-primary) {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* --- Hero ------------------------------------------------------------------
   A single light source behind the headline. Pointer-events off so it can
   never eat a click, and it sits behind content rather than over it. */
main > div > .s-band:first-child,
main > .s-band:first-child {
  isolation: isolate;
}

main > div > .s-band:first-child::before,
main > .s-band:first-child::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 22% 18%, rgba(37, 99, 235, .26), transparent 68%),
    radial-gradient(38% 52% at 78% 6%, rgba(56, 189, 248, .16), transparent 70%);
  filter: blur(8px);
}

/* --- Eyebrows --------------------------------------------------------------
   The mono labels above headings become pills: same information, but framed
   as a product tag instead of a folio line. */
main p[style*="letter-spacing:.14em"],
main span[style*="letter-spacing:.14em"] {
  display: inline-block;
  padding: 6px 12px !important;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .22);
  background: rgba(56, 189, 248, .07);
  color: #9BD4F5 !important;
}

/* --- Tables ----------------------------------------------------------------
   Data stays data, but the container becomes a surface so it belongs with the
   cards around it. */
main table {
  border-radius: 14px;
  overflow: hidden;
}
main thead tr { background: rgba(148, 163, 184, .06); }
main tbody tr { transition: background .15s ease; }
main tbody tr:hover { background: rgba(56, 189, 248, .04); }

/* --- Header ----------------------------------------------------------------
   Frosted and translucent, which is how a product header behaves once the
   page scrolls under it. */
header {
  background: rgba(10, 15, 28, .78) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
}

/* --- Motion ----------------------------------------------------------------
   Sections arrive as they enter the viewport. Progressive: without JS the
   `.reveal` class is never added, and everything renders normally. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .card, .btn-primary { transition: none !important; }
  .card:hover, .btn-primary:hover { transform: none !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Light section corrections ---------------------------------------------
   The one cream section inherits dark-surface rules it shouldn't. */
.s-light .card {
  background: #fff !important;
  border-color: rgba(16, 24, 40, .1) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 28px -14px rgba(16, 24, 40, .22);
}
.s-light .card:hover { border-color: rgba(29, 78, 216, .3) !important; }
.s-light p[style*="letter-spacing:.14em"] {
  border-color: rgba(29, 78, 216, .2);
  background: rgba(29, 78, 216, .06);
  color: #1D4ED8 !important;
}