.hwf{--navy:#1C3B65;--green:#57B36C;background:#fff;color:var(--navy);font-family:Inter,Arial,sans-serif;max-width:1240px;margin:auto;padding:clamp(65px,9vw,125px) 24px}.hwf-intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}.hwf-eyebrow{color:var(--green);font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:800}.hwf-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:9px}.hwf h2{font-size:clamp(38px,5.6vw,76px);line-height:.96;letter-spacing:-.065em;margin:18px 0 0}.hwf h2 em{font-style:normal;color:var(--green)}.hwf-intro>p{font-size:15px;line-height:1.5;color:#6e849c;text-align:right}.hwf-stage{height:390px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f9f6,#fff);border:1px solid #dce9df;border-radius:28px;overflow:hidden}.hwf-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#1c3b650c 1px,transparent 1px),linear-gradient(90deg,#1c3b650c 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,#000,transparent)}.hwf-code-card{width:min(730px,88%);background:#122943;border-radius:17px;position:relative;z-index:2;box-shadow:0 28px 70px #1c3b6530;transform:translateY(20px);opacity:0;transition:1s cubic-bezier(.16,1,.3,1)}.hwf-visible .hwf-code-card{transform:none;opacity:1}.hwf-windowbar{height:42px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid #3a536e}.hwf-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.hwf-dot.red{background:#ff6b68}.hwf-dot.yellow{background:#ffcb55}.hwf-dot.green{background:#57b36c}.hwf-file{font:11px monospace;color:#b0c0d2;margin-left:12px}.hwf-live{margin-left:auto;color:#82d892;font:9px monospace;letter-spacing:.08em}.hwf-live i,.hwf-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px;box-shadow:0 0 0 4px #57b36c24}.hwf-code{padding:24px 28px 20px;min-height:205px;font:13px/2 monospace;color:#d7e5ef;position:relative}.hwf-code-line{opacity:0;transform:translateX(-12px);transition:.5s;transition-delay:var(--delay)}.hwf-visible .hwf-code-line{opacity:1;transform:none}.hwf-code-line>b{color:#637c96;font-weight:400;display:inline-block;width:26px}.purple{color:#d79cff}.blue{color:#7ed6ff}.pink{color:#ff9cc9}.error{color:#ff8c86}.muted{color:#7890a7}.green{color:#83db91}.hwf-highlight{background:#57b36c17;border-left:2px solid var(--green);padding-left:9px;margin-left:-11px}.hwf-cursor{width:7px;height:16px;background:var(--green);position:absolute;bottom:19px;left:28px;animation:blink 1s steps(2) infinite}.hwf-status{display:flex;align-items:center;padding:13px 20px;border-top:1px solid #3a536e;color:#84d895;font:10px monospace;letter-spacing:.1em}.hwf-status strong{margin-left:auto;font-weight:500;color:#dcebe0}.hwf-check{font-size:17px;margin-left:12px}.hwf-orbit{position:absolute;border:1px solid #57b36c45;border-radius:50%;z-index:1}.orbit-one{width:540px;height:540px;animation:spin 16s linear infinite}.orbit-two{width:900px;height:260px;transform:rotate(-20deg);animation:spin-rev 21s linear infinite}.hwf-connector{position:absolute;bottom:22px;display:flex;gap:7px}.hwf-connector span{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}.hwf-connector span:nth-child(2){animation-delay:.3s}.hwf-connector span:nth-child(3){animation-delay:.6s}.hwf-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.hwf-step{border:1px solid #dce5ec;border-radius:18px;padding:23px 20px;min-height:190px;transition:.35s}.hwf-step:hover{transform:translateY(-8px);border-color:var(--green);box-shadow:0 16px 35px #1c3b6515}.hwf-step-no{font:11px monospace;color:var(--green);letter-spacing:.1em}.hwf-icon{width:38px;height:38px;border-radius:12px;background:#e9f7ed;color:var(--green);display:grid;place-items:center;font-size:21px;margin:16px 0 13px}.hwf-step h3{margin:0 0 7px;font-size:16px;letter-spacing:-.03em}.hwf-step p{margin:0;color:#71869c;font-size:12px;line-height:1.5}.hwf-cta{background:var(--navy);color:#fff;border-radius:20px;padding:25px 28px;margin-top:18px;display:flex;align-items:center;justify-content:space-between}.hwf-cta strong{font-size:19px;display:block}.hwf-cta span{font-size:12px;color:#b4c6d6;display:block;margin-top:5px}.hwf-cta a{background:var(--green);color:#fff;border-radius:30px;padding:13px 20px;text-decoration:none;font-size:13px;font-weight:700}.hwf-cta a b{margin-left:8px;font-size:18px}@keyframes blink{50%{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spin-rev{to{transform:rotate(-380deg)}}@keyframes pulse{50%{transform:scale(1.8);opacity:.45}}@media(max-width:760px){.hwf-intro{display:block}.hwf-intro>p{text-align:left;margin-top:18px}.hwf-stage{height:340px}.hwf-code-card{width:94%}.hwf-code{padding:18px 12px;font-size:10px;line-height:1.9;overflow:hidden}.hwf-code-line>b{width:20px}.hwf-steps{grid-template-columns:1fr 1fr}.hwf-cta{display:block}.hwf-cta a{display:inline-block;margin-top:18px}}@media(max-width:430px){.hwf-steps{grid-template-columns:1fr}.hwf-code{font-size:9px}.hwf-file{display:none}}