.ai-hero{
  position:relative;
  overflow-x:clip;
  border-bottom:1px solid var(--color-line);
  background:
    radial-gradient(circle at 78% 42%,var(--color-gold-16),var(--color-clear) 34%),
    linear-gradient(var(--color-page),var(--color-page));
}
.ai-hero::after{
  position:absolute;
  right:0;
  bottom:0;
  width:42%;
  height:46%;
  background-image:radial-gradient(circle,var(--color-ink-10) 1px,var(--color-clear) 1.2px);
  background-size:18px 18px;
  content:"";
  pointer-events:none;
}
.ai-hero-inner{
  position:relative;
  z-index:1;
  min-height:720px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
  gap:72px;
  align-items:center;
  padding-top:72px;
  padding-bottom:72px;
}
.ai-hero-copy{min-width:0}
.ai-hero-copy h1{max-width:680px}
.ai-hero-copy .lead{margin-bottom:28px}
.ai-hero-copy .button-row{margin-bottom:26px}
.ai-trust-line{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.ai-trust-line span{
  display:inline-flex;
  min-height:32px;
  align-items:center;
  padding:5px 11px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:12px;
}

.ai-route-board{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--color-line);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-card-near),var(--shadow-card-far);
  transform:rotate(1.5deg);
}
.ai-route-board::before{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg,var(--color-gold-10),var(--color-clear) 38%);
  content:"";
  pointer-events:none;
}
.ai-board-head{
  position:relative;
  display:flex;
  min-height:62px;
  align-items:center;
  gap:11px;
  padding:12px 20px;
  border-bottom:1px solid var(--color-line);
}
.ai-board-bolt{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--color-gold);
  color:var(--color-ink);
}
.ai-board-title{
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
}
.ai-board-state{
  margin-left:auto;
  color:var(--color-success);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
}
.ai-board-body{
  position:relative;
  min-height:440px;
  padding:28px;
  background:
    linear-gradient(var(--color-ink-04) 1px,var(--color-clear) 1px),
    linear-gradient(90deg,var(--color-ink-04) 1px,var(--color-clear) 1px);
  background-size:32px 32px;
}
.ai-core{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  width:118px;
  height:118px;
  place-items:center;
  border:1px solid var(--color-gold-deep);
  border-radius:var(--radius-pill);
  background:var(--color-panel);
  box-shadow:0 0 0 14px var(--color-gold-10),var(--shadow-soft);
  transform:translate(-50%,-50%);
}
.ai-core-ring{
  position:absolute;
  inset:10px;
  border:1px dashed var(--color-gold-deep);
  border-radius:var(--radius-pill);
}
.ai-core-label{
  position:relative;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:800;
}
.ai-route-line{
  position:absolute;
  height:1px;
  background:var(--color-gold-deep);
  transform-origin:left center;
}
.ai-route-line::after{
  position:absolute;
  top:50%;
  right:0;
  width:7px;
  height:7px;
  border-radius:var(--radius-pill);
  background:var(--color-gold);
  content:"";
  transform:translate(50%,-50%);
}
.ai-route-line-a{
  top:39%;
  left:23%;
  width:25%;
  transform:rotate(17deg);
}
.ai-route-line-b{
  top:43%;
  left:56%;
  width:24%;
  transform:rotate(-23deg);
}
.ai-route-line-c{
  top:61%;
  left:54%;
  width:27%;
  transform:rotate(19deg);
}
.ai-tool-node{
  position:absolute;
  min-width:136px;
  padding:13px 15px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  box-shadow:var(--shadow-card-near);
}
.ai-tool-node strong{
  display:block;
  color:var(--color-ink);
  font-size:13px;
}
.ai-tool-node span{
  display:block;
  margin-top:3px;
  color:var(--color-muted);
  font-size:11px;
}
.ai-tool-node-a{top:15%;left:7%}
.ai-tool-node-b{top:13%;right:6%}
.ai-tool-node-c{right:5%;bottom:18%}
.ai-board-foot{
  position:absolute;
  right:24px;
  bottom:20px;
  left:24px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ai-board-foot span{
  padding:4px 9px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-pill);
  background:var(--color-page);
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:10px;
}

.ai-guide{max-width:1040px}
.ai-guide > section{
  padding-top:22px;
  padding-bottom:54px;
  border-bottom:1px solid var(--color-line);
}
.ai-guide > section:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.ai-guide .section-head{max-width:820px}
.ai-guide p{font-size:17px}
.ai-tool-table td{vertical-align:top}

.ai-compare-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:28px 0;
}
.ai-compare-card{
  min-width:0;
  padding:26px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  box-shadow:var(--shadow-card-near);
}
.ai-compare-card h3{font-size:21px}
.ai-compare-label{
  display:inline-flex;
  margin-bottom:15px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--color-gold-16);
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
}

.ai-dev-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:28px 0;
}
.ai-dev-list article{
  min-width:0;
  padding:24px;
  border-top:4px solid var(--color-gold);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  box-shadow:var(--shadow-card-near);
}
.ai-dev-list h3{font-size:20px}
.ai-dev-list p{font-size:15px}
.ai-failure-list{margin-top:28px}
.ai-end-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.ai-closing{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:36px;
  align-items:center;
}
.ai-closing h2{
  max-width:720px;
  margin-top:10px;
}
.ai-closing p{max-width:760px}

@media (max-width:1120px){
  .ai-hero-inner{
    grid-template-columns:1fr;
    gap:50px;
  }
  .ai-hero-copy{max-width:780px}
  .ai-route-board{
    width:100%;
    max-width:680px;
    margin-inline:auto;
  }
  .ai-dev-list{grid-template-columns:1fr}
}
@media (max-width:768px){
  .ai-hero::after{display:none}
  .ai-hero-inner{
    min-height:auto;
    padding-top:58px;
    padding-bottom:68px;
  }
  .ai-route-board{transform:none}
  .ai-board-body{min-height:410px}
  .ai-compare-grid{grid-template-columns:1fr}
  .ai-guide p{font-size:16px}
  .ai-closing{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ai-route-board{border-radius:var(--radius-lg)}
  .ai-board-head{padding-inline:15px}
  .ai-board-title{letter-spacing:0}
  .ai-board-body{
    min-height:390px;
    padding:18px;
    background-size:26px 26px;
  }
  .ai-core{
    width:92px;
    height:92px;
  }
  .ai-tool-node{
    min-width:116px;
    padding:10px 11px;
  }
  .ai-tool-node-a{top:12%;left:4%}
  .ai-tool-node-b{top:11%;right:4%}
  .ai-tool-node-c{right:4%;bottom:20%}
  .ai-route-line-a{left:20%;width:29%}
  .ai-route-line-b{left:55%;width:27%}
  .ai-route-line-c{left:54%;width:30%}
  .ai-board-foot{
    right:14px;
    bottom:14px;
    left:14px;
  }
  .ai-board-foot span{font-size:9px}
  .ai-compare-card,
  .ai-dev-list article{padding:21px}
  .ai-end-links{align-items:stretch}
  .ai-end-links .btn{width:100%}
}