/* OCTI AI Agents Network — Experience 28.0 */

.section--ainet{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 8% 0%,rgba(0,209,255,.08),transparent 55%),
    radial-gradient(700px 380px at 92% 12%,rgba(46,46,132,.1),transparent 50%),
    linear-gradient(180deg,var(--light) 0%,var(--white) 48%,var(--light) 100%);
}
.section--ainet::before{
  content:"";
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(46,46,132,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(46,46,132,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 88%);
  pointer-events:none;
}
.ainet-wrap{position:relative;z-index:1}
.ainet-kicker{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 10px;padding:6px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--border-soft);background:rgba(255,255,255,.72);
  font:600 var(--fs-xs)/1 var(--font-body);letter-spacing:.04em;color:var(--primary);
}
.ainet-editorial{
  margin:14px 0 0;max-width:42ch;
  font:700 clamp(1.05rem,1rem + .4vw,1.25rem)/1.35 var(--font-head);
  color:var(--primary-dark);
}
.ainet-note{
  margin-top:14px;max-width:70ch;
  font-size:var(--fs-sm);color:var(--text-muted);
}

/* —— Diagram canvas —— */
.ainet{
  margin-top:clamp(28px,4vw,48px);
  display:grid;
  gap:clamp(20px,3vw,28px);
}
.ainet__canvas{
  position:relative;
  min-height:420px;
  padding:clamp(16px,2.5vw,28px);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.ainet__svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.ainet-edge{
  stroke:rgba(46,46,132,.28);
  stroke-width:1.35;
  transition:stroke .35s var(--ease),opacity .35s var(--ease),stroke-width .35s var(--ease);
}
.ainet-edge--fwd{
  stroke-dasharray:7 10;
}
.ainet-edge--back{
  stroke:rgba(0,209,255,.35);
  stroke-width:1.1;
  stroke-dasharray:3 12;
  opacity:.75;
}
.ainet.is-live .ainet-edge--fwd{animation:ainetDash 2.8s linear infinite}
.ainet.is-live .ainet-edge--back{animation:ainetDashRev 3.6s linear infinite}
.ainet-edge.is-dim{opacity:.18}
.ainet-edge.is-hot{
  stroke:var(--primary);
  stroke-width:2;
  opacity:1;
  filter:drop-shadow(0 0 6px rgba(0,209,255,.35));
}
.ainet-edge.is-hot.ainet-edge--back{stroke:var(--secondary-deep)}
.ainet-particle{
  fill:var(--secondary);
  opacity:.9;
  filter:drop-shadow(0 0 4px rgba(0,209,255,.65));
}
@keyframes ainetDash{to{stroke-dashoffset:-68}}
@keyframes ainetDashRev{to{stroke-dashoffset:72}}

.ainet__layers{
  position:relative;z-index:2;
  display:grid;
  gap:clamp(28px,4.5vw,56px);
  grid-template-rows:auto auto auto;
  align-items:center;
  min-height:inherit;
}
.ainet__models{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:760px;
  margin-inline:auto;
  width:100%;
}
.ainet__orch{display:grid;place-items:center}
.ainet__agents{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.ainet-node{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--white);
  padding:14px 12px;
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out),border-color var(--dur-med) var(--ease),background var(--dur-med) var(--ease);
}
.ainet-node:hover,.ainet-node:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(46,46,132,.28);
  box-shadow:var(--shadow-md);
}
.ainet-node__logo{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(46,46,132,.06);
  color:var(--ink-900);
}
.ainet-node__logo img,.ainet-node__logo svg{width:22px;height:22px;display:block}
.ainet-node__name{font:700 .95rem/1.2 var(--font-head);color:var(--dark);margin:0}
.ainet-node__meta{font-size:var(--fs-xs);color:var(--text-muted);margin:0;max-width:18ch}

.ainet-node--model{min-height:118px}
.ainet-node--orch{
  width:min(100%,420px);
  padding:22px 24px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 140% at 10% 0%,rgba(0,209,255,.16),transparent 55%),
    linear-gradient(145deg,var(--primary) 0%,var(--primary-light) 55%,#2a7bd0 100%);
  border:1px solid transparent;
  color:var(--white);
  box-shadow:var(--shadow-md),0 0 0 1px rgba(255,255,255,.08) inset;
}
.ainet-node--orch:hover,.ainet-node--orch:focus-visible{
  transform:translateY(-2px) scale(1.01);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.12) inset;
}
.ainet-node--orch .ainet-node__name{color:var(--white);font-size:1.05rem}
.ainet-node--orch .ainet-node__meta{color:rgba(232,232,246,.88);max-width:36ch}
.ainet-node--orch .ainet-node__logo{
  background:rgba(255,255,255,.14);color:var(--white);
  width:48px;height:48px;border-radius:14px;
}
.ainet-node--orch .ainet-node__logo svg{width:24px;height:24px;display:block}
.ainet-node--orch .ainet-node__pulse{
  position:absolute;inset:auto;
  width:10px;height:10px;border-radius:50%;
  right:16px;top:16px;
  background:var(--secondary);
  box-shadow:0 0 0 0 rgba(0,209,255,.55);
}
.ainet.is-live .ainet-node--orch .ainet-node__pulse{
  animation:ainetPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes ainetPulse{
  0%{box-shadow:0 0 0 0 rgba(0,209,255,.5);opacity:1}
  70%{box-shadow:0 0 0 12px rgba(0,209,255,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(0,209,255,0);opacity:1}
}

.ainet-node--agent{
  cursor:pointer;
  font:inherit;color:inherit;
  width:100%;
  min-height:132px;
  appearance:none;
  -webkit-appearance:none;
}
.ainet-node--agent .ainet-node__ico{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(46,46,132,.08);color:var(--primary);
}
.ainet-node--agent .ainet-node__ico svg{width:20px;height:20px}
.ainet-node--agent.is-active{
  border-color:rgba(46,46,132,.4);
  background:linear-gradient(180deg,#fff 0%,rgba(46,46,132,.04) 100%);
  box-shadow:var(--shadow-md),0 0 0 3px rgba(0,209,255,.18);
}
.ainet-node--agent.is-active .ainet-node__ico{
  background:rgba(0,209,255,.14);color:var(--primary-dark);
}

/* Detail panel */
.ainet__detail{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--white);
  padding:clamp(18px,3vw,28px);
  box-shadow:var(--shadow-sm);
}
.ainet-detail__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
.ainet-detail__head h3{font-size:clamp(1.1rem,1rem + .4vw,1.35rem);margin:0}
.ainet-detail__label{
  font:600 var(--fs-xs)/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--primary);
}
.ainet-detail__body{color:var(--text-muted);max-width:70ch}
.ainet-caps{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin:16px 0 0;padding:0;list-style:none;
}
.ainet-caps li{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--light);border:1px solid var(--border-soft);
  font-size:var(--fs-sm);color:var(--text-main);
}
.ainet-caps li svg{width:16px;height:16px;flex-shrink:0;color:var(--primary);margin-top:2px}
.ainet-example{
  margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);
  border-left:3px solid var(--secondary-deep);
  background:rgba(0,209,255,.06);
  font-size:var(--fs-sm);color:var(--text-main);
}
.ainet-example strong{display:block;margin-bottom:4px;color:var(--primary-dark)}

/* Compare */
.ainet-compare{margin-top:clamp(40px,6vw,72px)}
.ainet-compare__head{max-width:640px;margin-bottom:clamp(22px,3vw,36px)}
.ainet-compare__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.ainet-card{
  border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px);
  border:1px solid var(--border);
  background:var(--white);
  min-height:100%;
}
.ainet-card--before{background:linear-gradient(180deg,#fafafc,#f3f4f8)}
.ainet-card--after{
  background:linear-gradient(145deg,var(--primary) 0%,var(--primary-light) 60%,#2a7bd0 100%);
  border-color:transparent;color:var(--white);
  box-shadow:var(--shadow-md);
}
.ainet-card__badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--radius-pill);
  font:600 var(--fs-xs)/1 var(--font-body);
  background:rgba(46,46,132,.08);color:var(--primary);
  margin-bottom:16px;
}
.ainet-card--after .ainet-card__badge{background:rgba(255,255,255,.16);color:var(--white)}
.ainet-card h3{margin:0 0 8px;font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem)}
.ainet-card--after h3{color:var(--white)}
.ainet-card > p{margin:0 0 16px;color:var(--text-muted);font-size:var(--fs-sm)}
.ainet-card--after > p{color:rgba(232,232,246,.88)}
.ainet-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ainet-card li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:var(--fs-sm);line-height:1.45;
}
.ainet-card li svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--primary)}
.ainet-card--after li svg{color:var(--secondary)}
.ainet-compare__footnote{
  margin-top:14px;font-size:var(--fs-xs);color:var(--text-muted);max-width:80ch;
}

/* CTA */
.ainet-cta{
  margin-top:clamp(32px,5vw,56px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(20px,3vw,28px);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-sm);
}
.ainet-cta__copy{max-width:48ch}
.ainet-cta__copy h3{margin:0 0 6px;font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)}
.ainet-cta__copy p{margin:0;color:var(--text-muted);font-size:var(--fs-sm)}
.ainet-cta__actions{display:flex;flex-wrap:wrap;gap:12px}

/* —— Responsive —— */
@media (max-width:1100px){
  .ainet__agents{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ainet__agents .ainet-node--agent:nth-child(4),
  .ainet__agents .ainet-node--agent:nth-child(5){grid-column:span 1}
  .ainet__canvas{min-height:480px}
}
@media (max-width:860px){
  .ainet__models{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ainet-node--model{padding:12px 8px;min-height:104px}
  .ainet-node--model .ainet-node__meta,
  .ainet-node--agent .ainet-node__meta{display:none}
  .ainet__agents{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ainet__agents .ainet-node--agent:last-child{grid-column:1 / -1;max-width:280px;justify-self:center;width:100%}
  .ainet-caps{grid-template-columns:1fr}
  .ainet-compare__grid{grid-template-columns:1fr}
  .ainet__canvas{min-height:0}
}
@media (max-width:560px){
  .ainet__models{gap:6px}
  .ainet-node__logo{width:34px;height:34px;border-radius:10px}
  .ainet-node__logo img,.ainet-node__logo svg{width:18px;height:18px}
  .ainet-node__name{font-size:.82rem}
  .ainet-node--orch{padding:18px 16px;width:100%}
  .ainet-node--agent{min-height:112px;padding:12px 10px}
  .ainet-cta{flex-direction:column;align-items:stretch}
  .ainet-cta__actions .btn{width:100%}
  .ainet__canvas{padding:12px}
}

@media (prefers-reduced-motion:reduce){
  .ainet.is-live .ainet-edge--fwd,
  .ainet.is-live .ainet-edge--back,
  .ainet.is-live .ainet-node--orch .ainet-node__pulse{animation:none!important}
  .ainet-edge--fwd,.ainet-edge--back{stroke-dasharray:none;opacity:.55}
  .ainet-particle{display:none}
  .ainet-node:hover,.ainet-node:focus-visible,.ainet-node--orch:hover{transform:none}
}