.ai-hero{
  position:relative;
  overflow-x:clip;
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  background:
    linear-gradient(var(--color-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-line) 1px,transparent 1px),
    var(--color-canvas);
  background-size:54px 54px;
}
.ai-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,var(--color-canvas),var(--color-panel),var(--color-canvas));
  opacity:.88;
}
.ai-hero-grid{
  position:relative;
  z-index:1;
  min-height:720px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  align-items:center;
  gap:clamp(40px,7vw,96px);
  padding-top:clamp(64px,9vw,112px);
  padding-bottom:clamp(64px,9vw,112px);
}
.ai-hero-copy{
  position:relative;
  z-index:2;
}
.ai-kicker{
  margin-bottom:24px;
  font-family:var(--font-mono);
  letter-spacing:.08em;
}
.ai-hero h1{
  max-width:760px;
  margin-bottom:24px;
}
.ai-hero-actions{
  margin-bottom:24px;
}
.ai-hero-copy .lead{
  max-width:720px;
}
.ai-fact-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
  color:var(--color-muted);
  font-size:.9rem;
}
.ai-fact-row li{
  display:flex;
  align-items:center;
  gap:8px;
}
.ai-fact-row .status-dot:nth-child(1){
  background:var(--color-accent);
}
.ai-route-board{
  position:relative;
  min-height:520px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-panel);
  background:var(--color-canvas);
  box-shadow:var(--shadow-raised);
}
.ai-route-board::before{
  content:"";
  position:absolute;
  inset:22px;
  border:1px dashed var(--color-line);
  border-radius:var(--radius-card);
}
.ai-route-lines{
  position:absolute;
  inset:20px;
  width:calc(100% - 40px);
  height:calc(100% - 40px);
  color:var(--color-accent);
}
.ai-path{
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:8 12;
}
.ai-path-secondary{
  color:var(--color-accent-blue);
}
.ai-point{
  stroke:var(--color-canvas);
  stroke-width:5;
}
.ai-point-start,
.ai-point-end{
  fill:var(--color-accent);
}
.ai-point-green{
  fill:var(--color-success);
}
.ai-point-warn{
  fill:var(--color-warning);
}
.ai-point-blue{
  fill:var(--color-accent-blue);
}
.ai-tool-card{
  position:absolute;
  display:grid;
  gap:2px;
  min-width:126px;
  padding:14px 16px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  background:var(--color-canvas);
  box-shadow:var(--shadow-card);
}
.ai-tool-card strong{
  font-size:.92rem;
}
.ai-tool-card small{
  color:var(--color-muted);
}
.ai-tool-code{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--color-accent-deep);
}
.ai-tool-chat{
  top:34px;
  left:26%;
}
.ai-tool-codegen{
  top:40%;
  right:22px;
}
.ai-tool-api{
  bottom:30px;
  left:28%;
}
.ai-tool-image{
  top:42%;
  left:20px;
}
.ai-board-status{
  position:absolute;
  right:24px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-pill);
  background:var(--color-canvas);
  color:var(--color-muted);
  font-size:.78rem;
}
.ai-section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
  align-items:end;
  gap:40px;
  margin-bottom:38px;
}
.ai-section-head p{
  margin-bottom:0;
}
.ai-section-head .eyebrow,
.ai-split .eyebrow{
  display:block;
  margin-bottom:12px;
}
.ai-panel-section{
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  background:var(--color-panel);
}
.ai-requirement-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--color-line);
  border-left:1px solid var(--color-line);
}
.ai-requirement{
  min-width:0;
  padding:clamp(24px,4vw,42px);
  border-right:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
}
.ai-requirement h3{
  margin-top:14px;
}
.ai-requirement p{
  margin-bottom:0;
}
.ai-index{
  display:inline-flex;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  background:var(--color-accent-soft);
  color:var(--color-accent-deep);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
}
.ai-tool-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.ai-note{
  box-shadow:none;
}
.ai-note-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.ai-note-title h3{
  margin:0;
}
.ai-note-code{
  display:grid;
  min-width:58px;
  min-height:42px;
  place-items:center;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  background:var(--color-ink);
  color:var(--color-canvas);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
}
.ai-note p:last-child{
  margin-bottom:0;
}
.ai-compare-table td:nth-child(1){
  font-family:var(--font-mono);
}
.ai-split{
  display:grid;
  grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);
  gap:clamp(40px,8vw,100px);
}
.ai-checklist{
  display:grid;
  gap:0;
  border-top:1px solid var(--color-line);
}
.ai-checklist section{
  padding:26px 0;
  border-bottom:1px solid var(--color-line);
}
.ai-checklist h3{
  font-size:1.25rem;
}
.ai-checklist p{
  margin-bottom:0;
}
.ai-flow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;
  gap:14px;
  margin-bottom:24px;
}
.ai-flow-step{
  padding:26px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  background:var(--color-canvas);
}
.ai-flow-step p{
  margin-bottom:0;
}
.ai-flow-label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--color-accent-deep);
}
.ai-flow-step h3{
  margin-top:12px;
}
.ai-flow-arrow{
  align-self:center;
  color:var(--color-accent);
  font-size:1.5rem;
  font-weight:800;
}
.ai-dev-grid .panel{
  box-shadow:none;
}
.ai-dev-grid .panel p:last-child{
  margin-bottom:0;
}
.ai-failure-list{
  border-top:1px solid var(--color-line);
}
.ai-route-advice{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.ai-route-advice section{
  padding:26px;
  border-top:3px solid var(--color-accent);
  border-right:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  border-left:1px solid var(--color-line);
  border-radius:var(--radius-card);
  background:var(--color-canvas);
}
.ai-route-advice section:nth-child(2){
  border-top-color:var(--color-success);
}
.ai-route-advice section:nth-child(3){
  border-top-color:var(--color-warning);
}
.ai-route-advice h3{
  margin-top:18px;
}
.ai-route-advice p{
  margin-bottom:0;
}
.ai-next-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:30px;
}
.ai-next-card{
  position:relative;
  display:block;
  min-height:190px;
  padding:28px 64px 28px 28px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  background:var(--color-panel);
  color:var(--color-ink);
  text-decoration:none;
  transition:transform .16s var(--ease),border-color .16s var(--ease);
}
.ai-next-card:hover{
  transform:translateY(-3px);
  border-color:var(--color-accent);
  color:var(--color-ink);
}
.ai-next-card strong{
  display:block;
  margin:16px 0 8px;
  font-family:var(--font-display);
  font-size:1.4rem;
}
.ai-next-card p{
  margin-bottom:0;
}
.ai-next-arrow{
  position:absolute;
  top:50%;
  right:28px;
  transform:translateY(-50%);
  color:var(--color-accent);
  font-size:1.6rem;
}
@media(max-width:1040px){
  .ai-hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .ai-hero-copy{
    max-width:820px;
  }
  .ai-route-board{
    width:100%;
    min-height:460px;
  }
}
@media(max-width:820px){
  .ai-section-head,
  .ai-split{
    grid-template-columns:1fr;
    gap:18px;
  }
  .ai-requirement-grid,
  .ai-tool-notes,
  .ai-route-advice{
    grid-template-columns:1fr;
  }
  .ai-flow{
    grid-template-columns:1fr;
  }
  .ai-flow-arrow{
    transform:rotate(90deg);
    justify-self:center;
  }
}
@media(max-width:640px){
  .ai-hero-grid{
    padding-top:44px;
    padding-bottom:52px;
  }
  .ai-route-board{
    min-height:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:18px;
  }
  .ai-route-board::before,
  .ai-route-lines{
    display:none;
  }
  .ai-tool-card{
    position:static;
    min-width:0;
  }
  .ai-board-status{
    position:static;
    grid-column:1 / -1;
    justify-content:center;
  }
  .ai-fact-row{
    display:grid;
    gap:10px;
  }
  .ai-next-links{
    grid-template-columns:1fr;
  }
  .ai-next-card{
    min-height:0;
  }
}
@media(max-width:400px){
  .ai-route-board{
    grid-template-columns:1fr;
  }
}
@media(prefers-reduced-motion:reduce){
  .ai-next-card,
  .ai-next-card:hover{
    transform:none;
    transition:none;
  }
}