:root {
    --primary: #3256dd;
    --primary-dark: #2747c4;
    --primary-deep: #1f3fb6;
    --primary-soft: #eef2ff;
    --text: #15213b;
    --muted: #64708a;
    --border: #e1e6f0;
    --soft: #f5f7fc;
    --white: #ffffff;
    --shadow: 0 18px 50px rgba(35, 55, 100, 0.09);
    --shadow-blue: 0 22px 55px rgba(50, 86, 221, 0.18);
    --radius: 18px;
    --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }

.site-header {
    position: relative;
    z-index: 100;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--border);
}
.header-inner { min-height: 76px; display:flex; align-items:center; gap:34px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:21px; font-weight:700; letter-spacing:-.5px; }
.brand-mark {
    width:35px; height:35px; display:grid; place-items:center;
    border-radius:10px; color:#fff; background:var(--primary); font-size:17px; font-weight:700;
    box-shadow: 0 7px 18px rgba(50,86,221,.22);
}
.desktop-nav { display:flex; align-items:center; gap:28px; margin-left:auto; }
.desktop-nav a { color:#526078; font-size:14px; font-weight:500; }
.desktop-nav a:hover { color:var(--primary); }
.header-cta, .btn-primary {
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--primary); color:#fff; border-radius:10px; font-weight:600;
    transition:.2s ease;
}
.header-cta { min-height:42px; padding:0 18px; font-size:14px; box-shadow:0 8px 20px rgba(50,86,221,.18); }
.header-cta:hover, .btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); }
.menu-toggle { display:none; border:0; background:transparent; padding:8px; cursor:pointer; }
.menu-toggle span { display:block; width:23px; height:2px; background:var(--text); margin:5px 0; border-radius:5px; }
.mobile-nav { display:none; }

.eyebrow { display:inline-block; color:var(--primary); font-size:12px; font-weight:700; letter-spacing:1.3px; }
.eyebrow-light { color:#dfe6ff; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.7px; }
.section { padding:92px 0; }
.section-soft { background:var(--soft); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:38px; }
.section-heading h2 { margin:8px 0 0; font-size:clamp(30px,4vw,42px); line-height:1.15; }
.section-heading > p { max-width:470px; margin-bottom:2px; color:var(--muted); }
.section-heading.centered { display:block; text-align:center; }
.section-heading.centered > p { margin:14px auto 0; }
.narrow { max-width:850px; }

/* Hero */
.hero {
    position:relative; padding:88px 0 100px; overflow:hidden;
    background:
        radial-gradient(circle at 82% 30%, rgba(50,86,221,.13), transparent 27%),
        linear-gradient(180deg,#fff 0%,#f9faff 100%);
}
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.8fr); align-items:center; gap:70px; }
.hero-content h1 { max-width:680px; margin:13px 0 20px; font-size:clamp(46px,6vw,72px); line-height:1.03; }
.hero-text { max-width:620px; color:var(--muted); font-size:18px; line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn { min-height:48px; padding:0 20px; border-radius:10px; font-size:14px; }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#fff; color:var(--text); font-weight:600; transition:.2s ease; }
.btn-secondary:hover { border-color:#cbd3e2; transform:translateY(-1px); }
.hero-watermark {
    position:absolute; border:1px solid rgba(50,86,221,.12); border-radius:50%;
    pointer-events:none;
}
.hero-watermark-one { width:430px; height:430px; right:-180px; top:-110px; box-shadow:0 0 0 70px rgba(50,86,221,.025),0 0 0 140px rgba(50,86,221,.018); }
.hero-watermark-two { width:220px; height:220px; left:-110px; bottom:-100px; }

.hero-card {
    padding:22px; border:1px solid #dce2f3; border-radius:24px; background:#fff;
    box-shadow:var(--shadow-blue);
}
.hero-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; color:var(--muted); font-size:13px; font-weight:600; }
.status-dot { color:var(--primary); }
.status-dot::before { content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--primary); }
.preview-card { display:flex; gap:13px; align-items:center; padding:16px; border-radius:14px; background:var(--primary-soft); }
.preview-icon,.tool-icon { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:11px; color:var(--primary); background:#e0e7ff; font-size:14px; font-weight:700; }
.preview-card strong { font-size:15px; }
.preview-card p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.preview-row { display:flex; justify-content:space-between; gap:15px; padding:15px 4px; border-bottom:1px solid var(--border); color:var(--muted); font-size:13px; }
.preview-row strong { color:var(--text); }
.preview-result { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:16px; border-radius:12px; color:#fff; background:var(--primary); box-shadow:0 10px 25px rgba(50,86,221,.2); }
.preview-result strong { font-size:18px; }
.preview-note { margin:13px 2px 0; color:var(--muted); font-size:11px; }

/* Tools */
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tool-card {
    display:block; min-height:230px; padding:25px; border:1px solid var(--border);
    border-radius:var(--radius); background:#fff; transition:.2s ease;
}
.tool-card:hover { border-color:#cbd4e9; box-shadow:var(--shadow); transform:translateY(-3px); }
.tool-card h3 { margin:20px 0 8px; font-size:20px; }
.tool-card p { min-height:52px; margin-bottom:18px; color:var(--muted); font-size:14px; }
.tool-link { color:var(--primary); font-size:14px; font-weight:700; }
.center-action { margin-top:30px; text-align:center; }

/* Blue CTA */
.blue-cta { padding:70px 0; background:var(--primary); color:#fff; }
.blue-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.blue-cta h2 { margin:8px 0 9px; font-size:clamp(30px,4vw,43px); line-height:1.15; }
.blue-cta p { margin:0; max-width:580px; color:#e4e9ff; }
.btn-white { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 22px; border-radius:10px; background:#fff; color:var(--primary); font-weight:700; white-space:nowrap; transition:.2s ease; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 12px 25px rgba(15,32,100,.2); }

/* Steps */
.steps-wrap { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; align-items:start; }
.steps-wrap .section-heading { display:block; margin-bottom:0; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.step { padding-top:6px; }
.step > span { color:var(--primary); font-size:12px; font-weight:700; }
.step h3 { margin:18px 0 8px; font-size:18px; }
.step p { margin:0; color:var(--muted); font-size:14px; }

/* Trust */
.trust-section { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start; }
.trust-grid h2 { max-width:550px; margin:10px 0 0; font-size:clamp(30px,4vw,43px); line-height:1.15; }
.trust-points { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.trust-points > div:last-child { grid-column:1/-1; }
.trust-points strong { font-size:16px; }
.trust-points p { margin:6px 0 0; color:var(--muted); font-size:14px; }

/* FAQ */
.faq-section { padding-bottom:110px; }
.faq-list { border-top:1px solid var(--border); }
.faq-list details { border-bottom:1px solid var(--border); }
.faq-list summary { position:relative; padding:20px 38px 20px 0; cursor:pointer; list-style:none; font-weight:600; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:4px; top:17px; color:var(--primary); font-size:22px; font-weight:400; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { max-width:760px; padding:0 0 20px; margin:0; color:var(--muted); font-size:14px; }

/* Footer */
.site-footer { background:#f4f6fb; border-top:1px solid var(--border); }
.footer-main { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; padding:65px 0 55px; }
.footer-brand p { max-width:310px; margin:17px 0 0; color:var(--muted); font-size:14px; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.footer-column h3 { margin:0 0 9px; font-size:14px; }
.footer-column a { color:var(--muted); font-size:13px; }
.footer-column a:hover { color:var(--primary); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:18px 0 24px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }

/* Responsive */
@media (max-width:980px) {
    .desktop-nav,.header-cta { display:none; }
    .menu-toggle { display:block; margin-left:auto; }
    .mobile-nav { display:flex; max-height:0; overflow:hidden; flex-direction:column; gap:4px; padding:0 20px; background:#fff; transition:max-height .25s ease,padding .25s ease; }
    .mobile-nav.is-open { max-height:400px; padding:10px 20px 20px; border-top:1px solid var(--border); }
    .mobile-nav a { padding:12px 0; color:var(--muted); font-size:14px; font-weight:500; }
    .mobile-nav .mobile-cta { margin-top:7px; padding:12px 15px; border-radius:9px; color:#fff; background:var(--primary); text-align:center; }
    .hero-grid,.steps-wrap,.trust-grid { grid-template-columns:1fr; gap:45px; }
    .hero { padding-top:65px; }
    .tool-grid { grid-template-columns:repeat(2,1fr); }
    .footer-main { grid-template-columns:2fr 1fr 1fr; }
    .footer-brand { grid-column:1/-1; }
    .blue-cta-inner { align-items:flex-start; flex-direction:column; }
}
@media (max-width:640px) {
    .container { width:min(calc(100% - 28px),var(--container)); }
    .section { padding:65px 0; }
    .hero { padding:52px 0 65px; }
    .hero-content h1 { font-size:43px; }
    .hero-text { font-size:16px; }
    .hero-actions { flex-direction:column; }
    .hero-actions .btn { width:100%; }
    .hero-card { padding:17px; }
    .section-heading { display:block; }
    .section-heading > p { margin-top:15px; }
    .tool-grid,.steps,.trust-points { grid-template-columns:1fr; }
    .trust-points > div:last-child { grid-column:auto; }
    .footer-main { grid-template-columns:1fr 1fr; gap:35px 25px; padding:50px 0 40px; }
    .footer-brand { grid-column:1/-1; }
    .footer-bottom { display:block; }
    .footer-bottom p+p { margin-top:5px; }
}

/* Process cards */
#how-it-works { position:relative; overflow:hidden; background:linear-gradient(180deg,#f5f7fc 0%,#eef2ff 100%); }
#how-it-works::before {
    content:""; position:absolute; width:420px; height:420px; left:-250px; bottom:-260px;
    border:1px solid rgba(50,86,221,.10); border-radius:50%;
    box-shadow:0 0 0 55px rgba(50,86,221,.025),0 0 0 110px rgba(50,86,221,.018);
}
.steps { gap:16px; }
.step {
    position:relative; min-height:220px; padding:25px 22px 22px;
    border:1px solid #dce3f7; border-radius:18px;
    background:#fff; box-shadow:0 12px 30px rgba(50,86,221,.07);
    overflow:hidden; transition:.2s ease;
}
.step::before {
    content:""; position:absolute; top:0; left:0; width:100%; height:4px;
    background:var(--primary);
}
.step::after {
    content:""; position:absolute; right:-32px; top:-38px; width:108px; height:108px;
    border-radius:50%; background:rgba(50,86,221,.07);
}
.step:hover { transform:translateY(-4px); border-color:#cbd6f5; box-shadow:0 18px 38px rgba(50,86,221,.12); }
.step > span {
    position:relative; z-index:2; display:grid; place-items:center; width:44px; height:44px;
    border-radius:13px; color:#fff; background:var(--primary); font-size:12px;
    box-shadow:0 9px 18px rgba(50,86,221,.22);
}
.step h3 { position:relative; z-index:2; margin:22px 0 8px; font-size:18px; }
.step p { position:relative; z-index:2; }

/* Trust section */
.trust-section {
    position:relative; overflow:hidden;
    border-top:0; border-bottom:0;
    background:#fff;
}
.trust-section::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg,rgba(50,86,221,.045),transparent 42%,rgba(50,86,221,.025));
}
.trust-grid { position:relative; z-index:1; }
.trust-points { gap:16px; }
.trust-points > div {
    position:relative; padding:22px 22px 20px 62px;
    border:1px solid var(--border); border-radius:16px; background:#fff;
    box-shadow:0 10px 26px rgba(35,55,100,.055); transition:.2s ease;
}
.trust-points > div:hover { border-color:#cbd6f5; box-shadow:0 15px 34px rgba(50,86,221,.10); transform:translateY(-2px); }
.trust-points > div::before {
    content:""; position:absolute; left:22px; top:22px; width:25px; height:25px;
    border-radius:8px; background:var(--primary);
    box-shadow:0 6px 14px rgba(50,86,221,.2);
}
.trust-points > div::after {
    content:""; position:absolute; left:29px; top:29px; width:11px; height:6px;
    border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
.trust-points strong { display:block; font-size:16px; }

/* FAQ section */
.faq-section { background:linear-gradient(180deg,#fff 0%,#f7f8fc 100%); padding-top:92px; }
.faq-list {
    overflow:hidden; border:1px solid var(--border); border-radius:18px;
    background:#fff; box-shadow:0 14px 35px rgba(35,55,100,.06);
}
.faq-list details { border-bottom:1px solid var(--border); }
.faq-list details:last-child { border-bottom:0; }
.faq-list summary { padding:22px 58px 22px 24px; font-size:15px; }
.faq-list summary::after { right:24px; top:19px; display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--primary-soft); color:var(--primary); font-size:20px; }
.faq-list details[open] summary { color:var(--primary); background:#fbfcff; }
.faq-list details p { padding:0 24px 22px; font-size:14px; }

@media (max-width:640px) {
    .step { min-height:auto; }
    .trust-points > div { padding-left:58px; }
    .faq-list summary { padding-left:18px; padding-right:52px; }
    .faq-list details p { padding-left:18px; padding-right:18px; }
}


/* =========================================================
   PoolTaken V5 — Popular Tools + FAQ premium redesign
   ========================================================= */

/* Popular tools section */
#popular-tools {
  position: relative;
  overflow: hidden;
  padding-top: 92px;
  padding-bottom: 96px;
  background:
    radial-gradient(circle at 4% 12%, rgba(50,86,221,.11), transparent 25%),
    radial-gradient(circle at 96% 90%, rgba(50,86,221,.08), transparent 28%),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
}

#popular-tools::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(50,86,221,.09);
  border-radius: 50%;
  right: -220px;
  top: -170px;
  pointer-events: none;
}

#popular-tools::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(50,86,221,.07);
  border-radius: 50%;
  left: -155px;
  bottom: -120px;
  pointer-events: none;
}

#popular-tools .container {
  position: relative;
  z-index: 1;
}

#popular-tools .section-heading {
  align-items: center;
  margin-bottom: 42px;
}

#popular-tools .section-heading > div {
  position: relative;
}

#popular-tools .section-heading > div::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-top: 17px;
  border-radius: 99px;
  background: #3256DD;
}

#popular-tools .section-heading h2 {
  color: #17245a;
  letter-spacing: -.025em;
}

#popular-tools .section-heading > p {
  padding: 18px 20px;
  max-width: 480px;
  border-left: 3px solid #3256DD;
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 25px rgba(30,48,100,.05);
}

#popular-tools .tool-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

#popular-tools .tool-card {
  position: relative;
  isolation: isolate;
  min-height: 252px;
  padding: 28px 27px 24px;
  overflow: hidden;
  border: 1px solid rgba(50,86,221,.13);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(25,43,90,.065);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#popular-tools .tool-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #3256DD, #7890ee);
}

#popular-tools .tool-card::after {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  right: -75px;
  bottom: -75px;
  border-radius: 50%;
  background: rgba(50,86,221,.055);
  z-index: -1;
}

#popular-tools .tool-card:hover {
  transform: translateY(-7px);
  border-color: rgba(50,86,221,.32);
  box-shadow: 0 20px 42px rgba(50,86,221,.13);
}

#popular-tools .tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 2px;
  border-radius: 15px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(145deg, #3256DD, #5d76e5);
  box-shadow: 0 10px 22px rgba(50,86,221,.23);
}

#popular-tools .tool-card h3 {
  margin: 17px 0 9px;
  color: #17245a;
  font-size: 19px;
  line-height: 1.3;
}

#popular-tools .tool-card p {
  min-height: 52px;
  margin: 0 0 17px;
  color: #65708b;
  line-height: 1.65;
}

#popular-tools .tool-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3256DD;
  font-size: 14px;
  font-weight: 800;
}

#popular-tools .tool-link span {
  transition: transform .2s ease;
}

#popular-tools .tool-card:hover .tool-link span {
  transform: translateX(4px);
}

/* FAQ section */
.faq-section {
  position: relative;
  overflow: hidden;
  padding-top: 94px;
  padding-bottom: 105px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.13), transparent 24%),
    linear-gradient(135deg, #2949c7 0%, #3256DD 52%, #496be2 100%);
}

.faq-section::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  right: -150px;
  top: -145px;
}

.faq-section::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  left: -125px;
  bottom: -115px;
}

.faq-section .container {
  position: relative;
  z-index: 1;
}

.faq-section .section-heading .eyebrow {
  color: rgba(255,255,255,.76);
}

.faq-section .section-heading h2 {
  color: #fff;
  margin-top: 10px;
}

.faq-section .section-heading {
  margin-bottom: 35px;
}

.faq-list {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 22px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 60px rgba(20,37,105,.20);
}

.faq-list details {
  border-bottom: 1px solid #e6eaf5;
  transition: background .2s ease;
}

.faq-list details:last-child {
  border-bottom: 0;
}

.faq-list details[open] {
  background: #f7f9ff;
}

.faq-list summary {
  position: relative;
  padding: 23px 70px 23px 25px;
  color: #17245a;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.45;
  transition: color .2s ease;
}

.faq-list details[open] summary {
  color: #3256DD;
}

.faq-list summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: transparent;
  transition: background .2s ease;
}

.faq-list details[open] summary::before {
  background: #3256DD;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 21px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #3256DD;
  background: #edf1ff;
  font-size: 22px;
  font-weight: 500;
}

.faq-list details[open] summary::after {
  content: "−";
  color: #fff;
  background: #3256DD;
}

.faq-list details p {
  max-width: 760px;
  padding: 0 65px 24px 25px;
  margin: 0;
  color: #626d87;
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  #popular-tools .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #popular-tools .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #popular-tools .section-heading > p {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 620px) {
  #popular-tools,
  .faq-section {
    padding-top: 70px;
    padding-bottom: 75px;
  }

  #popular-tools .tool-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  #popular-tools .tool-card {
    min-height: 225px;
    padding: 24px;
  }

  .faq-list {
    border-radius: 17px;
  }

  .faq-list summary {
    padding: 20px 60px 20px 22px;
  }

  .faq-list details p {
    padding: 0 55px 22px 22px;
  }
}


/* ===== V6 Header: live search + category dropdown ===== */
.brand img, .footer-logo img { display:block; width:160px; height:auto; }
.nav-dropdown { position:relative; display:flex; align-items:center; height:76px; }
.nav-dropdown-trigger { display:inline-flex; align-items:center; gap:7px; color:#526078; font-size:14px; font-weight:500; }
.nav-dropdown-trigger span { color:#3256DD; font-size:17px; transition:transform .2s ease; }
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger { color:#3256DD; }
.nav-dropdown:hover .nav-dropdown-trigger span,
.nav-dropdown:focus-within .nav-dropdown-trigger span { transform:rotate(180deg); }
.nav-dropdown-menu {
  position:absolute; top:calc(100% - 5px); left:-22px; width:285px; padding:9px;
  background:#fff; border:1px solid #e4e9f5; border-radius:16px;
  box-shadow:0 22px 55px rgba(25,43,90,.16);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-menu a { display:flex; align-items:center; gap:12px; padding:12px 11px; border-radius:10px; }
.nav-dropdown-menu a:hover { background:#f2f5ff; }
.nav-dropdown-menu strong { display:block; color:#17245a; font-size:13px; }
.nav-dropdown-menu small { display:block; margin-top:2px; color:#77819a; font-size:11px; }
.dropdown-dot { width:10px; height:10px; flex:0 0 10px; border-radius:4px; background:#3256DD; box-shadow:0 0 0 5px #edf1ff; }

.site-search-row { position:relative; z-index:90; padding:0 0 15px; }
.search-container { display:flex; justify-content:flex-end; }
.site-search { position:relative; width:min(100%, 520px); }
.site-search input {
  display:block; width:100%; height:47px; padding:0 76px 0 46px;
  border:1px solid #dce3f3; border-radius:13px; outline:none;
  color:#17245a; background:#f8faff; font:500 14px "DM Sans",sans-serif;
  box-shadow:0 4px 14px rgba(35,55,100,.035); transition:border-color .2s,box-shadow .2s,background .2s;
}
.site-search input::placeholder { color:#8b95ac; }
.site-search input:focus { background:#fff; border-color:#3256DD; box-shadow:0 0 0 4px rgba(50,86,221,.10); }
.search-symbol { position:absolute; z-index:1; top:8px; left:15px; color:#3256DD; font-size:25px; line-height:28px; }
.site-search kbd { position:absolute; right:12px; top:13px; padding:3px 7px; border:1px solid #e0e6f3; border-radius:6px; color:#8b95ac; background:#fff; font:500 10px "DM Sans",sans-serif; }
.search-results {
  position:absolute; top:calc(100% + 9px); left:0; right:0; z-index:200;
  max-height:420px; overflow:auto; padding:7px; border:1px solid #e1e7f5; border-radius:16px;
  background:#fff; box-shadow:0 22px 55px rgba(25,43,90,.17);
}
.search-results[hidden] { display:none; }
.search-result { display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:11px; }
.search-result:hover, .search-result:focus { outline:none; background:#f2f5ff; }
.search-result-icon { display:grid; place-items:center; flex:0 0 37px; width:37px; height:37px; border-radius:11px; color:#fff; background:#3256DD; font-size:13px; font-weight:800; }
.search-result-copy { min-width:0; flex:1; }
.search-result-copy strong { display:block; color:#17245a; font-size:13px; }
.search-result-copy small { display:block; margin-top:3px; color:#78829a; font-size:11px; line-height:1.4; }
.search-result-arrow { color:#3256DD; font-size:18px; }
.search-empty { padding:18px 13px; color:#68738c; font-size:13px; line-height:1.6; }
.mobile-category-group { border-top:1px solid #edf0f7; }
.mobile-category-toggle { display:flex; justify-content:space-between; align-items:center; width:100%; padding:13px 0; border:0; color:#526078; background:transparent; font:500 15px "DM Sans",sans-serif; text-align:left; cursor:pointer; }
.mobile-category-toggle span { color:#3256DD; font-size:20px; }
.mobile-category-links { display:none; padding:0 0 7px 13px; }
.mobile-category-links.is-open { display:block; }
.mobile-category-links a { display:block; padding:10px 12px; border-left:2px solid #dbe3ff; color:#5b6680; font-size:13px; }
.mobile-category-links a:hover { color:#3256DD; background:#f4f6ff; }

@media (min-width: 901px) {
  .header-inner { gap:26px; }
}
@media (max-width: 900px) {
  .site-search-row { padding:0 0 13px; }
  .search-container { justify-content:stretch; }
  .site-search { width:100%; }
  .nav-dropdown { display:none; }
}
@media (max-width: 760px) {
  .brand img, .footer-logo img { width:145px; }
  .site-search input { height:45px; }
  .search-results { max-height:60vh; }
}


/* =========================================================
   V7 — Header search compact on desktop; full search on phone
   ========================================================= */
.site-header { position:relative; }
.site-search-row {
  position:absolute;
  z-index:110;
  top:14px;
  right:max(20px, calc((100vw - var(--container))/2));
  width:260px;
  padding:0;
}
.search-container { width:100%; margin:0; }
.site-search { width:100%; }
.site-search input {
  height:42px;
  padding:0 48px 0 38px;
  border-radius:12px;
  background:#f8faff;
  font-size:12px;
}
.site-search input:focus { background:#fff; }
.search-symbol {
  left:13px;
  top:7px;
  font-size:22px;
}
.site-search kbd { display:none; }
.search-submit {
  position:absolute;
  right:5px;
  top:5px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:#3256DD;
  cursor:pointer;
  box-shadow:0 5px 13px rgba(50,86,221,.20);
}
.search-submit span {
  position:relative;
  width:11px;
  height:11px;
  border:2px solid #fff;
  border-radius:50%;
}
.search-submit span::after {
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  right:-5px;
  bottom:-3px;
  border-radius:2px;
  background:#fff;
  transform:rotate(45deg);
}
@media (min-width:901px) {
  .site-search-row { display:block; }
  .site-header .header-inner { padding-right:290px; }
  .site-header .header-cta { margin-left:0; }
  .site-search-row .search-results { top:calc(100% + 9px); }
}
@media (max-width:900px) {
  .site-search-row {
    position:relative;
    top:auto;
    right:auto;
    width:auto;
    padding:0 0 13px;
  }
  .search-container { width:min(calc(100% - 40px), var(--container)); margin:0 auto; }
  .site-search input {
    height:45px;
    padding-left:43px;
    padding-right:52px;
    font-size:13px;
  }
  .search-symbol { left:15px; top:8px; }
  .search-submit { top:6px; right:6px; width:33px; height:33px; }
  .site-header .header-inner { padding-right:0; }
}


/* =========================================================
   Categories — original illustrated cards, rebuilt clean:
   one single source of truth, proper alignment, responsive
   ========================================================= */
#categories {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(50,86,221,.08), transparent 26%),
    radial-gradient(circle at 92% 82%, rgba(50,86,221,.06), transparent 28%),
    #fff;
}
#categories .container { position: relative; z-index: 1; }
#categories .section-heading.centered { margin-bottom: 44px; }
#categories .section-heading h2 { color: #17245a; }
#categories .section-heading.centered > p { max-width: 650px; }

/* Grid: every card stretched to the same row height */
#categories .category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Card: flex column so the button always lands at the same
   bottom edge, however long the description text runs */
#categories .category-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0 22px 22px;
  border: 1px solid rgba(50,86,221,.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 13px 35px rgba(31,48,96,.075);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#categories .category-card:hover {
  transform: translateY(-5px);
  border-color: rgba(50,86,221,.30);
  box-shadow: 0 22px 46px rgba(50,86,221,.14);
}

/* Illustration panel: fixed-height top strip, contents never escape it */
#categories .category-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 auto 0;
  height: 210px;
  background: linear-gradient(145deg,#dce8ff 0%,#b9d2ff 48%,#edf4ff 100%);
}
#categories .category-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 210px;
  top: 22px;
  right: -78px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
}

#categories .category-number {
  position: absolute;
  top: 16px;
  right: 17px;
  z-index: 4;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 8px;
  color: #2747c4;
  background: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
}

#categories .category-art {
  position: relative;
  flex: 0 0 210px;
  height: 210px;
  margin: 0 -22px;
  overflow: hidden;
}
#categories .category-art::before,
#categories .category-art::after,
#categories .category-art span,
#categories .category-art i,
#categories .category-art b {
  position: absolute;
  display: block;
  content: "";
}

/* Water Chemistry — bottles */
#categories .art-chemistry::before {
  width: 92px; height: 128px; left: 53px; bottom: 22px;
  border-radius: 20px 20px 14px 14px;
  background: linear-gradient(180deg,#fff 0%,#eaf4ff 46%,#5eafff 47%,#2f7fe9 100%);
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 14px 22px rgba(36,92,190,.16);
  transform: rotate(-5deg);
}
#categories .art-chemistry::after {
  width: 46px; height: 72px; left: 139px; bottom: 24px;
  border-radius: 10px 10px 9px 9px;
  background: linear-gradient(180deg,#fff 0%,#eef6ff 45%,#78c4ff 46%,#3893f1 100%);
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 12px 20px rgba(36,92,190,.13);
  transform: rotate(6deg);
}
#categories .art-chemistry span {
  width: 45px; height: 14px; left: 77px; bottom: 145px;
  border-radius: 6px 6px 3px 3px; background: #3256dd;
}
#categories .art-chemistry i {
  width: 23px; height: 14px; left: 151px; bottom: 93px;
  border-radius: 3px; background: #3256dd;
}
#categories .art-chemistry b {
  width: 170px; height: 36px; left: 35px; bottom: 9px;
  border-radius: 50%; background: rgba(50,86,221,.16);
}

/* Pool Equipment — pump/filter */
#categories .art-equipment::before {
  width: 100px; height: 58px; left: 45px; bottom: 40px;
  border-radius: 14px 22px 22px 14px;
  background: linear-gradient(145deg,#294bbf,#3256dd);
  box-shadow: 0 14px 22px rgba(39,71,196,.22);
}
#categories .art-equipment::after {
  width: 72px; height: 92px; left: 137px; bottom: 28px;
  border-radius: 25px 25px 17px 17px;
  background: linear-gradient(180deg,#fff,#d9e7ff);
  border: 4px solid rgba(50,86,221,.55);
  box-shadow: 0 14px 22px rgba(39,71,196,.13);
}
#categories .art-equipment span {
  width: 34px; height: 34px; left: 82px; bottom: 83px;
  border: 6px solid #8eb3ff; border-right-color: #3256dd; border-radius: 50%;
  background: #fff;
}
#categories .art-equipment i {
  width: 25px; height: 8px; left: 113px; bottom: 57px;
  border-radius: 4px; background: #86a9ef;
}
#categories .art-equipment b {
  width: 190px; height: 25px; left: 29px; bottom: 17px;
  border-radius: 50%; background: rgba(50,86,221,.14);
}

/* Pool Volume — pool */
#categories .art-volume::before {
  width: 220px; height: 102px; left: 30px; bottom: 26px;
  border-radius: 50% 50% 43% 43%;
  background: linear-gradient(180deg,#a7ddff 0%,#45aaf5 55%,#2383df 100%);
  border: 6px solid rgba(255,255,255,.88);
  box-shadow: 0 16px 28px rgba(36,122,215,.20);
}
#categories .art-volume::after {
  width: 177px; height: 65px; left: 52px; bottom: 61px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.8);
  background: linear-gradient(180deg,#9ce1ff,#35a3f1);
}
#categories .art-volume span {
  width: 15px; height: 72px; right: 51px; bottom: 51px;
  border-radius: 8px; background: #fff; box-shadow: 0 0 0 5px rgba(50,86,221,.12);
}
#categories .art-volume i {
  width: 45px; height: 8px; right: 36px; bottom: 50px;
  border-radius: 8px; background: #fff;
}
#categories .art-volume b {
  width: 160px; height: 25px; left: 60px; bottom: 14px;
  border-radius: 50%; background: rgba(50,86,221,.14);
}

/* Pool Costs — calculator + coins */
#categories .art-costs::before {
  width: 91px; height: 116px; left: 57px; bottom: 31px;
  border-radius: 14px;
  background: linear-gradient(145deg,#3155d9,#6e8cf0);
  border: 4px solid rgba(255,255,255,.78);
  box-shadow: 0 14px 23px rgba(39,71,196,.19);
}
#categories .art-costs::after {
  width: 58px; height: 48px; left: 75px; bottom: 58px;
  border-radius: 7px; background: #edf3ff;
  box-shadow: inset 0 0 0 2px rgba(50,86,221,.16);
}
#categories .art-costs span {
  width: 31px; height: 31px; right: 58px; bottom: 51px;
  border-radius: 50%; background: #f5c94f; border: 4px solid #fff;
  box-shadow: 0 7px 15px rgba(145,106,12,.15);
}
#categories .art-costs i {
  width: 25px; height: 25px; right: 38px; bottom: 35px;
  border-radius: 50%; background: #ffd866; border: 4px solid #fff;
}
#categories .art-costs b {
  width: 150px; height: 25px; left: 47px; bottom: 14px;
  border-radius: 50%; background: rgba(50,86,221,.14);
}

/* Text block: title fixed, description grows to fill the
   remaining space so every button sits on the same line */
#categories .category-card h3 {
  position: relative;
  z-index: 5;
  margin: 18px 0 8px;
  color: #17245a;
  font-size: 19px;
  line-height: 1.3;
}
#categories .category-card p {
  position: relative;
  z-index: 5;
  flex: 1 0 auto;
  margin: 0 0 18px;
  color: #68738d;
  font-size: 13.5px;
  line-height: 1.65;
}
#categories .category-arrow {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  background: #3256DD;
  box-shadow: 0 8px 18px rgba(50,86,221,.19);
  font-size: 12.5px;
  font-weight: 800;
  transition: background .2s ease;
}
#categories .category-arrow span { transition: transform .2s ease; }
#categories .category-card:hover .category-arrow { background: #2747c4; }
#categories .category-card:hover .category-arrow span { transform: translateX(4px); }

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  #categories .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Phone: 1 column, smaller illustration, natural height */
@media (max-width: 640px) {
  #categories { padding-top: 70px; padding-bottom: 76px; }
  #categories .section-heading.centered { margin-bottom: 30px; }
  #categories .section-heading h2 { font-size: 30px; line-height: 1.15; }
  #categories .section-heading.centered > p { font-size: 14px; line-height: 1.65; }

  #categories .category-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #categories .category-card {
    border-radius: 19px;
    padding: 0 19px 20px;
  }
  #categories .category-card::before { height: 184px; border-radius: 18px 18px 0 0; }
  #categories .category-card::after { width: 150px; height: 150px; right: -58px; top: 18px; }

  #categories .category-art {
    flex-basis: 184px;
    height: 184px;
    margin: 0 -19px;
  }
  #categories .category-number { top: 13px; right: 13px; padding: 5px 7px; font-size: 9px; }

  /* Slightly smaller mobile illustrations, still fully contained */
  #categories .art-chemistry::before { transform: scale(.86) rotate(-6deg); transform-origin: bottom center; }
  #categories .art-chemistry::after  { transform: scale(.86) rotate(7deg); transform-origin: bottom center; }
  #categories .art-equipment::before,
  #categories .art-equipment::after,
  #categories .art-volume::before,
  #categories .art-volume::after,
  #categories .art-costs::before,
  #categories .art-costs::after { transform: scale(.86); transform-origin: center bottom; }

  #categories .category-card h3 { margin-top: 16px; font-size: 18px; }
  #categories .category-card p { font-size: 13px; margin-bottom: 16px; }
  #categories .category-arrow { padding: 9px 12px; }
}

/* Small phones: avoid horizontal crowding / overflow */
@media (max-width: 380px) {
  #categories .category-card { padding-left: 16px; padding-right: 16px; }
  #categories .category-art { margin-left: -16px; margin-right: -16px; }
  #categories .category-card::before { height: 174px; }
  #categories .category-art { flex-basis: 174px; height: 174px; }
}