.method{padding:65px 0 45px;background:radial-gradient(ellipse at 50% 100%,#03265b66,transparent 65%),#020e20;border-top:1px solid #14314d;scroll-margin-top:75px}.method>.container{max-width:1440px}.method-heading{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:90px;align-items:center;padding-inline:25px;margin-bottom:30px}.method h2{font-size:52px;line-height:1.06;letter-spacing:-1.9px;margin:0 0 18px;font-weight:800}.method-intro{font-size:18px;line-height:1.5;color:#b5cbe5;max-width:750px;margin:0}.method-exploration{border-left:1px solid #16c7ff;padding-left:30px}.method-exploration strong{font-size:16px}.method-exploration strong::after{content:'';display:block;width:42px;height:1px;background:#16c7ff;margin-top:18px}.method-exploration p{font-size:16px;line-height:1.5;color:#b5cbe5;margin-bottom:0}.method-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;list-style:none;margin:0}.method-step{position:relative;min-width:0;padding:24px 21px;border:1px solid #087cbb;border-radius:12px;background:linear-gradient(130deg,#03152a,#03182e);display:flex;flex-direction:column}.method-stage{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1.7px;color:#c2d8f1;margin-bottom:23px}.method-number{font-size:16px;font-weight:700;color:#16c7ff;letter-spacing:0}.method-step h3{font-size:24px;line-height:1.15;letter-spacing:-.7px;margin:0 0 15px}.method-description{font-size:16px;line-height:1.48;color:#b5cbe5;margin:0 0 20px}.method-visual{border:1px solid #075d91;border-radius:10px;padding:9px;background:#021124;min-height:215px;margin-top:auto}.method-visual svg{width:27px;height:27px;color:#16c7ff;flex-shrink:0}.method-chat{display:grid;grid-template-columns:30px 1fr;gap:12px}.method-chat>svg{margin-top:6px}.method-chat ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.method-chat li{font-size:12px;line-height:1.4;padding:9px;border:1px solid #135487;border-radius:6px;background:linear-gradient(110deg,#052448,#0b254c)}.method-field{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border:1px solid #135487;border-radius:6px;padding:10px;margin-top:9px;font-size:12px;color:#a9c7e6}.method-field>span{font-size:20px;color:#16c7ff}.method-chat small{grid-column:1/-1;font-size:10px;color:#9bbad6}.method-map,.method-modules{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:32px 12px}.method-map>div,.method-modules>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #075d91;background:#041c38;border-radius:8px;padding:12px 4px;min-height:80px;font-size:12px;min-width:0;text-align:center;overflow-wrap:anywhere}.method-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:9px 15px;border:1px solid #16c7ff;border-radius:7px;background:#064890;font-size:12px;z-index:2}.method-map::before,.method-modules::before{content:'';position:absolute;inset:30% 24%;border:1px solid #0876ae;pointer-events:none;z-index:0}.method-map>div,.method-modules>div{z-index:1}.method-plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#064890;border:1px solid #16c7ff;color:#d6ffff;font-size:28px;text-align:center;line-height:28px;z-index:2}.method-module-note{font-size:10px;line-height:1.4;color:#a9c7e6;display:block;margin:10px 2px 0}.method-states{list-style:none;display:grid;gap:7px;padding:0;margin:0}.method-states li{display:flex;gap:10px;align-items:center;background:#041c38;border:1px solid #074d7e;border-radius:7px;padding:12px 8px}.method-states li>div{min-width:0;flex:1}.method-states strong{font-size:12px;display:block}.method-states li>div>span{font-size:10px;display:block;color:#b5cbe5;line-height:1.4;margin-top:4px}.method-check{color:#b3ffe8;border-radius:50%;background:#00664f;width:20px;height:20px;display:grid;place-items:center;font-size:12px;flex-shrink:0}.method-connection{position:absolute;left:calc(100% - 58px);top:37px;width:83px;height:2px;background:#194461;z-index:3;pointer-events:none}.method-connection::before{content:'';position:absolute;inset:0;background:#16c7ff;transform:scaleX(0);transform-origin:left}.method-connection>span{position:absolute;right:-15px;top:-14px;width:30px;height:30px;border-radius:50%;background:#032746;border:1px solid #097eaa;color:#9bcbdf;display:grid;place-items:center;font-size:21px}.method-closing{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid #087cbb;margin-top:32px;padding:27px 25px 0}.method-closing p{font-size:28px;font-weight:800;line-height:1.17;letter-spacing:-.8px;margin:0}.method-closing .button{flex-shrink:0}.method-enter{animation:method-enter 500ms var(--ease) both;animation-delay:var(--step-delay,0ms)}.method-enter .method-number{animation:method-number 800ms var(--ease) both;animation-delay:var(--step-delay,0ms)}.method-enter .method-connection::before{animation:method-line 600ms var(--ease) both;animation-delay:calc(var(--step-delay,0ms) + 250ms)}.method-enter .method-visual{animation:method-micro 500ms var(--ease) both;animation-delay:calc(var(--step-delay,0ms) + 180ms)}@keyframes method-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes method-number{0%{color:#b5cbe5}60%{color:#b9ffff;text-shadow:0 0 8px #16c7ff80}100%{color:#16c7ff;text-shadow:none}}@keyframes method-line{to{transform:scaleX(1)}}@keyframes method-micro{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:1300px){.method-heading{gap:40px;grid-template-columns:minmax(0,1fr) 280px}.method h2{font-size:44px}.method-step{padding:22px 15px}.method-steps{gap:18px}.method-stage{font-size:9px;gap:8px;letter-spacing:1px}.method-step h3{font-size:22px}.method-connection{width:77px}.method-states li{gap:6px}.method-check{display:none}.method-closing p{font-size:25px}}
@media(max-width:1100px){.method-heading{grid-template-columns:1fr;padding-inline:0;gap:25px}.method-exploration{max-width:600px;padding-left:20px}.method h2{font-size:46px}.method-steps{grid-template-columns:1fr;gap:28px;padding-left:24px}.method-step{padding:26px;display:grid;grid-template-columns:1fr 1fr;column-gap:25px}.method-stage{grid-column:1;font-size:12px;letter-spacing:1.5px}.method-step h3,.method-description{grid-column:1}.method-visual{grid-column:2;grid-row:1/4;margin:0;align-self:center;width:100%}.method-step h3{font-size:28px}.method-description{font-size:17px}.method-connection{left:-14px;top:40px;width:2px;height:calc(100% + 29px);z-index:0}.method-connection::before{transform:scaleY(0);transform-origin:top;animation-name:method-line-y}.method-connection>span{top:auto;bottom:12px;right:-13px;transform:rotate(90deg)}.method-stage{position:relative}.method-number{margin-left:-53px;padding:6px;background:#041d36;border:1px solid #087cbb;border-radius:50%;width:37px;height:37px;text-align:center;flex-shrink:0;z-index:4}.method-closing{padding-inline:0;gap:25px}.method-closing p{font-size:25px}.method-closing .button{max-width:310px;flex-shrink:1}@keyframes method-line-y{to{transform:scaleY(1)}}}
@media(max-width:600px){.method{padding:44px 0 35px}.method h2{font-size:36px;letter-spacing:-1.1px}.method-intro,.method-exploration p{font-size:17px}.method-heading{margin-bottom:28px}.method-steps{padding-left:15px;gap:26px}.method-step{display:flex;padding:22px 16px}.method-stage{font-size:11px;gap:9px;margin-bottom:19px}.method-number{margin-left:-34px}.method-step h3{font-size:27px;line-height:1.2}.method-description{font-size:17px;margin-bottom:22px}.method-visual{padding:10px;min-height:0}.method-connection{left:-1px;height:calc(100% + 27px)}.method-chat{grid-template-columns:1fr;gap:10px}.method-chat>svg{display:none}.method-chat li,.method-field{font-size:16px}.method-chat small{font-size:12px}.method-map>div,.method-modules>div{font-size:16px;min-height:105px;padding:15px 3px}.method-map,.method-modules{gap:36px 10px}.method-node{font-size:16px;padding:8px 10px}.method-module-note{font-size:16px;line-height:1.4}.method-states li{padding:13px 8px;gap:9px}.method-states strong,.method-states li>div>span{font-size:16px;line-height:1.4}.method-states svg{width:24px}.method-closing{display:block;padding-top:25px}.method-closing p{font-size:27px}.method-closing .button{width:100%;max-width:none;margin-top:23px;font-size:16px}.method-step h3,.method h2,.method-closing p{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.method-enter,.method-enter .method-number,.method-enter .method-connection::before,.method-enter .method-visual{animation:none}.method-connection::before{transform:scale(1)}}
@media(max-width:1100px){.method-enter .method-connection::before{animation-name:method-line-y}}
/* Keep connecting arrows above the next panel during the reveal. */
.method-step:nth-child(1){z-index:4}.method-step:nth-child(2){z-index:3}.method-step:nth-child(3){z-index:2}.method-step:nth-child(4){z-index:1}
