:root{
  --brand:#1A73E8; --brand-light:#3B86F7; --brand-deep:#0B53C4; --head:#9CC4FF;
  --ink:#0B1B33; --muted:#51618A; --bg:#FBFCFE; --surface:#FFFFFF;
  --line:#E3E9F2;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display); line-height:1.05; letter-spacing:-0.02em; margin:0}

/* header / footer */
header.site,footer.site{max-width:1080px; margin-inline:auto; padding:22px 28px}
header.site{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:600}
.brand:hover{text-decoration:none}
.brand-glyph{width:26px; height:26px; display:block}
.brand-glyph svg{width:100%; height:100%; display:block}
.brand-word{font-family:var(--display); font-weight:800; letter-spacing:0.01em; font-size:19px}
header.site nav{display:flex; gap:22px; font-size:15px}
header.site nav a{color:var(--muted); font-weight:500}
header.site nav a.on,header.site nav a:hover{color:var(--ink); text-decoration:none}

main{max-width:1080px; margin-inline:auto; padding:0 28px}

.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--brand); margin:0 0 18px}

/* hero */
.hero{display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center;
  padding:48px 0 76px}
.hero-figure{display:flex; justify-content:center}
.aipia-mark{width:min(360px,80%); height:auto; filter:drop-shadow(0 24px 60px rgba(11,83,196,.28))}
.hero h1{font-size:clamp(34px,5vw,52px); font-weight:800; max-width:13ch}
.lede{font-size:20px; color:var(--muted); margin:22px 0 0; max-width:42ch}
.hero-status{margin:30px 0 0; font-size:15px; color:var(--muted)}

/* feature row */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; margin:0 0 84px}
.feature{background:var(--surface); padding:30px 26px 34px}
.feature-no{font-family:var(--mono); font-size:13px; color:var(--brand); font-weight:700}
.feature h3{font-size:21px; font-weight:700; margin:14px 0 10px}
.feature p{margin:0; color:var(--muted); font-size:15.5px}

/* document pages */
.doc{max-width:720px; margin:0 auto; padding:40px 0 84px}
.doc h1{font-size:clamp(30px,4.5vw,42px); font-weight:800}
.doc h2{font-size:21px; font-weight:700; margin:38px 0 8px}
.doc-meta{color:var(--muted); font-size:15px; margin:14px 0 0}
.doc p{margin:12px 0; color:#23354f}
.doc-todo{background:#FFF7E6; border:1px solid #F2D58A; color:#6b4e09;
  border-radius:12px; padding:14px 16px; font-size:14.5px; margin:26px 0}

.contact-card{background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:22px 24px; margin:26px 0}
.contact-label{font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 4px}
.contact-value{font-size:21px; font-weight:600; margin:0}

/* footer */
footer.site{border-top:1px solid var(--line); margin-top:20px; display:flex;
  align-items:center; gap:18px; flex-wrap:wrap; color:var(--muted)}
.foot-mark{width:22px; height:22px}
.foot-mark svg{width:100%; height:100%; display:block; opacity:.85}
.foot-legal{margin:0; font-size:14px}
.foot-nav{margin-left:auto; display:flex; gap:18px; font-size:14px}
.foot-nav a{color:var(--muted)}

/* comb assembly animation */
.comb-row{opacity:0; transform:translateY(14px); animation:drop .5s ease forwards}
.comb-row-0{animation-delay:.05s}
.comb-row-1{animation-delay:.16s}
.comb-row-2{animation-delay:.27s}
.comb-row-3{animation-delay:.38s}
.comb-row-4{animation-delay:.49s}
@keyframes drop{to{opacity:1; transform:translateY(0)}}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:30px; padding:30px 0 56px; text-align:center}
  .hero-copy{display:flex; flex-direction:column; align-items:center}
  .features{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .comb-row{opacity:1; transform:none; animation:none}
}
:focus-visible{outline:3px solid var(--brand-light); outline-offset:3px; border-radius:4px}