/* ══════════════════════════════════════════════════════════════════════
   architecture.css — Architecture page styles
   Requires base.css loaded first.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{position:relative;z-index:1;width:100%;padding:120px 0 72px;text-align:center;
  overflow:hidden;animation:fadeUp .8s ease both;background:var(--bg)}
.hero-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:600px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(161,161,170,0.05) 0%,transparent 70%)}
html.dark .hero-rings{background:radial-gradient(ellipse,rgba(250,250,249,0.02) 0%,transparent 70%)}
.hero-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;
  color:var(--text-3);font-weight:500;text-transform:uppercase;margin-bottom:16px}
.hero-title{font-size:48px;font-weight:800;line-height:1.08;letter-spacing:-2.5px;margin-bottom:20px}
.hero-sub{font-size:16px;color:var(--text-2);line-height:1.7;max-width:560px;margin:0 auto}

/* ── Button extras ────────────────────────────────────────────────── */
.btn--lg{padding:14px 36px;font-size:15px}

/* ── Journey flow (user-centric, 3-step horizontal) ──────────────── */
.journey{display:flex;align-items:center;gap:0;overflow-x:auto}
.journey-step{flex:1;min-width:160px}
.journey-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;
  color:var(--text-3);text-transform:uppercase;margin-bottom:8px;text-align:center;font-weight:500}
.journey-box{border:1px solid var(--border);background:var(--surface);padding:20px 16px;
  font-size:13px;color:var(--text-2);line-height:1.6;text-align:center}
.journey-arrow{flex-shrink:0;padding:0 4px;display:flex;align-items:center;padding-top:20px}

/* ── Terminal color helpers ───────────────────────────────────────── */
.t3{color:var(--text-3)}
.tc-b{color:var(--blue)}
.tc-a{color:var(--amber)}
.tc-g{color:var(--green)}

/* ── Trust grid (2x2 cards) ──────────────────────────────────────── */
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border)}
.trust-card{background:var(--bg);padding:24px;transition:background .15s}
.trust-card:hover{background:var(--surface-alt)}
.trust-card strong{font-size:14px;display:block;margin-bottom:6px}
.trust-card p{font-size:13px;color:var(--text-2);line-height:1.7;margin:0}

/* ── Tech strip ──────────────────────────────────────────────────── */
.tech-strip{font-size:14px;color:var(--text-3);line-height:1.7}
.tech-strip strong{color:var(--text-2);font-weight:600}

/* ── CTA ───────────────────────────────────────────────────────────── */
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center;
  padding-top:48px;padding-bottom:48px}
.cta-h{font-size:36px;font-weight:800;letter-spacing:-1.5px;margin-bottom:12px}
.cta-sub{font-size:16px;color:var(--text-2);margin-bottom:36px;line-height:1.6}
.cta-actions{display:flex;gap:12px}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:900px){
  .journey{flex-direction:column;align-items:stretch}
  .journey-arrow{transform:rotate(90deg);padding:4px 0;align-self:center}
  .trust-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .hero{padding:96px 0 48px}
  .hero-title{font-size:36px;letter-spacing:-1.5px}
}
@media(max-width:640px){
  .hero{padding:72px 0 40px}
  .hero-title{font-size:30px;letter-spacing:-1.2px}
  .cta-h{font-size:28px}
  .cta-actions{flex-direction:column;width:100%;max-width:320px}
}