*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:#030712;color:#f1f5f9;overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
ul{list-style:none}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#030712}::-webkit-scrollbar-thumb{background:#06b6d4;border-radius:3px}
::selection{background:rgba(6,182,212,.22)}
:focus-visible{outline:2px solid #06b6d4;outline-offset:3px;border-radius:6px}

:root{
  --bg:#030712;--bg2:#0a0f1e;
  --s:rgba(255,255,255,.04);--s2:rgba(255,255,255,.07);
  --b:rgba(255,255,255,.09);--b2:rgba(255,255,255,.16);
  --t:#f1f5f9;--t2:#94a3b8;--t3:#64748b;
  --cy:#06b6d4;--cy2:#67e8f9;
  --vi:#8b5cf6;--vi2:#a78bfa;
  --pk:#ec4899;--em:#10b981;--am:#f59e0b;
  --r:12px;--rl:18px;--rx:22px;
}

/* cursor */
.cd,.cr{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);display:none}
.cd{width:8px;height:8px;background:var(--cy);border-radius:50%;transition:width .15s,height .15s,background .15s}
.cr{width:34px;height:34px;border:1.5px solid rgba(6,182,212,.5);border-radius:50%;z-index:9998;transition:width .18s,height .18s,border-color .18s}

/* bg elements */
.gbg{position:fixed;inset:0;background-image:linear-gradient(rgba(6,182,212,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0}
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.o1{width:580px;height:580px;background:rgba(6,182,212,.054);top:-170px;left:-110px}
.o2{width:480px;height:480px;background:rgba(139,92,246,.054);bottom:-90px;right:-110px}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;background:rgba(3,7,18,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--b);transition:background .3s}
nav.sc{background:rgba(3,7,18,.96)}
.nb{display:flex;align-items:center;gap:.7rem}
.nl{width:36px;height:36px;background:linear-gradient(135deg,var(--cy),var(--vi));border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;color:#fff;flex-shrink:0;box-shadow:0 0 16px rgba(6,182,212,.35)}
img.nl{object-fit:cover;padding:0;background:#030712}
.nn{font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--t)}
.nls{display:flex;align-items:center;gap:.1rem}
.nls a{color:var(--t2);font-size:.84rem;font-weight:500;padding:.42rem .78rem;border-radius:8px;transition:color .18s,background .18s;white-space:nowrap;display:block}
.nls a:hover,.nls a.active{color:var(--t);background:rgba(255,255,255,.07)}
.nc{background:linear-gradient(135deg,var(--cy),var(--vi))!important;color:#fff!important;font-weight:700!important;padding:.42rem 1.1rem!important;box-shadow:0 0 16px rgba(6,182,212,.3)!important}
.nc:hover{box-shadow:0 0 28px rgba(6,182,212,.5)!important;transform:translateY(-1px)}

/* main */
main{position:relative;z-index:2;padding-top:68px}

/* typography */
.gt{background:linear-gradient(135deg,var(--cy),var(--vi2) 55%,var(--pk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ey{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--cy);display:flex;align-items:center;gap:.5rem;margin-bottom:.95rem}
.ey::before{content:'';width:1.6rem;height:1px;background:var(--cy);flex-shrink:0}
.st{font-size:clamp(1.7rem,3.2vw,2.55rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-bottom:1rem}
.sd{font-size:.975rem;color:var(--t2);line-height:1.7;max-width:570px}

/* btns */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.55rem;border-radius:var(--r);font-weight:600;font-size:.88rem;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;text-decoration:none}
.btn:active{transform:scale(.97)!important}
.bp{background:linear-gradient(135deg,var(--cy),var(--vi));color:#fff;box-shadow:0 0 24px rgba(6,182,212,.28),0 4px 14px rgba(0,0,0,.22)}
.bp:hover{transform:translateY(-2px);box-shadow:0 0 42px rgba(6,182,212,.44),0 8px 22px rgba(0,0,0,.28)}
.bg{background:var(--s);color:var(--t);border:1px solid var(--b2)}
.bg:hover{background:var(--s2);border-color:rgba(255,255,255,.22)}
.bsm{padding:.42rem .88rem;border-radius:8px;font-weight:600;font-size:.77rem;cursor:pointer;border:none;transition:all .18s;display:inline-flex;align-items:center;gap:.35rem}
.bpsm{background:linear-gradient(135deg,var(--cy),var(--vi));color:#fff}
.bpsm:hover{opacity:.9;transform:translateY(-1px)}
.bgsm{background:var(--s2);border:1px solid var(--b2);color:var(--t2)}
.bgsm:hover{color:var(--t);background:rgba(255,255,255,.09)}
.bg2{display:flex;gap:.8rem;flex-wrap:wrap}

/* forms */
.fg{display:flex;flex-direction:column;gap:.45rem}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.fgg{display:grid;gap:1.1rem}
.fl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)}
.fi,.fs,.ft{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--b2);border-radius:10px;padding:.68rem .92rem;color:var(--t);font-size:.865rem;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(6,182,212,.1)}
.fi::placeholder,.ft::placeholder{color:var(--t3)}
.fs option{background:#0a0f1e;color:#f1f5f9}
.ft{resize:vertical;line-height:1.6;min-height:80px}
input[type=range]{width:100%;accent-color:var(--cy);cursor:pointer}
input[type=color]{height:38px;width:100%;border-radius:8px;border:1px solid var(--b2);background:none;cursor:pointer;padding:2px}
input[type=checkbox],input[type=radio]{accent-color:var(--cy);cursor:pointer;width:15px;height:15px;vertical-align:middle}
input[type=file]{background:var(--s);border:1px dashed var(--b2);border-radius:10px;padding:.68rem .92rem;color:var(--t2);font-size:.82rem;cursor:pointer;width:100%;font-family:inherit}
label{display:flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--t2);cursor:pointer}

/* tool page card */
.tc{background:var(--s);border:1px solid var(--b);border-radius:var(--rx);overflow:hidden;margin-bottom:1.4rem}
.th{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 1.5rem;border-bottom:1px solid var(--b);background:rgba(255,255,255,.025);gap:.8rem;flex-wrap:wrap}
.tt{font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:.55rem;color:var(--t)}
.td2{width:8px;height:8px;border-radius:50%;background:var(--cy);box-shadow:0 0 7px var(--cy);flex-shrink:0}
.ta{display:flex;gap:.4rem;flex-wrap:wrap}
.tb{padding:1.5rem}

/* result boxes */
.rb{background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.2);border-radius:10px;padding:.85rem 1rem;font-size:.84rem;color:var(--t2);line-height:1.6}
.rs{background:rgba(16,185,129,.06)!important;border-color:rgba(16,185,129,.28)!important;color:#6ee7b7!important}
.rw{background:rgba(245,158,11,.06)!important;border-color:rgba(245,158,11,.28)!important;color:#fcd34d!important}
.re{background:rgba(236,72,153,.07)!important;border-color:rgba(236,72,153,.28)!important;color:#f9a8d4!important}
.mc{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:.75rem}
.mch{background:rgba(255,255,255,.05);border:1px solid var(--b);border-radius:7px;padding:.28rem .65rem;font-size:.72rem;font-weight:600;color:var(--t2)}
.mch strong{color:var(--cy)}
.bw{display:flex;gap:.4rem;flex-wrap:wrap}

/* sum grid */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-top:.85rem}
.sc2{background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:var(--r);padding:.85rem;text-align:center}
.sc2 strong{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.03em;color:var(--cy);margin-bottom:.18rem}
.sc2 span{font-size:.7rem;color:var(--t3)}

/* pw */
.pw{background:rgba(0,0,0,.28);border:1px solid var(--b2);border-radius:10px;padding:.88rem 1rem;font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--cy);letter-spacing:.1em;word-break:break-all;min-height:48px}

/* split */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
.d4{transition-delay:.24s}.d5{transition-delay:.30s}.d6{transition-delay:.36s}

/* divider */
.dv{height:1px;background:linear-gradient(90deg,transparent,var(--b2),transparent);margin:0 1.5rem}

/* breadcrumb */
.bc{display:flex;align-items:center;gap:.45rem;font-size:.77rem;color:var(--t3);margin-bottom:1.2rem;flex-wrap:wrap}
.bc a{color:var(--cy)}

/* tool hero */
.th2{padding:5rem 2rem 2.5rem;max-width:840px;margin:0 auto}
.tbg{display:inline-flex;align-items:center;gap:.45rem;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.28);border-radius:100px;padding:.3rem .9rem;font-size:.67rem;font-weight:700;color:var(--cy);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.th2 h1{font-size:clamp(1.85rem,3.8vw,2.9rem);font-weight:900;letter-spacing:-.04em;line-height:1.08;margin-bottom:.85rem}
.th2 p{font-size:.94rem;color:var(--t2);line-height:1.7;max-width:620px}

/* container */
.con{max-width:1180px;margin:0 auto;padding:0 1.7rem}

/* footer */
.sf{background:var(--bg2);border-top:1px solid var(--b);padding:2.8rem 2rem 1.8rem;position:relative;z-index:2}
.fg2{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.8rem;padding-bottom:2.25rem;border-bottom:1px solid var(--b)}
.fc h4{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t2);margin-bottom:.82rem}
.fc a{display:block;color:var(--t3);font-size:.82rem;margin-bottom:.48rem;transition:color .18s}
.fc a:hover{color:var(--cy)}
.fbot{max-width:1180px;margin:1.4rem auto 0;display:flex;justify-content:space-between;font-size:.76rem;color:var(--t3);flex-wrap:wrap;gap:.7rem}

/* FAQ */
details{background:var(--s);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;margin-bottom:.6rem}
details[open]{border-color:rgba(6,182,212,.3)}
summary{padding:.95rem 1.2rem;font-weight:600;font-size:.86rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:color .18s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--cy)}
summary::after{content:"+";font-size:1.05rem;color:var(--t3);flex-shrink:0}
details[open] summary::after{content:"−";color:var(--cy)}
details p,details div{padding:0 1.2rem .95rem;font-size:.82rem;color:var(--t2);line-height:1.65}

/* responsive */
@media(max-width:1024px){.fg2{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  .nls{display:none}
  .sp{grid-template-columns:1fr}
  .fr{grid-template-columns:1fr}
  .sg{grid-template-columns:1fr 1fr}
  .fg2{grid-template-columns:1fr}
}
@media(max-width:480px){
  .sg{grid-template-columns:1fr}
  .con{padding:0 1rem}
  .tb{padding:1.1rem}
}