/*!
 * NeonX 3D Theme for AtoZ SEO Tools v4
 * Design layer - loaded after theme.css / custom.css so it wins.
 */

/* ============================================================ TOKENS */
:root{
    --nx-brand:#6C3CE9;
    --nx-brand-2:#3B82F6;
    --nx-brand-3:#FF5CA8;
    --nx-grad:linear-gradient(135deg,#6C3CE9 0%,#3B82F6 55%,#22D3EE 100%);
    --nx-grad-soft:linear-gradient(135deg,rgba(108,60,233,.14),rgba(59,130,246,.10));

    --nx-bg:#F3F5FB;
    --nx-bg-2:#EAEEF9;
    --nx-surface:#FFFFFF;
    --nx-surface-2:#F8FAFF;
    --nx-ink:#111634;
    --nx-ink-2:#39405F;
    --nx-muted:#6B7492;
    --nx-line:#E4E8F4;

    --nx-shadow-sm:0 2px 6px rgba(19,26,60,.06);
    --nx-shadow:0 10px 30px rgba(19,26,60,.08);
    --nx-shadow-lg:0 26px 60px rgba(19,26,60,.16);
    --nx-glow:0 18px 46px rgba(108,60,233,.30);

    --nx-r:16px;
    --nx-r-lg:24px;
    --nx-r-pill:999px;

    --nx-t:.38s cubic-bezier(.22,.9,.3,1);
    --nx-font:'Plus Jakarta Sans','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

html[data-nx-theme="dark"]{
    --nx-bg:#0B0F1F;
    --nx-bg-2:#0F1428;
    --nx-surface:#151B31;
    --nx-surface-2:#1B2240;
    --nx-ink:#EEF2FF;
    --nx-ink-2:#C4CCEA;
    --nx-muted:#8E98BE;
    --nx-line:#242C4B;

    --nx-shadow-sm:0 2px 6px rgba(0,0,0,.4);
    --nx-shadow:0 12px 34px rgba(0,0,0,.45);
    --nx-shadow-lg:0 28px 64px rgba(0,0,0,.6);
    --nx-glow:0 18px 48px rgba(108,60,233,.45);
}

/* ============================================================ BASE */
html,body{ background:var(--nx-bg) !important; }
body{
    font-family:var(--nx-font);
    color:var(--nx-ink-2);
    font-size:15px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,.nx-h{ font-family:var(--nx-font); color:var(--nx-ink); font-weight:800; letter-spacing:-.02em; }
a{ color:var(--nx-brand); transition:color .2s ease; }
a:hover,a:focus{ color:var(--nx-brand-2); text-decoration:none; }
hr{ border-color:var(--nx-line); }
::selection{ background:rgba(108,60,233,.22); }

.nx-gradient-text{
    background:var(--nx-grad);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* scrollbar */
::-webkit-scrollbar{ width:10px;height:10px; }
::-webkit-scrollbar-track{ background:var(--nx-bg-2); }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#6C3CE9,#3B82F6); border-radius:20px; border:2px solid var(--nx-bg-2); }

/* top scroll progress bar */
#nxProgress{
    position:fixed; top:0; left:0; height:3px; width:0;
    background:var(--nx-grad); z-index:99999;
    box-shadow:0 0 12px rgba(108,60,233,.7);
    transition:width .1s linear;
}

/* ============================================================ NAVBAR */
.navbar.navbar-default.navbar-static-top{
    background:transparent !important;
    border:0 !important;
    margin:0;
    box-shadow:none;
    position:sticky; top:0; z-index:900;
    padding:10px 0;
    transition:var(--nx-t);
    -webkit-backdrop-filter:blur(0);
    backdrop-filter:blur(0);
}
.navbar.nx-stuck{
    background:var(--nx-surface) !important;
    background:color-mix(in srgb,var(--nx-surface) 82%,transparent) !important;
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid var(--nx-line) !important;
    box-shadow:var(--nx-shadow-sm);
    padding:4px 0;
}
.navbar-brand{ height:auto; padding:12px 15px; display:flex; align-items:center; }
.navbar-brand > img,
.themeLogoImg{
    height:auto !important; width:auto !important;
    max-height:46px !important; max-width:220px !important;
    transition:filter .3s ease;
}
/* Dark logos disappear on a dark navbar - flip them to white in dark mode.
   If your logo is already light, add  .themeLogoImg{filter:none !important}
   to the theme's Custom CSS box. */
html[data-nx-theme="dark"] .themeLogoImg{ filter:brightness(0) invert(1); }
.themeLogoText{
    font-size:24px; font-weight:900; letter-spacing:-.03em;
    background:var(--nx-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.navbar-default .navbar-nav > li > a{
    color:var(--nx-ink-2) !important;
    font-weight:600; font-size:14.5px;
    padding:12px 15px; margin:4px 2px;
    border-radius:var(--nx-r-pill);
    transition:var(--nx-t);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a{
    color:var(--nx-brand) !important;
    background:var(--nx-grad-soft) !important;
    transform:translateY(-1px);
}
.navbar-default .navbar-toggle{ border-color:var(--nx-line); border-radius:12px; }
.navbar-default .navbar-toggle .icon-bar{ background:var(--nx-ink); }
.navbar-default .navbar-toggle:hover{ background:var(--nx-surface-2); }
.dropdown-menu{
    border:1px solid var(--nx-line); border-radius:14px;
    box-shadow:var(--nx-shadow); background:var(--nx-surface);
    padding:8px; overflow:hidden;
}
.dropdown-menu > li > a{ color:var(--nx-ink-2); border-radius:9px; padding:8px 14px; font-weight:600; }
.dropdown-menu > li > a:hover{ background:var(--nx-grad-soft); color:var(--nx-brand); }

/* ============================================================ HERO */
.nx-hero{
    position:relative;
    padding:74px 0 96px;
    overflow:hidden;
    background:
        radial-gradient(1100px 460px at 12% -10%,rgba(108,60,233,.18),transparent 62%),
        radial-gradient(900px 420px at 88% 8%,rgba(34,211,238,.16),transparent 60%),
        var(--nx-bg);
}
.nx-hero.nx-hero-sub{ padding:52px 0 60px; }

/* animated mesh blobs */
.nx-blob{
    position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
    pointer-events:none; z-index:0; will-change:transform;
}
.nx-blob.b1{ width:420px;height:420px; background:#6C3CE9; top:-140px; left:-90px; animation:nxDrift 17s ease-in-out infinite; }
.nx-blob.b2{ width:360px;height:360px; background:#22D3EE; top:30px; right:-110px; animation:nxDrift 21s ease-in-out infinite reverse; }
.nx-blob.b3{ width:300px;height:300px; background:#FF5CA8; bottom:-150px; left:42%; animation:nxDrift 25s ease-in-out infinite; }
@keyframes nxDrift{
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    33%{ transform:translate3d(60px,40px,0) scale(1.12); }
    66%{ transform:translate3d(-45px,25px,0) scale(.93); }
}
/* subtle grid overlay */
.nx-hero:after{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(var(--nx-line) 1px,transparent 1px),linear-gradient(90deg,var(--nx-line) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);
    opacity:.55;
}
.nx-hero .container{ position:relative; z-index:2; }

.nx-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 16px; border-radius:var(--nx-r-pill);
    background:var(--nx-surface); border:1px solid var(--nx-line);
    box-shadow:var(--nx-shadow-sm);
    font-size:13px; font-weight:700; color:var(--nx-ink-2);
    margin-bottom:20px;
}
.nx-badge i{ color:var(--nx-brand); }
.nx-badge .nx-dot{
    width:8px;height:8px;border-radius:50%;background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:nxPulse 2s infinite;
}
@keyframes nxPulse{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,.7); }
    70%{ box-shadow:0 0 0 10px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

.nx-hero h1,.nx-hero .seobannerh1{
    font-size:clamp(30px,4.6vw,54px);
    line-height:1.12; font-weight:900; letter-spacing:-.035em;
    color:var(--nx-ink); margin:0 0 16px;
}
.nx-hero p.nx-lead{
    font-size:clamp(15px,1.5vw,18.5px);
    color:var(--nx-muted); max-width:620px; margin:0 0 28px;
}
.nx-hero-center{ text-align:center; }
.nx-hero-center p.nx-lead{ margin-left:auto; margin-right:auto; }

/* ============================================================ BUTTONS */
.nx-btn{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 28px; border-radius:var(--nx-r-pill);
    font-weight:700; font-size:15px; border:0; cursor:pointer;
    transition:var(--nx-t); position:relative; overflow:hidden;
    text-decoration:none;
}
.nx-btn-primary{ background:var(--nx-grad); color:#fff !important; box-shadow:var(--nx-glow); }
.nx-btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 24px 54px rgba(108,60,233,.42); color:#fff !important; }
.nx-btn-primary:after{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
    transform:skewX(-20deg);
}
.nx-btn-primary:hover:after{ animation:nxShine .85s ease; }
@keyframes nxShine{ to{ left:140%; } }

.nx-btn-ghost{
    background:var(--nx-surface); color:var(--nx-ink) !important;
    border:1px solid var(--nx-line); box-shadow:var(--nx-shadow-sm);
}
.nx-btn-ghost:hover{ transform:translateY(-3px); box-shadow:var(--nx-shadow); color:var(--nx-brand) !important; }

/* bootstrap buttons restyled */
.btn{ border-radius:var(--nx-r-pill); font-weight:700; padding:10px 22px; border:0; transition:var(--nx-t); }
.btn:hover{ transform:translateY(-2px); }
.btn-primary,.btn-info{ background:var(--nx-grad) !important; box-shadow:0 10px 24px rgba(108,60,233,.26); color:#fff !important; }
.btn-success{ background:linear-gradient(135deg,#12b981,#0ea5a5) !important; color:#fff !important; }
.btn-warning{ background:linear-gradient(135deg,#f59e0b,#f97316) !important; color:#fff !important; }
.btn-danger{ background:linear-gradient(135deg,#f43f5e,#e11d48) !important; color:#fff !important; }
.btn-default{ background:var(--nx-surface) !important; color:var(--nx-ink) !important; border:1px solid var(--nx-line) !important; box-shadow:var(--nx-shadow-sm); }

/* ============================================================ SEARCH */
.nx-search{ max-width:680px; margin:0 auto 4px; position:relative; z-index:5; clear:both; }
/* Bootstrap floats .input-group and its .form-control. Left as-is the whole
   search box floats out of the hero and everything below it wraps beside it. */
.nx-search .input-group{
    width:100% !important; display:block !important; float:none !important;
    position:relative; box-shadow:none !important;
}
.nx-search .input-group:before,
.nx-search .input-group:after{ content:''; display:table; clear:both; }
.nx-search .input-group > .form-control{
    float:none !important; display:block !important; width:100% !important;
    table-layout:auto;
}
.nx-search .form-control,
.nx-search input[type=text]{
    width:100%; height:64px;
    padding:0 62px 0 58px;
    border-radius:var(--nx-r-pill) !important;
    border:1px solid var(--nx-line) !important;
    background:var(--nx-surface) !important;
    color:var(--nx-ink) !important;
    font-size:16px; font-weight:500;
    box-shadow:var(--nx-shadow) !important;
    transition:var(--nx-t);
}
.nx-search .form-control:focus{
    border-color:var(--nx-brand) !important;
    box-shadow:0 0 0 5px rgba(108,60,233,.14),var(--nx-shadow-lg) !important;
    transform:translateY(-2px);
}
.nx-search .nx-search-ico{
    position:absolute; left:22px; top:50%; transform:translateY(-50%);
    color:var(--nx-brand); font-size:19px; z-index:3; pointer-events:none;
}
.nx-search .nx-kbd{
    position:absolute; right:20px; top:50%; transform:translateY(-50%);
    font-size:11px; font-weight:700; color:var(--nx-muted);
    background:var(--nx-surface-2); border:1px solid var(--nx-line);
    padding:4px 9px; border-radius:8px; z-index:3;
}
.nx-search .input-group-addon{ display:none !important; }

.search-results{
    position:absolute; top:74px; left:0; right:0; z-index:60;
    background:var(--nx-surface); border:1px solid var(--nx-line);
    border-radius:var(--nx-r); box-shadow:var(--nx-shadow-lg);
    padding:8px; max-height:340px; overflow-y:auto;
}
.search-results .match{ display:block; }
.search-results .match a{
    display:block; padding:11px 16px; border-radius:11px;
    color:var(--nx-ink-2); font-weight:600;
}
.search-results .match a:hover{ background:var(--nx-grad-soft); color:var(--nx-brand); transform:translateX(4px); }
.search-results .match strong{ color:var(--nx-brand); }

/* ============================================================ ROBOT */
.nx-robot-wrap{
    display:flex; justify-content:center;
    margin:0 0 -6px; pointer-events:none;
}
.nx-robot{
    width:132px; height:auto;
    overflow:visible;
    filter:drop-shadow(0 16px 26px rgba(76,29,149,.34));
}

/* every animated part rotates around a fixed point in the drawing */
.nx-robot g,
.nx-robot rect,
.nx-robot circle,
.nx-robot ellipse{ transform-box:view-box; }

.rbt-walk{
    transform-origin:70px 150px;
    animation:nxRbtWalkIn 1.15s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes nxRbtWalkIn{
    0%{ transform:translateX(-78px) rotate(-6deg); opacity:0; }
    60%{ opacity:1; }
    80%{ transform:translateX(5px) rotate(2deg); }
    100%{ transform:translateX(0) rotate(0); opacity:1; }
}

.rbt-float{ animation:nxRbtFloat 3.2s ease-in-out .9s infinite; }
@keyframes nxRbtFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}

.rbt-shadow{
    transform-origin:70px 150px;
    fill:rgba(76,29,149,.20);
    animation:nxRbtShadow 3.2s ease-in-out .9s infinite;
}
html[data-nx-theme="dark"] .rbt-shadow{ fill:rgba(0,0,0,.5); }
@keyframes nxRbtShadow{
    0%,100%{ transform:scale(1); opacity:.9; }
    50%{ transform:scale(.84); opacity:.55; }
}

/* legs keep stepping */
.rbt-leg-l{ transform-origin:58px 114px; animation:nxRbtStep 1.25s ease-in-out infinite; }
.rbt-leg-r{ transform-origin:82px 114px; animation:nxRbtStep 1.25s ease-in-out infinite reverse; }
@keyframes nxRbtStep{
    0%,100%{ transform:rotate(9deg); }
    50%{ transform:rotate(-9deg); }
}

/* left arm swings, right arm taps the headline */
.rbt-arm-l{ transform-origin:35.5px 74px; animation:nxRbtSwing 1.25s ease-in-out infinite reverse; }
@keyframes nxRbtSwing{
    0%,100%{ transform:rotate(7deg); }
    50%{ transform:rotate(-7deg); }
}

/* Two beats: first it waves hello, then it taps the headline. */
.rbt-arm-r{ transform-origin:104.5px 74px; animation:nxRbtArm 4.6s ease-in-out infinite; }
@keyframes nxRbtArm{
    0%,34%{ transform:rotate(0deg); }
    40%{ transform:rotate(-104deg); }
    46%{ transform:rotate(-126deg); }
    52%{ transform:rotate(-104deg); }
    58%{ transform:rotate(-126deg); }
    68%{ transform:rotate(0deg); }
    76%{ transform:rotate(15deg); }
    81%{ transform:rotate(6deg); }
    86%{ transform:rotate(15deg); }
    92%,100%{ transform:rotate(0deg); }
}

.rbt-ripple{
    transform-origin:108px 117px;
    opacity:0;
    animation:nxRbtRipple 4.6s ease-out infinite;
}
@keyframes nxRbtRipple{
    0%,74%{ transform:scale(.3); opacity:0; }
    78%{ transform:scale(.5); opacity:.95; }
    94%,100%{ transform:scale(2.7); opacity:0; }
}

/* blinking eyes and lights */
.rbt-eyes{ transform-origin:70px 39px; animation:nxRbtBlink 4.4s steps(1,end) infinite; }
@keyframes nxRbtBlink{
    0%,92%,100%{ transform:scaleY(1); }
    94%,97%{ transform:scaleY(.12); }
}
.rbt-bulb{ transform-origin:70px 5px; animation:nxRbtBulb 1.5s ease-in-out infinite; }
@keyframes nxRbtBulb{
    0%,100%{ opacity:.45; transform:scale(.82); }
    50%{ opacity:1; transform:scale(1.15); }
}
.rbt-chest{ transform-origin:70px 88px; animation:nxRbtBulb 2.1s ease-in-out infinite; }

/* ============================================================ STATS */
.nx-stats{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px; margin-top:40px; clear:both;
    max-width:860px; margin-left:auto; margin-right:auto;
    perspective:900px;
}
.nx-stat{
    position:relative;
    background:var(--nx-surface);
    background:color-mix(in srgb,var(--nx-surface) 88%,transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid var(--nx-line);
    border-radius:var(--nx-r-lg);
    padding:26px 12px 20px; text-align:center;
    box-shadow:var(--nx-shadow);
    transform-style:preserve-3d;
    transition:transform var(--nx-t),box-shadow var(--nx-t),border-color var(--nx-t);
    overflow:hidden;
}
.nx-stat:before{
    content:''; position:absolute; inset:0; z-index:0;
    background:var(--nx-grad-soft); opacity:0;
    transition:opacity var(--nx-t);
}
.nx-stat:hover{
    transform:translateY(-9px) rotateX(9deg) rotateY(-7deg) scale(1.04);
    box-shadow:var(--nx-shadow-lg),0 0 0 1.5px rgba(108,60,233,.32);
    border-color:transparent;
}
.nx-stat:hover:before{ opacity:1; }

.nx-stat-ico{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:center;
    width:56px; height:56px; margin:0 auto 14px;
    border-radius:18px;
    background:var(--nx-grad);
    color:#fff; font-size:23px;
    box-shadow:0 12px 24px rgba(108,60,233,.34),
               inset 0 2px 0 rgba(255,255,255,.45),
               inset 0 -3px 6px rgba(0,0,0,.20);
    transform:translateZ(38px);
    transition:transform var(--nx-t),box-shadow var(--nx-t);
    animation:nxStatFloat 4.4s ease-in-out infinite;
}
.nx-stat:nth-child(2) .nx-stat-ico{ animation-delay:-1.1s; }
.nx-stat:nth-child(3) .nx-stat-ico{ animation-delay:-2.2s; }
.nx-stat:nth-child(4) .nx-stat-ico{ animation-delay:-3.3s; }
@keyframes nxStatFloat{
    0%,100%{ transform:translateZ(38px) translateY(0); }
    50%{ transform:translateZ(38px) translateY(-6px); }
}
.nx-stat:hover .nx-stat-ico{
    transform:translateZ(58px) scale(1.12) rotate(-6deg);
    box-shadow:0 18px 34px rgba(108,60,233,.5),
               inset 0 2px 0 rgba(255,255,255,.5),
               inset 0 -3px 6px rgba(0,0,0,.22);
}

.nx-stat b{
    position:relative; z-index:2;
    display:block;
    font-size:clamp(26px,3.4vw,40px);
    font-weight:900; line-height:1.05;
    color:var(--nx-ink); letter-spacing:-.035em;
    transform:translateZ(22px);
    text-shadow:0 2px 0 rgba(17,22,52,.08);
}
html[data-nx-theme="dark"] .nx-stat b{ text-shadow:0 2px 0 rgba(0,0,0,.5); }

.nx-stat .nx-stat-lbl{
    position:relative; z-index:2;
    display:block; margin-top:6px;
    font-size:14px; font-weight:800;
    color:var(--nx-muted);
    text-transform:uppercase; letter-spacing:.05em;
    transform:translateZ(14px);
}

/* ============================================================ SECTION HEADS */
.main-container{ position:relative; z-index:2; padding-top:44px; }
.nx-cat{ margin-bottom:46px; }
.nx-cat-head{ margin-bottom:26px; }
.category_heading,.nx-cat-title{
    font-size:clamp(21px,2.5vw,30px); font-weight:900;
    color:var(--nx-ink); margin:0 0 8px; letter-spacing:-.03em;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.category_heading span,.nx-cat-title span{ background:var(--nx-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nx-cat-title .nx-count{
    font-size:12px; font-weight:800; color:var(--nx-brand);
    background:var(--nx-grad-soft); border:1px solid var(--nx-line);
    padding:3px 11px; border-radius:var(--nx-r-pill);
    -webkit-text-fill-color:var(--nx-brand);
}
.category_des,.nx-cat-des{ color:var(--nx-muted); font-size:15px; margin:0; max-width:760px; }
.nx-cat-head:after{
    content:''; display:block; width:64px; height:4px; margin-top:14px;
    background:var(--nx-grad); border-radius:4px;
}

/* ============================================================ 3D TOOL TILE */
.nx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:16px; }

.nx-tile{ perspective:900px; }
.nx-tile a{ display:block; text-decoration:none; }
.nx-tile-in{
    position:relative;
    background:var(--nx-surface);
    border:1px solid var(--nx-line);
    border-radius:var(--nx-r-lg);
    padding:24px 14px 18px;
    text-align:center;
    box-shadow:var(--nx-shadow-sm);
    transform-style:preserve-3d;
    transition:transform var(--nx-t),box-shadow var(--nx-t),border-color var(--nx-t);
    will-change:transform;
    overflow:hidden;
    height:100%;
}
/* gradient wash that fades in */
.nx-tile-in:before{
    content:''; position:absolute; inset:0; z-index:0;
    background:var(--nx-grad-soft);
    opacity:0; transition:opacity var(--nx-t);
}
/* shine sweep */
.nx-tile-in:after{
    content:''; position:absolute; top:0; left:-140%;
    width:70%; height:100%; z-index:1; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-22deg);
}
html[data-nx-theme="dark"] .nx-tile-in:after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); }

.nx-tile:hover .nx-tile-in{
    border-color:transparent;
    box-shadow:var(--nx-shadow-lg),0 0 0 1.5px rgba(108,60,233,.35);
}
.nx-tile:hover .nx-tile-in:before{ opacity:1; }
.nx-tile:hover .nx-tile-in:after{ animation:nxShine .9s ease; }

.nx-ico{
    position:relative; z-index:2;
    width:74px; height:74px; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    transform:translateZ(34px);
    transition:transform var(--nx-t),filter var(--nx-t);
    animation:nxFloat 5.5s ease-in-out infinite;
}
.nx-ico img{
    width:100%; height:100%; object-fit:contain;
    content-visibility:auto;
    filter:drop-shadow(0 10px 14px rgba(19,26,60,.22));
    transition:filter var(--nx-t);
}
.nx-tile:nth-child(3n) .nx-ico{ animation-delay:-1.4s; }
.nx-tile:nth-child(3n+1) .nx-ico{ animation-delay:-2.8s; }
@keyframes nxFloat{
    0%,100%{ transform:translateZ(34px) translateY(0); }
    50%{ transform:translateZ(34px) translateY(-7px); }
}
.nx-tile:hover .nx-ico{ transform:translateZ(56px) scale(1.1); }
.nx-tile:hover .nx-ico img{ filter:drop-shadow(0 16px 22px rgba(108,60,233,.4)); }

.nx-tile .nx-name{
    position:relative; z-index:2;
    display:block; font-size:13.5px; font-weight:700; line-height:1.4;
    color:var(--nx-ink); transform:translateZ(18px);
    transition:color var(--nx-t);
}
.nx-tile:hover .nx-name{ color:var(--nx-brand); }

.nx-tile .nx-arrow{
    position:absolute; right:13px; top:13px; z-index:3;
    width:26px; height:26px; border-radius:50%;
    background:var(--nx-grad); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; opacity:0; transform:translateZ(30px) scale(.5);
    transition:var(--nx-t);
}
.nx-tile:hover .nx-arrow{ opacity:1; transform:translateZ(30px) scale(1); }

/* touch devices get a press effect instead of the hover tilt */
@media (hover:none){
    .nx-tile a:active .nx-tile-in{
        transform:scale(.95);
        box-shadow:var(--nx-shadow-lg),0 0 0 1.5px rgba(108,60,233,.35);
    }
    .nx-tile a:active .nx-tile-in:before{ opacity:1; }
    .nx-tile a:active .nx-ico{ transform:translateZ(34px) scale(1.12); }
}

/* legacy .thumbnail grid (search page / other templates) gets the same look */
.thumbnail{
    background:var(--nx-surface) !important;
    border:1px solid var(--nx-line) !important;
    border-radius:var(--nx-r-lg) !important;
    padding:22px 12px !important;
    box-shadow:var(--nx-shadow-sm);
    transition:var(--nx-t);
    text-align:center;
}
.thumbnail:hover{ transform:translateY(-8px); box-shadow:var(--nx-shadow-lg); border-color:transparent !important; }
.thumbnail .seotoolimg{ width:70px;height:70px;object-fit:contain; filter:drop-shadow(0 8px 12px rgba(19,26,60,.2)); }
.thumbnail .caption{ color:var(--nx-ink); font-weight:700; font-size:13.5px; padding:10px 4px 0; }

/* ============================================================ CARDS / PANELS */
.nx-card{
    background:var(--nx-surface);
    border:1px solid var(--nx-line);
    border-radius:var(--nx-r-lg);
    box-shadow:var(--nx-shadow);
    padding:26px;
}
.panel,.well,.uploadBoxSec{
    background:var(--nx-surface) !important;
    border:1px solid var(--nx-line) !important;
    border-radius:var(--nx-r-lg) !important;
    box-shadow:var(--nx-shadow-sm) !important;
    color:var(--nx-ink-2);
}
.panel-heading{ background:var(--nx-surface-2) !important; border-bottom:1px solid var(--nx-line) !important; border-radius:var(--nx-r-lg) var(--nx-r-lg) 0 0 !important; font-weight:800; color:var(--nx-ink); }
.table{ color:var(--nx-ink-2); }
.table > thead > tr > th{ border-bottom:2px solid var(--nx-line); color:var(--nx-ink); font-weight:800; }
.table > tbody > tr > td,.table > tbody > tr > th{ border-top:1px solid var(--nx-line); }
.table-striped > tbody > tr:nth-of-type(odd){ background:var(--nx-surface-2); }

.form-control{
    background:var(--nx-surface); color:var(--nx-ink);
    border:1px solid var(--nx-line); border-radius:12px;
    box-shadow:none; height:auto; padding:11px 15px;
    transition:var(--nx-t);
}
.form-control:focus{ border-color:var(--nx-brand); box-shadow:0 0 0 4px rgba(108,60,233,.13); }
textarea.form-control{ border-radius:14px; }

.alert{ border:0; border-radius:14px; font-weight:600; padding:14px 18px; }
.alert-success{ background:rgba(18,185,129,.12); color:#0d9668; }
.alert-warning{ background:rgba(245,158,11,.13); color:#b45309; }
.alert-danger,.alert-error{ background:rgba(244,63,94,.12); color:#e11d48; }
.alert-info{ background:var(--nx-grad-soft); color:var(--nx-brand); }

.about_tool{ margin-top:36px; font-size:24px; }


/* ============================================================ TOOL PAGES
   custom.css hard-codes white backgrounds on the tool page containers.
   In dark mode that left light text sitting on a white card, so every
   surface a tool page can render is mapped onto the theme tokens here. */

.main-index,
.main-index2,
.widget-box,
.widget-body,
.widget-main,
.seoBox,
.result,
.resultBox,
#resultBox,
#results,
#result,
#outBox,
#mainbox,
#mainBox,
#linksBox,
#resultList{
    background-color:var(--nx-surface) !important;
    border-color:var(--nx-line) !important;
    color:var(--nx-ink-2);
}
.main-index{
    border-radius:var(--nx-r-lg) !important;
    box-shadow:var(--nx-shadow);
    padding:24px 22px 30px !important;
}
.main-index h1,.main-index h2,.main-index h3,
.main-index h4,.main-index h5,.main-index h6,
.widget-title,.about_tool,#title{
    color:var(--nx-ink) !important;
}
.main-index p,.main-index li,.main-index label,
.main-index span,.main-index div,.main-index dd,.main-index dt{
    color:inherit;
}
.main-index a{ color:var(--nx-brand); }

/* tables inside results */
.main-index .table,
.table-bordered,
.table-striped,
.table-hover{
    background-color:transparent !important;
    color:var(--nx-ink-2);
}
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td{
    border-color:var(--nx-line) !important;
    background-color:transparent;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td{
    background-color:var(--nx-surface-2) !important;
}
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td{ background-color:var(--nx-surface-2) !important; }

/* form fields, code blocks and pre output */
.main-index .form-control,
textarea.form-control,
input.form-control,
select.form-control{
    background-color:var(--nx-surface-2) !important;
    color:var(--nx-ink) !important;
    border-color:var(--nx-line) !important;
}
.main-index .form-control::placeholder{ color:var(--nx-muted); opacity:1; }
pre,code,kbd,samp{
    background-color:var(--nx-surface-2) !important;
    color:var(--nx-ink) !important;
    border-color:var(--nx-line) !important;
    border-radius:10px;
}

/* widget headers used by several tools */
.widget-header{
    background:var(--nx-grad) !important;
    border:0 !important;
    color:#fff !important;
    border-radius:var(--nx-r) var(--nx-r) 0 0;
}
.widget-header h4,.widget-header .widget-title{ color:#fff !important; }

/* the light-on-light badges some tools use */
.badge{ background:var(--nx-grad) !important; color:#fff !important; }
.percentimg{ filter:none; }

/* ad placeholders should not glare in dark mode */
html[data-nx-theme="dark"] .xd_top_box img,
html[data-nx-theme="dark"] .sideXd img{ opacity:.34; }

/* ============================================================ RESULT TOOLBAR */
.nx-tools-bar{
    display:flex; flex-wrap:wrap; gap:9px;
    margin:0 0 14px; padding:12px 14px;
    background:var(--nx-surface-2);
    border:1px solid var(--nx-line);
    border-radius:var(--nx-r);
}
.nx-tools-bar .nx-tb-label{
    flex:1 1 auto; align-self:center;
    font-size:12.5px; font-weight:800;
    color:var(--nx-muted); text-transform:uppercase; letter-spacing:.05em;
}
.nx-tb-btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 15px; border:0; cursor:pointer;
    border-radius:var(--nx-r-pill);
    font-size:13px; font-weight:700; font-family:inherit;
    background:var(--nx-surface); color:var(--nx-ink);
    border:1px solid var(--nx-line);
    box-shadow:var(--nx-shadow-sm);
    transition:var(--nx-t);
}
.nx-tb-btn:hover{
    background:var(--nx-grad); color:#fff; border-color:transparent;
    transform:translateY(-2px); box-shadow:var(--nx-glow);
}
.nx-tb-btn.is-done{ background:linear-gradient(135deg,#12b981,#0ea5a5); color:#fff; border-color:transparent; }
@media (max-width:767px){
    .nx-tools-bar{ padding:10px; gap:7px; }
    .nx-tools-bar .nx-tb-label{ flex:1 1 100%; margin-bottom:2px; }
    .nx-tb-btn{ flex:1 1 auto; justify-content:center; padding:9px 10px; font-size:12.5px; }
}

/* ============================================================ SIDEBAR */
#rightCol .widget_tool_box,
.nx-widget{
    background:var(--nx-surface);
    border:1px solid var(--nx-line) !important;
    border-radius:var(--nx-r-lg);
    box-shadow:var(--nx-shadow-sm);
    overflow:hidden;
    margin-bottom:22px;
}
.nx-widget-head{
    padding:16px 20px;
    background:var(--nx-grad);
    color:#fff; font-weight:800; font-size:15.5px;
    display:flex; align-items:center; gap:10px;
}
#rightCol .widget_tool_box ul{ list-style:none; padding:0; margin:0; }
#rightCol .widget_tool_box li.popular-seo-t{ padding:0; }
#rightCol .widget_tool_box li.popular-seo-t h3{
    margin:0; padding:16px 20px !important;
    background:var(--nx-grad); color:#fff; font-size:15.5px; font-weight:800;
}
#rightCol .widget_tool_box li{
    display:flex; align-items:center; gap:10px;
    padding:11px 18px; border-bottom:1px solid var(--nx-line);
    transition:var(--nx-t);
}
#rightCol .widget_tool_box li:last-child{ border-bottom:0; }
#rightCol .widget_tool_box li:hover{ background:var(--nx-grad-soft); padding-left:24px; }
#rightCol .widget_tool_box li .icon_image{
    width:7px; height:7px; border-radius:50%; background:var(--nx-grad);
    flex:0 0 7px; font-size:0 !important;
}
#rightCol .widget_tool_box li .icon_image:before{ content:'' !important; }
#rightCol .widget_tool_box li a{ color:var(--nx-ink-2); font-weight:600; font-size:14px; }
#rightCol .widget_tool_box li:hover a{ color:var(--nx-brand); }
.sideXd{ margin:14px 0; text-align:center; }

/* ============================================================ FOOTER */
footer.footer{
    position:relative;
    margin-top:70px;
    background:linear-gradient(180deg,var(--nx-bg-2),var(--nx-bg));
    border-top:1px solid var(--nx-line);
    color:var(--nx-muted);
    overflow:hidden;
}
footer.footer:before{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--nx-grad);
}
footer.footer .b-widgets{ padding:56px 0 22px; }
footer.footer .footer-title{
    color:var(--nx-ink); font-size:16px; font-weight:800;
    margin-bottom:18px; position:relative; padding-bottom:12px;
}
footer.footer .footer-title:after{
    content:''; position:absolute; left:0; bottom:0; width:36px; height:3px;
    background:var(--nx-grad); border-radius:3px;
}
footer.footer .b-list{ list-style:none; padding:0; margin:0; }
footer.footer .b-list li{ padding:6px 0; }
footer.footer .b-list li a{ color:var(--nx-muted); font-weight:600; font-size:14px; transition:var(--nx-t); display:inline-block; }
footer.footer .b-list li a:hover{ color:var(--nx-brand); transform:translateX(5px); }
.footerCopyright{
    padding:22px 0; border-top:1px solid var(--nx-line);
    color:var(--nx-muted); font-size:13.5px;
}
.nx-social{ display:flex; gap:10px; margin-top:18px; }
.nx-social a{
    width:40px; height:40px; border-radius:12px;
    background:var(--nx-surface); border:1px solid var(--nx-line);
    display:flex; align-items:center; justify-content:center;
    color:var(--nx-ink-2); font-size:16px;
    box-shadow:var(--nx-shadow-sm); transition:var(--nx-t);
}
.nx-social a:hover{ background:var(--nx-grad); color:#fff; transform:translateY(-4px) rotate(-6deg); box-shadow:var(--nx-glow); }

/* ============================================================ FLOATING CONTROLS */
.nx-fab{
    position:fixed; right:18px; z-index:950;
    width:46px; height:46px; border-radius:14px;
    background:var(--nx-surface); border:1px solid var(--nx-line);
    color:var(--nx-ink); display:flex; align-items:center; justify-content:center;
    box-shadow:var(--nx-shadow); cursor:pointer; font-size:17px;
    transition:var(--nx-t);
}
.nx-fab:hover{ background:var(--nx-grad); color:#fff; transform:translateY(-4px) scale(1.06); box-shadow:var(--nx-glow); }
#nxThemeToggle{ top:50%; transform:translateY(-50%); }
#nxThemeToggle:hover{ transform:translateY(-50%) scale(1.08); }
#nxTop{ bottom:22px; opacity:0; pointer-events:none; }
#nxTop.on{ opacity:1; pointer-events:auto; }

/* ============================================================ SCROLL REVEAL
   Content is visible by default. It is only hidden for the animation when
   JavaScript has confirmed it is running (html.nx-js), so a JS failure can
   never leave the page blank. */
.nx-rv{ opacity:1; transform:none; }
html.nx-js .nx-rv{
    opacity:0; transform:translateY(26px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.3,1);
}
html.nx-js .nx-rv.nx-in{ opacity:1; transform:none; }

/* ============================================================ MODALS */
.modal-content{ border:1px solid var(--nx-line); border-radius:var(--nx-r-lg); background:var(--nx-surface); box-shadow:var(--nx-shadow-lg); }
.modal-header{ border-bottom:1px solid var(--nx-line); }
.modal-footer{ border-top:1px solid var(--nx-line); }
.modal-title{ color:var(--nx-ink); font-weight:800; }
.loginme .form-input{
    background:var(--nx-surface-2); border:1px solid var(--nx-line);
    border-radius:12px; padding:11px 14px; color:var(--nx-ink);
}

/* ============================================================ MISC OVERRIDES */
.masthead,.submasthead{ display:none !important; }
.moreToolsBut{ margin:14px 0 34px; }
.xd_top_box{ margin:22px 0; text-align:center; }
.category_box{ padding:0 !important; border:0 !important; background:transparent !important; }

/* ============================================================ RESPONSIVE */
@media (max-width:991px){
    .nx-hero{ padding:44px 0 52px; }
    /* Big blurred blobs are expensive to composite on phones. */
    .nx-blob{ filter:blur(48px); opacity:.42; animation:none; }
    .nx-blob.b1{ width:240px;height:240px; }
    .nx-blob.b2{ width:220px;height:220px; }
    .nx-blob.b3{ display:none; }
    .nx-hero:after{ background-size:40px 40px; opacity:.35; }
    .nx-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
    .nx-stat{ padding:20px 8px 16px; }
    .nx-stat-ico{ width:48px; height:48px; font-size:20px; border-radius:15px; margin-bottom:11px; }
    .nx-robot{ width:112px; }
    .nx-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px; }
    #nxThemeToggle{ top:auto; bottom:80px; transform:none; }
    #nxThemeToggle:hover{ transform:scale(1.06); }
}
@media (max-width:767px){
    .nx-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .nx-stat{ padding:20px 10px 16px; }
    .nx-stat b{ font-size:30px; }
    .nx-stat .nx-stat-lbl{ font-size:12.5px; }
    .nx-stat-ico{ width:46px; height:46px; font-size:19px; }
    .nx-robot{ width:96px; }
    .nx-robot-wrap{ margin-bottom:2px; }
    .navbar-default .navbar-collapse{
        background:var(--nx-surface); border:1px solid var(--nx-line);
        border-radius:var(--nx-r); margin-top:10px; padding:8px;
        box-shadow:var(--nx-shadow);
    }
    .nx-grid{ grid-template-columns:repeat(2,1fr); gap:11px; }
    .nx-ico{ width:60px;height:60px; }
    .nx-tile-in{ padding:18px 10px 14px; border-radius:18px; }
    .nx-tile .nx-name{ font-size:12.5px; }
    .nx-search .form-control{ height:56px; font-size:15px; padding-left:50px; }
    .nx-search .nx-kbd{ display:none; }
    .nx-stat b{ font-size:21px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
    *,*:before,*:after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}