.hero .hero-layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center;gap:12px}
.hero .hero-copy{position:relative;z-index:1;padding:91px 0 102px;max-width:none}
.hero h1{font-size:clamp(41px,5.9vw,83px);white-space:nowrap}
.hero:after{background:linear-gradient(90deg,#080b19 0%,#090d20aa 38%,transparent 78%)}
.hero-visual{position:relative;isolation:isolate;margin:0;min-width:0;width:100%;height:clamp(405px,42vw,550px);--ai-x:36%;--ai-y:44%;--ad-x:77%;--ad-y:27%;--traffic-x:71%;--traffic-y:72%}
.hero .hero-visual canvas{z-index:-1}
.hero-core{position:absolute;left:var(--ai-x);top:var(--ai-y);transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(59px,6vw,82px);aspect-ratio:1;border:1px solid #95baffd9;border-radius:19%;color:#eaf6ff;background:linear-gradient(142deg,#30498ae8,#0b1436f0 75%);box-shadow:inset 0 0 19px #8cbaff4e,0 0 38px #5d8aff89;letter-spacing:-.08em;font:bold clamp(23px,3.4vw,42px)/1 Inter,sans-serif}
.hero-core:before,.hero-core:after{content:"";position:absolute;inset:-7px;border:1px dashed #a1b9f786;border-radius:24%;pointer-events:none}
.hero-core:after{inset:-12px;border-color:#7e93ea50;border-style:solid}
.hero-core-label{position:absolute;left:var(--ai-x);top:calc(var(--ai-y) + clamp(47px,5vw,64px));transform:translateX(-50%);border-radius:13px;padding:3px 10px;font-size:12px;font-weight:800;color:#d8e8ff;white-space:nowrap;background:#111d3edc;border:1px solid #849ef755}
.hero-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid #b49eff78;background:linear-gradient(115deg,#2c2354f0,#15182df5);border-radius:13px;box-shadow:0 12px 28px #070b2099;color:#f7f6ff;white-space:nowrap}
.hero-node strong,.hero-node small{display:block;line-height:1.36}.hero-node strong{font-size:14px}.hero-node small{font-size:10px;color:#d3c9f6;margin-top:3px}
.hero-node-icon{width:32px;height:32px;border-radius:8px;background:#aa8eff2b;display:grid;place-items:center;position:relative}
.hero-ad{left:var(--ad-x);top:var(--ad-y)}
.ad-icon i{position:absolute;width:17px;height:13px;border:1px solid #e1d4ff;border-radius:3px}
.ad-icon i:first-child{transform:translate(2px,-2px);opacity:.5}
.ad-icon i:last-child{transform:translate(-1px,1px);background:#493875}
.ad-icon i:last-child:after{content:"";position:absolute;left:6px;top:3px;border-left:5px solid #e0caff;border-top:3px solid transparent;border-bottom:3px solid transparent}
.hero-traffic{left:var(--traffic-x);top:var(--traffic-y);border-color:#7ae9df70;background:linear-gradient(115deg,#153c47f0,#111c31f5)}
.hero-traffic small{color:#bfe8e8}
.traffic-icon{background:#60e4d426;display:flex;justify-content:center;align-items:flex-end;gap:2px;padding-bottom:8px}
.traffic-icon i{width:3px;height:7px;border-radius:2px;background:#9bf3e5}
.traffic-icon i:nth-child(2){height:10px}.traffic-icon i:nth-child(3){height:9px}.traffic-icon i:nth-child(4){height:15px}
.hero-caption{position:absolute;inset:auto 0 0;display:flex;justify-content:flex-end;align-items:center;gap:12px;color:#bdcbed;font-size:11px}
.hero-motion{border:1px solid #a0b6ef54;color:#def0ff;border-radius:20px;background:#101935;padding:4px 9px;font-size:11px}
.hero-motion[hidden]{display:none}
@media(max-width:850px){
  .hero .hero-layout{grid-template-columns:1fr;gap:0}
  .hero .hero-copy{padding:53px 0 0}
  .hero-visual{height:clamp(250px,65vw,385px);max-width:580px;justify-self:center;--ai-x:32%;--ad-x:74%;--traffic-x:69%;margin:3px 0 22px}
  .hero:after{background:linear-gradient(180deg,#090b1bf5,#090b1b70 53%,transparent 78%)}
  .hero-caption{justify-content:center}
}
@media(max-width:390px){
  .hero h1{font-size:clamp(34px,12vw,43px)}
  .hero-node{padding:7px 8px;gap:6px}
  .hero-node-icon{width:25px;height:25px}
}

.hero-visual.is-running .hero-core{animation:chip-glow 3.8s ease-in-out infinite}
.hero-visual.is-running .ad-icon i:last-child{animation:ad-preview 3s ease-in-out infinite}
.hero-visual.is-running .traffic-icon i{transform-origin:center bottom;animation:traffic-bars 1.5s ease-in-out infinite alternate}
.hero-visual.is-running .traffic-icon i:nth-child(2){animation-delay:-.35s}
.hero-visual.is-running .traffic-icon i:nth-child(3){animation-delay:-.7s}
.hero-visual.is-running .traffic-icon i:nth-child(4){animation-delay:-1.05s}
@keyframes chip-glow{50%{box-shadow:inset 0 0 27px #96c7ff88,0 0 52px #5d8affbf}}
@keyframes ad-preview{50%{transform:translate(-2px,2px);border-color:#fff;box-shadow:0 0 7px #aa8edc7d}}
@keyframes traffic-bars{from{transform:scaleY(.55);opacity:.72}to{transform:scaleY(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-visual.is-running *{animation:none!important}}