/* site-additions.css — layered on the original stylesheets.
   Only components the original has no class for. Everything else
   (glass-card, highlight-card, research-list, domain-card, section-title-glow,
   investor-section-premium, fresh-hero...) comes from the original CSS. */

/* --- Hero title: the ONE typography override ---
   The original's clamp(2.8rem, 6.2vw, 4.8rem) is tuned to its own ~9.4em
   longest line. Ours ("learned from BCI data") is 10.0em and overran the
   col-lg-6 column, forcing a mid-phrase wrap. Same clamp shape, resized. */
.fresh-hero .fresh-title{font-size:clamp(2rem,4.3vw,3.4rem);line-height:1.14}
@media(max-width:767px){.fresh-hero .fresh-title{font-size:1.85rem}}

/* Inline styles carry the tinted-box pattern from the original
   (building-box, impact-card-*, research-list wrappers). These few rules
   support the components the original never needed. */

/* comparison rows inside a glass-card */
.stat-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.stat-row:last-child{border-bottom:0;padding-bottom:0}
.stat-row:first-of-type{padding-top:0}
.stat-row .k{font-size:.95rem;color:rgba(255,255,255,.78)}
.stat-row .v{font-weight:700;font-size:.95rem;text-align:right;flex:none;color:#fff}
.stat-row .v.win{color:#00f2fe}
.stat-row .v.lose{color:rgba(255,255,255,.58)}

/* status pills — matches the original's inline status-chip treatment */
.status{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;white-space:nowrap;display:inline-block}
.s-dev{background:rgba(0,242,254,.13);color:#00f2fe;border:1px solid rgba(0,242,254,.3)}
.s-prev{background:rgba(255,0,255,.14);color:#FF66FF;border:1px solid rgba(255,0,255,.35)}
.s-soon{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.1)}
.s-live{background:rgba(0,230,118,.13);color:#00e676;border:1px solid rgba(0,230,118,.3)}

/* harmonisation matrix */
.matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:.97rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;overflow:hidden}
.matrix th,.matrix td{padding:16px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.1)}
.matrix tr:last-child th,.matrix tr:last-child td{border-bottom:0}
.matrix thead th{background:rgba(255,255,255,.05);color:#fff;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.matrix thead th.learn{color:#00f2fe}
.matrix thead th.dis{color:#FF66FF}
.matrix tbody th{color:#fff;font-weight:600;font-size:1.02rem;width:22%;background:rgba(255,255,255,.025)}
.matrix td{color:rgba(255,255,255,.72);line-height:1.6}
.mwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* stack layer rows */
.layer-n{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-weight:700;font-size:.9rem;color:#08131c;flex:none;
  background:linear-gradient(135deg,#00f2fe,#0fa3e8)}
.stack-arrow{text-align:center;color:rgba(0,242,254,.45);font-size:1rem;line-height:1;margin:-4px 0 8px}

/* contact form fields */
.field{margin-bottom:18px}
.field label{display:block;font-size:.9rem;color:rgba(255,255,255,.8);margin-bottom:7px;font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:12px 15px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;
  font-family:inherit;font-size:1rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:#00f2fe;
  background:rgba(255,255,255,.08)}
.field textarea{min-height:130px;resize:vertical}
.field select option{background:#1B264F;color:#fff}

@media(max-width:991px){
  .matrix{font-size:.86rem;min-width:620px}
  .matrix th,.matrix td{padding:13px 15px}
}

/* tinted-box hover, matching the original's .impact-card-* / .glass-card lift */
.impact-card-cyan:hover,.building-box:hover{transform:translateY(-4px)}
.impact-card-cyan,.building-box{transition:all .4s ease}

/* research-list bullet takes its section's colour */
.list-green li::before{color:#00e676 !important}
.list-magenta li::before{color:#FF00FF !important}

/* ---------- compact page head (all pages except home) ---------- */
.page-head{border-bottom:1px solid rgba(0,242,254,.12)}
.page-head .page-title{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.15;margin:0 0 .5em;
  letter-spacing:-.01em}
.page-head .page-sub{color:rgba(255,255,255,.78);font-size:1.06rem;line-height:1.7;max-width:780px;margin:0}
@media(max-width:767px){
  .page-head{padding:104px 0 40px !important}
  .page-head .page-title{font-size:1.7rem}
  .page-head .page-sub{font-size:.99rem}
}


/* ── Readability floor (root is now 16px) ─────────────────────────────────────
   Body copy inherits a comfortable measure and leading. Inline sizes in the
   markup override where a specific block needs to differ. */
p, li { line-height: 1.75; }
.container p, .section p { max-width: 68ch; }
.container .text-center p, .section .text-center p,
.center p, .lede { max-width: 72ch; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
  :root { font-size: 100%; }
  p, li { font-size: 1rem; line-height: 1.7; }
}

/* ── Research-card components ─────────────────────────────────────────────────
   Ported from samples/mindverse-0.1, whose definitions lived in an inline
   <style> block rather than a stylesheet. Values copied verbatim; only the
   hover shadow is parameterised so each product can carry its own accent. */

.research-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
  cursor: default;
}
.research-card:hover { transform: translateY(-4px); }

.domain-tag {
  display: inline-block; padding: 4px 16px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 1rem;
}
.status-chip {
  display: inline-block; padding: 4px 13px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.4px;
}
.product-name { font-weight: 700; display: block; margin-bottom: 2px; }
.product-desc { display: block; margin-bottom: 4px; color: rgba(255,255,255,0.72); line-height: 1.75; }
.building-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px;
  font-weight: 700; margin-bottom: 0.6rem; opacity: 0.75;
}
.research-card .research-list li { margin-bottom: 1.35rem; }

@media (max-width: 767px) {
  .research-card { padding: 1.75rem !important; }
}

/* Third application column in the lifecycle matrix. Violet #A78BFA is the
   restoration accent — 5.37:1 on the navy panels, where the sample's #8B5CF6
   measured 3.45 and failed AA. */
.matrix th.rest { color:#A78BFA; }

/* ── Email cloaking ───────────────────────────────────────────────────────────
   The address is never written as plain text in the markup. It is assembled at
   runtime from user/domain parts, so a scraper reading the HTML source finds
   nothing to harvest, while a person sees a normal mailto link. Falls back to a
   readable instruction if JavaScript is off. */
.cloak { unicode-bidi: bidi-override; direction: ltr; }

/* ── Roadmap timeline ─────────────────────────────────────────────────────────
   Five nodes in a flex row. Below the lg breakpoint the horizontal line stops
   making sense, so the nodes stack and the line is hidden rather than left
   floating across a vertical list. */
@media (max-width: 991px) {
  .timeline-nodes { flex-wrap: wrap; justify-content: center !important; gap: 32px !important; }
  .timeline-node { flex: 0 0 45% !important; }
  .timeline-line, .timeline-glow-line { display: none !important; }
  .node-year { margin-top: 16px !important; }
}
@media (max-width: 575px) {
  .timeline-node { flex: 0 0 100% !important; }
}