/* ==========================================================================
   HyperLinker — Page layouts
   ========================================================================== */

.section { padding: var(--space-9) 0; }
.section-head { max-width: 620px; margin-bottom: var(--space-6); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-2); margin-bottom: var(--space-3); }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15); }

/* ---- Hero ---- */
.hero { padding: var(--space-9) 0 var(--space-7); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; text-align: center; }
.hero h1 { max-width: 780px; margin-inline: auto; }
.hero .lede { max-width: 560px; margin: var(--space-4) auto var(--space-6); font-size: 1.1rem; }
.hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-7); }

/* Live shrink demo — the hero's thesis moment */
.hero-demo { max-width: 640px; margin-inline: auto; padding: var(--space-5); text-align: left; }
.hero-demo-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hero-demo-arrow { color: var(--text-faint); flex-shrink: 0; }
.hero-demo-out { font-family: var(--font-mono); color: var(--accent-2); font-size: 0.98rem; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--accent-2); width: 0; animation: typing 1.8s steps(24) 0.3s forwards, blink 0.8s step-end infinite; }
@keyframes typing { from { width: 0; } to { width: 15ch; } }
@keyframes blink { 50% { border-color: transparent; } }

/* ---- Search ---- */
.tool-search { max-width: 560px; margin: 0 auto var(--space-7); position: relative; }
.tool-search .input { padding-left: 46px; font-family: var(--font-body); }
.tool-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-faint); width: 18px; height: 18px; }

/* ---- Stats ---- */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding: var(--space-6) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-strip .stat { text-align: center; align-items: center; }
.stats-strip .value { font-size: 2rem; }

/* ---- Grids ---- */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.node-chain-row { margin: var(--space-6) 0; }

/* ---- Features ---- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

/* ---- FAQ ---- */
.faq-list { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; cursor: pointer; font-weight: 600; font-family: var(--font-display); }
.faq-q svg { transition: transform 0.25s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.faq-item.open .faq-a { max-height: 240px; }
.faq-a p { padding-bottom: var(--space-4); }

/* ---- Tool page shell ---- */
.tool-page-hero { padding: var(--space-7) 0 var(--space-5); text-align: center; }
.tool-page-hero .tool-icon { margin-inline: auto; width: 56px; height: 56px; margin-bottom: var(--space-4); }
.tool-page-hero .tool-icon svg { width: 28px; height: 28px; }
.tool-workspace { max-width: 720px; margin: 0 auto var(--space-9); padding: var(--space-6); }
.field-group { margin-bottom: var(--space-4); }
.field-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--text-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field-hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 6px; }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border-radius: var(--radius-full); margin-bottom: var(--space-5); flex-wrap: wrap; }
.tab { padding: 8px 16px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.2s var(--ease); }
.tab.active { background: var(--accent-gradient); color: #fff; }

.qr-preview { display: flex; justify-content: center; padding: var(--space-6); background: #fff; border-radius: var(--radius-md); margin-top: var(--space-4); }
.qr-preview img { width: 220px; height: 220px; }
.qr-brand-note { text-align: center; font-size: 0.78rem; color: var(--text-faint); margin-top: var(--space-3); }
.color-swatches { display: flex; gap: var(--space-2); align-items: center; }
.color-swatches input[type="color"] { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: none; cursor: pointer; }

.security-note { display: flex; gap: 10px; padding: var(--space-4); border-radius: var(--radius-md); background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.25); font-size: 0.85rem; }
.security-note.warn { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.25); }
.security-note svg { flex-shrink: 0; }

.meta-preview { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); background: var(--bg-elevated); border-radius: var(--radius-md); border: 1px solid var(--border); }
.meta-preview img.favicon { width: 40px; height: 40px; border-radius: 8px; }
.meta-preview .title { font-weight: 600; font-family: var(--font-display); }
.meta-preview .domain { font-size: 0.8rem; color: var(--text-faint); }

@media (max-width: 900px) {
  .tool-grid, .feature-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tool-grid, .feature-grid, .stats-strip { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}