/* ==========================================================================
   PRODUCTS — /products   (design: assets/html/teamian_products_v3 (1).html)
   Monochrome, Inter + JetBrains Mono, .tpr- namespace.

   Loaded via $pageStyles in products.php. There is deliberately NO page
   script: the design's only JS was an IntersectionObserver for its reveals,
   and assets/js/main.js already runs one for the site-wide .reveal class —
   which is guarded by html.has-js, so content stays visible if JS never runs.

   Everything is scoped to .tpr-page. The standalone file styled `body`, `*`
   and `a` globally; left as-is those resets would reach the shared header,
   footer and lead-form modal.

   BREAKPOINTS — 1023 / 767 / 639px, which are exact complements of Tailwind's
   lg / md / sm (min-width 1024 / 768 / 640). Keep them that way. The mock's own
   900 / 780 / 560 fired at their own moments: 780 in particular sat 12px off
   `md`, so between 768 and 780 the nav had already switched to its mobile
   button while this page was still laying out for desktop.
   ========================================================================== */

/* No colour tokens of its own. The mock shipped its own near-identical palette
   (#0A0A0A / #6B6B70 / #9A9AA0 / #ECECEC / #F7F7F8); every one of those is
   already a token in style.css, so this page reads them from :root instead:

     --ink #0A0A0A   --ink-soft #5B615F   --muted #8A8A85
     --line #E4E4E0  --surface #F6F6F4    --nav-ease (same easing curve)

   Same reason the greys are the site's, not the mock's: a second palette that
   is 4% off the first is how pages start looking subtly unlike each other. */
.tpr-page{
  color:var(--ink);
  letter-spacing:-.011em;
  line-height:1.5;
}
.tpr-page :where(h1,h2,h3,p){margin:0}

/* Per-element entrance delay. The reveal itself is the site-wide .reveal
   (assets/js/main.js); this only staggers it.

   Hover lifts on this page use the standalone `translate` property, never
   `transform`. style.css owns transform on anything carrying .reveal
   (.has-js .reveal.is-visible{transform:translateY(0)} — three classes), so a
   hover rule written as transform loses the cascade and the card never moves;
   and the entrance delay below would hold the hover back by up to 240ms.
   Keeping the two on separate properties avoids both.

   The cards are excluded here and set their own per-property delay list, so a
   blanket delay can't reach their hover — and so this rule doesn't outrank the
   .tpr-card--ai overrides further down. */
.tpr-page .reveal:not(.tpr-card):not(.tpr-why__card){transition-delay:var(--d,0s)}

/* ---------- shared bits ---------- */
.tpr-sec{max-width:1240px;margin:0 auto;padding:60px 32px 100px}
/* "Explore products" jumps to #products; without this the fixed nav lands on
   top of the section heading. */
.tpr-sec[id]{scroll-margin-top:110px}
.tpr-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.tpr-soft{color:var(--muted);font-weight:400}

.tpr-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:500;font-size:14.5px;line-height:1;
  padding:14px 24px;border-radius:999px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease;
}
.tpr-btn:hover{transform:translateY(-1px);background:#1A1A1A}
.tpr-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.tpr-btn--ghost:hover{background:var(--surface);border-color:var(--ink)}
.tpr-btn--light{background:#fff;color:var(--ink);border-color:#fff}
.tpr-btn--light:hover{background:#ECECE8;border-color:#ECECE8}
/* ghost, but on the dark CTA panel */
.tpr-btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.tpr-btn--outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.tpr-btn i{font-style:normal;transition:transform .2s ease}
.tpr-btn:hover i{transform:translateX(3px)}

/* ---------- intro ---------- */
.tpr-intro{max-width:1240px;margin:0 auto;padding:168px 32px 60px}
.tpr-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;color:var(--ink-soft);
  padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  margin-bottom:28px;
}
.tpr-eyebrow i{
  width:6px;height:6px;border-radius:999px;background:var(--ink);
  animation:tpr-pulse 2.4s ease-in-out infinite;
}
@keyframes tpr-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.8)}
}
.tpr-intro h1{
  font-size:clamp(44px,6vw,84px);font-weight:700;
  letter-spacing:-.045em;line-height:.98;max-width:940px;
}
.tpr-intro__lead{
  font-size:18px;line-height:1.55;color:var(--ink-soft);
  max-width:620px;margin:30px 0 36px;
}
.tpr-ctas{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- section head ---------- */
.tpr-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;margin-bottom:40px;flex-wrap:wrap;
}
.tpr-head__k{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;
}
.tpr-head h2{
  font-size:clamp(36px,4.5vw,60px);font-weight:700;
  letter-spacing:-.04em;line-height:1.02;max-width:720px;
}
.tpr-head__note{
  font-size:15.5px;line-height:1.55;color:var(--ink-soft);
  max-width:380px;text-align:right;
}
@media (max-width:767px){
  .tpr-head{flex-direction:column;align-items:flex-start}
  .tpr-head__note{text-align:left}
}

/* ---------- products grid ---------- */
.tpr-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(150px,1fr);gap:14px;
}
.tpr-card{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;
  /* opacity/transform are the entrance (staggered by --d); translate and the
     rest are the hover, which must not inherit that delay. */
  transition:opacity .6s var(--nav-ease),transform .6s var(--nav-ease),
             translate .25s var(--nav-ease),border-color .25s ease,box-shadow .25s ease;
  transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s;
}
.tpr-card:hover,.tpr-card:focus-visible{
  border-color:var(--ink);translate:0 -3px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.1);
}
.tpr-card__ico{
  width:46px;height:46px;flex-shrink:0;margin-bottom:18px;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.tpr-card__ico svg{width:22px;height:22px}
.tpr-card:hover .tpr-card__ico,
.tpr-card:focus-visible .tpr-card__ico{background:var(--ink);color:#fff;border-color:var(--ink)}
.tpr-card__t{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.tpr-card__d{display:block;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.tpr-card__cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease;
}
.tpr-card__cta::after{
  content:"›";font-family:sans-serif;font-size:16px;line-height:1;
  transition:transform .2s ease;
}
.tpr-card:hover .tpr-card__cta,
.tpr-card:focus-visible .tpr-card__cta{opacity:1;transform:none}
.tpr-card:hover .tpr-card__cta::after{transform:translateX(3px)}
/* Touch devices have no hover, so the label would never appear. */
@media (hover:none){
  .tpr-card__cta{opacity:1;transform:none}
}

/* placement — 7 products + the wide AI card */
.tpr-card--wide{grid-column:span 8}
.tpr-card:not(.tpr-card--wide):not(.tpr-card--ai){grid-column:span 4}
.tpr-card--ai{grid-column:span 4;grid-row:span 3}

@media (max-width:1023px){
  .tpr-grid{grid-template-columns:repeat(6,1fr)}
  .tpr-card:not(.tpr-card--wide):not(.tpr-card--ai){grid-column:span 3}
  .tpr-card--wide{grid-column:span 6}
  .tpr-card--ai{grid-column:span 6;grid-row:span 1;min-height:320px}
}
@media (max-width:639px){
  .tpr-sec,.tpr-intro,.tpr-db{padding-left:20px;padding-right:20px}
  .tpr-card:not(.tpr-card--wide):not(.tpr-card--ai),
  .tpr-card--wide,.tpr-card--ai{grid-column:span 6}
}

/* ---------- the dark AI card ---------- */
.tpr-card--ai{
  background:var(--ink);color:#fff;border-color:var(--ink);
  justify-content:space-between;padding:28px;
}
.tpr-card--ai:hover{border-color:var(--ink);box-shadow:0 20px 40px -14px rgba(0,0,0,.35)}
.tpr-card--ai .tpr-card__ico{
  position:relative;width:44px;height:44px;
  background:#fff;color:var(--ink);border-color:#fff;
}
.tpr-card--ai:hover .tpr-card__ico{background:#fff;color:var(--ink)}
.tpr-card--ai .tpr-card__ico::before,
.tpr-card--ai .tpr-card__ico::after{
  content:"";position:absolute;inset:-6px;pointer-events:none;
  border:1px solid rgba(255,255,255,.25);border-radius:14px;
  animation:tpr-ring 3s ease-in-out infinite;
}
.tpr-card--ai .tpr-card__ico::after{inset:-14px;opacity:.5;animation-delay:.5s}
@keyframes tpr-ring{
  0%{transform:scale(.85);opacity:.4}
  100%{transform:scale(1.15);opacity:0}
}
.tpr-card--ai .tpr-card__t{font-size:26px;letter-spacing:-.025em}
.tpr-card--ai .tpr-card__d{font-size:15px;line-height:1.55;color:rgba(255,255,255,.7)}
.tpr-card--ai .tpr-card__body{margin-top:auto;padding-top:24px}
.tpr-card--ai .tpr-card__cta{
  opacity:1;transform:none;margin-top:20px;color:#fff;
  font-size:14.5px;font-weight:500;text-transform:none;letter-spacing:-.01em;
}
.tpr-ai__vis{display:grid;gap:8px;margin-top:24px}
.tpr-ai__line{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;padding:8px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;
  opacity:0;animation:tpr-line 5s var(--nav-ease) infinite;
}
.tpr-ai__line i{width:5px;height:5px;flex-shrink:0;border-radius:999px;background:#fff}
.tpr-ai__line b{
  margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:500;color:rgba(255,255,255,.55);
}
.tpr-ai__line:nth-child(2){animation-delay:.4s}
.tpr-ai__line:nth-child(3){animation-delay:.8s}
.tpr-ai__line:nth-child(4){animation-delay:1.2s}
@keyframes tpr-line{
  0%{opacity:0;transform:translateX(-6px)}
  18%,82%{opacity:1;transform:none}
  100%{opacity:0;transform:translateX(6px)}
}

/* ---------- shared database strip ---------- */
.tpr-db{max-width:1240px;margin:40px auto 0;padding:0 32px}
.tpr-db__inner{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:36px 40px;
}
.tpr-db__k{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;
}
.tpr-db__inner h3{font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.tpr-db__inner p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-top:8px;max-width:520px}
.tpr-db__chips{display:flex;flex-wrap:wrap;gap:8px;max-width:380px}
.tpr-chip{
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  font-size:12.5px;font-weight:500;
  animation:tpr-chip 4s ease-in-out infinite;
}
.tpr-chip i{width:5px;height:5px;border-radius:999px;background:var(--ink)}
.tpr-chip:nth-child(2){animation-delay:.4s}
.tpr-chip:nth-child(3){animation-delay:.8s}
.tpr-chip:nth-child(4){animation-delay:1.2s}
.tpr-chip:nth-child(5){animation-delay:1.6s}
.tpr-chip:nth-child(6){animation-delay:2s}
.tpr-chip:nth-child(7){animation-delay:2.4s}
@keyframes tpr-chip{
  0%,100%{border-color:var(--line);background:#fff}
  50%{border-color:var(--ink);background:var(--line)}
}
@media (max-width:767px){
  .tpr-db__inner{grid-template-columns:1fr;padding:30px}
  .tpr-db__chips{max-width:none}
}

/* ---------- why Teamian ---------- */
.tpr-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tpr-why__card{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:220px;padding:32px;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:24px;
  transition:opacity .6s var(--nav-ease),transform .6s var(--nav-ease),
             translate .3s ease,border-color .3s ease;
  transition-delay:var(--d,0s),var(--d,0s),0s,0s;
}
.tpr-why__card:hover{border-color:var(--ink);translate:0 -3px}
.tpr-why__n{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.08em;
}
.tpr-why__card h3{font-size:24px;font-weight:700;letter-spacing:-.025em;margin-top:40px}
.tpr-why__card p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-top:10px}
@media (max-width:767px){.tpr-why{grid-template-columns:1fr}}

/* ---------- closing CTA ---------- */
.tpr-cta{
  position:relative;overflow:hidden;text-align:center;
  background:var(--ink);color:#fff;border-radius:32px;padding:80px 40px;
}
.tpr-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(255,255,255,.06),transparent 50%);
}
.tpr-cta > *{position:relative;z-index:1}
.tpr-cta h2{
  font-size:clamp(36px,5vw,64px);font-weight:700;
  letter-spacing:-.04em;line-height:1.02;max-width:720px;margin:0 auto;
}
.tpr-cta p{
  font-size:17px;line-height:1.55;color:rgba(255,255,255,.7);
  max-width:520px;margin:20px auto 32px;
}
.tpr-cta__row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media (max-width:639px){.tpr-cta{padding:56px 24px;border-radius:24px}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tpr-page *,.tpr-page *::before,.tpr-page *::after{
    animation:none!important;transition:none!important;
  }
  .tpr-ai__line{opacity:1}
}