.approach-section{background:radial-gradient(ellipse 60% 50% at 18% 100%,#3a7bff14,transparent 70%),radial-gradient(ellipse 50% 45% at 85% 90%,#ff4fa312,transparent 70%),var(--surface);position:relative;overflow:hidden}.principles-grid{border-top:0;gap:18px;margin-top:8px;position:relative}.principles-grid>div+div .principle{border-left:1px solid #ffffff14}.principle{--a1:#3d8bff;--a2:#19d3e6;background:linear-gradient(170deg,#ffffff0a,#ffffff02 40%,#0000);border:1px solid #ffffff14;border-radius:16px;flex-direction:column;padding:14px 14px 26px;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s;display:flex;box-shadow:inset 0 1px #ffffff12,0 30px 60px -40px #000}.principles-grid>div:nth-child(3) .principle{--a1:#9b6cff;--a2:#ff4fa3}.principles-grid>div:nth-child(4) .principle{--a1:#ffb020;--a2:#22d38c}.principle:hover{border-color:color-mix(in srgb,var(--a1) 55%,transparent);transform:translateY(-4px)}.principle>.principle-number,.principle>h3,.principle>p{padding-inline:18px}.principle-number{color:color-mix(in srgb,var(--a1) 60%,#d9d7d2);align-items:center;gap:9px;margin:24px 0 14px;display:flex}.principle-number svg{color:var(--a1)}.principle>p{max-width:none}.principles-signal{z-index:0;pointer-events:none;background:linear-gradient(90deg,#0000,#3d8bff66,#9b6cff66,#ffb02066,#0000);height:1px;position:absolute;top:118px;left:4%;right:4%;overflow-x:clip}.principles-signal i{width:100%;height:5px;animation:4.5s cubic-bezier(.65,0,.35,1) infinite av-signal;position:absolute;top:-2px;left:0}.principles-signal i:before{content:"";background:linear-gradient(90deg,#0000,#fff);border-radius:5px;width:90px;height:5px;position:absolute;top:0;right:100%;box-shadow:0 0 14px #9fd0ff}.principles-grid>div{z-index:1;position:relative}.approach-visual{isolation:isolate;background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--a1) 75%,#fff) 0,transparent 55%),radial-gradient(circle at 100% 100%,var(--a2) 0,transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--a1) 55%,#0b0f24),#0b0f24 65%,color-mix(in srgb,var(--a2) 45%,#0b0f24));border-radius:11px;height:206px;padding:16px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff30}.approach-visual:before{content:"";z-index:-1;background-image:linear-gradient(#ffffff0e 1px,#0000 1px),linear-gradient(90deg,#ffffff0e 1px,#0000 1px);background-size:18px 18px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(at 50% 40%,#000 25%,#0000 80%);mask-image:radial-gradient(at 50% 40%,#000 25%,#0000 80%)}.av-glow{z-index:-1;background:radial-gradient(closest-side,#ffffff38,#ffffff12 55%,#0000);border-radius:50%;width:80%;height:50%;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%)}.av-panel{color:#22304a;transform-origin:50% 80%;background:linear-gradient(165deg,#fff,#eef2fa);border-radius:10px;flex-direction:column;gap:10px;height:100%;padding:12px 13px;font-size:9px;transition:transform .6s cubic-bezier(.22,1,.36,1);display:flex;transform:perspective(900px)rotateX(7deg)rotateY(-6deg);box-shadow:0 24px 30px -16px #000b,0 4px 10px #0003,inset 0 1px #fff}.principle:hover .av-panel{transform:perspective(900px)rotateX(2deg)rotateY(-2deg)translateY(-3px)}.av-top,.av-foot{justify-content:space-between;align-items:center;gap:8px;display:flex}.av-top>span{letter-spacing:-.01em;align-items:center;gap:6px;font-size:10px;font-weight:700;display:flex}.av-top>span svg{color:var(--a1)}.av-chip{color:#4b6390;font:600 7.5px/1 var(--font-sans,inherit);background:#e8eefb;border-radius:5px;align-items:center;gap:4px;padding:4px 7px;display:inline-flex}.av-chip.warn{color:#c4392a;background:#ffe7e3}.av-chip.ok{color:#147a50;background:#d9f6e8}.av-foot{font:500 7.5px/1.3 var(--font-mono);color:#7d8aa0;margin-top:auto}.av-foot>span{align-items:center;gap:5px;display:flex}.av-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.av-dot.red{background:#ff4d5e;box-shadow:0 0 0 3px #ff4d5e2a}.av-map{flex:1;width:100%;min-height:0;overflow:visible}.av-map-line{fill:none;stroke:#d5deec;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.av-map-flow{fill:none;stroke:var(--a1);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.12 .88;animation:3.2s linear infinite av-flow}.av-node circle:not(.av-ring){fill:#fff;stroke:var(--a1);stroke-width:2.5px}.av-node text{font:600 8.5px/1 var(--font-sans,inherit);fill:#51607a;text-anchor:middle}.av-node.flag circle:not(.av-ring){stroke:#ff4d5e;fill:#ffe9ec}.av-node.flag text{fill:#c4392a}.av-ring{fill:none;stroke:#ff4d5e;stroke-width:1.5px;transform-box:fill-box;transform-origin:50%;animation:1.8s ease-out infinite av-ring}.av-layers{perspective:600px;flex-direction:column;flex:1;justify-content:center;gap:5px;display:flex}.av-layer{color:#fff;border-radius:7px;align-items:center;gap:7px;padding:8px 10px;font-size:9px;font-weight:650;display:flex;transform:rotateX(18deg);box-shadow:0 8px 14px -8px #0008,inset 0 1px #fff5}.av-layer b{font:600 8px/1 var(--font-mono);opacity:.9;margin-left:auto}.av-layer.human{background:linear-gradient(120deg,#ff7aa8,#ff4f8b);width:62%;margin-left:19%}.av-layer.model{background:linear-gradient(120deg,#a47cff,#7b5cf0);width:80%;margin-left:10%}.av-layer.rules{background:linear-gradient(120deg,#4d8dff,#3a6fe0)}.av-mix{background:#e4e9f2;border-radius:4px;height:6px;display:flex;overflow:hidden}.av-mix i{height:100%}.av-mix .rules{background:#3a6fe0}.av-mix .model{background:#7b5cf0}.av-mix .human{background:#ff4f8b}.av-steps{grid-template-columns:repeat(4,1fr);gap:5px;margin:0;padding:0;list-style:none;display:grid}.av-steps li{color:#4c5a72;background:#f4f6fb;border:1px solid #e1e7f1;border-radius:7px;flex-direction:column;align-items:center;gap:5px;padding:9px 3px 8px;font-size:7.5px;font-weight:650;animation:3.6s ease-in-out infinite av-step;display:flex;position:relative}.av-steps li>span{color:#fff;background:linear-gradient(145deg,var(--a1),color-mix(in srgb,var(--a1) 60%,var(--a2)));border-radius:6px;place-items:center;width:22px;height:22px;display:grid}.av-tick{color:#17a466;position:absolute;top:4px;right:4px}.av-result{color:#fff;background:linear-gradient(120deg,#17a466,var(--a2));border-radius:8px;flex-direction:column;gap:3px;margin-top:auto;padding:10px 11px;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 18px -10px #17a466aa}.av-result b{letter-spacing:-.01em;font-size:11px}.av-result span{opacity:.9;font-size:8px}.av-result i{background:linear-gradient(100deg,#0000 30%,#fff5 50%,#0000 70%);animation:3.6s ease-in-out infinite av-shine;position:absolute;inset:0;transform:translate(-100%)}@keyframes av-signal{0%{opacity:0;transform:translate(0)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translate(calc(100% + 90px))}}@keyframes av-flow{to{stroke-dashoffset:-1px}}@keyframes av-ring{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}@keyframes av-step{0%,to{box-shadow:none;border-color:#e1e7f1}15%{border-color:color-mix(in srgb,var(--a1) 60%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--a1) 22%,transparent)}30%{box-shadow:none;border-color:#e1e7f1}}@keyframes av-shine{0%,55%{transform:translate(-100%)}85%,to{transform:translate(100%)}}@media (max-width:1100px){.approach-visual{height:190px;padding:12px}.av-node text{font-size:10px}}@media (max-width:900px){.principles-signal{display:none}.principles-grid{gap:16px}.principles-grid>div+div .principle{border-top:1px solid #ffffff14;border-left:1px solid #ffffff14}.approach-visual{height:210px}}@media (prefers-reduced-motion:reduce){html:not([data-motion=full]) :is(.principles-signal i,.av-map-flow,.av-ring,.av-steps li,.av-result i){animation:none}}.av-mix i{transform-origin:0}
