/* Perimeter circuit artwork keeps the main message open and readable. */
.circuit-hero{display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;width:90%;max-width:1296px;min-height:590px;padding:90px 160px 110px;margin:26px auto 0;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 43%,color-mix(in srgb,var(--purple) 6%,var(--bg)),transparent 65%),var(--bg)}
.circuit-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 5%,transparent),transparent 18% 82%,color-mix(in srgb,var(--purple) 6%,transparent)),repeating-linear-gradient(0deg,transparent 0 5px,color-mix(in srgb,var(--text) 1.5%,transparent) 5px 6px);pointer-events:none}
.circuit-hero .hero-copy{position:relative;z-index:1;text-align:center;padding:0;max-width:850px;margin:0 auto}
.circuit-hero .eyebrow{justify-content:center;font-size:10px;letter-spacing:1.9px}
.circuit-hero h1{font-size:clamp(42px,4.9vw,70px);line-height:1.08;letter-spacing:-3px;margin:25px 0 22px}
.circuit-hero h1>span{background:linear-gradient(100deg,var(--blue),var(--purple));background-clip:text;color:transparent}
.circuit-hero .hero-copy>p{max-width:590px;font-size:14px;line-height:1.85;margin:0 auto}
.circuit-hero .actions{justify-content:center;align-items:center;flex-direction:row;gap:27px;margin-top:29px}
.circuit-frame{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.circuit-edge{position:absolute;display:block;overflow:visible}
.circuit-edge--top,.circuit-edge--bottom{width:100%;height:110px;left:0}
.circuit-edge--top{top:0}.circuit-edge--bottom{bottom:0;transform:rotate(180deg)}
.circuit-edge--left,.circuit-edge--right{height:100%;width:160px;top:0}
.circuit-edge--left{left:0}.circuit-edge--right{right:0;transform:rotate(180deg)}
.circuit-tracks{stroke:var(--blue);stroke-opacity:.18;stroke-width:1;fill:none;stroke-linejoin:bevel}
.circuit-edge--right .circuit-tracks,.circuit-edge--bottom .circuit-tracks{stroke:var(--purple);stroke-opacity:.22}
.circuit-signals{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:bevel}
.circuit-signal{stroke-dasharray:9 91;animation:circuit-flow var(--duration,9s) linear infinite;animation-delay:var(--delay,0s);opacity:.8}
.signal-blue{stroke:var(--blue);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--blue) 70%,transparent))}
.signal-violet{stroke:var(--purple);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--purple) 70%,transparent))}
.circuit-terminal{fill:var(--bg);stroke:var(--blue);stroke-width:1;opacity:.65}
.border-component{position:absolute;width:100px;opacity:.8;color:var(--blue)}
.border-component svg{width:100%;display:block;overflow:visible}
.border-component>span{display:block;font:7px monospace;letter-spacing:1.5px;text-align:center;color:var(--muted);margin-top:-7px}
.component--top-left{top:64px;left:36px;transform:rotate(-90deg);--flicker-delay:-2s}
.component--top-right{top:67px;right:30px;transform:rotate(90deg);color:var(--purple);--flicker-delay:-5s}
.component--bottom-left{bottom:108px;left:36px;transform:rotate(-90deg);color:var(--purple);--flicker-delay:-7s}
.component--bottom-right{bottom:112px;right:30px;transform:rotate(90deg);--flicker-delay:-3s}
.chip-pins{fill:none;stroke:currentColor;stroke-opacity:.45;stroke-width:2}
.chip-shell{fill:var(--surface);stroke:currentColor;stroke-opacity:.5;stroke-width:1}
.chip-die{fill:color-mix(in srgb,currentColor 8%,var(--bg));stroke:currentColor;stroke-width:.8}
.chip-bus{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.7;animation:component-flicker 11s ease-in-out infinite;animation-delay:var(--flicker-delay)}
.component-led{fill:currentColor;filter:drop-shadow(0 0 3px currentColor);animation:component-flicker 8s ease-in-out infinite;animation-delay:var(--flicker-delay)}
.chip-corner{fill:none;stroke:currentColor;stroke-width:1.7;opacity:.85}
.edge-cap{position:absolute;width:7px;height:64px;top:45%;border:1px solid var(--line);background:repeating-linear-gradient(0deg,var(--purple) 0 3px,transparent 3px 8px);opacity:.5;animation:edge-breathe 6s ease-in-out infinite}
.edge-cap--left{left:7px}.edge-cap--right{right:7px;background:repeating-linear-gradient(0deg,var(--blue) 0 3px,transparent 3px 8px);animation-delay:-3s}
.frame-corner{position:absolute;width:20px;height:20px;border-color:var(--blue);border-style:solid;opacity:.8}
.corner--tl{top:9px;left:9px;border-width:1px 0 0 1px}.corner--tr{top:9px;right:9px;border-width:1px 1px 0 0;border-color:var(--purple)}
.corner--bl{bottom:9px;left:9px;border-width:0 0 1px 1px;border-color:var(--purple)}.corner--br{bottom:9px;right:9px;border-width:0 1px 1px 0}
.circuit-footer{position:absolute;bottom:28px;left:40px;right:40px;display:flex;align-items:center;justify-content:flex-end;gap:20px;z-index:2}
.circuit-legend{display:flex;gap:9px;align-items:center;font:7px monospace;letter-spacing:1px;color:var(--muted)}
.circuit-legend>i{width:4px;height:4px;background:var(--blue);box-shadow:0 0 8px var(--blue)}.circuit-legend>span{color:var(--purple)}
#circuit-motion{border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:9px;padding:8px 10px;white-space:nowrap}
#circuit-motion:hover{border-color:var(--purple);color:var(--text)}#circuit-motion span{color:var(--blue);margin:0}
.circuit-hero.is-paused .circuit-signal,.circuit-hero.is-paused .component-led,.circuit-hero.is-paused .chip-bus,.circuit-hero.is-paused .edge-cap{animation-play-state:paused}
@keyframes circuit-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes component-flicker{0%,58%,100%{opacity:.65}64%{opacity:.85}70%{opacity:.4}76%{opacity:.75}82%{opacity:.45}88%{opacity:.9}94%{opacity:.6}}
@keyframes edge-breathe{0%,100%{opacity:.25}50%{opacity:.6}}
@media(min-width:1600px){.circuit-hero{min-height:620px;padding-top:100px;padding-bottom:120px}}
@media(max-width:1100px){.circuit-hero{padding:100px 125px 110px;min-height:570px}.circuit-hero h1{font-size:52px;letter-spacing:-2.4px}.circuit-edge--left,.circuit-edge--right{width:125px}.border-component{width:85px}.component--top-left,.component--bottom-left{left:21px}.component--top-right,.component--bottom-right{right:21px}.circuit-hero .actions{gap:20px;flex-wrap:wrap}.circuit-legend{font-size:6px;letter-spacing:.7px}}
@media(max-width:760px){.circuit-hero{display:flex;padding:110px 45px 120px;min-height:610px;margin-top:18px}.circuit-hero h1{font-size:clamp(38px,7.3vw,54px);letter-spacing:-1.9px}.circuit-hero .eyebrow{font-size:8px;letter-spacing:1.1px}.circuit-hero .hero-copy>p{font-size:13px;line-height:1.8}.circuit-hero .actions{gap:21px;flex-direction:column}.circuit-edge--left,.circuit-edge--right{width:53px;opacity:.55}.circuit-edge--top,.circuit-edge--bottom{height:79px}.border-component{width:73px}.component--top-left{top:11px;left:20px;transform:none}.component--top-right{top:13px;right:19px;transform:none}.component--bottom-left{bottom:42px;left:20px;transform:none}.component--bottom-right{bottom:42px;right:19px;transform:none}.circuit-footer{left:22px;right:22px;bottom:17px}.circuit-legend{font-size:6px}.circuit-legend>span{display:none}.circuit-legend{max-width:120px;line-height:1.6;flex-wrap:wrap;gap:4px}.border-component>span{font-size:5px;letter-spacing:1px}.edge-cap{height:45px;width:5px}}
@media(max-width:420px){.circuit-hero{padding:110px 27px 125px;min-height:660px}.circuit-hero h1{font-size:38px;letter-spacing:-1.8px}.circuit-hero .eyebrow{font-size:7px;letter-spacing:.6px}.circuit-hero .button{font-size:11px;padding:15px;gap:17px}.circuit-hero .text-link{font-size:11px}.circuit-legend{display:none}.circuit-footer{justify-content:center}.circuit-edge--left,.circuit-edge--right{width:30px;opacity:.45}}
@media(prefers-reduced-motion:reduce){.circuit-signal,.component-led,.chip-bus,.edge-cap{animation:none!important}.circuit-signal{stroke-dasharray:none;opacity:.25}.component-led,.chip-bus{opacity:.65}}

/* Compact platform banner; a quieter version frames the configuration flow. */
.circuit-hero--platform,.circuit-hero--configure{margin-top:0;min-height:350px;padding:50px 135px 65px;display:flex;gap:0;grid-template-columns:none}
.circuit-hero--platform .hero-copy,.circuit-hero--configure .hero-copy{width:100%;max-width:920px}
.circuit-hero--platform h1{font-size:46px;letter-spacing:-1.8px;line-height:1.08;margin:17px 0 14px}
.circuit-hero--platform .hero-copy>p{font-size:13px;max-width:650px}
.circuit-hero--platform .hero-copy>.button{margin-top:20px;min-height:42px;padding:12px 17px}
.circuit-hero--platform .eyebrow,.circuit-hero--configure .eyebrow{font-size:8px;letter-spacing:1.3px}
.circuit-hero--platform .circuit-edge--top,.circuit-hero--platform .circuit-edge--bottom,.circuit-hero--configure .circuit-edge--top,.circuit-hero--configure .circuit-edge--bottom{height:66px}
.circuit-hero--platform .circuit-edge--left,.circuit-hero--platform .circuit-edge--right,.circuit-hero--configure .circuit-edge--left,.circuit-hero--configure .circuit-edge--right{width:108px}
.circuit-hero--platform .border-component,.circuit-hero--configure .border-component{width:68px}
.circuit-hero--platform .component--top-left,.circuit-hero--configure .component--top-left{top:35px;left:20px}
.circuit-hero--platform .component--top-right,.circuit-hero--configure .component--top-right{top:38px;right:20px}
.circuit-hero--platform .component--bottom-left,.circuit-hero--configure .component--bottom-left{bottom:42px;left:20px}
.circuit-hero--platform .component--bottom-right,.circuit-hero--configure .component--bottom-right{bottom:44px;right:20px}
.circuit-hero--platform .circuit-footer,.circuit-hero--configure .circuit-footer{bottom:17px;left:25px;right:25px}
.circuit-hero--configure{min-height:320px;padding:45px 135px 65px;background:radial-gradient(ellipse at 72% 100%,color-mix(in srgb,var(--blue) 7%,var(--bg)),transparent 65%),var(--bg)}
.circuit-hero--configure h1{font-size:40px;line-height:1.15;letter-spacing:-1.6px;margin:15px 0 12px}
.circuit-hero--configure h1>span{background:linear-gradient(100deg,var(--purple),var(--blue));background-clip:text;color:transparent;margin-left:5px}
.circuit-hero--configure .hero-copy>p{font-size:12px;max-width:650px;line-height:1.75}
.circuit-hero--configure .order-hero-actions{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:20px}
.circuit-hero--configure .order-hero-actions .button{min-height:40px;padding:12px 16px}
.circuit-hero--configure .system-facts{justify-content:center;gap:30px;margin:23px 0 0;text-align:center}
.circuit-hero--configure .system-facts>div{max-width:230px}
.circuit-hero--configure .system-facts dt{font-size:7px;letter-spacing:1px}
.circuit-hero--configure .system-facts dd{font-size:10px;margin-top:5px}
.circuit-frame--configure .circuit-edge--top{transform:scaleX(-1)}
.circuit-frame--configure .circuit-edge--bottom{transform:scaleY(-1)}
.circuit-frame--configure .signal-blue{stroke:var(--purple)}
.circuit-frame--configure .signal-violet{stroke:var(--blue)}
.circuit-frame--configure .circuit-signal{animation-direction:reverse;opacity:.65}
.circuit-frame--configure .circuit-edge--left,.circuit-frame--configure .circuit-edge--right{opacity:.7}
.circuit-hero--configure+.order-strip{margin-top:24px}
@media(max-width:1100px){.circuit-hero--platform,.circuit-hero--configure{padding-left:110px;padding-right:110px;min-height:330px}.circuit-hero--platform h1{font-size:42px}.circuit-hero--configure h1{font-size:37px}.circuit-hero--configure .system-facts{gap:20px}.circuit-hero--configure .system-facts>div{max-width:170px}}
@media(max-width:760px){.circuit-hero--platform,.circuit-hero--configure{width:90%;margin-top:0;min-height:320px;padding:64px 36px 65px}.circuit-hero--platform h1{font-size:36px;letter-spacing:-1.3px}.circuit-hero--platform .hero-copy>p{font-size:12px}.circuit-hero--platform .eyebrow,.circuit-hero--configure .eyebrow{font-size:7px;letter-spacing:.7px}.circuit-hero--platform .circuit-edge--left,.circuit-hero--platform .circuit-edge--right,.circuit-hero--configure .circuit-edge--left,.circuit-hero--configure .circuit-edge--right{width:30px}.circuit-hero--platform .circuit-edge--top,.circuit-hero--platform .circuit-edge--bottom,.circuit-hero--configure .circuit-edge--top,.circuit-hero--configure .circuit-edge--bottom{height:48px}.circuit-hero--platform .border-component,.circuit-hero--configure .border-component{width:48px;transform:none}.circuit-hero--platform .component--top-left,.circuit-hero--configure .component--top-left{top:1px;left:15px}.circuit-hero--platform .component--top-right,.circuit-hero--configure .component--top-right{top:1px;right:15px}.circuit-hero--platform .component--bottom-left,.circuit-hero--configure .component--bottom-left{bottom:5px;left:15px}.circuit-hero--platform .component--bottom-right,.circuit-hero--configure .component--bottom-right{bottom:5px;right:15px}.circuit-hero--platform .circuit-footer,.circuit-hero--configure .circuit-footer{bottom:12px;justify-content:center}.circuit-hero--configure h1{font-size:31px;letter-spacing:-1px}.circuit-hero--configure .order-hero-actions{gap:16px;flex-wrap:wrap}.circuit-hero--configure .system-facts{gap:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.circuit-hero--configure .system-facts>div{max-width:none}.circuit-hero--configure .system-facts dd{font-size:9px;line-height:1.65}.circuit-hero--configure .system-facts dt{font-size:6px;letter-spacing:.6px}}
@media(max-width:420px){.circuit-hero--platform,.circuit-hero--configure{padding:62px 25px 64px;min-height:310px}.circuit-hero--platform h1{font-size:32px}.circuit-hero--configure h1{font-size:28px}.circuit-hero--configure .system-facts{grid-template-columns:1fr;gap:11px;margin-top:20px}.circuit-hero--configure .system-facts>div{display:flex;gap:12px;justify-content:space-between;align-items:baseline;text-align:left}.circuit-hero--configure .system-facts dd{margin:0;text-align:right}.circuit-hero--configure .order-hero-actions{flex-direction:column;gap:17px}}

.shop-hero.circuit-hero h1>span{background:linear-gradient(105deg,var(--accent) 15%,var(--accent-gold) 100%);background-clip:text;color:transparent}
