*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090a0c;color:#f2f3f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select{font:inherit}

/* Header & Central Badge */
.site-header{height:76px;max-width:1180px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1c1e22;position:relative}
.logo{font-size:20px;font-weight:750;letter-spacing:-.04em;display:flex;align-items:center;gap:10px}
.logo-mark{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#f4f5f7;color:#090a0c;font-weight:900}

.header-badge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  padding:6px 18px;
  border-radius:100px;
  background:#101317;
  border:1px solid #1d2127;
  color:#828892;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}

.site-header nav{display:flex;gap:8px}
.site-header nav a{padding:9px 14px;border-radius:9px;color:#92969e;font-size:14px}
.site-header nav a:hover,.site-header nav a.active{color:#fff;background:#14161a}

/* Hero Section */
.hero{position:relative;max-width:1180px;margin:auto;min-height:600px;padding:105px 28px 80px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;overflow:hidden}
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#272b32 0,rgba(9,10,12,0) 68%);right:-80px;top:30px;pointer-events:none}
.eyebrow{margin:0 0 18px;color:#858a93;font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:700}
.hero h1,.page-heading h1{font-size:clamp(46px,6vw,76px);line-height:.98;letter-spacing:-.065em;margin:0 0 25px;font-weight:800}
.hero h1 span,.page-heading h1 span{color:#777d87}
.hero-text{max-width:600px;color:#9a9fa7;font-size:17px;line-height:1.7}
.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:0;border-radius:11px;padding:13px 18px;cursor:pointer;font-weight:700;font-size:14px}
.btn-primary{background:#f1f2f4;color:#0b0c0e}
.btn-primary:hover{background:#fff;transform:translateY(-1px)}
.btn-secondary{border:1px solid #2b2e34;color:#e7e8eb;background:transparent}
.btn-secondary:hover{background:#15171b}

/* Live Card */
.hero-card{display:flex;justify-content:center;position:relative;min-height:360px;flex-direction:column;align-items:center}
.mini-card{width:360px;padding:28px;border:1px solid #282b30;background:linear-gradient(145deg,#14161a,#0e0f11);border-radius:20px;box-shadow:0 30px 90px #0008;transform:rotate(2deg);position:relative;z-index:2}
.mini-top{font-size:11px;color:#70757d;text-transform:uppercase;letter-spacing:.1em;display:flex;gap:8px;align-items:center}
.dot{width:7px;height:7px;border-radius:50%}
.green{background:#a8e0b0}
.red{background:#e0a8a8}
.fake-password{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;letter-spacing:.04em;margin:58px 0 20px;word-break:break-all}
.strength{display:flex;gap:5px}
.strength span{height:4px;flex:1;background:#b7d9bd;border-radius:4px}
.mini-card small{display:block;color:#71767e;margin-top:12px;font-size:11px}

/* Features & Footer */
.features{max-width:1180px;margin:auto;padding:70px 28px 100px;border-top:1px solid #1c1e22;display:grid;grid-template-columns:repeat(3,1fr);gap:45px}
.feature-icon{font-size:11px;color:#71767e;margin-bottom:22px}
.features h2{font-size:20px;margin:0 0 10px;letter-spacing:-.03em}
.features p{color:#81868e;font-size:14px;line-height:1.7;margin:0;max-width:330px}
footer{max-width:1180px;margin:auto;padding:28px;border-top:1px solid #1c1e22;color:#62666d;font-size:12px;display:flex;justify-content:space-between}

/* Generator Page */
.tool-page{max-width:1060px;margin:auto;padding:82px 28px 100px}
.page-heading{max-width:760px;margin-bottom:55px}
.page-heading h1{font-size:clamp(44px,6vw,68px)}
.page-heading>p:last-child{color:#858a93;max-width:620px}
.generator-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{border:1px solid #24272c;background:#101215;border-radius:18px;padding:27px}
.panel-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#70757d;font-weight:750;margin-bottom:24px}
.result{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:25px;line-height:1.4;word-break:break-all;min-height:72px;display:flex;align-items:center;color:#f5f6f7}
.result-meta{display:flex;justify-content:space-between;color:#70757d;font-size:11px;margin:20px 0 9px}
.result-meta span:first-child{color:#b8d7bd}
.meter{display:flex;gap:4px;margin-bottom:25px}
.meter i{height:4px;flex:1;border-radius:3px;background:#292c31}
.meter i.on{background:#b8d7bd}
.full{width:100%}
.ghost-button{width:100%;border:0;background:transparent;color:#777c84;padding:14px 0 0;cursor:pointer;font-size:12px}
.ghost-button:hover{color:#fff}
.range-label{display:flex;justify-content:space-between;color:#a5a9b0;font-size:13px}
.range-label strong{color:#fff}
input[type=range]{width:100%;margin:18px 0 30px;accent-color:#eee}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:25px}
.checks label{border:1px solid #292c31;border-radius:10px;padding:12px;font-size:12px;color:#a4a8ae;display:flex;gap:9px;align-items:center;cursor:pointer}
.checks label:has(input:checked){border-color:#4a4e55;color:#eee}
.checks input{accent-color:#eee}
.switch-row{border-top:1px solid #272a2f;padding-top:20px;display:flex;align-items:center;justify-content:space-between;color:#a1a5ac;font-size:12px}
.switch-row small{display:block;color:#60656d;margin-top:3px}
.switch-row>input{display:none}
.switch-row i{width:38px;height:21px;border-radius:20px;background:#2a2d32;position:relative;cursor:pointer}
.switch-row i:after{content:"";width:15px;height:15px;position:absolute;left:3px;top:3px;background:#898e95;border-radius:50%;transition:.2s}
.switch-row input:checked+i{background:#eee}
.switch-row input:checked+i:after{left:20px;background:#111}
.info-card{margin-top:70px;padding:34px;border:1px solid #24272c;border-radius:18px;background:#0d0f11;display:grid;grid-template-columns:1fr 1.3fr;gap:60px}
.info-card h2{font-size:30px;line-height:1.1;letter-spacing:-.04em;margin:0}
.info-copy{color:#858a92;font-size:14px;line-height:1.75}
.info-copy p{margin:0 0 17px}
.info-copy strong{color:#d7d9dd}

/* 404 Error Page Styling */
.error-page{min-height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;padding:40px 20px}
.error-wrapper{max-width:680px;margin:0 auto;width:100%}
.error-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:#1c1313;border:1px solid #3d2222;color:#e59898;font-size:12px;font-family:ui-monospace,monospace;margin-bottom:20px}
.error-code{font-size:clamp(80px,12vw,140px);margin:0;line-height:.9;font-weight:900;letter-spacing:-.06em;color:#fff}
.error-code span{color:#444952;display:inline-block;animation:glitchDigit 3s infinite}
.error-title{font-size:24px;margin:15px 0 10px;font-weight:700;color:#e2e4e8}
.error-desc{color:#858a93;font-size:15px;margin:0 0 35px;line-height:1.6}

.terminal-card{background:#0b0d0f;border:1px solid #22262d;border-radius:14px;text-align:left;overflow:hidden;box-shadow:0 20px 60px #0009;margin-bottom:35px}
.terminal-header{background:#14171c;padding:10px 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #1f232a}
.term-dot{width:10px;height:10px;border-radius:50%;background:#2a2e36}
.term-title{margin-left:10px;font-size:11px;color:#6b7078;font-family:ui-monospace,monospace}
.terminal-body{padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#a3a8b2;line-height:1.8}
.term-line{margin-bottom:6px}
.term-line .prompt{color:#b8d7bd}
.term-line .warning{color:#e5b57d}
.crack-status b{color:#ee6c6c;letter-spacing:.05em}
.result-line{color:#767c87;border-top:1px dashed #20242b;margin-top:12px;padding-top:10px}
.error-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Responsive & Animations */
@media(max-width:880px){.header-badge{display:none}}
@media(max-width:760px){
  .site-header{padding:0 18px}
  .site-header nav a{padding:8px}
  .hero{grid-template-columns:1fr;padding:75px 20px 60px}
  .hero-card{display:none}
  .features,.generator-grid,.info-card{grid-template-columns:1fr}
  .features{padding:55px 20px 70px}
  .tool-page{padding:60px 20px 70px}
  .info-card{gap:30px}
  .checks{grid-template-columns:1fr 1fr}
  footer{padding:25px 20px}
  .hero h1,.page-heading h1{font-size:48px}
}

body{overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:24px 24px;z-index:-1}
.logo-mark{transition:transform .35s,box-shadow .35s}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 25px #fff2}
.btn{transition:transform .25s,background .25s,box-shadow .25s}
.btn-primary:hover{box-shadow:0 10px 35px #fff1}
.btn-secondary:hover{transform:translateY(-2px);border-color:#50545c}
.panel{transition:border-color .3s,transform .3s,box-shadow .3s}
.panel:hover{border-color:#343840;box-shadow:0 18px 55px #0005}
.result.flash{animation:resultFlash .35s}

.live-status{width:360px;margin-top:18px;padding:11px 14px;border:1px solid #202328;border-radius:10px;background:#0d0f11cc;backdrop-filter:blur(10px);font-size:10px;color:#626870;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px}
.live-dot{width:6px;height:6px;border-radius:50%;background:#b8d7bd;animation:livePulse 1.8s infinite}

@keyframes resultFlash{50%{opacity:.25;transform:scale(.985)}}
@keyframes glitchDigit{0%,100%{transform:none;opacity:1}7%,9%{transform:translate(-2px,2px);opacity:.8}8%{transform:translate(2px,-2px)}50%{transform:none}}
@keyframes livePulse{0%{box-shadow:0 0 0 0 #b8d7bd55}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}