/* file: assets/css/base.css */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 var(--space-6)}
.muted{color:var(--text-secondary)}
.kicker{letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--text-muted)}
.h1{font-size:56px;line-height:1.05;margin:0}
.h2{font-size:36px;line-height:1.15;margin:0}
.p{font-size:16px;color:var(--text-secondary);margin:0}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:var(--radius-3);
  border:1px solid rgba(var(--accent-rgb),.35);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.04));
  box-shadow:var(--shadow-glow);
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover{transform:translateY(-1px);border-color:rgba(var(--accent-rgb),.65)}
.btn.secondary{border-color:rgba(var(--accent2-rgb),.35);box-shadow:0 0 30px rgba(var(--accent2-rgb),.12)}

.nav{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(10px);
  background:rgba(var(--bg-base-rgb),.65);
  border-bottom:1px solid rgba(var(--line-rgb),.8);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:var(--shadow-glow)}
.nav-links{display:flex;gap:16px;color:var(--text-secondary);font-size:14px}

.hero{padding:72px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-12)}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} .h1{font-size:44px} }

.card{
  border:1px solid rgba(var(--line-rgb),.9);
  background:linear-gradient(180deg, rgba(17,24,39,.9), rgba(15,23,42,.55));
  border-radius:var(--radius-4);
  box-shadow:var(--shadow-soft);
}
.card.pad{padding:var(--space-6)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media (max-width: 980px){ .grid3{grid-template-columns:1fr} }

.pipe{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;
  color:var(--text-secondary);font-size:14px
}
.pipe .step{
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.25);
  background:rgba(var(--accent-rgb),.06)
}
.pipe .arrow{opacity:.55}

.section{padding:56px 0}
.hr{height:1px;background:rgba(var(--line-rgb),.8);margin:0}
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease)}
.reveal.on{opacity:1;transform:translateY(0)}
.footer{padding:40px 0;color:var(--text-muted);font-size:13px}
.small{font-size:13px;color:var(--text-muted)}

/* FF_BADGE_BLOCK_V1 (S3.6 micro-polish)
   Purpose: badges + mini-pre styling on index.html (pages.css not loaded there)
*/
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  color:var(--text-secondary);
  border:1px solid rgba(var(--accent-rgb), .22);
  background:rgba(var(--accent-rgb), .06);
}

.mini-ul{
  margin:10px 0 0 18px;
  color:var(--text-secondary);
}

.mini-pre{
  margin:10px 0 0 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(var(--line-rgb), .92);
  background:linear-gradient(180deg, rgba(var(--bg-surface-rgb), .92), rgba(var(--bg-surface2-rgb), .55));
  overflow:auto;
  color:var(--text-secondary);
}
.mini-pre code{ white-space:pre; }

/* a11y: visible focus */
.btn:focus-visible,
.nav-links a:focus-visible{
  outline:2px solid rgba(var(--accent-rgb), .65);
  outline-offset:3px;
  border-radius:10px;
}