:root{
  --bg:#ffffff;
  --bg-soft:#f5f8fc;
  --text:#0f172a;
  --text-light:#5b6475;
  --primary:#1d72ff;
  --primary-dark:#0057e7;
  --border:#dfe7f3;
  --card:#ffffff;
  --shadow:0 20px 50px rgba(18,38,63,.08);
}

body.dark{
  --bg:#08111f;
  --bg-soft:#101b2d;
  --text:#ffffff;
  --text-light:#9fb0ca;
  --primary:#4d93ff;
  --primary-dark:#2c74ea;
  --border:#1d2c45;
  --card:#101b2d;
  --shadow:0 20px 50px rgba(0,0,0,.45);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:.3s;
}

.container{
  width:min(1200px,92%);
  margin:auto;
}

/* NAVBAR */

.navbar{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* =========================================================
   TOOLFLOW LOGO
========================================================= */

.logo{
    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--text);

    font-size:30px;

    font-weight:800;

    line-height:1;

    cursor:pointer;

    transition:transform .2s ease;
}

.logo:hover{
    transform:translateY(-1px);
}


/* LOGO IMAGE */

.logo-image{
    width:42px;
    height:42px;

    object-fit:contain;

    display:block;

    border-radius:10px;
}


/* LOGO TEXT */

.logo-text{
    color:var(--primary);
}

.logo-text span{
    color:var(--text);
}


/* MOBILE */

@media(max-width:600px){

    .logo{
        font-size:25px;
        gap:8px;
    }

    .logo-image{
        width:37px;
        height:37px;
    }

}

.logo > .logo-text{
  color:var(--primary);
}

.logo-text span{
  color:var(--text);
}

.nav-links{
  display:flex;
  gap:34px;
}

.nav-links a{
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  font-size:15px;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.theme-btn{
  width:46px;
  height:46px;
  border-radius:14px;
  border:none;
  background:var(--bg-soft);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.primary-btn{
  height:48px;
  padding:0 26px;
  border:none;
  border-radius:14px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
}

.primary-btn:hover{
  background:var(--primary-dark);
}

.outline-btn{
  height:48px;
  padding:0 26px;
  border-radius:14px;
  border:2px solid var(--primary);
  background:transparent;
  color:var(--primary);
  font-weight:700;
  cursor:pointer;
}

/* HERO */

.hero{
  padding:60px 0 100px;
  overflow:hidden;
}

.hero-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#e8f1ff;
  color:var(--primary);
  padding:12px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  margin-bottom:26px;
}

body.dark .hero-badge{
  background:#132742;
}

.hero-title{
  font-size:68px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-2px;
  margin-bottom:24px;
}

.hero-title span{
  color:var(--primary);
}

.hero-text{
  font-size:18px;
  line-height:1.8;
  color:var(--text-light);
  max-width:580px;
  margin-bottom:34px;
}

.hero-actions{
  display:flex;
  gap:18px;
  margin-bottom:24px;
}

.hero-note{
  color:var(--text-light);
  font-size:14px;
}

/* RIGHT */

.hero-right{
  position:relative;
  height:620px;
}

.hero-circle{
  position:absolute;
  width:520px;
  height:520px;
  background:var(--bg);
  border-radius:50%;
  right:0;
  top:40px;
}

.hero-image{
  position:absolute;
  right:20px;
  bottom:0;
  width:520px;
  z-index:2;
}

.float-card{
  position:absolute;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  z-index:3;
}

.card-1{
  left:20px;
  bottom:80px;
  width:240px;
  padding:22px;
}

.card-2{
  right:0;
  top:180px;
  width:240px;
  padding:20px;
}

.mini-label{
  font-size:12px;
  color:var(--text-light);
  margin-bottom:10px;
  font-weight:700;
}

.price{
  font-size:38px;
  font-weight:900;
}

.green{
  color:#16a34a;
  font-weight:700;
}

.chart{
  width:90px;
  height:90px;
  border-radius:50%;
  border:12px solid #ffcd38;
  border-top-color:#4d93ff;
  border-right-color:#7c4dff;
  transform:rotate(25deg);
  margin:auto;
}

.list{
  margin-top:16px;
}

.list div{
  height:12px;
  background:var(--bg-soft);
  border-radius:20px;
  margin-bottom:10px;
}

.star{
  position:absolute;
  width:20px;
  height:20px;
  background:var(--primary);
  clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}

.star-1{
  left:80px;
  top:160px;
}

.star-2{
  right:80px;
  top:120px;
}

/* MOBILE */

@media(max-width:992px){

  .hero-wrapper{
    grid-template-columns:1fr;
  }

  .hero-right{
    height:540px;
  }

  .hero-title{
    font-size:52px;
  }

  .tools-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:768px){

  .nav-links{
    display:none;
  }

  .hero{
    padding-top:20px;
  }

  .hero-title{
    font-size:42px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-right{
    height:440px;
  }

  .hero-circle{
    width:340px;
    height:340px;
  }

  .hero-image{
    width:350px;
  }

  .card-2{
    width:180px;
  }

  .tools-grid{
    grid-template-columns:1fr;
  }

  .section-title{
    font-size:36px;
  }
}





  #typing-text{
  color:var(--primary);
  display:inline-block;
  white-space:nowrap;
}

#typing-text::after{
  content:"|";
  display:inline-block;
  margin-left:6px;
  color:var(--primary);
  animation:blink .8s infinite;
}

@keyframes blink{
  50%{
    opacity:0;
  }
}




.tool-illustration{
  position:absolute;
  right:0;
  bottom:0;
  width:100%;
  max-width:620px;
  z-index:2;
}

body.dark .tool-illustration rect[fill="#ffffff"]{
  fill:#101b2d;
}

body.dark .tool-illustration rect[stroke="#dfe7f3"]{
  stroke:#1d2c45;
}

body.dark .tool-illustration rect[fill="#eff6ff"]{
  fill:#162338;
}

/* HEADER */

.tools-section{
  scroll-margin-top:20px;
  margin-top:100px;
  margin-bottom:120px;
}

.tools-header{
  text-align:left;
  margin-bottom:42px;
}

.tools-title{
  font-size:56px;
  line-height:1.1;
  margin-bottom:18px;
}

.tools-text{
  max-width:760px;
  color:var(--text-light);
  line-height:1.8;
  font-size:18px;
}

/* FILTER BAR */
/* FILTER BAR */

.tool-filters{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin-bottom:34px;
}

/* MAIN AREA */
/* MAIN AREA */

.filter-main{
  display:flex;
  align-items:center;

  gap:8px;

  flex:1;

  width:100%;
}

/* BUTTON */

.filter-btn{
  flex:1;

  min-width:max-content;

  height:38px;

  padding:0 16px;

  border-radius:999px;

  border:1px solid var(--border);

  background:transparent;

  color:var(--text);

  font-size:14px;

  font-weight:700;

  white-space:nowrap;

  cursor:pointer;

  transition:.2s;
}

.filter-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
}

.filter-btn.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* DROPDOWN */

.filter-dropdown{
  position:relative;
  flex:none;
}

.more-btn{
  display:none;
  align-items:center;
  gap:6px;
}

/* MENU */

.dropdown-menu{
  position:absolute;

  top:46px;
  right:0;

  display:flex;
  flex-direction:column;

  gap:6px;

  padding:10px;

  background:var(--card);

  border:1px solid var(--border);

  border-radius:16px;

  min-width:150px;

  box-shadow:0 10px 30px rgba(0,0,0,.08);

  opacity:0;
  visibility:hidden;

  transform:translateY(8px);

  transition:.2s;

  z-index:100;
}

.filter-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* GRID */

.tools-grid-modern{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:16px;
}

/* CARD */

.modern-tool-card{
  display:flex;
  align-items:flex-start;

  text-decoration:none;
  color:inherit;

  gap:14px;

  padding:18px;

  border-radius:22px;

  background:var(--card);

  border:1px solid var(--border);

  transition:.25s;

  cursor:pointer;

  min-height:120px;
}

.modern-tool-card:hover{
  transform:translateY(-4px);

  border-color:rgba(29,114,255,.2);

  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* ICON */

.modern-tool-icon{
  width:46px;
  height:46px;

  min-width:46px;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* TITLE */

.tool-content h3{
  font-size:17px;
  line-height:1.3;

  margin-bottom:6px;
}

/* DESC */

.tool-content p{
  font-size:13px;
  line-height:1.55;

  color:var(--text-light);
}

/* COLORS */

.pink{
  background:linear-gradient(135deg,#ff256f,#ff0055);
}

.blue{
  background:linear-gradient(135deg,#5b8cff,#2563eb);
}

.purple{
  background:linear-gradient(135deg,#b15cff,#7c3aed);
}

.green{
  background:linear-gradient(135deg,#37d67a,#16a34a);
}

.orange{
  background:linear-gradient(135deg,#ffb347,#ff7b00);
}

.cyan{
  background:linear-gradient(135deg,#26c6da,#0891b2);
}

/* MOBILE */

@media(max-width:1200px){

  .tools-grid-modern{
    grid-template-columns:repeat(3,1fr);
  }

}

@media(max-width:900px){

  .tools-grid-modern{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:640px){

  .tools-grid-modern{
    grid-template-columns:1fr;
  }

  .tools-title{
    font-size:34px;
  }

}






/* RELATED SECTION */

.related-tools-section{
  margin-top:70px;
}

.related-header{
  margin-bottom:30px;
}

.related-title{
  font-size:42px;
  margin-top:14px;
}

/* GRID */

.related-tools-grid{
  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:18px;
}

/* CARD */

.related-tool-card{
  display:flex;

  align-items:flex-start;

  gap:14px;

  padding:18px;

  border-radius:22px;

  background:var(--card);

  border:1px solid var(--border);

  text-decoration:none;

  transition:.2s;
}

.related-tool-card:hover{
  transform:translateY(-4px);

  border-color:rgba(29,114,255,.2);

  box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.related-tool-icon{
  width:46px;
  height:46px;

  min-width:46px;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.related-tool-card h3{
  color:var(--text);

  font-size:18px;

  margin-bottom:6px;
}

.related-tool-card p{
  color:var(--text-light);

  font-size:14px;

  line-height:1.6;
}

@media(max-width:768px){

  .related-tools-grid{
    grid-template-columns:1fr;
  }

  .related-title{
    font-size:34px;
  }

}





.tool-page-section{
  padding:80px 0;
}

/* SIDEBAR FIX */

.popular-tools{
  width:100%;
}

.popular-box{
  position:sticky;

  top:20px;
}


/* RELATED HEADER */

.related-header{
  margin-bottom:26px;
}

/* MATCH TOOL GRID CARDS */

.related-tools-section .modern-tool-card{
  text-decoration:none;

  color:inherit;
}







/* =========================
MODERN WHITE SEO FOOTER
========================= */

.footer-modern{
  position:relative;
  overflow:hidden;

  background:#ffffff;

  border-top:1px solid #e8edf5;

  margin-top:80px;
}

/* TOP GLOW LINE */

.footer-modern::before{
  content:'';

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:1px;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(29,114,255,.35),
    transparent
  );
}

/* CONTAINER */

.footer-container{
  max-width:1400px;

  margin:auto;

  padding:70px 24px 50px;

  display:grid;

  grid-template-columns:
  1.7fr 1fr 1fr 1fr 1fr;

  gap:60px;
}

/* BRAND */

.footer-logo{
  display:flex;

  align-items:center;

  gap:12px;

  text-decoration:none;

  color:var(--text);

  font-size:30px;

  font-weight:800;

  margin-bottom:20px;

  position:relative;

  width:max-content;
}


/* FOOTER LOGO IMAGE */

.footer-logo-image{
  width:42px;
  height:42px;

  min-width:42px;
  min-height:42px;

  object-fit:contain;
  display:block;

  border-radius:10px;
}


.footer-logo-text{
  color:var(--text);
}

.footer-logo-text strong{
  color:var(--primary);
  font-weight:800;
}

/* DESCRIPTION */

.footer-description{
  max-width:420px;

  line-height:1.9;

  color:var(--text-light);

  margin-bottom:30px;

  font-size:15px;
}

/* SOCIAL */

.footer-social{
  display:flex;
  gap:14px;
}

.footer-social a{
  position:relative;

  width:46px;
  height:46px;

  border-radius:16px;

  background:#f5f8fc;

  border:1px solid #e7edf6;

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--text);

  overflow:hidden;

  transition:
  transform .35s ease,
  box-shadow .35s ease,
  color .35s ease,
  background .35s ease;
}

/* HOVER SHINE */

.footer-social a::before{
  content:'';

  position:absolute;

  top:-100%;
  left:-100%;

  width:120%;
  height:120%;

  background:
  linear-gradient(
    135deg,
    transparent,
    rgba(255,255,255,.8),
    transparent
  );

  transform:rotate(25deg);

  transition:.6s ease;
}

.footer-social a:hover::before{
  top:100%;
  left:100%;
}

.footer-social a:hover{
  background:#ffffff;

  color:var(--primary);

  transform:
  translateY(-6px)
  scale(1.08);

  box-shadow:
  0 16px 40px rgba(29,114,255,.16);
}

.footer-social svg{
  width:18px;
  height:18px;
}

/* COLUMNS */

.footer-column h3{
  color:var(--text);

  font-size:17px;

  margin-bottom:24px;

  font-weight:800;
}

.footer-column ul{
  list-style:none;

  padding:0;
  margin:0;
}

.footer-column li{
  margin-bottom:16px;

  overflow:hidden;
}

/* LINK */

.footer-column a,
.footer-bottom-links a{
  position:relative;

  display:inline-flex;

  align-items:center;

  text-decoration:none;

  color:var(--text-light);

  font-size:15px;

  transition:
  color .3s ease,
  transform .3s ease;
}

/* LEFT TO RIGHT ANIMATED UNDERLINE */

.footer-column a,
.footer-bottom-links a{
  position:relative;

  display:inline-block;

  padding-bottom:6px;

  text-decoration:none;

  color:var(--text-light);

  transition:
  color .3s ease,
  transform .3s ease;
}

/* UNDERLINE */

.footer-column a::before,
.footer-bottom-links a::before{
  content:'';

  position:absolute;

  left:0;
  bottom:0;

  width:0%;

  height:2px;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    var(--primary),
    #67a6ff
  );

  transition:
  width .35s cubic-bezier(.4,0,.2,1);
}

/* HOVER */

.footer-column a:hover,
.footer-bottom-links a:hover{
  color:var(--primary);

  transform:translateX(4px);
}

/* LINE ANIMATION */

.footer-column a:hover::before,
.footer-bottom-links a:hover::before{
  width:100%;
}


/* BOTTOM */

.footer-bottom{
  border-top:1px solid #edf2f8;

  padding:24px;

  max-width:1400px;

  margin:auto;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;
}

.footer-bottom p{
  margin:0;

  color:var(--text-light);

  font-size:14px;
}

.footer-bottom-links{
  display:flex;
  gap:18px;
}

/* RESPONSIVE */

@media(max-width:992px){

  .footer-container{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:640px){

  .footer-container{
    grid-template-columns:1fr;

    gap:40px;

    padding:55px 18px 40px;
  }

  .footer-logo{
    font-size:26px;
  }

  .footer-logo-image{
    width:37px;
    height:37px;
    min-width:37px;
    min-height:37px;

    border-radius:9px;
  }

  .footer-bottom{
    flex-direction:column;

    align-items:flex-start;
  }

}








/* =========================
WHY CHOOSE US SECTION
========================= */

.services-section{
  padding:100px 0;
}

/* HEADER */

.services-header{
  margin-bottom:70px;
}

.services-title{
  font-size:58px;

  line-height:1.08;

  font-weight:900;

  letter-spacing:-2px;

  max-width:760px;

  margin:18px 0;
}

.services-text{
  max-width:720px;

  color:var(--text-light);

  font-size:18px;

  line-height:1.9;
}

/* GRID */

.services-grid{
  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:44px 56px;
}

/* ITEM */

.service-item{
  display:flex;

  align-items:flex-start;

  gap:22px;

  position:relative;

  transition:.3s ease;
}

/* ICON */

.service-icon{
  width:64px;
  height:64px;

  min-width:64px;

  border-radius:20px;

  background:var(--bg-soft);

  border:1px solid var(--border);

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--primary);

  transition:
  transform .35s ease,
  background .35s ease,
  color .35s ease,
  box-shadow .35s ease;
}

/* SVG */

.service-icon svg{
  width:28px;
  height:28px;
}

/* CONTENT */

.service-content h3{
  font-size:26px;

  line-height:1.2;

  margin-bottom:12px;

  font-weight:800;
}

.service-content p{
  color:var(--text-light);

  line-height:1.9;

  font-size:15px;
}

/* HOVER EFFECT */

.service-item:hover .service-icon{
  background:var(--primary);

  color:#fff;

  transform:
  translateY(-5px)
  rotate(-5deg)
  scale(1.05);

  box-shadow:
  0 14px 30px rgba(29,114,255,.18);
}

.service-item:hover .service-content h3{
  color:var(--primary);
}

/* SUBTLE LINE */

.service-item::after{
  content:'';

  position:absolute;

  left:86px;
  bottom:-12px;

  width:0;

  height:2px;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    var(--primary),
    transparent
  );

  transition:.35s ease;
}

.service-item:hover::after{
  width:120px;
}

/* RESPONSIVE */

@media(max-width:992px){

  .services-grid{
    grid-template-columns:1fr 1fr;
  }

  .services-title{
    font-size:44px;
  }

}

@media(max-width:640px){

  .services-grid{
    grid-template-columns:1fr;

    gap:34px;
  }

  .services-title{
    font-size:36px;
  }

  .services-text{
    font-size:16px;
  }

  .service-content h3{
    font-size:22px;
  }

}









/* =========================
TOOL CONTENT SECTION
========================= */

.tool-content-layout{
  display:flex;
  align-items:flex-start;
  gap:28px;
  width:100%;
}

/* LEFT SIDEBAR */

.popular-tools{
  width:280px;
  min-width:280px;
  flex-shrink:0;
}

/* RIGHT CONTENT */

.tool-content-section{
  flex:1;
  min-width:0;
  padding:0;
}

/* MAIN */

.tool-main-content{
  width:100%;
}

/* CARD */

.tool-content-box{
  background:var(--card);

  border:1px solid var(--border);

  border-radius:28px;

  padding:34px;

  overflow:hidden;

  transition:
  border-color .25s ease,
  box-shadow .25s ease;
}

.tool-content-box:hover{
  border-color:rgba(29,114,255,.18);

  box-shadow:
  0 16px 45px rgba(0,0,0,.05);
}

/* HEADER */

.tool-page-header{
  display:flex;
  align-items:flex-start;
  gap:18px;

  padding-bottom:24px;
  margin-bottom:24px;

  border-bottom:1px solid var(--border);
}

/* ICON */

.tool-page-icon{
  width:60px;
  height:60px;

  min-width:60px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
  0 10px 24px rgba(0,0,0,.08);
}

/* TITLE */

.tool-page-title{
  font-size:42px;
  line-height:1.1;

  font-weight:900;

  margin-bottom:10px;
}

/* DESCRIPTION */

.tool-page-description{
  color:var(--text-light);

  font-size:16px;
  line-height:1.9;

  max-width:760px;
}

/* CATEGORY */

.tool-page-categories{
  margin-bottom:40px;

  color:var(--text-light);

  font-size:15px;
}

.tool-page-categories a{
  color:var(--primary);

  text-decoration:none;

  font-weight:700;
}

.tool-page-categories a:hover{
  text-decoration:underline;
}

/* CONTENT BLOCK */

.tool-content-block{
  margin-top:42px;
}

.tool-content-block:first-child{
  margin-top:0;
}

/* BLOCK TITLE */

.tool-content-block h2{
  font-size:30px;

  line-height:1.2;

  margin-bottom:24px;

  font-weight:800;
}

/* GUIDE LIST */

.tool-guide-list{
  padding-left:22px;
}

.tool-guide-list li{
  margin-bottom:18px;

  color:var(--text);

  line-height:1.9;

  font-size:16px;
}

/* CREDITS */

.tool-credits{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.credit-item{
  padding:18px 0;

  border-bottom:1px solid var(--border);
}

.credit-item:last-child{
  border-bottom:none;
}

.credit-item a{
  color:var(--primary);

  text-decoration:none;

  font-weight:700;
}

.credit-item a:hover{
  text-decoration:underline;
}

.credit-item span{
  display:block;

  margin-top:6px;

  color:var(--text-light);

  line-height:1.8;
}

/* SHARE */

.tool-share{
  display:flex;
  align-items:center;
  gap:14px;

  margin-top:40px;

  flex-wrap:wrap;
}

.share-btn{
  display:flex;
  align-items:center;
  gap:10px;

  height:46px;

  padding:0 18px;

  border-radius:14px;

  border:1px solid var(--border);

  background:var(--card);

  color:var(--text);

  font-weight:700;

  cursor:pointer;

  transition:.25s ease;
}

.share-btn:hover{
  background:var(--bg-soft);

  border-color:rgba(29,114,255,.25);

  color:var(--primary);

  transform:translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:992px){

  .tool-content-layout{
    flex-direction:column;
  }

  .popular-tools{
    width:100%;
    min-width:100%;
  }

}

@media(max-width:768px){

  .tool-content-box{
    padding:24px;
    border-radius:24px;
  }

  .tool-page-header{
    flex-direction:column;
  }

  .tool-page-title{
    font-size:34px;
  }

}

@media(max-width:480px){

  .tool-page-title{
    font-size:28px;
  }

  .tool-content-block h2{
    font-size:24px;
  }

  .tool-guide-list li{
    font-size:15px;
  }

  .share-btn{
    width:100%;
    justify-content:center;
  }

}

/* DARK MODE */

body.dark .tool-content-box{
  background:#101b2d;
}

body.dark .tool-page-header{
  border-color:#1d2c45;
}

body.dark .credit-item{
  border-color:#1d2c45;
}

body.dark .share-btn{
  background:#0f1729;
}

body.dark .share-btn:hover{
  background:#162338;
}







/* POPULAR SIDEBAR */

.popular-tools{
  position:sticky;
  top:20px;
}

.popular-box{
  padding:24px;
}

.popular-title{
  font-size:22px;
  font-weight:800;

  margin-bottom:22px;
}

/* POPULAR LINKS */

.popular-links{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.popular-links a{
  position:relative;

  display:inline-block;

  width:max-content;

  text-decoration:none;

  color:var(--text);

  font-size:15px;

  font-weight:600;

  padding-bottom:4px;

  transition:
  color .25s ease,
  transform .25s ease;
}

/* UNDERLINE */

.popular-links a::before{
  content:'';

  position:absolute;

  left:0;
  bottom:0;

  width:0%;

  height:2px;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    var(--primary),
    #67a6ff
  );

  transition:
  width .35s cubic-bezier(.4,0,.2,1);
}

/* HOVER */

.popular-links a:hover{
  color:var(--primary);

  transform:translateX(4px);
}

.popular-links a:hover::before{
  width:100%;
}

/* VIEW ALL */

.view-all-tools{
  position:relative;

  display:inline-block;

  margin-top:24px;

  text-decoration:none;

  color:var(--primary);

  font-weight:700;

  padding-bottom:4px;

  transition:.25s ease;
}

.view-all-tools::before{
  content:'';

  position:absolute;

  left:0;
  bottom:0;

  width:0%;

  height:2px;

  border-radius:999px;

  background:var(--primary);

  transition:
  width .35s cubic-bezier(.4,0,.2,1);
}

.view-all-tools:hover{
  transform:translateX(4px);
}

.view-all-tools:hover::before{
  width:100%;
}

/* POPULAR SECTION */

.popular-tools-section{
  padding:70px 0 20px;
}

/* LEFT SIDED */

.popular-tools{
  width:280px;
}

/* RELATED */

.related-tools-section{
  padding:30px 0 80px;
}

/* MOBILE */

@media(max-width:768px){

  .popular-tools{
    width:100%;
  }

}



/* MOBILE */

@media(max-width:992px){

  .popular-tools{
    position:relative;
    top:auto;
  }

}











/* =========================
PROFESSIONAL FAQ
========================= */

/* FAQ WIDTH FIX */

.faq-section{
  width:min(1200px,92%);
  margin:60px auto 0;
  padding:0;
}

/* HEADER */

.faq-header{
  margin-bottom:36px;
}

.faq-title{
  font-size:44px;

  line-height:1.1;

  margin:18px 0 14px;

  font-weight:900;
}

.faq-text{
  color:var(--text-light);

  font-size:17px;

  line-height:1.9;

  max-width:720px;
}

/* WRAPPER */

.faq-wrapper{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* CARD */

.faq-card{
  border:1px solid var(--border);

  border-radius:24px;

  overflow:hidden;

  background:var(--card);

  transition:
  border-color .25s ease,
  box-shadow .25s ease,
  transform .25s ease;
}

.faq-card:hover{
  border-color:rgba(29,114,255,.22);

  box-shadow:
  0 12px 34px rgba(0,0,0,.05);
}

/* QUESTION */

.faq-question{
  width:100%;

  display:flex;

  align-items:center;

  gap:18px;

  padding:24px;

  background:none;

  border:none;

  cursor:pointer;

  color:var(--text);

  text-align:left;
}

/* FAQ ICON */

.faq-icon{
  width:54px;
  height:54px;

  min-width:54px;

  border-radius:18px;

  background:var(--bg-soft);

  border:1px solid var(--border);

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--primary);

  transition:
  background .3s ease,
  color .3s ease,
  transform .3s ease,
  border-color .3s ease,
  box-shadow .3s ease;
}

.faq-icon svg{
  width:24px;
  height:24px;
}

/* ACTIVE */

.faq-card.active .faq-icon{
  background:var(--primary);

  color:#fff;

  border-color:transparent;

  transform:
  rotate(-4deg)
  scale(1.05);

  box-shadow:
  0 10px 26px rgba(29,114,255,.22);
}

/* TITLE */

.faq-question span{
  flex:1;

  font-size:18px;

  font-weight:800;

  line-height:1.5;
}

/* ARROW */

.faq-arrow{
  width:40px;
  height:40px;

  min-width:40px;

  border-radius:12px;

  background:var(--bg-soft);

  display:flex;

  align-items:center;
  justify-content:center;

  transition:.3s ease;
}

.faq-arrow svg{
  width:18px;
  height:18px;

  transition:.3s ease;
}

/* ANSWER */

.faq-answer{
  max-height:0;

  overflow:hidden;

  transition:
  max-height .4s ease,
  padding .3s ease;
}

.faq-answer p{
  padding:
  0 24px 24px 96px;

  color:var(--text-light);

  line-height:1.9;

  font-size:16px;
}

/* ACTIVE */

.faq-card.active .faq-answer{
  max-height:300px;
}

.faq-card.active .faq-arrow svg{
  transform:rotate(180deg);
}

.faq-card.active .faq-icon{
  background:var(--primary);

  color:#fff;

  transform:
  rotate(-5deg)
  scale(1.05);
}

/* MOBILE */

@media(max-width:768px){

  .faq-title{
    font-size:34px;
  }

  .faq-question{
    padding:20px;
  }

  .faq-answer p{
    padding:
    0 20px 20px 20px;
  }

  .faq-question span{
    font-size:16px;
  }

}


















/* =========================================
   HEADER SEARCH BUTTON
========================================= */

.header-search-btn {

    width: 46px;

    height: 46px;

    padding: 0;

    border: none;

    border-radius: 14px;

    background: var(--bg-soft);

    color: var(--text);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;

}


.header-search-btn:hover {

    color: var(--primary);

    background: var(--bg-soft);

    transform: translateY(-1px);

}


.header-search-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}


/* =========================================
   SEARCH OVERLAY
========================================= */

.tool-search-overlay {

    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding:
        90px 20px 30px;

    background:
        rgba(15, 23, 42, .42);

    backdrop-filter:
        blur(4px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}


.tool-search-overlay.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================
   SEARCH MODAL
========================================= */

.tool-search-modal {

    width: 100%;

    max-width: 650px;

    background: var(--card);

    border:
        1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .18);

    overflow: hidden;

    transform:
        translateY(-12px)
        scale(.98);

    transition:
        transform .2s ease;

}


.tool-search-overlay.active
.tool-search-modal {

    transform:
        translateY(0)
        scale(1);

}


/* =========================================
   SEARCH HEADER
========================================= */

.tool-search-header {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        14px 16px;

    border-bottom:
        1px solid var(--border);

}


.tool-search-input-wrap {

    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}


.tool-search-input-wrap svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--text-light);
    display: block;
}


.tool-search-input {

    width: 100%;

    min-width: 0;

    height: 44px;

    padding:
        0 4px;

    border: none;

    outline: none;

    background: transparent;

    color: var(--text);

    font-family: inherit;

    font-size: 16px;

    line-height: 1.5;

}


.tool-search-input::placeholder {

    color: var(--text-light);

    opacity: .75;

}


/* =========================================
   CLOSE
========================================= */

.tool-search-close {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    border: none;

    border-radius: 12px;

    background: transparent;

    color: var(--text-light);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;

}


.tool-search-close:hover {

    color: var(--text);

    background: var(--bg-soft);

}


.tool-search-close svg {
    width: 21px;
    height: 21px;
    display: block;
}


/* =========================================
   SEARCH RESULTS
========================================= */

.tool-search-results {

    max-height: 430px;

    overflow-y: auto;

    padding: 8px;

}


/* =========================================
   RESULT ITEM
========================================= */

.tool-search-result {

    display: flex;

    align-items: center;

    gap: 13px;

    width: 100%;

    box-sizing: border-box;

    padding:
        13px 14px;

    border-radius: 13px;

    text-decoration: none;

    color: inherit;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


.tool-search-result:hover {

    background: var(--bg-soft);

    transform:
        translateX(3px);

}


/* =========================================
   RESULT ICON
========================================= */

.tool-search-result-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(29, 114, 255, .10);

    color: var(--primary);

}


.tool-search-result-icon svg {
    width: 21px;
    height: 21px;
    display: block;
}


/* =========================================
   RESULT CONTENT
========================================= */

.tool-search-result-content {

    min-width: 0;

    flex: 1;

}


.tool-search-result-name {

    margin-bottom: 3px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;

}


.tool-search-result-description {

    color: var(--text-light);

    font-size: 12px;

    line-height: 1.5;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


/* =========================================
   CATEGORY
========================================= */

.tool-search-result-category {

    margin-top: 4px;

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

}


/* =========================================
   EMPTY / INITIAL STATE
========================================= */

.tool-search-empty {

    min-height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 30px 20px;

    text-align: center;

    color: var(--text-light);

}


.tool-search-empty svg {
    width: 34px;
    height: 34px;
    color: var(--primary);
    opacity: .75;
    display: block;
}


.tool-search-empty p {

    margin: 0;

    font-size: 14px;

    line-height: 1.6;

}


.tool-search-no-results {

    min-height: 160px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px 20px;

    text-align: center;

    color: var(--text-light);

    font-size: 14px;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 640px) {

    .tool-search-overlay {

        padding:
            70px 12px 20px;

    }


    .tool-search-modal {

        max-width: none;

        border-radius: 16px;

    }


    .tool-search-results {

        max-height: 60vh;

    }


    .header-search-btn {

        width: 42px;

        height: 42px;

        border-radius: 12px;

    }


    .tool-search-result {

        padding:
            12px;

    }

}













/* =========================================
   START FREE / AUTH MODAL
========================================= */

.dtools-auth-overlay{
  position:fixed;
  inset:0;
  z-index:6000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  background:rgba(15,23,42,.48);

  backdrop-filter:blur(6px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.dtools-auth-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.dtools-auth-modal{
  position:relative;

  width:100%;
  max-width:520px;
  max-height:calc(100vh - 48px);

  overflow-y:auto;

  padding:30px;

  background:var(--card);

  border:1px solid var(--border);

  border-radius:24px;

  box-shadow:0 25px 80px rgba(0,0,0,.20);

  transform:translateY(-12px) scale(.98);

  transition:transform .2s ease;
}

.dtools-auth-overlay.active .dtools-auth-modal{
  transform:translateY(0) scale(1);
}

.dtools-auth-close{
  position:absolute;
  top:16px;
  right:16px;

  width:40px;
  height:40px;

  border:none;
  border-radius:12px;

  background:var(--bg-soft);
  color:var(--text);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
}

.dtools-auth-close:hover{
  background:var(--primary);
  color:#fff;
}

.dtools-auth-header{
  display:flex;
  align-items:flex-start;
  gap:14px;

  padding-right:40px;

  margin-bottom:24px;
}

.dtools-auth-icon{
  width:48px;
  height:48px;
  min-width:48px;

  border-radius:15px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(29,114,255,.10);
  color:var(--primary);
}

.dtools-auth-header h2{
  margin:0 0 6px;

  color:var(--text);

  font-size:24px;
  line-height:1.25;
}

.dtools-auth-header p{
  margin:0;

  color:var(--text-light);

  font-size:13px;
  line-height:1.6;
}

.dtools-auth-label{
  display:block;

  margin:16px 0 8px;

  color:var(--text);

  font-size:14px;
  font-weight:700;
}

.dtools-auth-input{
  width:100%;
  height:46px;

  padding:0 14px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--bg);
  color:var(--text);

  font:inherit;
  font-size:15px;
}

.dtools-auth-input:focus{
  border-color:var(--primary);

  box-shadow:
    0 0 0 3px rgba(29,114,255,.10);
}

.dtools-interest-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:10px;

  margin-top:10px;
}

.dtools-check,
.dtools-consent{
  display:flex;
  align-items:flex-start;

  gap:9px;

  color:var(--text-light);

  font-size:13px;
  line-height:1.5;

  cursor:pointer;
}

.dtools-check{
  padding:11px 12px;

  border:1px solid var(--border);
  border-radius:12px;

  background:var(--bg-soft);
}

.dtools-check:hover{
  border-color:var(--primary);
  color:var(--text);
}

.dtools-check input,
.dtools-consent input{
  margin-top:3px;
  accent-color:var(--primary);
}

.dtools-consent{
  margin-top:13px;
}

.dtools-consent a{
  color:var(--primary);
  text-decoration:none;
}

.dtools-consent a:hover{
  text-decoration:underline;
}

.dtools-auth-status{
  min-height:22px;

  margin-top:16px;

  color:var(--text-light);

  font-size:13px;
  line-height:1.5;
}

.dtools-auth-status.success{
  color:#15803d;
}

.dtools-auth-status.error{
  color:#dc2626;
}

.dtools-auth-submit{
  width:100%;
  margin-top:4px;
}

.dtools-auth-submit:disabled{
  opacity:.65;
  cursor:not-allowed;
}

@media(max-width:640px){

  .dtools-auth-overlay{
    padding:12px;
  }

  .dtools-auth-modal{
    max-height:calc(100vh - 24px);

    padding:22px;

    border-radius:20px;
  }

  .dtools-interest-grid{
    grid-template-columns:1fr;
  }

}




/* =========================================
   DTOOLS ACCOUNT
========================================= */

.dtools-account-box{
  padding:24px;

  border:1px solid var(--border);

  border-radius:18px;

  background:var(--bg-soft);

  text-align:center;

  margin-bottom:18px;
}

.dtools-account-avatar{
  width:64px;
  height:64px;

  margin:0 auto 14px;

  border-radius:20px;

  background:rgba(29,114,255,.10);

  color:var(--primary);

  display:flex;
  align-items:center;
  justify-content:center;
}

.dtools-account-avatar svg {
    width: 32px;
    height: 32px;
    display: block;
}

.dtools-account-box h3{
  margin-bottom:6px;

  color:var(--text);

  font-size:20px;
}

.dtools-account-box p{
  color:var(--text-light);

  font-size:14px;
}

.dtools-logout-button{
  width:100%;
}










/* =========================================
   DTOOLS AUTH - LOGIN / GOOGLE / RECOVERY
========================================= */

.dtools-auth-view{
    width:100%;
}

.dtools-google-wrap{
    margin-bottom:4px;
}

.dtools-google-button{
    width:100%;
    min-height:46px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:1px solid var(--border);
    border-radius:13px;

    background:var(--card);
    color:var(--text);

    font:inherit;
    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}

.dtools-google-button:hover{
    background:var(--bg-soft);
    border-color:rgba(29,114,255,.25);
    transform:translateY(-1px);
}

.dtools-google-button:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.dtools-google-icon{
    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;
    border:1px solid #e5e7eb;

    color:#4285f4;

    font-family:Arial,sans-serif;
    font-size:17px;
    font-weight:700;
}

.dtools-auth-divider{
    display:flex;
    align-items:center;
    gap:10px;

    margin:16px 0;

    color:var(--text-light);
    font-size:12px;
}

.dtools-auth-divider::before,
.dtools-auth-divider::after{
    content:"";

    flex:1;

    height:1px;

    background:var(--border);
}

.dtools-auth-divider span{
    padding:0 4px;
}

.dtools-auth-switch{
    margin:18px 0 0;

    text-align:center;

    color:var(--text-light);

    font-size:13px;
}

.dtools-auth-link{
    padding:0;

    border:none;
    background:none;

    color:var(--primary);

    font:inherit;
    font-weight:800;

    cursor:pointer;
}

.dtools-auth-link:hover{
    text-decoration:underline;
}

.dtools-auth-actions-row{
    display:flex;
    justify-content:flex-end;

    margin-top:10px;
}

.dtools-auth-text-button{
    padding:0;

    border:none;
    background:none;

    color:var(--primary);

    font:inherit;
    font-size:13px;
    font-weight:700;

    cursor:pointer;
}

.dtools-auth-text-button:hover{
    text-decoration:underline;
}

.dtools-auth-secondary-button{
    width:100%;
    min-height:46px;

    margin-top:10px;

    border:1px solid var(--border);
    border-radius:13px;

    background:var(--bg-soft);
    color:var(--text);

    font:inherit;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}

.dtools-auth-secondary-button:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.dtools-auth-mini-heading{
    text-align:center;

    margin-bottom:20px;
}

.dtools-auth-mini-heading h3{
    margin:0 0 7px;

    color:var(--text);

    font-size:21px;
    font-weight:800;
}

.dtools-auth-mini-heading p{
    margin:0;

    color:var(--text-light);

    font-size:13px;
    line-height:1.6;
}