.ai-hero{
  position:relative;
  padding-top:clamp(70px,9vw,118px);
  padding-bottom:clamp(72px,10vw,124px);
  overflow-x:clip;
  max-width:100%;
}
.ai-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:100%;
  background:
    radial-gradient(circle at 12% 18%,var(--color-wash-orange),transparent 34%),
    radial-gradient(circle at 48% 8%,var(--color-wash-pink),transparent 32%),
    radial-gradient(circle at 88% 24%,var(--color-wash-blue),transparent 38%);
  pointer-events:none;
}
.ai-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:72px;
  align-items:center;
}
.ai-hero-copy{min-width:0}
.ai-hero h1{
  max-width:760px;
  margin-top:18px;
  margin-bottom:20px;
  font-size:clamp(52px,5.3vw,72px);
}
.ai-hero .hero-sub{
  max-width:700px;
  margin-inline:0;
}
.ai-hero .hero-trust{justify-content:flex-start}
.ai-console{
  position:relative;
  min-width:0;
  padding-bottom:22px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-panel);
  transform-style:preserve-3d;
}
.ai-console::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:10% -5% -8% 12%;
  border-radius:var(--radius-xl);
  background:var(--gradient-brand);
  opacity:.12;
  filter:blur(28px);
}
.ai-console-bar{
  display:flex;
  min-height:48px;
  align-items:center;
  gap:14px;
  padding:0 18px;
  border-bottom:1px solid var(--color-border);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  background:var(--color-panel-soft);
  color:var(--color-muted);
  font-size:11px;
}
.ai-console-dots{display:flex;gap:6px}
.ai-console-dots i{
  width:10px;
  height:10px;
  border-radius:50%;
}
.ai-console-dots i:nth-child(1){background:var(--color-orange)}
.ai-console-dots i:nth-child(2){background:var(--color-pink)}
.ai-console-dots i:nth-child(3){background:var(--color-violet)}
.ai-console-body{
  display:grid;
  gap:12px;
  padding:24px;
}
.ai-flow{
  position:relative;
  min-width:0;
  padding:18px 18px 16px 92px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:linear-gradient(90deg,var(--color-panel-soft),var(--color-panel));
}
.ai-flow::before{
  content:"";
  position:absolute;
  top:50%;
  left:64px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--color-success);
  box-shadow:0 0 0 5px var(--color-tint-green);
  transform:translateY(-50%);
}
.ai-flow::after{
  content:"";
  position:absolute;
  top:50%;
  left:77px;
  width:14px;
  height:1px;
  background:var(--color-border);
}
.ai-flow-label{
  position:absolute;
  top:50%;
  left:14px;
  width:42px;
  color:var(--color-accent);
  font-size:10px;
  font-weight:800;
  transform:translateY(-50%);
}
.ai-flow strong{
  display:block;
  margin-bottom:2px;
  font-size:15px;
}
.ai-flow p{
  margin:0;
  color:var(--color-muted);
  font-size:12px;
}
.ai-console-tag{
  position:absolute;
  right:22px;
  bottom:-18px;
}
.ai-orbit-mark{
  position:absolute;
  display:grid;
  min-height:38px;
  place-items:center;
  padding:5px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  color:var(--color-accent);
  box-shadow:var(--shadow-float);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:800;
}
.ai-orbit-chat{top:74px;right:-38px}
.ai-orbit-claude{bottom:76px;left:-44px;color:var(--color-orange)}
.ai-orbit-cursor{top:148px;left:-28px;color:var(--color-violet)}
.ai-principle-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.ai-principle{
  min-width:0;
  padding:28px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-float);
}
.ai-principle:nth-child(1){background:linear-gradient(145deg,var(--color-tint-orange),var(--color-panel) 55%)}
.ai-principle:nth-child(2){background:linear-gradient(145deg,var(--color-tint-violet),var(--color-panel) 55%)}
.ai-principle:nth-child(3){background:linear-gradient(145deg,var(--color-tint-blue),var(--color-panel) 55%)}
.ai-principle > .mono{
  color:var(--color-accent);
  font-size:11px;
  font-weight:800;
}
.ai-principle h3{
  margin-top:12px;
  font-size:24px;
}
.ai-principle p{
  margin-bottom:0;
  color:var(--color-muted);
  font-size:15px;
}
.ai-guide{
  padding-bottom:var(--section-space);
}
.ai-guide-section{
  padding-top:76px;
  padding-bottom:76px;
}
.ai-guide-section + .ai-guide-section{
  border-top:1px solid var(--color-border);
}
.ai-tool-table td{
  min-width:150px;
  color:var(--color-muted);
  font-size:14px;
}
.ai-tool-table td:first-child{
  min-width:130px;
  color:var(--color-text);
}
.ai-tool-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.ai-tool-notes article{
  min-width:0;
  padding:26px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  box-shadow:0 16px 34px -28px var(--color-glow);
}
.ai-tool-notes article:nth-child(3n+1){border-top-color:var(--color-orange)}
.ai-tool-notes article:nth-child(3n+2){border-top-color:var(--color-violet)}
.ai-tool-notes article:nth-child(3n){border-top-color:var(--color-blue)}
.ai-tool-notes h3{font-size:21px}
.ai-tool-notes p{
  margin-bottom:0;
  color:var(--color-muted);
  font-size:15px;
}
.ai-split-copy{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px;
  padding:34px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:
    linear-gradient(90deg,var(--color-tint-blue),transparent 46%),
    var(--color-panel);
  box-shadow:var(--shadow-panel);
}
.ai-split-copy > div{min-width:0}
.ai-split-copy h3{font-size:23px}
.ai-split-copy p{
  color:var(--color-muted);
}
.ai-split-copy p:last-child{margin-bottom:0}
.ai-comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.ai-comparison .card{
  display:flex;
  flex-direction:column;
}
.ai-comparison h3{
  margin-top:17px;
  font-size:24px;
}
.ai-comparison p{
  color:var(--color-muted);
  font-size:15px;
}
.ai-comparison p:last-child{margin-bottom:0}
.ai-dev-stack{
  display:grid;
  gap:18px;
}
.ai-dev-stack > article{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:24px;
  min-width:0;
  padding:28px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-float);
}
.ai-dev-index{
  display:grid;
  width:64px;
  height:64px;
  place-items:center;
  border-radius:var(--radius-lg);
  background:var(--gradient-violet);
  color:var(--color-accent);
  font-size:12px;
  font-weight:800;
}
.ai-dev-stack > article > div{min-width:0}
.ai-dev-stack h3{font-size:23px}
.ai-dev-stack p{
  color:var(--color-muted);
}
.ai-dev-stack pre{
  margin-top:18px;
  margin-bottom:18px;
}
.ai-route-steps{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  counter-reset:ai-route;
  list-style:none;
}
.ai-route-steps li{
  position:relative;
  min-width:0;
  padding:22px 24px 22px 74px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  counter-increment:ai-route;
}
.ai-route-steps li::before{
  content:counter(ai-route);
  position:absolute;
  top:21px;
  left:22px;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:50%;
  background:var(--gradient-accent);
  color:var(--color-white);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:800;
}
.ai-route-steps strong{
  display:block;
  margin-bottom:5px;
}
.ai-route-steps p{
  margin:0;
  color:var(--color-muted);
  font-size:15px;
}
.ai-link-panels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}
.ai-link-panel{
  position:relative;
  min-width:0;
  padding:26px 60px 26px 26px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--color-tint-blue),var(--color-panel));
  color:var(--color-text);
  box-shadow:var(--shadow-float);
  transition:transform .2s ease,border-color .2s ease;
}
.ai-link-panel:hover{
  border-color:var(--color-accent);
  transform:translateY(-3px);
}
.ai-link-panel .mono{
  color:var(--color-accent);
  font-size:11px;
  font-weight:800;
}
.ai-link-panel strong{
  display:block;
  margin-top:9px;
  font-family:var(--font-display);
  font-size:22px;
}
.ai-link-panel p{
  margin:7px 0 0;
  color:var(--color-muted);
  font-size:14px;
}
.ai-link-panel > span:last-child{
  position:absolute;
  top:50%;
  right:24px;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:50%;
  background:var(--color-panel);
  color:var(--color-accent);
  transform:translateY(-50%);
}
@media (max-width:980px){
  .ai-hero-grid{
    grid-template-columns:1fr;
    gap:54px;
  }
  .ai-hero-copy{
    max-width:780px;
    text-align:center;
    margin-inline:auto;
  }
  .ai-hero .hero-sub{margin-inline:auto}
  .ai-hero .hero-actions,
  .ai-hero .hero-trust{justify-content:center}
  .ai-console{
    width:min(680px,100%);
    margin-inline:auto;
  }
  .ai-principle-grid{grid-template-columns:1fr}
}
@media (max-width:840px){
  .ai-tool-notes,
  .ai-split-copy,
  .ai-comparison,
  .ai-link-panels{grid-template-columns:1fr}
  .ai-split-copy{gap:22px}
}
@media (max-width:768px){
  .ai-hero{
    padding-top:64px;
    padding-bottom:72px;
  }
  .ai-hero h1{
    font-size:clamp(28px,9.8vw,40px);
  }
  .ai-console{
    max-width:100%;
  }
  .ai-orbit-mark{display:none}
  .ai-console-tag{
    right:12px;
    font-size:11px;
  }
  .ai-guide-section{
    padding-top:64px;
    padding-bottom:64px;
  }
  .ai-dev-stack > article{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  .ai-hero .hero-actions{
    width:100%;
    flex-direction:column;
  }
  .ai-console-body{padding:16px}
  .ai-flow{
    padding:16px 14px 16px 70px;
  }
  .ai-flow-label{left:12px}
  .ai-flow::before{left:50px}
  .ai-flow::after{left:63px;width:7px}
  .ai-console-tag{display:none}
  .ai-principle,
  .ai-tool-notes article,
  .ai-split-copy,
  .ai-dev-stack > article{padding:21px}
  .ai-route-steps li{
    padding:62px 20px 20px;
  }
  .ai-route-steps li::before{
    top:18px;
    left:20px;
  }
  .ai-link-panel{padding:22px 56px 22px 22px}
}