:root{--bg:#070B1A;--tx:#A9B3D1;--hd:#fff;--v:#8B7BFF;--c:#38D5FF;--p:#FF6FD8;--b:rgba(255,255,255,.09);
--bs-body-font-family:'Plus Jakarta Sans',system-ui,sans-serif;--bs-body-bg:var(--bg);--bs-body-color:var(--tx)}
body{overflow-x:hidden}
h1,h2,h3,h4,.brand{font-family:'Outfit',sans-serif;color:var(--hd);letter-spacing:-.02em}
a{text-decoration:none}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.45;z-index:-1;pointer-events:none}
.o1{width:520px;height:520px;background:#5B3DF5;top:-120px;left:-140px}
.o2{width:460px;height:460px;background:#0AA5D8;top:60px;right:-160px}
.o3{width:380px;height:380px;background:#C233A8;top:620px;left:35%;opacity:.22}
.grid-bg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--b) 1px,transparent 1px),linear-gradient(90deg,var(--b) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0,#000 20%,transparent 70%);opacity:.5}
.glass{background:rgba(255,255,255,.045);border:1px solid var(--b);border-radius:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav-wrap{position:sticky;top:12px;z-index:50;padding:0 12px}
.nav-pill{max-width:1080px;margin:12px auto 0;padding:.6rem .6rem .6rem 1.2rem;border-radius:999px;display:flex;align-items:center;gap:1rem;background:rgba(10,15,35,.7);border:1px solid var(--b);backdrop-filter:blur(16px)}
.brand{font-weight:800;font-size:1.25rem;color:#fff}
.brand i{background:linear-gradient(135deg,var(--v),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.nav-pill .links{display:flex;gap:1.6rem;margin:0 auto}
.nav-pill .links a{color:var(--tx);font-weight:500;font-size:.95rem}
.nav-pill .links a:hover{color:#fff}
.btn-glow{background:linear-gradient(135deg,#6C55FF,#22C4F5);color:#fff;border:0;border-radius:999px;padding:.7rem 1.5rem;font-weight:700;box-shadow:0 8px 30px -8px rgba(80,110,255,.8)}
.btn-glow:hover{color:#fff;filter:brightness(1.1)}
.btn-line{border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:.7rem 1.5rem;font-weight:600}
.btn-line:hover{background:rgba(255,255,255,.08);color:#fff}
.badge-pill{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--b);background:rgba(255,255,255,.05);font-size:.85rem;color:#D6DCF5}
.badge-pill b{width:8px;height:8px;border-radius:50%;background:#34E3A0;box-shadow:0 0 10px #34E3A0}
.hero{padding:4.5rem 0 3rem}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:800;line-height:1.05}
.gt{background:linear-gradient(90deg,var(--v),var(--c) 60%,#7CF2D2);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:33rem;color:var(--tx)}
.win{border-radius:22px;background:rgba(12,18,42,.85);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -20px rgba(70,90,255,.55)}
.win-bar{padding:.7rem 1rem;border-bottom:1px solid var(--b);display:flex;gap:.45rem;align-items:center;font-size:.82rem;color:#8590B5}
.win-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.win .form-control,.win .form-select{background:rgba(255,255,255,.06);border:1px solid var(--b);color:#fff;border-radius:12px}
.win .form-control::placeholder{color:#6F7AA0}
.win .form-control:focus,.win .form-select:focus{border-color:var(--v);box-shadow:0 0 0 .2rem rgba(139,123,255,.25);background:rgba(255,255,255,.08);color:#fff}
.win option{background:#0E1530}
.win label{color:#C9D1EC;font-size:.82rem;font-weight:600}
#out{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:#BFE9FF;background:rgba(0,0,0,.35);border:1px solid var(--b);border-radius:12px;padding:1rem;white-space:pre-wrap;min-height:150px}
.caret::after{content:"▋";color:var(--c);animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.stats{padding:1rem 0 3rem}
.stats .glass{padding:1.4rem 1rem;text-align:center}
.stats b{font-family:'Outfit';font-size:1.9rem;color:#fff;display:block}
section{padding:4rem 0}
.st{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700}
.kicker{display:inline-block;color:var(--c);font-weight:600;font-size:.9rem;margin-bottom:.6rem}
.tool{display:block;height:100%;padding:1.6rem;color:inherit;position:relative;overflow:hidden;transition:border-color .25s,background .25s}
.tool:hover{border-color:rgba(139,123,255,.7);background:rgba(255,255,255,.07);color:inherit}
.ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.4rem;color:#fff;margin-bottom:1.1rem}
.tool h3{font-size:1.2rem;margin-bottom:.4rem}
.tool p{margin:0;font-size:.92rem}
.tag{position:absolute;top:1.2rem;right:1.2rem;font-size:.72rem;font-weight:700;padding:.2rem .65rem;border-radius:99px}
.tag.live{background:rgba(52,227,160,.15);color:#34E3A0}
.tag.soon{background:rgba(255,255,255,.08);color:#B6BFDD}
.big-prev{margin-top:1.2rem;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid var(--b);padding:.9rem 1rem;font-family:ui-monospace,monospace;font-size:.8rem;color:#9DB0E8}
.step{padding:1.8rem;height:100%}
.step .n{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:'Outfit';font-weight:700;color:#fff;background:linear-gradient(135deg,var(--v),var(--c));margin-bottom:1rem}
.guide{display:block;height:100%;overflow:hidden;color:inherit;transition:border-color .25s}
.guide:hover{border-color:rgba(56,213,255,.6);color:inherit}
.guide .th{height:150px;display:grid;place-items:center;font-size:3rem;color:#fff}
.guide .bd{padding:1.3rem}
.guide small{color:#7D88AD}
.guide h3{font-size:1.15rem;margin:.4rem 0}
.cta{padding:3rem 1.5rem;text-align:center;background:linear-gradient(135deg,rgba(108,85,255,.35),rgba(34,196,245,.2));border:1px solid rgba(255,255,255,.18);border-radius:28px}
.cta .form-control{background:rgba(7,11,26,.7);border:1px solid var(--b);color:#fff;border-radius:999px;padding:.85rem 1.3rem}
.cta .form-control::placeholder{color:#7A85AB}
.cta .form-control:focus{box-shadow:0 0 0 .2rem rgba(139,123,255,.3);border-color:var(--v);background:rgba(7,11,26,.85);color:#fff}
.ad{border:1px dashed rgba(255,255,255,.2);border-radius:14px;text-align:center;padding:1.4rem;color:#6F7AA0;font-size:.85rem}
.accordion-item{background:rgba(255,255,255,.04);border:1px solid var(--b)!important;border-radius:16px!important;margin-bottom:.7rem;overflow:hidden}
.accordion-button{background:transparent;color:#fff;font-weight:600;box-shadow:none!important}
.accordion-button:not(.collapsed){background:rgba(139,123,255,.12);color:#fff}
.accordion-button::after{filter:invert(1)}
.accordion-body{color:var(--tx)}
/* Footer */
footer.ft{position:relative;margin-top:3rem;padding:0 0 1.5rem;font-size:.92rem;border-top:1px solid var(--b);background:linear-gradient(180deg,rgba(139,123,255,.07),transparent 40%)}
footer.ft::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:min(520px,70%);height:1px;background:linear-gradient(90deg,transparent,var(--v),var(--c),transparent)}
.ft a{color:var(--tx);transition:color .2s}
.ft a:hover{color:#fff}
.ft-req{margin:-2.2rem 0 3rem;padding:1.3rem 1.6rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;background:rgba(14,20,46,.9)}
.ft-req h3{font-size:1.25rem;margin:0}
.ft-req p{margin:.15rem 0 0;font-size:.9rem}
.ft-h{font-family:'Outfit',sans-serif;font-weight:600;font-size:1.02rem;color:var(--hd);margin-bottom:1rem}
.ft-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ft-list a{display:inline-flex;align-items:center;gap:.55rem}
.ft-list .ci{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:.8rem;color:#fff;flex:0 0 auto}
.ft-list em{font-style:normal;font-size:.75rem;color:#6F7AA0;margin-left:.15rem}
.ft-list a:hover em{color:var(--c)}
.ft-about{max-width:22rem;margin:.9rem 0 1.1rem}
.ft-mail{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:#D6DCF5!important}
.ft-mail:hover{color:var(--c)!important}
.ft-soc{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
.ft-soc a{--h:var(--v);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem;color:#D6DCF5;background:rgba(255,255,255,.05);border:1px solid var(--b);transition:background .2s,border-color .2s,box-shadow .2s,color .2s}
.ft-soc a:hover{color:#fff;background:var(--h);border-color:transparent;box-shadow:0 8px 22px -6px var(--h)}
.ft-bar{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--b);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;font-size:.85rem;color:#6F7AA0}
.ft-trust{display:flex;flex-wrap:wrap;gap:1.1rem}
.ft-trust span i{color:var(--c);margin-right:.35rem}
.ft-top-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--b);color:#fff!important}
.ft-top-btn:hover{background:linear-gradient(135deg,#6C55FF,#22C4F5);border-color:transparent}
:focus-visible{outline:3px solid var(--c);outline-offset:2px}
@media(max-width:767px){.nav-pill .links{display:none}.nav-pill{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.caret::after{animation:none}}

.win textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
#out{min-height:90px;max-height:220px;overflow:auto;margin:0}
.chip{background:rgba(255,255,255,.05);border:1px solid var(--b);color:#C9D1EC;border-radius:999px;padding:.45rem 1rem;font-weight:600;font-size:.9rem}
.chip span{opacity:.6;margin-left:.25rem}
.chip:hover{background:rgba(255,255,255,.1)}
.chip.on{background:linear-gradient(135deg,#6C55FF,#22C4F5);color:#fff;border-color:transparent}
.srch{background:rgba(255,255,255,.06);border:1px solid var(--b);color:#fff;border-radius:999px;padding:.7rem 1.2rem .7rem 2.8rem}
.srch::placeholder{color:#7A85AB}
.srch:focus{background:rgba(255,255,255,.09);color:#fff;border-color:var(--v);box-shadow:0 0 0 .2rem rgba(139,123,255,.25)}
.tool.sm{padding:1.2rem}
.tool.sm .ico{width:44px;height:44px;font-size:1.2rem;margin-bottom:.8rem;border-radius:13px}
.tool.sm h3{font-size:1.02rem}
.tool.sm p{font-size:.85rem}
.tag.pop{background:rgba(139,123,255,.2);color:#B9AEFF}
.c-dev{background:linear-gradient(135deg,#6C55FF,#8B7BFF)}
.c-net{background:linear-gradient(135deg,#0EA5E9,#22D3EE)}
.c-css{background:linear-gradient(135deg,#EC4899,#F472B6)}
.c-gen{background:linear-gradient(135deg,#10B981,#34D399)}
.step .ico{margin-bottom:1rem}
.c-test{background:linear-gradient(135deg,#F59E0B,#F97316)}
.c-color{background:linear-gradient(135deg,#F43F5E,#FBBF24 50%,#22D3EE)}
.c-ai{background:linear-gradient(135deg,#3B82F6,#A855F7)}

/* Mega dropdown */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:100px}
.nav-pill{position:relative}
.dd-btn{background:none;border:0;padding:0;color:var(--tx);font-weight:500;font-size:.95rem;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}
.dd-btn i{font-size:.7rem;transition:transform .2s}
.dd:hover .dd-btn,.dd.open .dd-btn{color:#fff}
.dd:hover .dd-btn i,.dd.open .dd-btn i{transform:rotate(180deg)}
.dd-panel{position:absolute;top:100%;left:50%;width:min(760px,92vw);padding-top:14px;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .2s,visibility .2s}
.dd:hover .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd-box{padding:1rem;border-radius:22px;background:rgba(10,15,35,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -20px rgba(70,90,255,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.dd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.dd-item{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem;border-radius:16px;color:inherit;border:1px solid transparent;transition:background .2s,border-color .2s}
.dd-item:hover{background:rgba(255,255,255,.07);border-color:rgba(139,123,255,.5);color:inherit}
.dd-item .ico{width:42px;height:42px;font-size:1.15rem;margin:0;border-radius:12px;flex:0 0 auto}
.dd-item b{display:block;color:#fff;font-family:'Outfit',sans-serif;font-size:1rem}
.dd-item b span{font-family:'Plus Jakarta Sans';font-weight:500;font-size:.75rem;color:#7D88AD;margin-left:.3rem}
.dd-item small{display:block;color:var(--tx);font-size:.8rem;line-height:1.4;margin-top:.1rem}
.dd-all{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem;padding:.75rem 1rem;border-radius:14px;background:rgba(255,255,255,.05);color:#fff;font-weight:600;font-size:.9rem}
.dd-all:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:767px){.nav-pill .links{display:flex;margin:0 0 0 auto}.nav-pill .links>a{display:none}.dd-grid{grid-template-columns:1fr}.dd-panel{position:fixed;top:80px;left:50%}}

/* ===== Mobile fixes ===== */
/* Bootstrap g-5 gutter (3rem) is wider than container padding (.75rem) -> page overflowed sideways */
@media(max-width:991px){.hero .row{--bs-gutter-x:1.5rem;--bs-gutter-y:2rem}}
main,footer{overflow-x:clip}
body{position:relative}
.bg-fx{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.bg-fx .orb,.bg-fx .grid-bg{z-index:auto}
html,body{max-width:100%}
img,svg,video{max-width:100%;height:auto}
.srch-wrap{min-width:260px}
#out,.tool h3,.tool p{overflow-wrap:anywhere}
@media(hover:none){
  .dd:not(.open) .dd-panel{opacity:0;visibility:hidden}
  .dd:not(.open) .dd-btn i{transform:none}
}
@media(max-width:767px){
  section{padding:2.5rem 0}
  .hero{padding:2.2rem 0 1.5rem}
  .nav-wrap{top:8px;padding:0 8px}
  .nav-pill{padding:.5rem .5rem .5rem 1rem;margin-top:8px}
  .dd-btn{padding:.5rem .25rem}
  .dd{position:static}
  .dd-panel{position:absolute;top:100%;left:0;right:0;width:auto;padding-top:10px;transform:translateY(8px)}
  .dd:hover .dd-panel,.dd.open .dd-panel{transform:none}
  .dd-box{max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .orb{filter:blur(70px);opacity:.3}
  .tool.sm,.step,.stats .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.055)}
  .win .form-control,.win textarea,.srch,.cta .form-control{font-size:16px}
  .ft-req{margin-top:-1.6rem;padding:1.1rem}
  .ft-req .btn{width:100%}
  .ft-bar{justify-content:center;text-align:center}
  .cta{padding:2rem 1rem;border-radius:22px}
  .stats b{font-size:1.5rem}
}
@media(max-width:575px){
  .srch-wrap{min-width:0;width:100%}
  #chips{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:none;margin:0 -12px;padding-inline:12px}
  #chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;white-space:nowrap}
  .tool.sm{display:grid;grid-template-columns:44px 1fr;column-gap:.9rem;align-items:center;padding:.9rem 1rem}
  .tool.sm .ico{grid-row:1/3;margin:0}
  .tool.sm h3{margin:0;padding-right:3.6rem;font-size:1rem}
  .tool.sm p{font-size:.82rem}
  .tool .tag{top:.7rem;right:.7rem}
  .guide .th{height:110px;font-size:2.2rem}
  .btn-glow,.btn-line{padding:.65rem 1.2rem}
}