.ai-hero{
  position:relative;
  min-height:690px;
  overflow-x:clip;
  border-bottom:1px solid var(--color-border);
  background:
    radial-gradient(ellipse at 78% 58%,color-mix(in srgb,var(--color-accent) 15%,transparent),transparent 38%),
    linear-gradient(180deg,var(--color-bg),var(--color-panel));
}
.ai-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background-image:
    linear-gradient(color-mix(in srgb,var(--color-border) 32%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--color-border) 32%,transparent) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,transparent,var(--color-bg),transparent);
}
.ai-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(430px,.96fr);
  align-items:center;
  gap:56px;
  min-height:690px;
  padding-top:64px;
  padding-bottom:64px;
}
.ai-hero-copy{min-width:0;max-width:760px}
.ai-hero-copy h1{max-width:720px;margin-top:20px}
.ai-hero-copy h1 .hero-highlight{display:inline-block;margin-inline:10px}
.ai-hero-lead{
  max-width:720px;
  margin-top:24px;
  color:var(--color-muted);
  font-size:17px;
  line-height:1.8;
}
.ai-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ai-hero-facts{
  display:flex;
  flex-wrap:wrap;
  gap:9px 20px;
  margin-top:22px;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:11px;
}
.ai-hero-facts span{display:flex;align-items:center;gap:8px}
.ai-hero-facts span::before{
  content:"";
  width:5px;
  height:5px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-accent);
  box-shadow:var(--shadow-accent);
}
.ai-route-visual{
  position:relative;
  min-width:0;
  height:500px;
  color:var(--color-accent-deep);
}
.ai-route-visual::before{
  content:"";
  position:absolute;
  inset:5%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--color-accent) 18%,transparent),transparent 64%);
}
.ai-route-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid var(--color-border);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.ai-route-ring-outer{width:94%;height:72%;border-style:dashed}
.ai-route-ring-inner{width:62%;height:48%}
.ai-route-lines{
  position:absolute;
  inset:7% 0;
  width:100%;
  height:86%;
  opacity:.72;
}
.ai-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  display:grid;
  width:108px;
  height:108px;
  place-items:center;
  transform:translate(-50%,-50%);
  border:1px solid var(--color-accent);
  border-radius:32%;
  background:linear-gradient(145deg,var(--color-accent),var(--color-accent-deep));
  color:var(--color-white);
  box-shadow:var(--shadow-accent);
}
.ai-tool-node{
  position:absolute;
  z-index:4;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 13px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-panel-raised);
  color:var(--color-text);
  font-family:var(--font-mono);
  font-size:11px;
  box-shadow:var(--shadow-panel);
  white-space:nowrap;
}
.ai-tool-node::before{
  content:"";
  width:6px;
  height:6px;
  margin-right:8px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-accent);
  box-shadow:var(--shadow-accent);
}
.node-chat{left:2%;top:17%}
.node-claude{right:2%;top:14%}
.node-gemini{left:3%;bottom:16%}
.node-copilot{right:1%;bottom:16%}
.node-cursor{left:50%;bottom:0;transform:translateX(-50%)}
.ai-mode-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.ai-mode{min-width:0;padding:32px}
.ai-mode-label,.ai-selection-index{
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.15em;
}
.ai-mode h3{margin-top:12px}
.ai-mode p:not(.ai-mode-label){margin-top:16px;color:var(--color-muted)}
.ai-mode ul{display:grid;gap:10px;margin-top:22px;color:var(--color-muted)}
.ai-mode li{display:flex;gap:10px}
.ai-mode li::before{
  content:"◆";
  flex-shrink:0;
  color:var(--color-accent);
  font-size:9px;
}
.ai-callout{margin-top:18px}
.ai-table-section{background:var(--color-panel)}
.ai-tool-table td{min-width:180px;color:var(--color-muted)}
.ai-tool-table td:first-child{min-width:130px}
.ai-tool-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.ai-tool-card{
  min-width:0;
  padding:28px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
}
.ai-tool-head{display:flex;align-items:center;gap:14px}
.ai-tool-mark{
  display:grid;
  width:38px;
  height:38px;
  flex-shrink:0;
  place-items:center;
  border:1px solid var(--color-accent-deep);
  border-radius:var(--radius-sm);
  background:var(--color-panel-raised);
  color:var(--color-accent);
  font-family:var(--font-mono);
  box-shadow:0 0 18px color-mix(in srgb,var(--color-accent) 12%,transparent);
}
.ai-tool-card h3{font-family:var(--font-body);font-size:19px;font-weight:650}
.ai-tool-card p{margin-top:18px;color:var(--color-muted)}
.ai-developer-section{
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  background:var(--color-panel);
}
.ai-developer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  align-items:start;
  gap:48px;
}
.ai-prose{margin-top:28px}
.ai-prose h3{font-family:var(--font-body);font-size:20px;font-weight:650}
.ai-prose pre{font-family:var(--font-mono)}
.ai-check-panel{
  position:sticky;
  top:calc(var(--header-height) + 22px);
  padding:28px;
}
.ai-check-panel h3{margin-top:12px}
.ai-check-list{display:grid;gap:0;margin-top:22px}
.ai-check-list li{
  position:relative;
  display:grid;
  gap:4px;
  padding:17px 0 17px 22px;
  border-bottom:1px solid var(--color-border);
}
.ai-check-list li:last-child{border-bottom:0}
.ai-check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:24px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-accent);
  box-shadow:var(--shadow-accent);
}
.ai-check-list strong{color:var(--color-text)}
.ai-check-list span{color:var(--color-muted)}
.ai-faq{max-width:960px}
.ai-selection-section{padding-top:var(--section-space)}
.ai-selection-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.ai-selection-card{
  min-width:0;
  padding:26px;
  border-top:2px solid var(--color-accent);
  border-right:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  border-left:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
}
.ai-selection-card h3{
  margin-top:12px;
  font-family:var(--font-body);
  font-size:19px;
  font-weight:650;
}
.ai-selection-card p{margin-top:12px;color:var(--color-muted)}
.ai-next-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ai-promo{margin-top:48px}
@media (max-width:1080px){
  .ai-hero-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:24px}
  .ai-route-visual{height:440px}
  .ai-developer-grid{gap:28px}
}
@media (max-width:900px){
  .ai-hero{min-height:auto}
  .ai-hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:68px;
    padding-bottom:32px;
  }
  .ai-hero-copy{max-width:780px}
  .ai-route-visual{width:min(100%,620px);height:420px;margin-inline:auto}
  .ai-developer-grid{grid-template-columns:1fr}
  .ai-check-panel{position:relative;top:auto}
}
@media (max-width:768px){
  .ai-mode-grid,.ai-tool-grid,.ai-selection-grid{grid-template-columns:1fr}
  .ai-hero-copy h1 .hero-highlight{margin-inline:6px}
  .ai-hero-lead{font-size:16px}
  .ai-route-visual{height:370px}
  .ai-tool-node{font-size:10px}
  .ai-core{width:88px;height:88px}
  .ai-core svg{width:44px;height:44px}
}
@media (max-width:540px){
  .ai-hero-grid{padding-top:48px}
  .ai-hero-actions{align-items:stretch;flex-direction:column}
  .ai-hero-actions .btn{width:100%}
  .ai-hero-facts{display:grid;gap:8px}
  .ai-route-visual{height:310px}
  .ai-route-ring-outer{width:112%;height:70%}
  .ai-route-ring-inner{width:72%;height:45%}
  .ai-route-lines{inset:3% -8%;width:116%;height:94%}
  .ai-tool-node{min-height:30px;padding:4px 9px}
  .node-chat{left:0;top:13%}
  .node-claude{right:0;top:10%}
  .node-gemini{left:0;bottom:13%}
  .node-copilot{right:0;bottom:13%}
  .node-cursor{bottom:-2px}
  .ai-mode,.ai-tool-card,.ai-check-panel,.ai-selection-card{padding:22px}
  .ai-next-links{flex-direction:column}
  .ai-next-links .btn{width:100%}
}
@media (max-width:370px){
  .ai-route-visual{height:285px}
  .ai-tool-node{font-size:9px}
  .ai-core{width:76px;height:76px}
  .ai-core svg{width:38px;height:38px}
}