/* Toolex.lk — Main Stylesheet */
/* https://toolex.lk */

:root {
      --blue: #007BFF;
      --blue-dark: #0062cc;
      --blue-light: #e8f2ff;
      --green: #16C79A;
      --green-dark: #0fa882;
      --green-light: #e6faf5;
      --white: #ffffff;
      --gray-50: #f8fafc;
      --gray-100: #f1f5f9;
      --gray-200: #e2e8f0;
      --gray-400: #94a3b8;
      --gray-600: #475569;
      --gray-800: #1e293b;
      --gray-900: #0f172a;
      --radius: 14px;
      --radius-sm: 8px;
      --shadow: 0 4px 24px rgba(0,123,255,0.08);
      --shadow-md: 0 8px 40px rgba(0,123,255,0.13);
    }

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

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: var(--white);
      color: var(--gray-900);
      overflow-x: hidden;
    }

    a { text-decoration: none; color: inherit; }

    /* ─── NAV v2 (dropdown) ─── */
    .tx-nav {
      position: sticky; top: 0; z-index: 999;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--gray-200);
    }
    .tx-nav-inner {
      max-width: 1200px; margin: 0 auto; padding: 0 24px;
      height: 64px; display: flex; align-items: center;
      justify-content: space-between; gap: 16px;
    }
    .tx-logo {
      display: flex; align-items: center; gap: 8px;
      font-weight: 800; font-size: 1.3rem; color: var(--blue);
      letter-spacing: -0.4px; flex-shrink: 0;
    }
    .tx-logo-icon {
      width: 34px; height: 34px; border-radius: 9px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1rem; font-weight: 800;
    }
    .tx-logo-green { color: var(--green); }
    .tx-menu {
      display: flex; align-items: center; gap: 2px;
      list-style: none; margin: 0; padding: 0;
    }
    .tx-item { position: relative; }
    .tx-link {
      display: flex; align-items: center; gap: 4px;
      padding: 8px 11px;
      font-size: 0.865rem; font-weight: 600; color: var(--gray-600);
      border-radius: var(--radius-sm);
      transition: color 0.18s, background 0.18s;
      white-space: nowrap; cursor: pointer;
      border: none; background: none; font-family: inherit;
    }
    .tx-link:hover, .tx-item.open > .tx-link {
      color: var(--blue); background: var(--blue-light);
    }
    .tx-link.is-active { color: var(--blue); }
    .tx-chevron {
      width: 14px; height: 14px; flex-shrink: 0;
      stroke: currentColor; fill: none;
      stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
      transition: transform 0.22s;
    }
    .tx-item.open .tx-chevron { transform: rotate(180deg); }
    /* dropdown panel */
    .tx-drop {
      position: absolute; top: calc(100% + 8px);
      left: 50%; transform: translateX(-50%) translateY(-6px);
      min-width: 240px;
      background: #fff; border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      box-shadow: 0 8px 40px rgba(0,0,0,0.11);
      padding: 8px; opacity: 0; pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
    }
    .tx-drop::before {
      content: ''; position: absolute; top: -12px;
      left: 0; right: 0; height: 12px;
    }
    .tx-item:hover > .tx-drop,
    .tx-item.open > .tx-drop {
      opacity: 1; pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .tx-drop-head {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px 6px;
      font-size: 0.7rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: var(--gray-400);
      border-bottom: 1px solid var(--gray-100); margin-bottom: 4px;
    }
    .tx-drop-head-icon {
      width: 24px; height: 24px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85rem;
    }
    .tx-drop-link {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; border-radius: var(--radius-sm);
      font-size: 0.84rem; font-weight: 600; color: var(--gray-700);
      transition: background 0.15s, color 0.15s;
    }
    .tx-drop-link:hover { background: var(--gray-100); color: var(--blue); }
    .tx-drop-icon {
      width: 32px; height: 32px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0;
    }
    .tx-drop-text small {
      display: block; font-size: 0.7rem; font-weight: 500;
      color: var(--gray-400); margin-top: 1px;
    }
    .tx-drop-all {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 10px 4px;
      font-size: 0.78rem; font-weight: 700; color: var(--blue);
      border-top: 1px solid var(--gray-100); margin-top: 4px;
    }
    .tx-drop-all:hover { text-decoration: underline; }
    /* wide blog dropdown */
    .tx-drop-wide {
      min-width: 380px; left: auto; right: 0;
      transform: translateY(-6px);
    }
    .tx-item:hover > .tx-drop-wide,
    .tx-item.open > .tx-drop-wide { transform: translateY(0); }
    .tx-drop-wide-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    }
    /* CTA button */
    .tx-cta {
      flex-shrink: 0; background: var(--blue); color: #fff !important;
      padding: 9px 18px; border-radius: 50px;
      font-size: 0.84rem; font-weight: 700;
      transition: background 0.18s, transform 0.15s; white-space: nowrap;
    }
    .tx-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
    /* hamburger */
    .tx-hamburger {
      display: none; flex-direction: column; justify-content: center;
      gap: 5px; width: 36px; height: 36px;
      cursor: pointer; background: none; border: none;
      padding: 4px; border-radius: var(--radius-sm);
      transition: background 0.15s;
    }
    .tx-hamburger:hover { background: var(--gray-100); }
    .tx-hamburger span {
      display: block; width: 22px; height: 2px;
      background: var(--gray-800); border-radius: 2px;
      transition: transform 0.25s, opacity 0.25s;
    }
    .tx-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .tx-hamburger.is-open span:nth-child(2) { opacity: 0; }
    .tx-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* mobile drawer */
    .tx-mobile-drawer {
      display: none; position: fixed;
      top: 64px; left: 0; right: 0; bottom: 0;
      background: #fff; z-index: 998; overflow-y: auto;
      border-top: 1px solid var(--gray-200);
      padding: 12px 16px 40px;
    }
    .tx-mobile-drawer.is-open { display: block; }
    .tx-mob-item { border-bottom: 1px solid var(--gray-100); }
    .tx-mob-trigger {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; padding: 14px 4px;
      font-size: 0.9rem; font-weight: 700; color: var(--gray-800);
      background: none; border: none; font-family: inherit;
      cursor: pointer; text-align: left;
    }
    .tx-mob-item.open .tx-mob-trigger .tx-chevron { transform: rotate(180deg); }
    .tx-mob-sub { display: none; padding: 0 0 12px 8px; }
    .tx-mob-item.open .tx-mob-sub { display: block; }
    .tx-mob-sub-link {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 6px; font-size: 0.86rem; font-weight: 600;
      color: var(--gray-600); border-radius: var(--radius-sm);
      transition: color 0.15s, background 0.15s;
    }
    .tx-mob-sub-link:hover { color: var(--blue); background: var(--blue-light); }
    .tx-mob-icon {
      width: 30px; height: 30px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.95rem; flex-shrink: 0;
    }
    .tx-mob-sub-link small {
      display: block; font-size: 0.7rem; font-weight: 500; color: var(--gray-400);
    }
    .tx-mob-view-all {
      display: inline-flex; align-items: center; gap: 4px;
      margin: 6px 6px 0;
      font-size: 0.78rem; font-weight: 700; color: var(--blue);
    }
    .tx-mob-plain {
      display: block; padding: 14px 4px;
      font-size: 0.9rem; font-weight: 700; color: var(--gray-800);
      border-bottom: 1px solid var(--gray-100);
    }
    .tx-mob-cta {
      display: block; margin: 20px 0 0;
      background: var(--blue); color: #fff; text-align: center;
      padding: 14px; border-radius: var(--radius);
      font-size: 0.92rem; font-weight: 800;
    }
    /* responsive breakpoint */
    @media (max-width: 900px) {
      .tx-menu { display: none; }
      .tx-cta { display: none; }
      .tx-hamburger { display: flex; }
    }

    /* ─── AD BANNER ─── */
    .ad-strip {
      background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
      text-align: center; padding: 10px;
      font-size: 0.75rem; color: var(--gray-400); letter-spacing: 0.05em;
    }
    .ad-block {
      display: inline-block; background: var(--gray-100);
      border: 1px dashed var(--gray-200); border-radius: var(--radius-sm);
      padding: 12px 40px; color: var(--gray-400); font-size: 0.75rem;
    }

    /* ─── HERO ─── */
    .hero {
      position: relative; overflow: hidden;
      background: linear-gradient(160deg, #f0f7ff 0%, #e8fdf6 100%);
      padding: 80px 24px 70px;
      text-align: center;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 20% 50%, rgba(0,123,255,0.07) 0%, transparent 60%),
                  radial-gradient(ellipse at 80% 30%, rgba(22,199,154,0.07) 0%, transparent 60%);
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: white; border: 1px solid var(--blue-light);
      border-radius: 50px; padding: 6px 14px;
      font-size: 0.78rem; font-weight: 700; color: var(--blue);
      margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0,123,255,0.1);
    }
    .hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    .hero h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(2.2rem, 6vw, 3.6rem);
      line-height: 1.1; color: var(--gray-900);
      margin-bottom: 20px; position: relative;
      max-width: 700px; margin-left: auto; margin-right: auto;
    }
    .hero h1 em { font-style: italic; color: var(--blue); }
    .hero h1 .green { color: var(--green); font-style: normal; }
    .hero-sub {
      font-size: 1.05rem; color: var(--gray-600); max-width: 520px;
      margin: 0 auto 36px; line-height: 1.7; position: relative;
    }

    /* Search bar */
    .search-wrap {
      position: relative; max-width: 560px; margin: 0 auto 16px;
    }
    .search-bar {
      display: flex; align-items: center;
      background: white; border: 2px solid var(--gray-200);
      border-radius: 50px; padding: 6px 6px 6px 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .search-bar:focus-within {
      border-color: var(--blue);
      box-shadow: 0 8px 30px rgba(0,123,255,0.15);
    }
    .search-bar input {
      flex: 1; border: none; outline: none;
      font-size: 0.95rem; font-family: inherit;
      color: var(--gray-900); background: transparent;
    }
    .search-bar input::placeholder { color: var(--gray-400); }
    .search-btn {
      background: linear-gradient(135deg, var(--blue), #0062cc);
      color: white; border: none; border-radius: 50px;
      padding: 10px 22px; font-size: 0.88rem;
      font-weight: 700; font-family: inherit;
      cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
      white-space: nowrap;
    }
    .search-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,123,255,0.3); }
    .hero-tags {
      display: flex; flex-wrap: wrap; gap: 8px;
      justify-content: center; position: relative;
    }
    .hero-tag {
      background: white; border: 1px solid var(--gray-200);
      border-radius: 50px; padding: 5px 14px;
      font-size: 0.78rem; font-weight: 600; color: var(--gray-600);
      cursor: pointer; transition: all 0.2s;
    }
    .hero-tag:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

    /* ─── STATS ─── */
    .stats-strip {
      background: white; border-top: 1px solid var(--gray-200);
      border-bottom: 1px solid var(--gray-200);
      padding: 20px 24px;
    }
    .stats-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 32px;
    }
    .stat { text-align: center; }
    .stat-num { font-size: 1.5rem; font-weight: 800; color: var(--blue); }
    .stat-label { font-size: 0.78rem; color: var(--gray-400); font-weight: 500; margin-top: 2px; }
    .stat-divider { width: 1px; height: 36px; background: var(--gray-200); }

    /* ─── SECTIONS COMMON ─── */
    section { padding: 64px 24px; }
    .section-inner { max-width: 1200px; margin: 0 auto; }
    .section-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--blue);
      margin-bottom: 10px;
    }
    .section-label::before {
      content: ''; display: block; width: 20px; height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      border-radius: 2px;
    }
    .section-title {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      color: var(--gray-900); margin-bottom: 10px;
      line-height: 1.2;
    }
    .section-sub { font-size: 0.95rem; color: var(--gray-600); max-width: 480px; line-height: 1.7; }
    .section-header { margin-bottom: 36px; }

    /* ─── IN-CONTENT AD ─── */
    .ad-inline {
      background: var(--gray-50); border: 1px dashed var(--gray-200);
      border-radius: var(--radius); padding: 16px;
      text-align: center; color: var(--gray-400);
      font-size: 0.75rem; letter-spacing: 0.06em;
      margin: 0 auto 48px; max-width: 728px;
      min-height: 90px; display: flex; align-items: center; justify-content: center;
    }

    /* ─── FEATURED TOOLS ─── */
    .featured-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    .tool-card {
      background: white; border: 1.5px solid var(--gray-200);
      border-radius: var(--radius); padding: 24px;
      transition: all 0.22s; cursor: pointer;
      position: relative; overflow: hidden;
    }
    .tool-card::after {
      content: ''; position: absolute;
      bottom: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.25s;
    }
    .tool-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-3px); }
    .tool-card:hover::after { transform: scaleX(1); }
    .tool-icon {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; margin-bottom: 14px;
    }
    .icon-blue { background: var(--blue-light); }
    .icon-green { background: var(--green-light); }
    .icon-purple { background: #f3eeff; }
    .icon-orange { background: #fff4e6; }
    .tool-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--gray-900); }
    .tool-card p { font-size: 0.84rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; }
    .tool-badge {
      display: inline-block; font-size: 0.7rem; font-weight: 700;
      padding: 3px 10px; border-radius: 50px;
      letter-spacing: 0.04em;
    }
    .badge-free { background: var(--green-light); color: var(--green-dark); }
    .badge-popular { background: #fff0f0; color: #e05252; }
    .badge-new { background: var(--blue-light); color: var(--blue); }
    .tool-arrow {
      position: absolute; top: 24px; right: 24px;
      font-size: 1.1rem; color: var(--gray-400);
      transition: color 0.2s, transform 0.2s;
    }
    .tool-card:hover .tool-arrow { color: var(--blue); transform: translate(3px, -3px); }

    /* ─── CATEGORIES ─── */
    .categories { background: var(--gray-50); }
    .cat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
    }
    .cat-card {
      background: white; border: 1.5px solid var(--gray-200);
      border-radius: var(--radius); padding: 28px 22px;
      transition: all 0.22s; cursor: pointer;
    }
    .cat-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
    .cat-icon {
      font-size: 2rem; margin-bottom: 14px; display: block;
    }
    .cat-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
    .cat-card p { font-size: 0.82rem; color: var(--gray-600); line-height: 1.5; margin-bottom: 12px; }
    .cat-count {
      font-size: 0.75rem; font-weight: 700; color: var(--blue);
      background: var(--blue-light); padding: 3px 10px; border-radius: 50px;
      display: inline-block;
    }

    /* ─── ALL TOOLS GRID ─── */
    .tools-list-section { background: white; }
    .tools-tabs {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px;
    }
    .tab-btn {
      background: var(--gray-100); border: 1.5px solid transparent;
      border-radius: 50px; padding: 8px 18px;
      font-size: 0.82rem; font-weight: 600; color: var(--gray-600);
      cursor: pointer; transition: all 0.18s; font-family: inherit;
    }
    .tab-btn.active, .tab-btn:hover {
      background: var(--blue-light); color: var(--blue); border-color: var(--blue);
    }
    .mini-tool-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px;
    }
    .mini-tool {
      display: flex; align-items: center; gap: 12px;
      background: var(--gray-50); border: 1.5px solid var(--gray-200);
      border-radius: var(--radius-sm); padding: 14px 16px;
      transition: all 0.18s; cursor: pointer;
    }
    .mini-tool:hover { border-color: var(--blue); background: var(--blue-light); }
    .mini-icon {
      width: 38px; height: 38px; border-radius: 9px;
      background: white; display: flex; align-items: center;
      justify-content: center; font-size: 1.1rem;
      border: 1px solid var(--gray-200); flex-shrink: 0;
    }
    .mini-tool span { font-size: 0.85rem; font-weight: 600; color: var(--gray-800); }

    /* ─── WEBSITE / LEAD CTA ─── */
    .lead-section {
      background: linear-gradient(135deg, #0057b8 0%, #007BFF 50%, #0dab82 100%);
      padding: 72px 24px;
    }
    .lead-inner {
      max-width: 900px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
      align-items: center;
    }
    .lead-content { color: white; }
    .lead-label {
      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: rgba(255,255,255,0.7);
      margin-bottom: 12px;
    }
    .lead-content h2 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.7rem, 4vw, 2.4rem);
      line-height: 1.15; margin-bottom: 16px;
    }
    .lead-content p { font-size: 0.95rem; opacity: 0.85; line-height: 1.7; margin-bottom: 28px; }
    .lead-btns { display: flex; flex-wrap: wrap; gap: 12px; }
    .btn-white {
      background: white; color: var(--blue);
      padding: 12px 24px; border-radius: 50px;
      font-size: 0.9rem; font-weight: 700;
      transition: all 0.2s; display: inline-block;
    }
    .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
    .btn-outline-white {
      border: 2px solid rgba(255,255,255,0.5); color: white;
      padding: 12px 24px; border-radius: 50px;
      font-size: 0.9rem; font-weight: 700;
      transition: all 0.2s; display: inline-block;
    }
    .btn-outline-white:hover { border-color: white; background: rgba(255,255,255,0.1); }
    .lead-features { display: flex; flex-direction: column; gap: 16px; }
    .lead-feat {
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius); padding: 18px 20px; color: white;
      backdrop-filter: blur(4px);
    }
    .lead-feat-icon { font-size: 1.4rem; margin-bottom: 6px; }
    .lead-feat h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 4px; }
    .lead-feat p { font-size: 0.8rem; opacity: 0.8; }

    /* ─── HOW IT WORKS ─── */
    .how-section { background: var(--gray-50); }
    .steps-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 24px;
    }
    .step-card { text-align: center; padding: 8px; }
    .step-num {
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: white; font-weight: 800; font-size: 1.1rem;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px; box-shadow: 0 4px 16px rgba(0,123,255,0.25);
    }
    .step-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; }
    .step-card p { font-size: 0.82rem; color: var(--gray-600); line-height: 1.6; }

    /* ─── TESTIMONIALS ─── */
    .testimonials { background: white; }
    .testi-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    .testi-card {
      background: var(--gray-50); border: 1.5px solid var(--gray-200);
      border-radius: var(--radius); padding: 24px;
    }
    .stars { color: #f59e0b; font-size: 0.9rem; margin-bottom: 10px; }
    .testi-card p { font-size: 0.88rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; font-style: italic; }
    .testi-author { display: flex; align-items: center; gap: 10px; }
    .testi-avatar {
      width: 38px; height: 38px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: white; font-weight: 700; font-size: 0.9rem;
      display: flex; align-items: center; justify-content: center;
    }
    .testi-name { font-size: 0.85rem; font-weight: 700; color: var(--gray-900); }
    .testi-loc { font-size: 0.75rem; color: var(--gray-400); }

    /* ─── BLOG ─── */
    .blog-section { background: var(--gray-50); }
    .blog-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }
    .blog-card {
      background: white; border: 1.5px solid var(--gray-200);
      border-radius: var(--radius); overflow: hidden;
      transition: all 0.22s; cursor: pointer;
    }
    .blog-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-3px); }
    .blog-thumb {
      height: 160px;
      display: flex; align-items: center; justify-content: center;
      font-size: 3rem;
    }
    .blog-thumb.t1 { background: linear-gradient(135deg, #e8f2ff, #d0e8ff); }
    .blog-thumb.t2 { background: linear-gradient(135deg, #e6faf5, #c5f5e8); }
    .blog-thumb.t3 { background: linear-gradient(135deg, #fff4e6, #ffe8c5); }
    .blog-body { padding: 20px; }
    .blog-cat {
      font-size: 0.7rem; font-weight: 700; color: var(--blue);
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
    }
    .blog-card h3 { font-size: 0.95rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; color: var(--gray-900); }
    .blog-card p { font-size: 0.82rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 14px; }
    .blog-meta { font-size: 0.75rem; color: var(--gray-400); display: flex; gap: 12px; }

    /* ─── FOOTER AD ─── */
    .footer-ad { background: var(--gray-50); padding: 20px 24px; text-align: center; }

    /* ─── FOOTER ─── */
    footer {
      background: var(--gray-900); color: white;
      padding: 56px 24px 24px;
    }
    .footer-inner { max-width: 1200px; margin: 0 auto; }
    .footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px; margin-bottom: 48px;
    }
    .footer-brand .logo { margin-bottom: 12px; }
    .footer-brand .logo { color: white; }
    .footer-brand p { font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 20px; }
    .footer-socials { display: flex; gap: 10px; }
    .social-btn {
      width: 36px; height: 36px; border-radius: 9px;
      background: rgba(255,255,255,0.08); color: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; transition: background 0.2s;
    }
    .social-btn:hover { background: var(--blue); }
    .footer-col h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 16px; color: rgba(255,255,255,0.9); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col a { font-size: 0.82rem; color: rgba(255,255,255,0.5); transition: color 0.2s; }
    .footer-col a:hover { color: var(--green); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 24px; display: flex;
      justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
    }
    .footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.35); }
    .footer-legal { display: flex; gap: 20px; }
    .footer-legal a { font-size: 0.78rem; color: rgba(255,255,255,0.35); transition: color 0.2s; }
    .footer-legal a:hover { color: white; }

    /* ─── ANIMATIONS ─── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero > * { animation: fadeUp 0.6s ease both; }
    .hero-badge { animation-delay: 0.05s; }
    .hero h1 { animation-delay: 0.15s; }
    .hero-sub { animation-delay: 0.25s; }
    .search-wrap { animation-delay: 0.35s; }
    .hero-tags { animation-delay: 0.45s; }

    /* ─── MOBILE ─── */
    @media (max-width: 768px) {
      .lead-inner { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .lead-features { display: none; }
      .stat-divider { display: none; }
    }
    @media (max-width: 480px) {
      .footer-grid { grid-template-columns: 1fr; }
      section { padding: 48px 16px; }
      .hero { padding: 56px 16px 52px; }
    }

    /* ─── SCROLL HINT ─── */
    .floating-cta {
      position: fixed; bottom: 24px; right: 24px; z-index: 90;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: white; border-radius: 50px;
      padding: 12px 20px; font-size: 0.85rem; font-weight: 700;
      box-shadow: 0 8px 28px rgba(0,123,255,0.35);
      display: flex; align-items: center; gap: 8px;
      cursor: pointer; transition: transform 0.2s;
    }
    .floating-cta:hover { transform: translateY(-3px); }

/* ════════════════════════════════
   CATEGORY PAGES — Shared Styles
   ════════════════════════════════ */

/* ── NAV (full tx- system) ── */
.tx-nav{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--gray-200);}
.tx-nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.tx-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.3rem;color:var(--blue);letter-spacing:-.4px;flex-shrink:0;}
.tx-logo-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--green));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;font-weight:800;}
.tx-logo-green{color:var(--green);}
.tx-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.tx-item{position:relative;}
.tx-link{display:flex;align-items:center;gap:4px;padding:8px 11px;font-size:.865rem;font-weight:600;color:var(--gray-600);border-radius:var(--radius-sm);transition:color .18s,background .18s;white-space:nowrap;cursor:pointer;border:none;background:none;font-family:inherit;}
.tx-link:hover,.tx-item.open>.tx-link,.tx-link.is-active{color:var(--blue);background:var(--blue-light);}
.tx-chevron{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s;}
.tx-item.open .tx-chevron{transform:rotate(180deg);}
.tx-drop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:240px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:0 8px 40px rgba(0,0,0,.11);padding:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
.tx-drop::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px;}
.tx-item:hover>.tx-drop,.tx-item.open>.tx-drop{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.tx-drop-head{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--gray-400);border-bottom:1px solid var(--gray-100);margin-bottom:4px;}
.tx-drop-head-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.tx-drop-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);font-size:.84rem;font-weight:600;color:var(--gray-700);transition:background .15s,color .15s;}
.tx-drop-link:hover{background:var(--gray-100);color:var(--blue);}
.tx-drop-icon{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.tx-drop-text small{display:block;font-size:.7rem;font-weight:500;color:var(--gray-400);margin-top:1px;}
.tx-drop-all{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px;font-size:.78rem;font-weight:700;color:var(--blue);border-top:1px solid var(--gray-100);margin-top:4px;}
.tx-drop-all:hover{text-decoration:underline;}
.tx-drop-wide{min-width:380px;left:auto;right:0;transform:translateY(-6px);}
.tx-item:hover>.tx-drop-wide,.tx-item.open>.tx-drop-wide{transform:translateY(0);}
.tx-drop-wide-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.tx-cta{flex-shrink:0;background:var(--blue);color:#fff!important;padding:9px 18px;border-radius:50px;font-size:.84rem;font-weight:700;transition:background .18s,transform .15s;white-space:nowrap;}
.tx-cta:hover{background:var(--blue-dark);transform:translateY(-1px);}
.tx-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;cursor:pointer;background:none;border:none;padding:4px;border-radius:var(--radius-sm);}
.tx-hamburger span{display:block;width:22px;height:2px;background:var(--gray-800);border-radius:2px;transition:transform .25s,opacity .25s;}
.tx-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.tx-hamburger.is-open span:nth-child(2){opacity:0;}
.tx-hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.tx-mobile-drawer{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:#fff;z-index:998;overflow-y:auto;border-top:1px solid var(--gray-200);padding:12px 16px 40px;}
.tx-mobile-drawer.is-open{display:block;}
.tx-mob-item{border-bottom:1px solid var(--gray-100);}
.tx-mob-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 4px;font-size:.9rem;font-weight:700;color:var(--gray-800);background:none;border:none;font-family:inherit;cursor:pointer;text-align:left;}
.tx-mob-item.open .tx-mob-trigger .tx-chevron{transform:rotate(180deg);}
.tx-mob-sub{display:none;padding:0 0 12px 8px;}
.tx-mob-item.open .tx-mob-sub{display:block;}
.tx-mob-sub-link{display:flex;align-items:center;gap:10px;padding:10px 6px;font-size:.86rem;font-weight:600;color:var(--gray-600);border-radius:var(--radius-sm);transition:color .15s,background .15s;}
.tx-mob-sub-link:hover{color:var(--blue);background:var(--blue-light);}
.tx-mob-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.tx-mob-sub-link small{display:block;font-size:.7rem;font-weight:500;color:var(--gray-400);}
.tx-mob-view-all{display:inline-flex;align-items:center;gap:4px;margin:6px 6px 0;font-size:.78rem;font-weight:700;color:var(--blue);}
.tx-mob-plain{display:block;padding:14px 4px;font-size:.9rem;font-weight:700;color:var(--gray-800);border-bottom:1px solid var(--gray-100);}
.tx-mob-cta{display:block;margin:20px 0 0;background:var(--blue);color:#fff;text-align:center;padding:14px;border-radius:var(--radius);font-size:.92rem;font-weight:800;}
@media(max-width:900px){.tx-menu{display:none;}.tx-cta{display:none;}.tx-hamburger{display:flex;}}

/* ── CATEGORY PAGE LAYOUT ── */
.cat-hero{padding:52px 24px 48px;border-bottom:1px solid var(--gray-200);}
.cat-hero-inner{max-width:1200px;margin:0 auto;}
.breadcrumb{font-size:.75rem;color:var(--gray-400);margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap;}
.breadcrumb a{color:var(--blue);font-weight:600;}
.cat-badge{display:inline-flex;align-items:center;gap:6px;border-radius:50px;padding:5px 14px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;}
.cat-hero h1{font-family:'DM Serif Display',serif;font-size:clamp(1.9rem,4vw,2.7rem);color:var(--gray-900);line-height:1.2;margin-bottom:12px;}
.cat-hero p{font-size:.97rem;color:var(--gray-600);max-width:620px;line-height:1.7;}
.cat-hero-meta{display:flex;gap:20px;margin-top:20px;flex-wrap:wrap;}
.cat-hero-meta span{font-size:.8rem;font-weight:700;color:var(--gray-500);display:flex;align-items:center;gap:5px;}
.ad-strip{background:#fff;border-bottom:1px solid var(--gray-200);padding:10px 24px;text-align:center;font-size:.72rem;color:var(--gray-400);letter-spacing:.05em;min-height:80px;display:flex;align-items:center;justify-content:center;}
.tools-section{max-width:1200px;margin:0 auto;padding:48px 24px;}
.section-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:6px;}
.section-title{font-family:'DM Serif Display',serif;font-size:1.8rem;color:var(--gray-900);margin-bottom:24px;}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;}
.tool-card{background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:26px;transition:all .2s;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;}
.tool-card:hover{border-color:var(--blue);box-shadow:0 8px 32px rgba(0,123,255,.1);transform:translateY(-3px);}
.tool-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--green));opacity:0;transition:opacity .2s;}
.tool-card:hover::before{opacity:1;}
.tc-top{display:flex;align-items:flex-start;gap:14px;}
.tc-icon{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;}
.tc-name{font-size:1.08rem;font-weight:800;color:var(--gray-900);line-height:1.25;margin-bottom:4px;}
.tc-badge{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:2px 8px;border-radius:50px;}
.tc-desc{font-size:.87rem;color:var(--gray-500);line-height:1.7;}
.tc-features{display:flex;flex-direction:column;gap:5px;}
.tc-feature{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--gray-600);}
.tc-feature::before{content:'✓';color:var(--green);font-weight:800;font-size:.78rem;flex-shrink:0;}
.tc-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--blue);color:#fff;border-radius:var(--radius-sm);padding:12px 18px;font-size:.88rem;font-weight:700;margin-top:auto;transition:background .18s,transform .15s;}
.tc-btn:hover{background:var(--blue-dark);transform:translateY(-1px);}
.related-blog{padding:48px 24px;}
.related-blog-inner{max-width:1200px;margin:0 auto;}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.blog-card{background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius);padding:18px;transition:all .18s;}
.blog-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(0,123,255,.08);}
.bc-cat{font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;}
.bc-title{font-size:.94rem;font-weight:700;color:var(--gray-900);line-height:1.4;margin-bottom:8px;}
.bc-meta{font-size:.72rem;color:var(--gray-400);}
.bc-arrow{display:block;font-size:.78rem;font-weight:700;color:var(--blue);margin-top:10px;}
.lead-banner{background:linear-gradient(135deg,var(--gray-900),#1e3a5f);padding:56px 24px;text-align:center;}
.lead-inner{max-width:640px;margin:0 auto;}
.lead-banner h2{font-family:'DM Serif Display',serif;font-size:2rem;color:#fff;margin-bottom:12px;}
.lead-banner p{font-size:.95rem;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:24px;}
.lead-btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;padding:14px 28px;border-radius:50px;font-size:.9rem;font-weight:800;transition:background .18s,transform .15s;}
.lead-btn:hover{background:var(--green-dark);transform:translateY(-2px);}
.footer-logo{font-weight:800;font-size:1.1rem;color:var(--blue);margin-bottom:8px;}
.footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:10px;}
.footer-links a{font-size:.74rem;color:rgba(255,255,255,.35);}
.footer-links a:hover{color:#fff;}
.footer-copy{font-size:.7rem;color:rgba(255,255,255,.2);}
@media(max-width:640px){.tools-grid,.blog-grid{grid-template-columns:1fr;}}