.section-wipe{height:22vh;min-height:170px;position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(1rem,4vw,4rem);overflow:hidden;background:#080808;color:#4e4a47;font:400 clamp(1.2rem,3vw,3.2rem)/1 Anton;letter-spacing:.08em}.section-wipe:before{content:"";position:absolute;width:26vw;height:26vw;border-radius:50%;background:rgba(255,59,34,.12);filter:blur(55px);left:-30vw;transition:left 1.6s cubic-bezier(.16,.8,.2,1)}.section-wipe.active:before{left:104vw}.section-wipe i{display:block;width:0;height:1px;background:linear-gradient(90deg,var(--red),#3a91ff);box-shadow:0 0 18px var(--red);transition:width 1.1s ease}.section-wipe.active i{width:min(22vw,290px)}.section-wipe span,.section-wipe b{opacity:.2;transform:translateY(20px);transition:.8s ease}.section-wipe.active span,.section-wipe.active b{opacity:1;transform:none}.section-wipe b{color:#eee8e1;font-weight:400}
.metrics article{transition:background .35s,transform .35s}.metrics article:hover{background:#14110f;transform:translateY(-5px)}.metrics article>small{margin-top:.45rem!important}.metric-note{border-left:2px solid var(--red);padding-left:1rem}
.tool-intro{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin:7rem 0 2rem;border-bottom:1px solid #283343;padding-bottom:1.5rem}.tool-intro p{font-size:.7rem;letter-spacing:.18em;color:#3a91ff}.tool-intro h3{font:400 clamp(1.8rem,3.5vw,4rem)/1 Anton;margin:0}.tool-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem}.tool-card{min-height:220px;text-align:left;border:1px solid #263244;background:linear-gradient(145deg,#101620,#090d13);color:#f1eee9;padding:1.3rem;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;transition:transform .35s,border-color .35s,box-shadow .35s,background .35s}.tool-card:hover,.tool-card:focus-visible{transform:translateY(-8px);border-color:#3a91ff;box-shadow:0 24px 55px #0009,0 0 34px #3a91ff1c;background:#111b29;outline:0}.tool-logo{width:58px;height:58px;display:grid;place-items:center;border-radius:12px;font:600 1.35rem "DM Sans";margin-bottom:auto;border:1px solid currentColor;box-shadow:inset 0 0 20px #0004}.tool-card b{font:500 1.1rem "DM Sans";margin:1.4rem 0 .45rem}.tool-card small{color:#768296;letter-spacing:.12em;font-size:.6rem}.pr{color:#9c9cff;background:#16164a}.ae{color:#d29cff;background:#24144a}.ps{color:#45a7ff;background:#08294b}.ai{color:#ff9b38;background:#4b2508}.figma{color:#ff6d5c;background:#251213}.canva{color:#45e5e0;background:#073b43}.capcut{color:#fff;background:#222}.meta{color:#57a7ff;background:#08294b}.ga{color:#ffb43c;background:#442808}.wp{color:#67b8df;background:#123448}
.tool-dialog{width:min(680px,calc(100% - 2rem));background:linear-gradient(145deg,#121a25,#070a0f);color:#f5f2ed;border:1px solid #33435a;padding:clamp(2rem,5vw,4rem);box-shadow:0 50px 140px #000e}.tool-dialog::backdrop{background:#020409e3;backdrop-filter:blur(12px)}.tool-dialog>span{color:#3a91ff;font-size:.7rem;letter-spacing:.18em}.tool-dialog h2{font:400 clamp(3.2rem,7vw,6.5rem)/.9 Anton;margin:1.5rem 0}.tool-dialog>p{color:#a9b3c2;font-size:1.08rem;line-height:1.7;max-width:540px}.tool-dialog #tool-skills{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:2rem}.tool-dialog #tool-skills span{border:1px solid #2c394c;padding:.85rem;color:#dce4ee;font-size:.82rem}.tool-close{position:absolute;right:1rem;top:1rem;width:44px;height:44px;border:1px solid #3a485c;background:transparent;color:white;font-size:1.8rem;cursor:pointer}.tool-close:hover{background:white;color:#111}
@media(max-width:1100px){.tool-wall{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.section-wipe{height:18vh;min-height:140px;gap:.8rem}.tool-wall{grid-template-columns:1fr 1fr}.tool-card{min-height:180px}.tool-intro{display:block}.tool-intro h3{margin-top:1rem}.tool-dialog #tool-skills{grid-template-columns:1fr}}@media(max-width:430px){.tool-wall{grid-template-columns:1fr}.tool-card{min-height:165px}}@media(prefers-reduced-motion:reduce){.section-wipe:before{display:none}.section-wipe i{width:min(22vw,290px)}.section-wipe span,.section-wipe b{opacity:1;transform:none}.tool-card:hover{transform:none}}