/* Qvistin homepage — styles (converted from the original design, values preserved).
   Colours/spacing mirror the source; --accent is injected from content.toml. */
:root { --accent: #23716B; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* keep display:flex rules from overriding the `hidden` attr */
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #FAFAF9; color: #12151A;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: #10201E; }
a:hover { color: var(--accent); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

@keyframes growPath { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes nodeIn  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .7s ease both; }

.page { min-height: 100vh; }

/* NAV */
.nav { display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 48px; max-width: 1200px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand span { font-weight: 800; font-size: 17.5px; letter-spacing: -.02em; color: #12151A; }
.ico-logo { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { font-size: 14px; font-weight: 600; color: #4A5158; text-decoration: none; }
.nav-links a:hover { color: var(--accent); }

/* HERO */
.hero { max-width: 820px; margin: 0 auto; padding: 84px 48px 20px; text-align: center; }
.hero-mark { width: 64px; height: 64px; margin-bottom: 30px; }
.hero h1 { margin: 0; font-size: 58px; line-height: 1.05; letter-spacing: -.035em;
  font-weight: 800; color: #0E1116; text-wrap: balance; }
.lead { margin: 26px auto 0; font-size: 18px; line-height: 1.6; color: #5C646C; max-width: 560px; }
.tagline { margin: 14px auto 0; font-size: 15.5px; line-height: 1.6; color: #8A9199; max-width: 560px; }
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; }

.btn { display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  font-weight: 700; border-radius: 12px; cursor: pointer; text-decoration: none; }
.btn-dark { color: #FAFAF9; background: #12151A; border: 0; padding: 13px 26px; transition: background .18s ease; }
.btn-dark:hover { background: var(--accent); color: #FAFAF9; }
.btn-ghost { color: #12151A; background: transparent; border: 1.5px solid #D8DBDD; padding: 12px 24px; transition: border-color .18s ease; }
.btn-ghost:hover { border-color: #12151A; color: #12151A; }

/* BRANCH DIAGRAM */
.diagram { max-width: 1100px; margin: 0 auto; padding: 30px 48px; }
.diagram-wrap { position: relative; }
.branch-svg { width: 100%; height: auto; display: block; overflow: visible; }
.branch-link { cursor: pointer; }
.branch-node { transition: fill .25s ease, stroke .25s ease; }
.branch-glow { opacity: 0; transition: opacity .3s ease; }
.branch.is-hover .branch-glow { opacity: 1; filter: drop-shadow(0 0 6px rgba(35,113,107,.5)); }
.branch.is-hover .branch-node { stroke: var(--accent); }
.branch.is-live.is-hover .branch-node { fill: var(--accent); }
.branch-label { position: absolute; transform: translate(-50%,-100%);
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; white-space: nowrap; pointer-events: none;
  color: #B0B6BB; transition: color .25s ease; }
.branch-label.is-live { color: #12151A; }
.branch-label.is-hover { color: var(--accent); }
.diagram-caption { text-align: center; margin-top: 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: #B0B6BB; }

/* PRODUCTS */
.products { max-width: 1100px; margin: 0 auto; padding: 60px 48px; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; margin-bottom: 12px; }
.eyebrow-accent { color: var(--accent); }
.eyebrow-teal { color: #4FA69E; }
.products h2, .contact h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #0E1116; }
.products h2 { margin-bottom: 30px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.card { background: #fff; border: 1px solid #E5E7E9; border-radius: 18px; padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease; }
.card:not(.card-soon):hover { transform: translateY(-3px); box-shadow: 0 20px 44px -28px rgba(14,17,22,.25); }
.card-soon { background: transparent; border: 1.5px dashed #D8DBDD; display: flex; flex-direction: column; }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.card-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.card-icon svg { width: 20px; height: 20px; }
.icon-live { background: #12151A; }
.icon-dev  { background: #F0F1F2; }
.icon-soon { border: 1.5px dashed #C6CBCF; }
.icon-soon svg { width: 16px; height: 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; padding: 4px 9px; border-radius: 20px; }
.badge-live { color: var(--accent); background: rgba(35,113,107,.08); border: 1px solid rgba(35,113,107,.22); }
.badge-live .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.badge-dev { color: #8A9199; background: #F0F1F2; }
.card-name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: #0E1116; }
.card-desc { margin: 9px 0 0; font-size: 14px; line-height: 1.6; color: #5C646C; }
.card-launch { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.card-launch svg { width: 14px; height: 14px; }
.muted { color: #B0B6BB; }

/* ABOUT */
.about { background: #12151A; color: #FAFAF9; }
.about-inner { max-width: 760px; margin: 0 auto; padding: 76px 48px; text-align: center; }
.about-statement { margin: 0; font-size: 24px; line-height: 1.5; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.about-values { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 30px 0 34px; }
.about-values span { font-size: 15px; color: #9BA3AB; }
.about-values .value-dot { width: 4px; height: 4px; border-radius: 50%; background: #3A4148; }
.btn-outline-dark { display: inline-flex; font-size: 14.5px; font-weight: 700; color: #FAFAF9;
  border: 1.5px solid #3A4148; padding: 11px 24px; border-radius: 12px; text-decoration: none; transition: border-color .18s ease; }
.btn-outline-dark:hover { border-color: #4FA69E; color: #FAFAF9; }

/* CONTACT */
.contact { max-width: 1100px; margin: 0 auto; padding: 72px 48px; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.contact-blurb { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: #5C646C; max-width: 340px; }
.contact-links { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.contact-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #5C646C; text-decoration: none; }
.contact-link:hover { color: var(--accent); }
.contact-link svg { width: 15px; height: 15px; }
.contact-card { background: #fff; border: 1px solid #E5E7E9; border-radius: 18px; padding: 30px; box-shadow: 0 24px 50px -36px rgba(14,17,22,.25); }
.form-fields { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .12em; color: #8A9199; margin-bottom: 8px; }
.contact-card input, .contact-card textarea { width: 100%; font-family: inherit; font-size: 14px; color: #12151A;
  background: #FAFAF9; border: 1.5px solid #E5E7E9; border-radius: 11px; padding: 11px 13px; outline: none; }
.contact-card textarea { line-height: 1.55; padding: 12px 13px; resize: vertical; min-height: 96px; }
.contact-card input:focus, .contact-card textarea:focus { border-color: var(--accent); background: #fff; }
.topics { display: flex; gap: 8px; flex-wrap: wrap; }
.topic { font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 14px;
  border-radius: 20px; border: 1.5px solid #E5E7E9; background: #fff; color: #5C646C; transition: all .18s ease; }
.topic.is-active { border-color: var(--accent); background: rgba(35,113,107,.08); color: var(--accent); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.form-note { font-size: 12px; color: #B0B6BB; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; } /* honeypot */
.form-err { margin-top: 10px; font-size: 13px; color: #C0453A; }
.form-err a { color: #C0453A; font-weight: 600; }
.btn-send { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14.5px;
  font-weight: 700; color: #FAFAF9; background: #12151A; border: 0; padding: 12px 22px; border-radius: 12px;
  cursor: pointer; transition: background .18s ease; }
.btn-send svg { width: 14px; height: 14px; }
.btn-send:disabled { background: #C6CBCF; cursor: default; }
.form-sent { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 20px; }
.sent-check { width: 46px; height: 46px; border-radius: 50%; background: rgba(35,113,107,.10);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.sent-check svg { width: 22px; height: 22px; }
.sent-title { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: #0E1116; }
.sent-note { margin: 8px 0 0; font-size: 14px; color: #5C646C; }
.sent-again { margin-top: 20px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--accent); background: transparent; border: 0; cursor: pointer; }

/* FOOTER */
.footer { border-top: 1px solid #E5E7E9; }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 26px 48px; display: flex;
  align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-powered { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: #8A9199; }
.footer-loc { font-size: 13px; color: #8A9199; }
.footer-copy { font-size: 12px; color: #B0B6BB; }

/* RESPONSIVE */
@media (max-width: 760px) {
  .nav { padding: 0 20px; }
  .nav-links { gap: 18px; }
  .hero { padding: 56px 20px 10px; }
  .hero h1 { font-size: 40px; }
  .diagram, .products, .contact { padding-left: 20px; padding-right: 20px; }
  .about-inner { padding: 56px 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-statement { font-size: 21px; }
}
@media (max-width: 480px) {
  .nav-links a[href="#"] { display: none; } /* trims overflow on tiny screens */
  .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .branch-base { stroke-dashoffset: 0 !important; }
}