/* ================================================================
   WEBLISTO — MAIN STYLESHEET
   assets/css/style.css
   Fonts: Plus Jakarta Sans (headings) + Outfit (body)
================================================================ */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

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

/* ── CSS VARIABLES ── */
:root {
  /* Brand Colors */
  --blue:       #2563eb;
  --blue-d:     #1d4ed8;
  --blue-l:     #eff6ff;
  --blue-m:     #dbeafe;
  --teal:       #0891b2;
  --teal-d:     #0e7490;
  --teal-l:     #ecfeff;
  --amber:      #f59e0b;
  --amber-d:    #d97706;
  --amber-l:    #fffbeb;
  --green:      #059669;
  --green-l:    #ecfdf5;
  --purple:     #7c3aed;
  --purple-l:   #f5f3ff;
  --red:        #e11d48;
  --red-l:      #fff1f2;
  --wa:         #25d366;
  --wa-d:       #1ebe5d;
  --orange:     #ea580c;

  /* Directory Brand */
  --dir-primary:   #1e1b4b;
  --dir-secondary: #312e81;
  --dir-accent:    #f59e0b;

  /* Backgrounds */
  --bg:         #f0f4f8;
  --bg-2:       #e8edf5;
  --bg-card:    #ffffff;
  --white:      #ffffff;

  /* Borders */
  --border:     #e2e8f0;
  --border-2:   #cbd5e1;

  /* Text */
  --text:       #0f172a;
  --text-2:     #1e293b;
  --text-3:     #475569;
  --text-4:     #94a3b8;

  /* Shadows */
  --sh-xs:      0 1px 2px rgba(15,23,42,.06);
  --sh-sm:      0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sh:         0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --sh-lg:      0 16px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --sh-xl:      0 32px 64px rgba(15,23,42,.12), 0 8px 24px rgba(15,23,42,.07);
  --sh-blue:    0 8px 28px rgba(37,99,235,.28);
  --sh-wa:      0 8px 24px rgba(37,211,102,.35);
  --sh-amber:   0 8px 24px rgba(245,158,11,.35);
  --sh-purple:  0 8px 24px rgba(124,58,237,.35);

  /* Typography */
  --font-h:     'Plus Jakarta Sans', sans-serif;
  --font-b:     'Outfit', sans-serif;
  --font-art:   'Lora', serif;

  /* Spacing */
  --r:          10px;
  --r-lg:       16px;
  --r-xl:       24px;
  --r-2xl:      32px;

  /* Animation */
  --tr:         0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-spring:  0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── BASE ── */
html  { scroll-behavior: smooth; font-size: 16px; -webkit-tap-highlight-color: transparent; }
body  { font-family: var(--font-b); background: var(--bg); color: var(--text); line-height: 1.65; overflow-x: hidden; min-height: 100vh; }
h1, h2, h3, h4, h5 { font-family: var(--font-h); line-height: 1.2; color: var(--text); letter-spacing: -0.02em; }
a    { color: inherit; text-decoration: none; }
img  { max-width: 100%; height: auto; }
button { cursor: pointer; font-family: var(--font-b); }

/* Scrollbar */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 4px; }

/* ── LAYOUT CONTAINERS ── */
.container    { max-width: 1220px; margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 860px;  margin: 0 auto; padding: 0 20px; }
.section      { padding: 88px 0; position: relative; }
.section-alt  { background: var(--bg-2); }

/* ── TYPOGRAPHY HELPERS ── */
.section-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-b); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-l); border: 1px solid var(--blue-m);
  padding: 5px 13px; border-radius: 100px; margin-bottom: 14px;
}
.section-label::before { content: ''; width: 5px; height: 5px; background: var(--blue); border-radius: 50%; flex-shrink: 0; }
.section-title  { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; margin-bottom: 14px; }
.section-title span { color: var(--blue); }
.section-sub    { font-size: 1rem; color: var(--text-3); max-width: 540px; line-height: 1.8; }
.text-center    { text-align: center; }
.text-center .section-sub { margin: 0 auto; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-b); font-weight: 600; font-size: .88rem;
  padding: 11px 22px; border-radius: 100px; border: none;
  cursor: pointer; text-decoration: none; transition: var(--tr); white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn-blue   { background: var(--blue);   color: #fff; box-shadow: var(--sh-blue); }
.btn-blue:hover   { background: var(--blue-d);  transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37,99,235,.38); }
.btn-amber  { background: var(--amber);  color: #fff; box-shadow: var(--sh-amber); }
.btn-amber:hover  { background: var(--amber-d); transform: translateY(-2px); }
.btn-teal   { background: var(--teal);   color: #fff; box-shadow: 0 6px 20px rgba(8,145,178,.3); }
.btn-teal:hover   { background: var(--teal-d);  transform: translateY(-2px); }
.btn-purple { background: var(--purple); color: #fff; box-shadow: var(--sh-purple); }
.btn-purple:hover { background: #6d28d9;          transform: translateY(-2px); }
.btn-green  { background: var(--green);  color: #fff; box-shadow: 0 6px 20px rgba(5,150,105,.3); }
.btn-green:hover  { background: #047857;          transform: translateY(-2px); }
.btn-outline { background: #fff; color: var(--text-2); border: 1.5px solid var(--border-2); box-shadow: var(--sh-sm); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--sh); }

/* WhatsApp button */
.btn-wa {
  background: linear-gradient(135deg, var(--wa), var(--wa-d));
  color: #fff; box-shadow: var(--sh-wa);
  animation: waPulse 2.5s ease-in-out infinite;
}
.btn-wa:hover { transform: translateY(-2px) scale(1.03); animation: none; box-shadow: 0 12px 28px rgba(37,211,102,.5); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,.35); }
  50%       { box-shadow: 0 6px 0 8px rgba(37,211,102,.1), 0 6px 20px rgba(37,211,102,.35); }
}

/* Animated List Business button */
.btn-list-anim {
  background: linear-gradient(135deg, var(--purple), #6d28d9);
  color: #fff;
  animation: listPulse 2.5s ease-in-out infinite;
}
.btn-list-anim:hover { transform: translateY(-2px) scale(1.03); animation: none; box-shadow: 0 12px 28px rgba(124,58,237,.5); }
@keyframes listPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(124,58,237,.35); }
  50%       { box-shadow: 0 6px 0 8px rgba(124,58,237,.1), 0 6px 20px rgba(124,58,237,.35); }
}

/* Animated Get Website button */
.btn-web-anim {
  background: linear-gradient(135deg, var(--amber), var(--orange));
  color: #fff;
  animation: webGlow 2.5s ease-in-out infinite;
}
.btn-web-anim:hover { transform: translateY(-2px) scale(1.03); animation: none; box-shadow: 0 12px 28px rgba(245,158,11,.5); }
@keyframes webGlow {
  0%, 100% { box-shadow: 0 6px 20px rgba(245,158,11,.4); }
  50%       { box-shadow: 0 6px 0 9px rgba(245,158,11,.1), 0 6px 20px rgba(245,158,11,.4); }
}

/* Button card shine effect */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ''; position: absolute; top: -50%; left: -60%;
  width: 40%; height: 200%; background: rgba(255,255,255,.25);
  transform: skewX(-20deg); animation: btnShine 3s 1s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 100% { left: -60%; opacity: 0; }
  40%       { opacity: 1; }
  70%       { left: 130%; opacity: 0; }
}

/* Button sizes */
.btn-sm  { padding: 8px 16px; font-size: .8rem; }
.btn-lg  { padding: 14px 28px; font-size: .95rem; }
.btn-xl  { padding: 16px 32px; font-size: 1rem; }
.btn-full{ width: 100%; justify-content: center; }

/* ── CARDS ── */
.card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: var(--tr);
}
.card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: var(--blue-m); }

/* ── FORMS ── */
.form-group { margin-bottom: 13px; }
.form-group label {
  display: block; font-family: var(--font-b); font-size: .73rem;
  font-weight: 600; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 5px;
}
.form-group label .req { color: var(--red); }
.form-control {
  width: 100%; background: #f8f9fc; border: 1.5px solid var(--border);
  color: var(--text); font-family: var(--font-b); font-size: .875rem;
  padding: 10px 13px; border-radius: var(--r); outline: none; transition: var(--tr);
}
.form-control:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.form-control::placeholder { color: var(--text-4); }
select.form-control {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-color: #f8f9fc;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── TOP BAR ── */
.top-bar { background: #0f172a; color: #94a3b8; font-family: var(--font-b); font-size: .78rem; height: 36px; display: flex; align-items: center; position: relative; z-index: 101; }
.top-bar-inner { max-width: 1220px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.top-left  { display: flex; align-items: center; gap: 12px; }
.top-social { display: flex; gap: 7px; }
.top-social a { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: .68rem; color: #64748b; text-decoration: none; transition: .2s; border-radius: 4px; }
.top-social a:hover { color: #fff; }
.top-social .t-fb:hover { color: #1877f2; } .top-social .t-ig:hover { color: #e1306c; }
.top-social .t-li:hover { color: #0a66c2; } .top-social .t-yt:hover { color: red; }
.top-social .t-wa:hover  { color: #25d366; }
.top-divider { width: 1px; height: 14px; background: #334155; }
.top-contact { display: flex; align-items: center; gap: 14px; }
.top-contact a { display: flex; align-items: center; gap: 5px; color: #64748b; text-decoration: none; transition: .2s; white-space: nowrap; }
.top-contact a:hover { color: #fff; }
.top-contact a i { color: #60a5fa; font-size: .65rem; }
.top-right  { display: flex; gap: 0; }
.top-nav-link { color: #64748b; text-decoration: none; font-size: .72rem; font-weight: 500; padding: 3px 10px; border-left: 1px solid #1e293b; transition: .2s; white-space: nowrap; }
.top-nav-link:first-child { border-left: none; }
.top-nav-link:hover { color: #fff; }

/* ── MAIN HEADER ── */
.site-header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.94); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid transparent;
  transition: var(--tr);
}
.site-header.scrolled { background: rgba(255,255,255,.98); border-bottom-color: var(--border); box-shadow: 0 2px 20px rgba(15,23,42,.07); }
.header-inner { max-width: 1220px; margin: 0 auto; padding: 0 20px; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-blue); flex-shrink: 0; }
.logo-text { font-family: var(--font-h); font-weight: 800; font-size: 1.15rem; color: var(--text); letter-spacing: -0.01em; }
.logo-dot  { color: var(--blue); }
.main-nav  { display: flex; gap: 2px; align-items: center; }
.nav-link  { font-size: .9rem; font-weight: 500; color: var(--text-3); text-decoration: none; padding: 7px 13px; border-radius: 8px; transition: var(--tr); }
.nav-link:hover, .nav-link.active { color: var(--blue); background: var(--blue-l); }
.nav-link.active { font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* ── 3 EQUAL HEADER CTA BUTTONS ── */
.btn-hdr-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-b); font-weight: 700; font-size: .8rem;
  padding: 9px 16px; border-radius: 100px; border: none; cursor: pointer;
  text-decoration: none; transition: var(--tr); white-space: nowrap; min-width: 120px;
}
.btn-hdr-list {
  background: linear-gradient(135deg, var(--purple), #6d28d9); color: #fff;
  animation: listHdrP 2.5s ease-in-out infinite;
}
.btn-hdr-list:hover { transform: translateY(-2px) scale(1.03); animation: none; box-shadow: 0 8px 22px rgba(124,58,237,.5); }
@keyframes listHdrP {
  0%, 100% { box-shadow: 0 4px 14px rgba(124,58,237,.35); }
  50%       { box-shadow: 0 4px 0 8px rgba(124,58,237,.1), 0 4px 14px rgba(124,58,237,.35); }
}
.btn-hdr-card {
  background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff;
  box-shadow: 0 4px 14px rgba(8,145,178,.3); position: relative; overflow: hidden;
}
.btn-hdr-card::after {
  content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
  background: rgba(255,255,255,.22); transform: skewX(-20deg);
  animation: cardSh 3s 1s ease-in-out infinite;
}
@keyframes cardSh { 0%, 100% { left: -60%; opacity: 0; } 40% { opacity: 1; } 70% { left: 130%; opacity: 0; } }
.btn-hdr-card:hover { background: linear-gradient(135deg, var(--teal-d), #155e75); transform: translateY(-2px); }
.btn-hdr-wa {
  background: linear-gradient(135deg, var(--wa), var(--wa-d)); color: #fff;
  animation: waHdrP 2.5s ease-in-out infinite;
}
.btn-hdr-wa:hover { transform: translateY(-2px); animation: none; }
@keyframes waHdrP {
  0%, 100% { box-shadow: 0 4px 14px rgba(37,211,102,.35); }
  50%       { box-shadow: 0 4px 0 8px rgba(37,211,102,.1), 0 4px 14px rgba(37,211,102,.35); }
}
.btn-make-web {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-b); font-weight: 700; font-size: .8rem;
  padding: 9px 16px; border-radius: 100px;
  background: linear-gradient(135deg, var(--amber), var(--orange)); color: #fff;
  text-decoration: none; transition: var(--tr); white-space: nowrap;
  box-shadow: 0 4px 14px rgba(245,158,11,.35);
}
.btn-make-web:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(245,158,11,.5); }

/* ── MOBILE TOGGLE ── */
.mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--tr); }
.mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; flex-direction: column; padding: 14px 20px 22px; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 12px 32px rgba(15,23,42,.1); }
.mobile-nav.open  { display: flex; }
.mobile-nav-link  { font-size: .9rem; font-weight: 500; color: var(--text-3); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--border); transition: .2s; }
.mobile-nav-link:hover { color: var(--blue); }

/* ── DIRECTORY HEADER (different style) ── */
.dir-header { background: linear-gradient(135deg, var(--dir-primary), var(--dir-secondary)); position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 24px rgba(30,27,75,.4); }
.dir-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dir-logo      { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.dir-logo-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--amber), var(--orange)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(245,158,11,.4); flex-shrink: 0; }
.dir-logo-name { font-family: var(--font-h); font-weight: 800; font-size: 1.1rem; color: #fff; }
.dir-logo-tag  { font-size: .6rem; color: rgba(255,255,255,.6); display: block; letter-spacing: .08em; text-transform: uppercase; margin-top: -2px; }
.dir-nav-link  { font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.65); text-decoration: none; padding: 7px 13px; border-radius: 8px; transition: var(--tr); }
.dir-nav-link:hover, .dir-nav-link.cur { color: #fff; background: rgba(255,255,255,.12); }
.dir-nav-link.cur { font-weight: 600; }
/* Directory 3 equal buttons */
.dir-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-b); font-weight: 700; font-size: .82rem; padding: 9px 16px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none; transition: var(--tr); white-space: nowrap; min-width: 115px; }
.dir-btn-web {
  background: linear-gradient(135deg, var(--amber), var(--orange)); color: #fff;
  animation: webGlow 2.5s ease-in-out infinite;
}
.dir-btn-web:hover { transform: translateY(-2px) scale(1.03); animation: none; box-shadow: 0 10px 28px rgba(245,158,11,.55); }
.dir-btn-card {
  background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff;
  box-shadow: 0 4px 14px rgba(8,145,178,.3); position: relative; overflow: hidden;
}
.dir-btn-card::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: rgba(255,255,255,.2); transform: skewX(-20deg); animation: btnSh 3s 1.5s ease-in-out infinite; }
@keyframes btnSh { 0%, 100% { left: -60%; opacity: 0; } 40% { opacity: 1; } 70% { left: 130%; opacity: 0; } }
.dir-btn-card:hover { transform: translateY(-2px); }
.dir-btn-wa {
  background: var(--wa); color: #fff;
  animation: waBP 2.5s ease-in-out infinite;
}
.dir-btn-wa:hover { background: var(--wa-d); transform: translateY(-2px); animation: none; }
@keyframes waBP { 0%, 100% { box-shadow: 0 4px 14px rgba(37,211,102,.35); } 50% { box-shadow: 0 4px 0 8px rgba(37,211,102,.1), 0 4px 14px rgba(37,211,102,.35); } }
.dir-btn-list {
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); color: #fff;
  backdrop-filter: blur(8px); animation: listBtnA 2s ease-in-out infinite alternate;
}
.dir-btn-list:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); animation: none; }
@keyframes listBtnA { from { border-color: rgba(255,255,255,.25); } to { border-color: rgba(245,158,11,.6); box-shadow: 0 0 12px rgba(245,158,11,.2); } }

/* ── FLOATING ELEMENTS ── */
.float-get-quote {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 990;
  writing-mode: vertical-rl; text-orientation: mixed;
  background: linear-gradient(180deg, var(--amber), var(--orange));
  color: #fff; font-family: var(--font-h); font-weight: 800; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 20px 10px; border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 20px rgba(245,158,11,.45);
  cursor: pointer; text-decoration: none; transition: var(--tr);
  animation: fqAnim 3s ease-in-out infinite alternate;
}
.float-get-quote:hover { padding-right: 14px; box-shadow: -8px 0 28px rgba(245,158,11,.6); }
@keyframes fqAnim { from { box-shadow: -4px 0 20px rgba(245,158,11,.45); } to { box-shadow: -7px 0 26px rgba(245,158,11,.6); } }

.wa-float {
  position: fixed; bottom: 76px; right: 18px; z-index: 995;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #1ebe5d);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; text-decoration: none;
  box-shadow: 0 4px 18px rgba(37,211,102,.5);
  animation: waFloat 2s ease-in-out infinite; transition: transform .25s;
}
.wa-float:hover { transform: scale(1.1); }
@keyframes waFloat { 0%, 100% { box-shadow: 0 4px 18px rgba(37,211,102,.5); } 50% { box-shadow: 0 4px 0 8px rgba(37,211,102,.12), 0 4px 18px rgba(37,211,102,.5); } }

.go-top {
  position: fixed; bottom: 18px; right: 18px; z-index: 994;
  width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; box-shadow: var(--sh-blue);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: .3s;
}
.go-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.go-top:hover { background: var(--blue-d); transform: translateY(-3px); }

/* ── AD SLOTS ── */
.ad-slot {
  background: var(--bg-2); border: 1.5px dashed var(--border-2);
  border-radius: var(--r-lg); min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-4); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 12px 0; position: relative;
}
.ad-slot::before { content: 'Advertisement'; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: .58rem; letter-spacing: .1em; color: var(--text-4); }
.ad-banner  { min-height: 100px; }
.ad-rect    { min-height: 250px; }
.ad-sidebar { min-height: 250px; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b; color: #fff; font-size: .82rem; font-weight: 600;
  padding: 10px 22px; border-radius: 100px; box-shadow: var(--sh-lg);
  opacity: 0; transition: .3s; z-index: 9999; white-space: nowrap; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── REVEAL ANIMATIONS ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .header-inner { gap: 8px; }
  .btn-make-web { display: none; }
}
@media (max-width: 900px) {
  .main-nav, .btn-hdr-list, .btn-hdr-card { display: none; }
  .mobile-toggle { display: flex; }
  .top-right, .top-contact { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
}
@media (max-width: 600px) {
  .section-title { font-size: 1.75rem; }
  .float-get-quote { display: none; }
}

/* ══════════════════════════════════════════════════════════
   OFFER POPUP MODAL — Added Fix
   ══════════════════════════════════════════════════════════ */
.popup-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 9999 !important;
  background: rgba(15,23,42,.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.popup-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
}
.popup-card {
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 32px 80px rgba(15,23,42,.25);
  transform: scale(.92);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.popup-overlay.open .popup-card {
  transform: scale(1);
}
.popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}
.popup-close:hover { background: #e2e8f0; color: #0f172a; }
.popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg,#fff7ed,#ffedd5);
  border: 1px solid #fed7aa;
  color: #c2410c;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.popup-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }
.popup-h {
  font-family: var(--font-h);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}
.popup-s {
  font-size: .88rem;
  color: var(--text-3);
  line-height: 1.75;
  margin-bottom: 22px;
}
.popup-dismiss {
  background: none;
  border: none;
  color: var(--text-4);
  font-family: var(--font-b);
  font-size: .75rem;
  cursor: pointer;
  margin-top: 12px;
  display: block;
  width: 100%;
  text-decoration: underline;
  transition: color .2s;
}
.popup-dismiss:hover { color: var(--text-3); }
.btn-full { display: flex; width: 100%; justify-content: center; margin-bottom: 9px; margin-top: 9px;}

/* ── FOOTER COMPLETE FIX ── */
.site-footer { background: #0f172a; color: #94a3b8; }
.footer-border-top { height: 4px; background: linear-gradient(90deg,var(--teal),var(--blue),var(--purple)); }
.footer-newsletter {
  background: linear-gradient(135deg,#1e293b,#0f172a);
  padding: 32px 0;
  border-bottom: 1px solid #1e293b;
}
.footer-newsletter-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}
.footer-newsletter h3 {
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.footer-newsletter p { font-size: .85rem; color: #64748b; margin-bottom: 16px; }
.nl-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.nl-input {
  flex: 1;
  background: #1e293b;
  border: 1.5px solid #334155;
  color: #fff;
  font-family: var(--font-b);
  font-size: .85rem;
  padding: 11px 14px;
  border-radius: 100px;
  outline: none;
  transition: .3s;
}
.nl-input:focus { border-color: var(--teal); }
.nl-input::placeholder { color: #475569; }
.footer-main { padding: 52px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-col h4 {
  font-family: var(--font-h);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #e2e8f0;
  margin-bottom: 16px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links li a {
  font-size: .83rem;
  color: #64748b;
  text-decoration: none;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-links li a:hover { color: #94a3b8; }
.footer-about { font-size: .83rem; color: #64748b; line-height: 1.75; margin-bottom: 16px; }
.footer-socials { display: flex; gap: 8px; margin-bottom: 16px; }
.footer-soc-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;border: 1px solid #334155;
  font-size: .85rem; color: #fff; text-decoration: none; transition: .2s;
}
.footer-soc-icon:hover { transform: translateY(-3px); }
.footer-soc-icon.facebook  { background: #1877f2; }
.footer-soc-icon.instagram { background: linear-gradient(135deg,#e1306c,#833ab4); }
.footer-soc-icon.linkedin  { background: #0a66c2; }
.footer-soc-icon.youtube   { background: #ff0000; }
.footer-soc-icon.whatsapp  { background: #25d366; }
.footer-bottom {
  border-top: 1px solid #1e293b;
  padding: 20px 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy { font-size: .8rem; color: #475569; }
.footer-copy strong { color: #94a3b8; }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { font-size: .78rem; color: #475569; text-decoration: none; transition: color .2s; }
.footer-bottom-links a:hover { color: #94a3b8; }
.footer-trust { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.footer-trust-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 600; color: #475569;
  background: #1e293b; border: 1px solid #334155;
  padding: 4px 10px; border-radius: 100px;
}
.footer-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 14px; }
.footer-logo .logo-mark { width: 32px; height: 32px; border-radius: 8px; }
.footer-logo .logo-text { font-family: var(--font-h); font-weight: 800; font-size: 1rem; color: #e2e8f0; }
.footer-logo .logo-dot { color: var(--teal); }
.footer-contact-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #64748b; margin-bottom: 8px; text-decoration: none; }
.footer-contact-item i { color: var(--teal); font-size: .75rem; width: 14px; }
.footer-contact-item:hover { color: #94a3b8; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .nl-form { flex-direction: column; } }

/* Utility */
.hidden { display: none !important; visibility: hidden !important; }

/* ══════════════════════════════════════════════════════
   BUSINESS DIRECTORY PAGE CSS
   ══════════════════════════════════════════════════════ */
.search-hero{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#1e1b4b 100%);padding:52px 0 64px;position:relative;overflow:hidden;text-align:center}
.sh-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;pointer-events:none}
.sh-b1{width:400px;height:400px;background:radial-gradient(circle,#6366f1,transparent);top:-100px;right:-60px}
.sh-b2{width:350px;height:350px;background:radial-gradient(circle,#ec4899,transparent);bottom:-60px;left:-50px}
.sh-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.9);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:100px;margin-bottom:14px;position:relative;z-index:1}
.sh-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 20px}
.sh-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:-.03em}
.sh-sub{font-size:.95rem;color:rgba(255,255,255,.7);margin-bottom:24px;line-height:1.75}
.sh-stats{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.sh-stat{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.75);font-size:.88rem}
.sh-stat strong{color:#fff;font-weight:700}

.sf-wrap{flex:1;min-width:160px;position:relative}
.sf-lbl{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:.82rem;color:rgba(255,255,255,.5);pointer-events:none}
.search-hero select,.search-hero input[type=text]{width:100%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);color:#0f172a;font-family:var(--font-b);font-size:.85rem;padding:12px 14px;border-radius:100px;outline:none;backdrop-filter:blur(8px)}
.search-hero select option{background:#1e1b4b;color:#fff}
.search-hero input[type=text]::placeholder{color:#565b66;}
.sub-btn{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-family:var(--font-b);font-weight:700;font-size:.9rem;padding:12px 24px;border-radius:100px;border:none;cursor:pointer;transition:.28s;white-space:nowrap}
.sub-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.4)}
/* Top Category Tabs */
.top-cat-tabs{display:flex;gap:8px;overflow-x:auto;padding:20px 20px 0;max-width:1220px;margin:0 auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.top-cat-tabs::-webkit-scrollbar{display:none}
.scat-item{display:flex;align-items:center;gap:7px;padding:9px 18px;background:#fff;border:1.5px solid var(--border);border-radius:100px;font-size:.82rem;font-weight:600;color:var(--text-3);cursor:pointer;white-space:nowrap;transition:var(--tr);flex-shrink:0}
.scat-item:hover,.scat-item.active{border-color:var(--purple);color:var(--purple);background:var(--purple-l)}
.scat-item i{font-size:.8rem}
/* Directory body layout */
.dir-body{max-width:1220px;margin:0 auto;padding:28px 20px 80px;display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.dir-main{min-width:0}
.results-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1.5px solid var(--border)}
.results-count{font-family:var(--font-h);font-size:.95rem;font-weight:700}
.sort-wrap{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-3)}
.sort-select{background:#f8f9fc;border:1.5px solid var(--border);color:var(--text);font-family:var(--font-b);font-size:.82rem;padding:7px 12px;border-radius:var(--r);outline:none}
/* Subcategories */
.subcats{display:none}.subcats.active{display:block}
.subcat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0 16px}
.scat-grid{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 14px}
/* Business Card */
.biz-list{display:flex;flex-direction:column;gap:16px}
.biz-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);transition:var(--tr)}
.biz-card:hover{box-shadow:var(--sh-lg);transform:translateY(-3px)}
.biz-card-hdr{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 14px}
.biz-logo{width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.biz-name{font-family:var(--font-h);font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:3px}
.biz-cat-badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;padding:2px 9px;border-radius:100px;margin-bottom:5px}
.biz-addr{font-size:.8rem;color:var(--text-3);display:flex;align-items:center;gap:5px}
.biz-addr i{font-size:.72rem;color:var(--text-4)}
.biz-contact-icons{display:flex;gap:8px;padding:0 20px 14px}
.biz-btn.wa-biz { border-color: #25d366;color: #059669; background: var(--green-l);}
.biz-btn {flex: 1; display:inline-flex; align-items: center;justify-content: center; gap: 6px;  padding: 9px 12px;  border-radius: var(--r);border: 1.5px solid var(--border);font-family: var(--font-b);    font-size: .78rem;font-weight: 600; cursor: pointer; text-decoration: none; color: var(--text-3); background: #fff;transition: var(--tr);}
.biz-btn.site{border-color: var(--blue);color: var(--blue) #2563eb;background: var(--blue-l);}
.biz-btn.wa-biz:hover {background: #dcfce7;border-color: #16a34a;}
.biz-btn.site:hover {background: var(--blue-m);}
.biz-btn:hover {background: var(--blue-m);border-color: var(--blue);}
.bci{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;text-decoration:none;transition:.2s}
.bci:hover{transform:scale(1.1) translateY(-2px)}
.bci.phone{background:rgba(37,211,102,.15);color:#059669}
.bci.wa{background:rgba(37,211,102,.2);color:#25d366}
.bci.mail{background:rgba(239,68,68,.15);color:#e11d48}
.bci.web{background:rgba(8,145,178,.15);color:#0891b2}
.biz-desc{font-size:.82rem;color:var(--text-3);line-height:1.7;padding:0 20px 14px;border-top:1px solid var(--border);padding-top:12px}
.biz-products{padding:0 20px 14px;display:flex;gap:6px;flex-wrap:wrap}
.biz-product-tag{font-size:.72rem;background:var(--bg-2);border:1px solid var(--border);color:var(--text-3);padding:3px 10px;border-radius:100px}
.biz-footer{background:#f8f9fc;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border)}
.biz-soc{display:flex;gap:7px}
.bs-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.75rem;text-decoration:none;transition:.2s}
.bs-icon:hover{transform:translateY(-2px) scale(1.1)}
.bs-icon.fb{background:rgba(24,119,242,.15);color:#1877f2}
.bs-icon.ig{background:rgba(225,48,108,.15);color:#e1306c}
.bs-icon.li{background:rgba(10,102,194,.15);color:#0a66c2}
.bs-icon.yt{background:rgba(255,0,0,.15);color:#ff0000}
.bs-icon.wa{background:rgba(37,211,102,.15);color:#25d366}
.lca-btn,.lca-web{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-b);font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:100px;text-decoration:none;transition:.2s;border:none;cursor:pointer}
.lca-btn{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff}
.lca-web{background:var(--bg);border:1.5px solid var(--border);color:var(--text-3)}
.lca-web:hover{border-color:var(--blue);color:var(--blue)}
/* Empty state */
.list-cta{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1.5px solid #ddd6fe;border-radius:var(--r-xl);padding:32px;text-align:center}
.list-cta-text h3{font-family:var(--font-h);font-size:1.15rem;font-weight:800;margin-bottom:7px}
.list-cta-text p{font-size:.88rem;color:var(--text-3);line-height:1.75;margin-bottom:18px}
.list-cta-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* Sidebar */
.sb-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
.sb-hdr{padding:14px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.sb-hdr h4{font-family:var(--font-h);font-size:.85rem;font-weight:700}
.sb-body{padding:14px 16px}
.dir-sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:82px}
.sb-hdr i{color:var(--amber)}
.sb-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.35)}
.top10-list{display:flex;flex-direction:column;gap:8px}
.top10-item{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.82rem;cursor:pointer;transition:.2s}
.top10-item:last-child{border-bottom:none}
.top10-item:hover{color:var(--blue)}
.top10-rank,.top10-num{font-family:var(--font-h);font-size:.78rem;font-weight:800;width:20px;text-align:center;color:var(--text-4);flex-shrink:0}
.top10-num.gold{color:var(--amber)}
.pi{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pg-btn{padding:7px 13px;border-radius:var(--r);border:1.5px solid var(--border);background:#fff;color:var(--text-3);font-family:var(--font-b);font-size:.82rem;cursor:pointer;transition:.2s}
.pg-btn:hover,.pg-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
.pg-btn.active{background:var(--blue);color:#fff;font-weight:700}

/* ══════════════════════════════════════════════════════
   SEO TOOLS PAGE CSS
   ══════════════════════════════════════════════════════ */
.st-hero{background:linear-gradient(135deg,#060c18 0%,#0f1f3d 50%,#060c18 100%);padding:64px 0 80px;position:relative;overflow:hidden;text-align:center}
.st-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(99,102,241,.08) 1px,transparent 1px);background-size:28px 28px}
.st-blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.st-b1{width:500px;height:500px;background:radial-gradient(circle,rgba(37,99,235,.25),transparent);top:-120px;right:-80px}
.st-b2{width:400px;height:400px;background:radial-gradient(circle,rgba(124,58,237,.2),transparent);bottom:-80px;left:-60px}
.st-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.4);color:#a5b4fc;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:16px;position:relative;z-index:1}
.search-wrap{max-width:560px;margin:28px auto 0;position:relative;z-index:1}
.st-search{width:100%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);color:#fff;font-family:var(--font-b);font-size:.95rem;padding:14px 52px 14px 18px;border-radius:100px;outline:none;backdrop-filter:blur(12px);transition:.3s}
.st-search:focus{border-color:rgba(129,140,248,.6);background:rgba(255,255,255,.12)}
.st-search::placeholder{color:rgba(255,255,255,.4)}
.search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:1rem;pointer-events:none}
/* Category grid */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-bottom:56px}
.cat-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px 16px;text-align:center;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden;text-decoration:none;display:block}
.cat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--cc,var(--blue));transform:scaleX(0);transform-origin:left;transition:.3s}
.cat-card:hover::after,.cat-card.active::after{transform:scaleX(1)}
.cat-card:hover{box-shadow:0 20px 48px rgba(15,23,42,.12);transform:translateY(-6px);border-color:var(--cc,var(--blue))}
.cat-card.active{border-color:var(--cc,var(--blue));box-shadow:0 20px 48px rgba(15,23,42,.14);transform:translateY(-4px)}
.cat-icon{width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.35rem;transition:.3s}
.cat-card:hover .cat-icon,.cat-card.active .cat-icon{transform:scale(1.1) rotate(-5deg)}
.cat-title{font-family:var(--font-h);font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:5px;line-height:1.3}
.cat-desc{font-size:.7rem;color:var(--text-3);line-height:1.5;margin-bottom:9px}
.cat-count{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:100px;border:1px solid currentColor}
/* Tools grid */
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px}
.tool-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:18px 16px;transition:var(--tr);text-decoration:none;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.tool-card:hover{box-shadow:0 16px 40px rgba(15,23,42,.12);transform:translateY(-5px);border-color:var(--tool-color,var(--blue))}
.tool-icon{width:44px;height:44px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;transition:.3s}
.tool-card:hover .tool-icon{transform:scale(1.1)}
.tool-title{font-family:var(--font-h);font-size:.88rem;font-weight:700;color:var(--text);line-height:1.3}
.tool-desc{font-size:.75rem;color:var(--text-3);line-height:1.6;flex:1}
.tool-arrow{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;margin-top:4px;transition:.3s}
.tool-card:hover .tool-arrow{gap:9px}
.tool-badge{position:absolute;top:12px;right:12px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:100px;background:var(--green-l,#ecfdf5);color:#059669}
.section-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.snav-btn{padding:7px 16px;border-radius:100px;font-size:.8rem;font-weight:600;border:1.5px solid var(--border);background:#fff;color:var(--text-3);cursor:pointer;transition:var(--tr);box-shadow:var(--sh-sm)}
.snav-btn:hover,.snav-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
.snav-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.tools-cta{background:linear-gradient(135deg,#060c18,#0f1f3d);border-radius:28px;padding:48px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden;margin-bottom:28px}
.tools-cta::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:22px 22px}
.cta-text{position:relative;z-index:1}
.cta-text h3{font-family:var(--font-h);font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:7px}
.cta-text p{font-size:.88rem;color:rgba(255,255,255,.65);max-width:480px;line-height:1.7}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.results-bar.tools-hdr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-bottom:16px;border-bottom:1.5px solid var(--border);margin-bottom:20px}
@media(max-width:1100px){.tools-grid{grid-template-columns:repeat(3,1fr)}.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.tools-grid{grid-template-columns:repeat(2,1fr)}.cat-grid{grid-template-columns:repeat(2,1fr)}.dir-body{grid-template-columns:1fr}.dir-sidebar{position:static}}
@media(max-width:560px){.tools-grid{grid-template-columns:1fr}.cat-grid{grid-template-columns:repeat(2,1fr)}.tools-cta{flex-direction:column;padding:28px 24px}}

/* ══════════════════════════════════════════════════════
   DIGITAL CARD PAGE CSS
   ══════════════════════════════════════════════════════ */
.tab-strip{display:flex;gap:0;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:4px;max-width:460px;margin:0 auto 32px;box-shadow:var(--sh-sm)}
.tab-btn{flex:1;padding:11px 14px;border-radius:calc(var(--r-xl) - 4px);font-family:var(--font-b);font-size:.85rem;font-weight:600;background:transparent;border:none;cursor:pointer;color:var(--text-3);transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:7px}
.tab-btn.active{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;box-shadow:0 4px 14px rgba(8,145,178,.35)}
.form-panel{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg)}
.fp-hdr{background:linear-gradient(135deg,var(--teal),var(--teal-d));padding:20px 24px}
.fp-hdr h2{font-family:var(--font-h);font-size:1.1rem;font-weight:800;color:#fff}
.fp-hdr p{font-size:.78rem;color:rgba(255,255,255,.8);margin-top:2px}
.fp-body{padding:22px 24px}
.f-sec{font-family:var(--font-h);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-4);margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.av-upload{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.av-prev{width:62px;height:62px;border-radius:50%;border:2px dashed var(--border-2);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;overflow:hidden;cursor:pointer;transition:var(--tr);flex-shrink:0}
.av-prev:hover{border-color:var(--teal);background:var(--teal-l)}
.theme-row{display:flex;gap:8px;flex-wrap:wrap;padding:2px}
.tsw{width:36px;height:36px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:var(--tr);position:relative;overflow:hidden}
.tsw .tsw-l{position:absolute;left:0;top:0;width:50%;height:100%}
.tsw .tsw-r{position:absolute;right:0;top:0;width:50%;height:100%}
.tsw.a{border-color:var(--text-2);transform:scale(1.2);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--text-2)}
.tsw.a::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);font-weight:800}
.gen-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;font-family:var(--font-b);font-weight:700;font-size:.95rem;padding:14px;border-radius:var(--r-lg);border:none;cursor:pointer;transition:var(--tr);margin-top:8px;box-shadow:0 6px 20px rgba(8,145,178,.4)}
.gen-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(8,145,178,.5)}
.dc-layout{max-width:1180px;margin:0 auto;padding:0 20px 80px;display:grid;grid-template-columns:480px 1fr;gap:44px;align-items:start}
.preview-panel{position:sticky;top:82px}
.prev-label{font-family:var(--font-h);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-4);text-align:center;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.prev-label::before,.prev-label::after{content:'';flex:1;height:1px;background:var(--border)}
.digi-card-outer{max-width:380px;margin:0 auto}
.digi-card{width:100%;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(15,23,42,.2);position:relative;font-family:var(--font-b);transition:box-shadow .4s,transform .3s}
.digi-card:hover{box-shadow:0 36px 72px rgba(15,23,42,.28);transform:translateY(-4px)}
.dc-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.dc-bg::before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;border:50px solid rgba(255,255,255,.07);top:-80px;right:-60px}
.dc-bg::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;border:36px solid rgba(255,255,255,.05);bottom:-50px;left:-40px}
.dc-pattern{position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:18px 18px}
.dc-inner{position:relative;z-index:2;padding:22px 20px 18px}
.dc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.dc-avatar{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.4);background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.8rem;overflow:hidden;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.dc-avatar img{width:100%;height:100%;object-fit:cover}
.dc-brand-link{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;transition:opacity .2s}
.dc-brand-link:hover{opacity:.8}
.dc-brand-name{font-family:var(--font-h);font-size:.72rem;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.dc-brand-sub{font-size:.55rem;color:rgba(255,255,255,.55);margin-top:1px}
.dc-brand-logo{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-top:5px;margin-left:auto}
.dc-name{font-family:var(--font-h);font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15;margin-bottom:3px}
.dc-profession{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:2px}
.dc-desc-text{font-size:.73rem;color:rgba(255,255,255,.7);line-height:1.65;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;margin-bottom:10px;font-style:italic}
.dc-div{border:none;border-top:1px solid rgba(255,255,255,.12);margin:12px 0}
.dc-contact-icons{display:flex;gap:8px;margin-bottom:12px}
.dc-ci{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;text-decoration:none;transition:.2s;border:1.5px solid transparent}
.dc-ci:hover{transform:scale(1.1) translateY(-2px)}
.dc-ci.phone{background:rgba(37,211,102,.25);border-color:rgba(37,211,102,.4);color:#4ade80}
.dc-ci.maps{background:rgba(234,88,12,.25);border-color:rgba(234,88,12,.4);color:#fb923c}
.dc-ci.wa{background:rgba(37,211,102,.3);border-color:rgba(37,211,102,.45);color:#25d366}
.dc-ci.mail{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.35);color:#f87171}
.dc-ci.web{background:rgba(8,145,178,.3);border-color:rgba(8,145,178,.45);color:#67e8f9}
.dc-contact-text .dc-ct-row{display:flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(255,255,255,.85);margin-bottom:6px}
.dc-ct-row a{color:inherit;text-decoration:none}
.dc-company-block{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.dc-company-full{font-family:var(--font-h);font-size:.82rem;font-weight:700;color:#fff}
.dc-company-role{font-size:.7rem;color:rgba(255,255,255,.6)}
.dc-socials{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;padding-bottom:14px}
.dc-soc{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.78rem;text-decoration:none;transition:.2s;border:1.5px solid transparent}
.dc-soc:hover{transform:translateY(-3px) scale(1.1)}
.dc-soc.soc-li{background:rgba(10,102,194,.25);border-color:rgba(10,102,194,.4);color:#0a66c2}
.dc-soc.soc-fb{background:rgba(24,119,242,.25);border-color:rgba(24,119,242,.4);color:#1877f2}
.dc-soc.soc-ig{background:rgba(225,48,108,.22);border-color:rgba(225,48,108,.38);color:#e1306c}
.dc-soc.soc-yt{background:rgba(255,0,0,.22);border-color:rgba(255,0,0,.35);color:#ff0000}
.dc-soc.soc-wa{background:rgba(37,211,102,.25);border-color:rgba(37,211,102,.4);color:#25d366}
.dc-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dc-share-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:100px;font-size:.72rem;font-weight:600;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:.2s;font-family:var(--font-b)}
.dc-share-btn.wa{background:rgba(37,211,102,.3);border-color:rgba(37,211,102,.45)}
.dc-qr-box{width:48px;height:48px;background:rgba(255,255,255,.95);border-radius:8px;padding:3px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dc-link-strip{background:rgba(0,0,0,.18);margin:4px -2px -2px;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08)}
.dc-link-text{font-size:.65rem;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:5px}
.dc-link-text strong{color:rgba(255,255,255,.8);font-size:.7rem;display:block}
.dc-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;text-align:center;padding:32px}
.dc-placeholder i{font-size:2.8rem;color:rgba(255,255,255,.25);margin-bottom:12px}
.dc-placeholder p{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.65}
.card-actions{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.ca-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ca-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 14px;border-radius:var(--r-lg);font-family:var(--font-b);font-size:.82rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:var(--tr)}
.ca-btn.save{background:var(--green-l);color:var(--green);border:1.5px solid #a7f3d0}
.ca-btn.share-wa{background:linear-gradient(135deg,#25d366,#1ebe5d);color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.3)}
.ca-btn.share-wa:hover{transform:translateY(-2px)}
.ca-btn.qr-big{background:var(--blue-l);color:var(--blue);border:1.5px solid var(--blue-m)}
.ca-btn.copy-lnk{background:var(--purple-l);color:var(--purple);border:1.5px solid #ddd6fe}
.slink-box{background:#f8f9fc;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;display:flex;align-items:center;gap:9px}
.slink-icon{width:32px;height:32px;border-radius:8px;background:var(--teal-l);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:.85rem;flex-shrink:0}
.slink-body{flex:1;min-width:0}
.slink-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-4);margin-bottom:2px}
.slink-url{font-size:.75rem;color:var(--blue);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slink-copy{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:5px 11px;font-size:.72rem;font-weight:600;cursor:pointer;transition:.2s;font-family:var(--font-b)}
.scan-drop{border:2px dashed var(--border-2);border-radius:var(--r-xl);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;cursor:pointer;transition:var(--tr);background:var(--bg)}
.scan-drop:hover,.scan-drop.over{border-color:var(--purple);background:var(--purple-l)}
.scan-result{display:none;background:var(--green-l);border:1.5px solid #a7f3d0;border-radius:var(--r-lg);padding:16px;margin-top:14px}
.word-count{font-size:.7rem;text-align:right;margin-top:3px;color:var(--text-4)}
.word-count.warn{color:var(--amber)}.word-count.over{color:var(--red)}
.qr-dl{display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:#fff;border:none;border-radius:100px;padding:9px 18px;font-family:var(--font-b);font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s}
@media(max-width:960px){.dc-layout{grid-template-columns:1fr}.preview-panel{position:static}}

/* ══ CONTACT PAGE ══ */
.cfb-hdr{background:linear-gradient(135deg,var(--blue),var(--blue-d));padding:24px 28px}
.cfb-hdr h2{font-family:var(--font-h);font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:4px}
.cfb-hdr p{font-size:.82rem;color:rgba(255,255,255,.75)}
.cfb-body{padding:28px}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:.72rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.fg label .req{color:var(--red)}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fc{width:100%;background:#f8f9fc;border:1.5px solid var(--border);color:var(--text);font-family:var(--font-b);font-size:.875rem;padding:11px 14px;border-radius:var(--r);outline:none;transition:.28s}
.fc:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.fc::placeholder{color:var(--text-4)}
.submit-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;font-family:var(--font-b);font-weight:700;font-size:.95rem;padding:15px;border-radius:var(--r-lg);border:none;cursor:pointer;transition:.28s;box-shadow:0 6px 20px rgba(37,99,235,.4);margin-top:6px}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,99,235,.5)}
.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}
.form-note{font-size:.75rem;color:var(--text-4);text-align:center;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:5px}
.form-success{display:none;text-align:center;padding:40px 20px}
.fs-icon{width:72px;height:72px;border-radius:50%;background:var(--green-l);border:3px solid #a7f3d0;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.8rem}
.hours-row{display:flex;justify-content:space-between;font-size:.83rem;padding:7px 0;border-bottom:1px solid var(--border)}
.hours-row:last-child{border-bottom:none}
.hours-row .day{color:var(--text-3)}.hours-row .time{font-weight:600;color:var(--text-2)}
.hours-row .closed{color:var(--red)}
.faq-item{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);margin-bottom:10px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;font-family:var(--font-h);font-size:.95rem;font-weight:700;transition:.2s;gap:12px;background:none;border:none;width:100%;text-align:left}
.faq-q:hover{color:var(--blue)}
.faq-q i{font-size:.8rem;color:var(--text-4);transition:.3s;flex-shrink:0}
.faq-q.open i{transform:rotate(45deg);color:var(--blue)}
.faq-a{display:none;padding:0 22px 18px;font-size:.875rem;color:var(--text-3);line-height:1.8}
.faq-a.open{display:block}
.contact-method{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px;text-decoration:none;transition:.2s}
.contact-method:last-child{margin-bottom:0}
.cm-icon{width:40px;height:40px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.cm-top{font-size:.7rem;font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.cm-label{font-family:var(--font-h);font-size:.9rem;font-weight:700;color:var(--text);transition:.2s}
.cm-note{font-size:.75rem;color:var(--text-4);margin-top:1px}
.contact-method:hover .cm-label{color:var(--blue)}
.wa-card{background:linear-gradient(135deg,#25d366,#1ebe5d);border-radius:var(--r-xl);padding:22px 24px;display:flex;align-items:center;gap:16px}
.wa-card-icon{font-size:2.5rem;flex-shrink:0}
.wa-card h4{font-family:var(--font-h);font-size:1rem;font-weight:800;color:#fff;margin-bottom:4px}
.wa-card p{font-size:.8rem;color:rgba(255,255,255,.8);line-height:1.6;margin-bottom:12px}
.wa-card a{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#059669;font-family:var(--font-b);font-weight:700;font-size:.85rem;padding:9px 18px;border-radius:100px;text-decoration:none}
.wa-card a:hover{background:#f0fdf4}
.quick-strip{background:#fff;border-bottom:1px solid var(--border);padding:20px 0}
.qs-inner{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.qs-item{display:flex;align-items:center;gap:12px;text-decoration:none;transition:.2s}
.qs-item:hover .qs-label{color:var(--blue)}
.qs-icon{width:44px;height:44px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.qs-text-top{font-size:.7rem;font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:.08em}
.qs-label{font-family:var(--font-h);font-size:.92rem;font-weight:700;color:var(--text);transition:.2s}
.contact-layout{max-width:1180px;margin:48px auto;padding:0 20px 80px;display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:start}
.contact-sidebar{display:flex;flex-direction:column;gap:20px}
.cs-info-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-sm)}
.cs-info-card h3{font-family:var(--font-h);font-size:.95rem;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.contact-form-box{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg)}

/* ══ ABOUT PAGE ══ */
.stats-banner{background:#fff;border-bottom:1px solid var(--border);padding:28px 0}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1180px;margin:0 auto;padding:0 20px}
.stat-item{text-align:center;padding:0 20px;border-right:1px solid var(--border)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--font-h);font-size:2.2rem;font-weight:800;color:var(--blue);line-height:1;margin-bottom:4px}
.stat-unit{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story-img-bg{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,var(--blue-l),var(--teal-l));border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;font-size:5rem;box-shadow:var(--sh-lg)}
.story-float{position:absolute;bottom:-20px;right:-20px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:16px 20px;box-shadow:var(--sh-lg)}
.story-float-val{font-family:var(--font-h);font-size:1.8rem;font-weight:800;color:var(--blue);line-height:1}
.story-float-lbl{font-size:.72rem;color:var(--text-3);font-weight:600}
.story-img-wrap{position:relative}
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mvv-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;text-align:center;transition:var(--tr)}
.mvv-card:hover{box-shadow:var(--sh-lg);transform:translateY(-6px)}
.mvv-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.6rem}
.mvv-card h3{font-family:var(--font-h);font-size:1.1rem;font-weight:800;margin-bottom:10px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;text-align:center;transition:var(--tr)}
.team-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}
.team-avatar{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--blue-l),var(--teal-l));display:flex;align-items:center;justify-content:center;font-size:3rem}
.team-info{padding:18px 16px}
.team-name{font-family:var(--font-h);font-size:.95rem;font-weight:800;margin-bottom:3px}
.team-role{font-size:.78rem;color:var(--blue);font-weight:600;margin-bottom:8px}
.team-bio{font-size:.78rem;color:var(--text-3);line-height:1.65;margin-bottom:10px}
.team-soc{display:flex;gap:7px;justify-content:center}
.tsoc-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.75rem;text-decoration:none;transition:.2s}
.tsoc-icon:hover{transform:translateY(-2px)}
.tsoc-icon.li{background:rgba(10,102,194,.15);color:#0a66c2}
.tsoc-icon.tw{background:rgba(0,0,0,.08);color:#0f172a}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:24px 20px;transition:var(--tr);display:flex;gap:16px;align-items:flex-start}
.why-card:hover{box-shadow:var(--sh-lg);border-color:var(--blue);transform:translateY(-3px)}
.why-icon{width:48px;height:48px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.why-card h4{font-family:var(--font-h);font-size:.95rem;font-weight:800;margin-bottom:6px}
.highlight-box{background:var(--blue-l);border:1.5px solid var(--blue-m);border-radius:var(--r-lg);padding:14px 18px;margin-top:18px;display:flex;gap:12px;align-items:flex-start}
.highlight-box i{color:var(--blue);font-size:1.1rem;margin-top:2px;flex-shrink:0}
.highlight-box p{font-size:.85rem;color:var(--blue);font-weight:600;line-height:1.6;margin:0}
.section-pad{padding:72px 0}
.section-pad-sm{padding:48px 0}
.bg-light{background:#f8f9fc}
.inner{max-width:1180px;margin:0 auto;padding:0 20px}
.about-cta,.port-cta,.srv-cta-banner{background:linear-gradient(135deg,#060c18,#0f1f3d);border-radius:28px;padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.about-cta::before,.port-cta::before,.srv-cta-banner::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:22px 22px}
.about-cta h2,.port-cta h2,.srv-cta-banner h2{font-family:var(--font-h);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:#fff;margin-bottom:12px;position:relative;z-index:1}
.about-cta p,.port-cta p,.srv-cta-banner p{font-size:.9rem;color:rgba(255,255,255,.65);max-width:500px;margin:0 auto 28px;line-height:1.8;position:relative;z-index:1}
.cta-btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* ══ SERVICES PAGE ══ */
.srv-tab,.pf-tab{display:flex;align-items:center;gap:7px;padding:14px 18px;font-family:var(--font-b);font-size:.85rem;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:.2s;background:none;border-top:none;border-left:none;border-right:none}
.srv-tab:hover,.pf-tab:hover{color:var(--blue)}
.srv-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.pf-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.srv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.srv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--srv-color,var(--blue));transform:scaleX(0);transform-origin:left;transition:.3s}
.srv-card:hover::before{transform:scaleX(1)}
.srv-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}
.srv-card-icon{width:48px;height:48px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px}
.srv-card h3{font-family:var(--font-h);font-size:1rem;font-weight:800;margin-bottom:8px}
.srv-features{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.srv-features li{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-3)}
.srv-features li::before{content:'✓';color:var(--srv-color,var(--blue));font-weight:700;flex-shrink:0}
.srv-price{font-family:var(--font-h);font-size:1.1rem;font-weight:800;color:var(--srv-color,var(--blue));margin-bottom:12px}
.srv-price span{font-size:.78rem;font-weight:500;color:var(--text-4)}
.srv-cta-link{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--srv-color,var(--blue));text-decoration:none;transition:.2s}
.srv-cta-link:hover{gap:10px}
.srv-badge{position:absolute;top:14px;right:14px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:100px}
.srv-group{padding:64px 0}
.srv-group-hdr{display:flex;align-items:center;gap:16px;margin-bottom:32px;padding-bottom:18px;border-bottom:2px solid var(--border)}
.srv-group-icon{width:52px;height:52px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.srv-group-title{font-family:var(--font-h);font-size:1.5rem;font-weight:800}
.srv-group-desc{font-size:.88rem;color:var(--text-3);margin-top:4px;line-height:1.6}
.srv-tabs,.port-filter{background:#fff;border-bottom:1px solid var(--border);padding:0 20px;position:sticky;top:64px;z-index:90}
.srv-tabs-inner,.pf-inner{max-width:1180px;margin:0 auto;display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.srv-tabs-inner::-webkit-scrollbar,.pf-inner::-webkit-scrollbar{display:none}

/* ══ PORTFOLIO PAGE ══ */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.port-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:var(--tr);cursor:pointer}
.port-card:hover{box-shadow:0 20px 48px rgba(15,23,42,.14);transform:translateY(-6px)}
.port-thumb{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;overflow:hidden}
.port-thumb-overlay{position:absolute;inset:0;background:rgba(15,23,42,.65);display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;transition:.3s;backdrop-filter:blur(4px)}
.port-card:hover .port-thumb-overlay{opacity:1}
.port-ov-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-b);font-size:.8rem;font-weight:600;padding:9px 16px;border-radius:100px;text-decoration:none}
.port-ov-btn.view{background:#fff;color:var(--text)}
.port-ov-btn.live{background:var(--purple);color:#fff}
.port-info{padding:18px 20px}
.port-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:100px;margin-bottom:8px;display:inline-block}
.port-name{font-family:var(--font-h);font-size:1rem;font-weight:800;margin-bottom:5px}
.port-desc{font-size:.8rem;color:var(--text-3);line-height:1.65;margin-bottom:12px}
.port-tags{display:flex;gap:6px;flex-wrap:wrap}
.port-tag{font-size:.7rem;background:var(--bg-2);border:1px solid var(--border);color:var(--text-3);padding:3px 9px;border-radius:100px}
.port-stats{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.port-stat-val{font-family:var(--font-h);font-size:.95rem;font-weight:800;color:var(--purple)}
.port-stat-lbl{font-size:.65rem;color:var(--text-4);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.case-study{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-bottom:36px;box-shadow:var(--sh-sm)}
.cs-thumb{background:linear-gradient(135deg,var(--purple-l),#ede9fe);border-radius:var(--r-xl);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:5rem}
.cs-badge{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 11px;border-radius:100px;margin-bottom:12px;background:var(--purple-l);color:var(--purple)}
.cs-results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.cs-result{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:12px;text-align:center}
.cs-result-val{font-family:var(--font-h);font-size:1.3rem;font-weight:800;color:var(--purple)}

/* ══ RESPONSIVE ══ */
@media(max-width:960px){
  .story-grid,.case-study{grid-template-columns:1fr;gap:32px}
  .team-grid{grid-template-columns:1fr 1fr}
  .mvv-grid,.why-grid{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:1fr 1fr;gap:20px}
  .stat-item{border-right:none;border-bottom:1px solid var(--border);padding-bottom:16px}
  .srv-cards,.port-grid{grid-template-columns:1fr 1fr}
  .contact-layout{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
}
@media(max-width:600px){
  .team-grid,.srv-cards,.port-grid{grid-template-columns:1fr}
  .cs-results{grid-template-columns:1fr 1fr}
  .stats-inner{grid-template-columns:1fr 1fr}
  .qs-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .about-cta,.port-cta,.srv-cta-banner{padding:32px 24px}
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE CSS — hero, services, pricing, contact, portfolio
   ══════════════════════════════════════════════════════════════ */

/* Hero */
.hero{min-height:100vh;background:linear-gradient(135deg,#f0f4ff 0%,#fafbff 40%,#fff8f0 100%);display:flex;align-items:center;position:relative;overflow:hidden;padding:25px 0 60px}
.hero-blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.3;pointer-events:none}
.hero-blob-1{width:600px;height:600px;background:radial-gradient(circle,#2563eb,transparent);top:-150px;right:-100px}
.hero-blob-2{width:500px;height:500px;background:radial-gradient(circle,#7c3aed,transparent);bottom:-100px;left:-80px}
.hero-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(37,99,235,.2);border:1px solid rgba(37,99,235,.4);color:#93c5fd;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:18px}

.hl{color:#60a5fa}
.hl-a{background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:1rem;color:rgba(255,255,255,.65);line-height:1.85;max-width:520px;margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap}
.hero-trust-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:rgba(255,255,255,.55)}
.hero-trust-item i{color:#4ade80;font-size:.75rem}
.pulse{animation:pulse-ring 2s infinite}
@keyframes pulse-ring{0%,100%{box-shadow:0 4px 14px rgba(37,211,102,.35)}50%{box-shadow:0 4px 0 8px rgba(37,211,102,.08),0 4px 14px rgba(37,211,102,.35)}}
/* Hero form */
.hero-form-wrap{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1.5px solid rgba(255,255,255,.12);border-radius:24px;padding:28px;position:relative;z-index:1}
.form-top-bar{background:linear-gradient(135deg,var(--blue),var(--blue-d));border-radius:16px 16px 0 0;padding:16px 20px;margin:-28px -28px 20px;display:block;align-items:center;justify-content:space-between}
.form-top-bar h3{font-family:var(--font-h);font-size:.95rem;font-weight:800;color:#fff}
.form-top-bar span{font-size:.72rem;color:rgba(255,255,255,.75)}
.form-body{display:flex;flex-direction:column;gap:11px}
.form-body .form-group{margin-bottom:0}
.form-body .form-control{background:#f8f9fc;border:1.5px solid var(--border);color:#211616;font-family:var(--font-b);font-size:.85rem;padding:10px 13px;border-radius:var(--r);outline:none;width:100%;transition:.28s}
.form-body .form-control::placeholder{color:#9ca9bd;}
.form-body .form-control:focus{border-color:rgba(96,165,250,.6);background:rgba(255,255,255,.12)}
.form-body .form-control option{background:#0f172a;color:#fff}
.form-trust{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.form-trust span{font-size:.7rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:4px}
.contact-success{background:rgba(37,211,102,.15);border:1.5px solid rgba(37,211,102,.3);border-radius:var(--r-lg);padding:20px;text-align:center;display:none}
.contact-success.show{display:block!important}
.contact-success h4{font-family:var(--font-h);color:#4ade80;font-size:1rem;margin-bottom:6px}
.contact-success p{font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.65}

/* Services section */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:26px 22px;transition:var(--tr);position:relative;overflow:hidden;text-decoration:none;display:block}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--svc-color,var(--blue));transform:scaleX(0);transform-origin:left;transition:.3s}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover{box-shadow:var(--sh-lg);transform:translateY(-6px);border-color:var(--svc-color,var(--blue))}
.svc-icon{width:52px;height:52px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px;transition:.3s}
.service-card:hover .svc-icon{transform:scale(1.1) rotate(-5deg)}
.svc-title{font-family:var(--font-h);font-size:1rem;font-weight:800;margin-bottom:8px}
.svc-desc{font-size:.83rem;color:var(--text-3);line-height:1.75;margin-bottom:14px}
.svc-link{font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:5px;transition:.3s}
.service-card:hover .svc-link{gap:9px}

/* Portfolio items */
.pf-item{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:var(--tr)}
.pf-item:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pricing-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;transition:var(--tr);position:relative;overflow:hidden}
.pricing-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}
.pricing-card.popular{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.pricing-badge{position:absolute;top:0;right:24px;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:0 0 10px 10px}
.pricing-header{text-align:center;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pricing-header h3{font-family:var(--font-h);font-size:1rem;font-weight:800;margin-bottom:6px}
.pricing-price{font-family:var(--font-h);font-size:2.2rem;font-weight:800;color:var(--blue);line-height:1;margin-bottom:4px}
.pricing-period{font-size:.78rem;color:var(--text-4)}
.pricing-features{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.pricing-features li{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-3)}
.pricing-features li::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0}

/* Contact section on homepage */
.cf-sub {
    font-size: .85rem;
    color: var(--text-3);
    margin-bottom: 22px;
}
.cf-title {
    font-family: var(--font-h);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.contact-info-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:28px;box-shadow:var(--sh-sm)}
.contact-info-card h3{font-family:var(--font-h);font-size:1.1rem;font-weight:800;margin-bottom:18px}
.ci-item{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px;text-decoration:none;transition:.2s}
.ci-item:hover .ci-label{color:var(--blue)}
.ci-icon{width:44px;height:44px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.contact-form-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);padding:34px}

/* Page hero (shared across pages) */
.page-hero{background:linear-gradient(135deg,#0c1a2e,#0f2744);padding:52px 0 64px;position:relative;overflow:hidden;text-align:center}
.page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:22px 22px}
.ph-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;pointer-events:none}
.ph-b1{width:400px;height:400px;background:radial-gradient(circle,#0891b2,transparent);top:-100px;right:-60px}
.ph-b2{width:350px;height:350px;background:radial-gradient(circle,#7c3aed,transparent);bottom:-60px;left:-50px}
.ph-inner{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:0 20px}
.ph-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(8,145,178,.2);border:1px solid rgba(8,145,178,.4);color:#67e8f9;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:14px}
.ph-badge::before{content:'';width:5px;height:5px;background:#67e8f9;border-radius:50%;animation:blk 1.5s infinite}
@keyframes blk{0%,100%{opacity:1}50%{opacity:.3}}
.ph-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:-.03em}
.ph-title span{color:#67e8f9}
.ph-sub{font-size:.95rem;color:#94a3b8;max-width:500px;margin:0 auto;line-height:1.75}

/* ══════════════════════════════════════════════════════════════
   BLOG PAGE CSS
   ══════════════════════════════════════════════════════════════ */
.blog-layout{max-width:1180px;margin:0 auto;padding:36px 20px 80px;display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.blog-main{min-width:0}
.blog-sidebar{position:sticky;top:82px;display:flex;flex-direction:column;gap:20px}
.blog-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.blog-cat-btn{padding:7px 16px;border-radius:100px;font-size:.8rem;font-weight:600;border:1.5px solid var(--border);background:#fff;color:var(--text-3);cursor:pointer;transition:var(--tr);box-shadow:var(--sh-sm)}
.blog-cat-btn:hover,.blog-cat-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
.blog-cat-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
/* Featured post */
.featured-post{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);margin-bottom:24px;display:grid;grid-template-columns:1fr 1fr;transition:var(--tr)}
.featured-post:hover{box-shadow:var(--sh-lg);transform:translateY(-4px)}
.fp-img{background:linear-gradient(135deg,var(--blue-l),var(--teal-l));display:flex;align-items:center;justify-content:center;font-size:4rem;min-height:220px}
.fp-content{padding:24px}
.fp-tag{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:100px;margin-bottom:10px;background:var(--blue-l);color:var(--blue)}
.fp-title{font-family:var(--font-h);font-size:1.2rem;font-weight:800;margin-bottom:10px;line-height:1.3;color:var(--text)}
.fp-title a{color:inherit;text-decoration:none;transition:.2s}
.fp-title a:hover{color:var(--blue)}
.fp-excerpt{font-size:.85rem;color:var(--text-3);line-height:1.75;margin-bottom:14px}
.fp-meta{display:flex;align-items:center;gap:12px;font-size:.75rem;color:var(--text-4)}
/* Blog cards grid */
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.blog-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:var(--tr);text-decoration:none;display:flex;flex-direction:column}
.blog-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}
.blog-card-img{background:linear-gradient(135deg,var(--bg),var(--bg-2));display:flex;align-items:center;justify-content:center;font-size:2.5rem;min-height:140px}
.blog-card-body{padding:18px;flex:1;display:flex;flex-direction:column}
.blog-card-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:100px;margin-bottom:8px;display:inline-block;background:var(--bg-2);color:var(--text-3)}
.blog-card-title{font-family:var(--font-h);font-size:.95rem;font-weight:800;margin-bottom:7px;line-height:1.35;color:var(--text)}
.blog-card-excerpt{font-size:.8rem;color:var(--text-3);line-height:1.7;flex:1;margin-bottom:12px}
.blog-card-meta{font-size:.73rem;color:var(--text-4);display:flex;gap:10px}
/* Blog sidebar */
.sb-search{width:100%;background:#f8f9fc;border:1.5px solid var(--border);color:var(--text);font-family:var(--font-b);font-size:.875rem;padding:10px 14px;border-radius:var(--r);outline:none;transition:.28s}
.sb-search:focus{border-color:var(--blue);background:#fff}
.sb-post-list{display:flex;flex-direction:column;gap:12px}
.sb-post-item{display:flex;gap:10px;text-decoration:none;transition:.2s;padding:8px 0;border-bottom:1px solid var(--border)}
.sb-post-item:last-child{border-bottom:none}
.sb-post-item:hover .sb-post-title{color:var(--blue)}
.sb-post-img{width:52px;height:52px;border-radius:var(--r);background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.sb-post-title{font-family:var(--font-h);font-size:.82rem;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:3px;transition:.2s}
.sb-post-date{font-size:.72rem;color:var(--text-4)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag-cloud a{font-size:.75rem;font-weight:600;padding:4px 11px;border-radius:100px;background:var(--bg-2);border:1px solid var(--border);color:var(--text-3);text-decoration:none;transition:.2s}
.tag-cloud a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
@media(max-width:900px){
  .blog-layout{grid-template-columns:1fr}.blog-sidebar{position:static}
  .featured-post{grid-template-columns:1fr}.blog-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   TOOL PAGE CSS — how-to, result grid, sidebar cards
   ══════════════════════════════════════════════════════════════ */
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.result-box{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px;text-align:center;transition:.28s}
.result-val{font-family:var(--font-h);font-size:1.6rem;font-weight:800;line-height:1}
.result-lbl{font-size:.7rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-top:4px}
.how-to{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-sm)}
.how-to h3{font-family:var(--font-h);font-size:1rem;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.how-steps{display:flex;flex-direction:column;gap:14px}
.how-step{display:flex;gap:13px;align-items:flex-start}
.how-num{width:28px;height:28px;border-radius:50%;color:#fff;font-family:var(--font-h);font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.how-step p{font-size:.83rem;color:var(--text-3);line-height:1.65;margin-top:3px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.related-tool{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);text-decoration:none;transition:.2s}
.related-tool:last-child{border-bottom:none}
.related-tool:hover{padding-left:4px}
.rt-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.rt-title{font-family:var(--font-h);font-size:.78rem;font-weight:600;color:var(--text-3)}
.related-tool:hover .rt-title{color:var(--blue)}
.sb-card-body{padding:14px 16px}

/* ══════════════════════════════════════════════════════════════
   BUSINESS DIRECTORY FIXES
   ══════════════════════════════════════════════════════════════ */
.logo-prev-img{display:none;max-height:56px;max-width:160px;margin:8px auto 0;border-radius:8px;object-fit:contain}
.logo-upload-area.has-file{border-color:var(--green);background:var(--green-l)}

/* ══════════════════════════════════════════════════════════════
   DIGITAL CARD — Avatar fix (no double image)
   ══════════════════════════════════════════════════════════════ */
.av-prev img{display:none}
.av-prev img.loaded{display:block}
.av-prev .av-emoji{transition:.2s}
.av-prev .av-emoji.hidden-emoji{display:none}
#dcAv .dc-emoji{transition:.2s}
#dcAv .dc-emoji.hidden-emoji{display:none}
#dcAvImg{display:none;width:100%;height:100%;object-fit:cover;border-radius:50%}
#dcAvImg.loaded{display:block}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1100px){.hero-inner{grid-template-columns:1fr}.hero-form-wrap{max-width:500px}.services-grid{grid-template-columns:1fr 1fr}.pricing-grid{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.services-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}}
@media(max-width:600px){.hero-cta{flex-direction:column}.hero-title{font-size:2rem}}

/* ══════════════════════════════════════════════════════════════
   BLOG PAGE — post-card, post-grid, sidebar items
   ══════════════════════════════════════════════════════════════ */
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.post-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:var(--tr);text-decoration:none;display:flex;flex-direction:column}
.post-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}
.pc-img{background:linear-gradient(135deg,var(--bg),var(--bg-2));display:flex;align-items:center;justify-content:center;font-size:2.8rem;min-height:150px}
.pc-content{padding:18px;flex:1;display:flex;flex-direction:column}
.pc-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:100px;margin-bottom:8px;display:inline-block;background:var(--blue-l);color:var(--blue)}
.pc-title{font-family:var(--font-h);font-size:.97rem;font-weight:800;margin-bottom:7px;line-height:1.35;color:var(--text)}
.pc-title a{color:inherit;text-decoration:none;transition:.2s}
.pc-title a:hover{color:var(--blue)}
.pc-excerpt{font-size:.8rem;color:var(--text-3);line-height:1.7;flex:1;margin-bottom:12px}
.pc-meta{font-size:.73rem;color:var(--text-4);display:flex;gap:10px;flex-wrap:wrap}
.read-more{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;color:var(--blue);text-decoration:none;transition:.2s;margin-top:8px}
.read-more:hover{gap:9px}
/* Blog sidebar */
.recent-post{display:flex;gap:10px;text-decoration:none;transition:.2s;padding:8px 0;border-bottom:1px solid var(--border)}
.recent-post:last-child{border-bottom:none}
.recent-post:hover .rp-title{color:var(--blue)}
.rp-img{width:52px;height:52px;border-radius:var(--r);background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.rp-title{font-family:var(--font-h);font-size:.82rem;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:3px;transition:.2s}
.rp-date{font-size:.72rem;color:var(--text-4)}
.tag-item{font-size:.75rem;font-weight:600;padding:4px 11px;border-radius:100px;background:var(--bg-2);border:1px solid var(--border);color:var(--text-3);text-decoration:none;transition:.2s;cursor:pointer}
.tag-item:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
@media(max-width:700px){.post-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   TOOL PAGE LAYOUT — tool-hero, tool-box, tool-layout
   ══════════════════════════════════════════════════════════════ */
.tool-hero{background:linear-gradient(135deg,var(--tc,#2563eb)18,var(--tb,#eff6ff));padding:36px 0 44px;border-bottom:1px solid var(--border)}
.tool-breadcrumb{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--text-3);margin-bottom:14px;flex-wrap:wrap;max-width:1180px;margin-left:auto;margin-right:auto;padding:0 20px}
.tool-breadcrumb a{color:var(--text-3);text-decoration:none;transition:.2s}
.tool-breadcrumb a:hover{color:var(--blue)}
.tool-breadcrumb span{color:var(--border)}
.tool-hero-inner{display:flex;align-items:flex-start;gap:18px;max-width:1180px;margin:0 auto;padding:0 20px}
.tool-hero-icon{width:64px;height:64px;border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;color:#fff}
.tool-hero-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--text);margin-bottom:7px;letter-spacing:-.03em}
.tool-hero-desc{font-size:.9rem;color:var(--text-3);line-height:1.75;max-width:600px}
.tool-hero-meta{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.tool-meta-badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:4px 11px;border-radius:100px;border:1px solid currentColor}
.tool-layout{max-width:1180px;margin:0 auto;padding:32px 20px 80px;display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.tool-main{display:flex;flex-direction:column;gap:20px}
.tool-box{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
.tool-box-hdr{padding:13px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,#f8f9fc,#f1f4f9)}
.tool-box-hdr h3{font-family:var(--font-h);font-size:.9rem;font-weight:700}
.tool-box-body{padding:20px}
.tool-sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:82px}
.tool-input{width:100%;background:#f8f9fc;border:1.5px solid var(--border);color:var(--text);font-family:var(--font-b);font-size:.875rem;padding:11px 14px;border-radius:var(--r);outline:none;transition:.28s}
.tool-input:focus{background:#fff}
.tool-input::placeholder{color:var(--text-4)}
textarea.tool-input{resize:vertical;min-height:160px;line-height:1.7}
select.tool-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-color:#f8f9fc}
.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-b);font-weight:700;font-size:.88rem;padding:12px 24px;border-radius:var(--r-lg);border:none;cursor:pointer;transition:.28s;color:#fff}
.tool-btn:hover{transform:translateY(-2px)}
.tool-btn-secondary,.tool-btn-sec{background:var(--bg-2);color:var(--text-3);border:1.5px solid var(--border);box-shadow:none}
.tool-btn-secondary:hover,.tool-btn-sec:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.sb-card-body{padding:14px 16px}
@media(max-width:960px){.tool-layout{grid-template-columns:1fr}.tool-sidebar{position:static}}
@media(max-width:600px){.result-grid{grid-template-columns:1fr 1fr}}

/* ══════════════════════════════════════════════════════════════
   BLOG POST PAGE — complete CSS
   ══════════════════════════════════════════════════════════════ */
.read-progress{position:fixed;top:0;left:0;z-index:9999;height:3px;background:linear-gradient(90deg,var(--blue),var(--purple));width:0%;transition:width .1s linear}
.post-hero{background:linear-gradient(135deg,#0c1a2e,#0f2744);padding:52px 0 64px;position:relative;overflow:hidden}
.post-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:22px 22px}
.post-hero-inner{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 20px}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:.78rem;color:rgba(255,255,255,.5);margin-bottom:16px;flex-wrap:wrap}
.breadcrumb a{color:rgba(255,255,255,.5);text-decoration:none;transition:.2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:rgba(255,255,255,.3)}
.post-cat-badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 12px;border-radius:100px;margin-bottom:14px}
.post-hero-title{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;color:#fff;margin-bottom:16px;line-height:1.2;letter-spacing:-.03em}
.post-hero-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.meta-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:rgba(255,255,255,.55)}
.meta-item i{font-size:.72rem}
/* Post layout */
.post-layout{max-width:1180px;margin:0 auto;padding:40px 20px 80px;display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.article-body{min-width:0}
.article-featured-img{width:100%;aspect-ratio:16/8;background:linear-gradient(135deg,var(--bg),var(--bg-2));border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;font-size:5rem;margin-bottom:28px;border:1.5px solid var(--border)}
.article-content{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:36px;box-shadow:var(--sh-sm);font-size:.93rem;color:var(--text-3);line-height:1.9}
.article-content h2{font-family:var(--font-h);font-size:1.4rem;font-weight:800;color:var(--text);margin:28px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--border)}
.article-content h3{font-family:var(--font-h);font-size:1.1rem;font-weight:700;color:var(--text);margin:22px 0 10px}
.article-content p{margin-bottom:14px}
.article-content ul,.article-content ol{margin:12px 0 14px 22px;display:flex;flex-direction:column;gap:6px}
.article-content li{line-height:1.75}
.article-content strong{color:var(--text-2);font-weight:700}
.article-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.article-content img{width:100%;border-radius:var(--r-lg);margin:16px 0;box-shadow:var(--sh)}
.article-content blockquote{border-left:4px solid var(--blue);background:var(--blue-l);padding:16px 20px;border-radius:0 var(--r-lg) var(--r-lg) 0;margin:18px 0;font-style:italic;color:var(--text-2)}
.article-content code{background:var(--bg-2);border:1px solid var(--border);border-radius:4px;padding:2px 7px;font-size:.82rem;font-family:monospace}
.article-content pre{background:#0f172a;border-radius:var(--r-lg);padding:18px;overflow-x:auto;margin:16px 0}
.article-content pre code{background:none;border:none;color:#e2e8f0;font-size:.82rem;line-height:1.7}
/* Key takeaways */
.key-takeaways{background:linear-gradient(135deg,var(--teal-l),var(--blue-l));border:1.5px solid var(--blue-m);border-radius:var(--r-xl);padding:22px 24px;margin:24px 0}
.kt-title{font-family:var(--font-h);font-size:.9rem;font-weight:800;color:var(--blue);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.kt-item{display:flex;align-items:flex-start;gap:8px;font-size:.87rem;color:var(--text-3);margin-bottom:8px;line-height:1.65}
.kt-item::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0;margin-top:2px}
/* Callout box */
.callout{background:var(--amber-l);border:1.5px solid #fcd34d;border-radius:var(--r-lg);padding:16px 18px;margin:18px 0;display:flex;gap:10px;align-items:flex-start}
.callout i{color:var(--amber-d);margin-top:2px;flex-shrink:0}
.callout p{font-size:.88rem;color:#78350f;line-height:1.7;margin:0}
/* Author box */
.author-box{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:24px;display:flex;gap:18px;align-items:flex-start;margin:28px 0;box-shadow:var(--sh-sm)}
.author-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue-l),var(--teal-l));display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0}
.author{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-4);margin-bottom:4px}
.author-name{font-family:var(--font-h);font-size:.95rem;font-weight:800;color:var(--text);margin-bottom:6px}
.author-bio{font-size:.82rem;color:var(--text-3);line-height:1.7}
/* Share section */
.share-section{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:20px 24px;margin:20px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.share-label{font-family:var(--font-h);font-size:.88rem;font-weight:700}
.share-btns{display:flex;gap:9px;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-b);font-size:.8rem;font-weight:600;padding:8px 16px;border-radius:100px;text-decoration:none;transition:.2s;border:none;cursor:pointer}
.share-btn:hover{transform:translateY(-2px)}
.sh-wa{background:#25d366;color:#fff}
.sh-tw{background:#0f172a;color:#fff}
.sh-li{background:#0a66c2;color:#fff}
.sh-copy{background:var(--bg-2);color:var(--text-3);border:1.5px solid var(--border)}
.sh-copy:hover{border-color:var(--blue);color:var(--blue)}
/* Comments */
.comments-section{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:28px;box-shadow:var(--sh-sm);margin-top:20px}
.comments-title{font-family:var(--font-h);font-size:1.1rem;font-weight:800;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.comment-item{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--border)}
.comment-item:last-of-type{border-bottom:none}
.comment-av{width:40px;height:40px;border-radius:50%;background:var(--blue-l);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.comment-name{font-family:var(--font-h);font-size:.88rem;font-weight:700;margin-bottom:2px}
.comment-date{font-size:.72rem;color:var(--text-4);margin-bottom:6px}
.comment-text{font-size:.83rem;color:var(--text-3);line-height:1.7}
.comment-form{margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}
/* .cf-title{font-family:var(--font-h);font-size:.95rem;font-weight:800;margin-bottom:14px} */
.cf-btn{display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;font-family:var(--font-b);font-weight:700;font-size:.88rem;padding:11px 22px;border-radius:var(--r-lg);border:none;cursor:pointer;transition:.28s;margin-top:12px}
.cf-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-blue)}
/* Post sidebar */
.post-sidebar{position:sticky;top:82px;display:flex;flex-direction:column;gap:20px}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.toc-item a{font-size:.82rem;color:var(--text-3);text-decoration:none;display:block;padding:5px 10px;border-radius:var(--r);transition:.2s;border-left:2px solid transparent}
.toc-item a:hover,.toc-item.active a{color:var(--blue);background:var(--blue-l);border-left-color:var(--blue)}
/* Related posts */
.related-post{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);text-decoration:none;transition:.2s}
.related-post:last-child{border-bottom:none}
.related-post:hover{padding-left:4px}
.rp-img-mini{width:56px;height:48px;border-radius:var(--r);background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.rp-info{flex:1}
.rp-cat{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);margin-bottom:3px}
.rp-title{font-family:var(--font-h);font-size:.8rem;font-weight:700;color:var(--text);line-height:1.35;transition:.2s}
.related-post:hover .rp-title{color:var(--blue)}
/* CTA sidebar */
.cta-sidebar{background:linear-gradient(135deg,#060c18,#0f1f3d);border-radius:var(--r-xl);padding:22px 18px;text-align:center;color: #fff}
.cta-sidebar h4{color:#fff;}
.cta-sbtn{display:block;background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;font-family:var(--font-b);font-weight:700;font-size:.85rem;padding:11px;border-radius:100px;text-decoration:none;transition:.2s}
.cta-sbtn:hover{transform:translateY(-2px)}
.article-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px;box-shadow:var(--sh-sm);margin-bottom:24px}
@media(max-width:960px){.post-layout{grid-template-columns:1fr}.post-sidebar{position:static}}
@media(max-width:600px){.author-box{flex-direction:column}.share-section{flex-direction:column}}
@media screen and (max-width: 992px) {.post-layout {grid-template-columns: 1fr;gap: 20px; }.post-sidebar { position: static;width: 100%; }}
@media screen and (max-width: 768px) {.author-box { flex-direction: column;align-items: flex-start; gap: 15px; }.share-section {flex-direction: column; align-items: flex-start;gap: 10px;}}
@media screen and (max-width: 576px) {.post-layout,.author-box, .share-section {width: 100%; }  .post-content { padding: 15px; }}
/* ══════════════════════════════════════════════════════════════
   FINAL PATCH — All remaining missing classes
   ══════════════════════════════════════════════════════════════ */

/* About page hero variants */
.about-hero{background:linear-gradient(135deg,#0c1a2e 0%,#0f2744 60%,#0c1a2e 100%);padding:60px 0 72px;position:relative;overflow:hidden;text-align:center}
.ah-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;pointer-events:none}
.ah-b1{width:400px;height:400px;background:radial-gradient(circle,#0891b2,transparent);top:-100px;right:-60px}
.ah-b2{width:350px;height:350px;background:radial-gradient(circle,#7c3aed,transparent);bottom:-60px;left:-50px}
.ah-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 20px}
.ah-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(8,145,178,.2);border:1px solid rgba(8,145,178,.4);color:#67e8f9;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:100px;margin-bottom:14px}
.ah-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-.03em}
.ah-sub{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.8}
.story-text h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;margin-bottom:16px;line-height:1.2}
.story-text h2 span{color:var(--blue)}
.story-text p{font-size:.92rem;color:var(--text-3);line-height:1.85;margin-bottom:14px}

/* Contact page hero */
.contact-hero{background:linear-gradient(135deg,#0c1a2e,#0f2744);padding:56px 0 68px;text-align:center;position:relative;overflow:hidden}
.ch-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;pointer-events:none}
.ch-b1{width:400px;height:400px;background:radial-gradient(circle,#25d366,transparent);top:-80px;right:-60px}
.ch-b2{width:350px;height:350px;background:radial-gradient(circle,#2563eb,transparent);bottom:-60px;left:-50px}
.ch-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 20px}
.ch-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(37,211,102,.2);border:1px solid rgba(37,211,102,.4);color:#4ade80;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:100px;margin-bottom:14px}
.ch-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-.03em}
.ch-sub{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.8}

/* Services page hero */
.srv-hero{background:linear-gradient(135deg,#0c1a2e 0%,#0f2744 100%);padding:60px 0 72px;text-align:center;position:relative;overflow:hidden}
.srv-hero-inner{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:0 20px}
.sh-badge-srv{display:inline-flex;align-items:center;gap:6px;background:rgba(245,158,11,.2);border:1px solid rgba(245,158,11,.4);color:#fcd34d;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:100px;margin-bottom:14px;position:relative;z-index:1}
.srv-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-.03em;position:relative;z-index:1}
.srv-sub{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.8;position:relative;z-index:1}

/* Portfolio page hero */
.port-hero{background:linear-gradient(135deg,#0c1a2e,#0f2744);padding:60px 0 72px;text-align:center;position:relative;overflow:hidden}
.ph-inner-p{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:0 20px}
.ph-badge-p{display:inline-flex;align-items:center;gap:6px;background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.4);color:#c4b5fd;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:100px;margin-bottom:14px}
.ph-title-p{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-.03em}
.ph-sub-p{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.8}

/* SEO hero stats */
.st-hero-title{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.1;margin-bottom:14px;position:relative;z-index:1}
.hl1{color:#818cf8}
.hl2{background:linear-gradient(90deg,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.st-hero-sub{font-size:.97rem;color:rgba(255,255,255,.6);max-width:560px;margin:0 auto 28px;line-height:1.8;position:relative;z-index:1}
.st-hero-stats{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.st-hero-stat{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.65);font-size:.85rem}
.st-hero-stat i{color:#818cf8;font-size:.8rem}
.st-hero-stat strong{color:#fff}
.st-search-wrap{max-width:560px;margin:28px auto 0;position:relative;z-index:1}
.st-search-ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:1rem;pointer-events:none}
.st-b3{width:300px;height:300px;background:radial-gradient(circle,rgba(8,145,178,.15),transparent);top:50%;left:30%;position:absolute;border-radius:50%;filter:blur(90px);opacity:.3;pointer-events:none}
.tools-section{padding:0 0 80px}

/* Case study */
.cs-title{font-family:var(--font-h);font-size:1.5rem;font-weight:800;margin-bottom:10px;line-height:1.25}
.cs-desc{font-size:.88rem;color:var(--text-3);line-height:1.8;margin-bottom:18px}
.cs-result-lbl{font-size:.7rem;color:var(--text-3);margin-top:2px}

/* Digital card extras */
.desc-box{resize:vertical;min-height:80px}
.av-hint p{font-size:.82rem;color:var(--text-3)}
.av-hint span{font-size:.72rem;color:var(--text-4)}
.scan-preview{display:none;max-width:100%;border-radius:var(--r-lg);margin:12px 0;box-shadow:var(--sh-lg)}
.scan-contact-row{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-3);margin-bottom:5px}
.scan-contact-row i{font-size:.78rem;width:14px}
/* QR Modal */
.modal-over{position:fixed;inset:0;z-index:9998;background:rgba(15,23,42,.7);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;opacity:0;visibility:hidden;transition:.3s}
.modal-over.open{opacity:1;visibility:visible}
.qr-box{background:#fff;border-radius:var(--r-xl);padding:32px 28px;max-width:320px;width:100%;text-align:center;box-shadow:0 32px 64px rgba(15,23,42,.2);transform:scale(.9);transition:.35s}
.modal-over.open .qr-box{transform:scale(1)}
.qr-box h3{font-family:var(--font-h);font-size:1.1rem;font-weight:800;margin-bottom:4px}
.qr-box p{font-size:.8rem;color:var(--text-3);margin-bottom:16px}
.qr-cls{display:block;background:none;border:none;color:var(--text-4);font-family:var(--font-b);font-size:.75rem;cursor:pointer;margin:10px auto 0;text-decoration:underline}

/* Tool page extras */
.tool-textarea{width:100%;background:#f8f9fc;border:1.5px solid var(--border);color:var(--text);font-family:var(--font-b);font-size:.875rem;padding:14px 16px;border-radius:var(--r-lg);outline:none;transition:.28s;resize:vertical;min-height:160px;line-height:1.7}
.tool-textarea:focus{background:#fff}
.tool-textarea::placeholder{color:var(--text-4)}
.tool-btn-primary{color:#fff}
.tool-btn-primary:hover{transform:translateY(-2px)}
.tips-box{border-radius:var(--r-lg);padding:14px 16px}
.tips-box h4{font-family:var(--font-h);font-size:.82rem;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.tips-box ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.tips-box li{font-size:.78rem;color:var(--text-3);display:flex;align-items:flex-start;gap:6px;line-height:1.55}
.tips-box li::before{content:'✓';font-weight:700;flex-shrink:0;margin-top:1px}
.sb-card-hdr{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.sb-card-hdr h4{font-family:var(--font-h);font-size:.85rem;font-weight:700}

/* Misc utils */
.cat-icon-wrap{width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.35rem;transition:.3s}
.btn-outline-white{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.btn-outline-white:hover{background:rgba(255,255,255,.2)}
.loader-spinner {
  width:18px;
  height:18px;
  border:3px solid #ddd;
  border-top:3px solid #2563eb;
  border-radius:50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.box {
  background:#fff1f2;
  border:1.5px solid #ff000030;
  padding:12px;
  border-radius:10px;
  font-size:.8rem;
  color:#cc0000;
  word-break:break-word;
}

.modal-ov{position:fixed;inset:0;z-index:9998;background:rgba(15,23,42,.65);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto;opacity:0;visibility:hidden;transition:.3s}
.modal-ov.open{opacity:1;visibility:visible}
.modal-box{background:#fff;border-radius:var(--r-xl);width:100%;max-width:700px;box-shadow:0 40px 80px rgba(15,23,42,.25);position:relative;overflow:hidden;transform:translateY(28px);transition:.35s;margin:auto}
.modal-ov.open .modal-box{transform:translateY(0)}
.modal-top{background:linear-gradient(135deg,#1e1b4b,#312e81);padding:20px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-top h2{font-family:var(--font-h);font-size:1.1rem;font-weight:800;color:#fff}
.modal-top p{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:2px}
.modal-cls{background:rgba(255,255,255,.18);border:none;color:#fff;width:30px;height:30px;min-width:30px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:.2s}
.modal-cls:hover{background:rgba(255,255,255,.32)}
.modal-body{padding:24px}
.msec{font-family:var(--font-h);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-4);margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.msec:first-of-type{margin-top:0}
.fg{margin-bottom:12px}
.fg label{display:block;font-family:var(--font-b);font-size:.72rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.fg label .req{color:var(--red)}
.fc{width:100%;background:#f8f9fc;border:1.5px solid var(--border);color:var(--text);font-family:var(--font-b);font-size:.875rem;padding:10px 13px;border-radius:var(--r);outline:none;transition:.28s}
.fc:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.fc::placeholder{color:var(--text-4)}
select.fc{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-color:#f8f9fc}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.subcats{display:none;margin-top:8px}
.subcats.active{display:block}
.scat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:7px}
.scat-item{padding:8px 11px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);font-size:.8rem;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:7px;user-select:none}
.scat-item:hover,.scat-item.sel{border-color:var(--purple);background:var(--purple-l);color:var(--purple);font-weight:600}
.soc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sw{position:relative}.sw .sp{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.85rem;pointer-events:none}.sw .fc{padding-left:34px}
.logo-up{border:2px dashed var(--border-2);border-radius:var(--r-lg);padding:16px;text-align:center;cursor:pointer;transition:.2s;background:var(--bg)}
.logo-up:hover{border-color:var(--purple);background:var(--purple-l)}
.logo-up.done{border-color:var(--green);background:var(--green-l)}
.logo-prev-img{display:none;max-height:52px;max-width:140px;margin:7px auto 0;border-radius:8px;object-fit:contain}
.ccount{font-size:.7rem;color:var(--text-4);text-align:right;margin-top:3px}
.ccount.warn{color:var(--amber)}.ccount.over{color:var(--red)}
/* Product rows */
.prod-row{margin-bottom:9px}
.prod-ri{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:start}
.pl-wrap{position:relative}.pl-wrap .pi{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--text-4);pointer-events:none}.pl-wrap .fc{padding-left:28px}
.prod-del{background:#fff1f2;border:1.5px solid #fecaca;color:var(--red);border-radius:8px;padding:9px 11px;cursor:pointer;font-size:.75rem;font-weight:600;transition:.2s;white-space:nowrap}
.prod-del:hover{background:#fee2e2}
.add-prod{display:inline-flex;align-items:center;gap:7px;background:var(--purple-l);border:1.5px dashed #c4b5fd;color:var(--purple);font-family:var(--font-b);font-size:.78rem;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;transition:.2s}
.add-prod:hover{background:#ede9fe;border-color:var(--purple)}
.sub-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff;font-family:var(--font-b);font-weight:700;font-size:.92rem;padding:13px;border-radius:var(--r-lg);border:none;cursor:pointer;transition:.28s;margin-top:8px}
.sub-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(30,27,75,.4)}
.f-trust{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.7rem;color:var(--text-4);margin-top:8px}
/* Success modal */
.suc-ov{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.3s}
.suc-ov.open{opacity:1;visibility:visible}
.suc-box{background:#fff;border-radius:var(--r-xl);padding:42px 36px;max-width:380px;width:100%;text-align:center;box-shadow:0 40px 80px rgba(15,23,42,.25);transform:scale(.9);transition:.35s}
.suc-ov.open .suc-box{transform:scale(1)}
.suc-icon{width:68px;height:68px;border-radius:50%;background:var(--green-l);border:3px solid #a7f3d0;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.7rem}
.suc-box h3{font-family:var(--font-h);font-size:1.35rem;font-weight:800;margin-bottom:8px}
.suc-box p{font-size:.875rem;color:var(--text-3);line-height:1.7;margin-bottom:20px}

/* ── DIRECTORY BODY ── */
.dir-body{max-width:1280px;margin:0 auto;padding:32px 20px 80px;display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}

/* ── MAIN CONTENT ── */
.dir-main{}
.results-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1.5px solid var(--border)}
.results-count{font-family:var(--font-h);font-size:.95rem;font-weight:700}
.results-count span{color:var(--purple)}
.sort-wrap{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-3)}
.sort-select{border:1.5px solid var(--border);border-radius:9px;padding:5px 11px;font-family:var(--font-b);font-size:.8rem;background:#fff;color:var(--text);outline:none;cursor:pointer;transition:var(--tr)}
.sort-select:focus{border-color:var(--purple)}
.active-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.atag{display:inline-flex;align-items:center;gap:5px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);color:var(--purple);font-size:.75rem;font-weight:600;padding:4px 11px;border-radius:100px;cursor:pointer;transition:.2s}
.atag:hover{background:rgba(124,58,237,.15)}

/* ── BIZ ROW (single column listing) ── */
.biz-list{display:flex;flex-direction:column;gap:16px}
.biz-row{
  background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);transition:var(--tr);overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;gap:0;
}
.biz-row:hover{box-shadow:var(--sh-lg);transform:translateY(-3px);border-color:rgba(124,58,237,.2)}

/* Left accent bar */
.biz-row-accent{width:6px;background:var(--row-color,var(--purple));flex-shrink:0;border-radius:0}

/* Center content */
.biz-row-body{padding:18px 20px;display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center}

/* Logo */
.biz-row-logo{
  width:80px;height:80px;border-radius:var(--r-lg);
  border:1.5px solid var(--border);background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:2rem;
  overflow:hidden;flex-shrink:0;
}
.biz-row-logo img{width:100%;height:100%;object-fit:contain}

/* Info */
.biz-row-info{min-width:0}
.biz-row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.biz-row-name{font-family:var(--font-h);font-size:1.05rem;font-weight:800;color:var(--text)}
.biz-row-cat{font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}
.biz-row-subcat{font-size:.8rem;font-weight:600;color:var(--purple);display:flex;align-items:center;gap:5px;margin-bottom:6px}
.biz-row-subcat::before{content:'';width:4px;height:4px;background:var(--purple);border-radius:50%;flex-shrink:0}
.biz-row-desc{font-size:.82rem;color:var(--text-3);line-height:1.65;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.biz-row-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.biz-meta-item{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--text-3)}
.biz-meta-item i{font-size:.7rem;color:var(--text-4)}
.biz-row-prods{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.prod-tag{font-size:.68rem;font-weight:600;padding:2px 9px;border-radius:100px;background:var(--bg);border:1px solid var(--border);color:var(--text-3)}
.prod-tag.linked{background:var(--blue-l);border-color:var(--blue-m);color:var(--blue);text-decoration:none}
.prod-tag.linked:hover{background:var(--blue-m)}
.biz-row-socials{display:flex;gap:5px;margin-top:7px}
.biz-soc{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--text-4);text-decoration:none;transition:.2s}
.biz-soc:hover{transform:scale(1.15)}
.biz-soc.fb:hover{background:#1877f2;border-color:#1877f2;color:#fff}
.biz-soc.ig:hover{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent;color:#fff}
.biz-soc.tw:hover{background:#0f172a;border-color:#333;color:#fff}
.biz-soc.li:hover{background:#0a66c2;border-color:#0a66c2;color:#fff}
.biz-soc.yt:hover{background:red;border-color:red;color:#fff}

/* Right actions */
.biz-row-actions{padding:18px 20px 18px 0;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;min-width:130px}
.biz-act-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r);font-family:var(--font-b);font-size:.75rem;font-weight:600;cursor:pointer;text-decoration:none;transition:var(--tr);border:none;white-space:nowrap}
.biz-act-wa{background:var(--green-l);color:var(--green);border:1.5px solid #a7f3d0}
.biz-act-wa:hover{background:#dcfce7;transform:translateY(-1px)}
.biz-act-site{background:var(--blue-l);color:var(--blue);border:1.5px solid var(--blue-m)}
.biz-act-site:hover{background:var(--blue-m)}
.biz-act-email{background:var(--bg);color:var(--text-3);border:1.5px solid var(--border)}
.biz-act-email:hover{border-color:var(--blue);color:var(--blue)}
.biz-rank-badge{font-family:var(--font-h);font-size:.65rem;font-weight:800;background:var(--amber-l);color:var(--amber-d);border:1px solid #fde68a;padding:3px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}
.biz-row.tier-premium{border-color:#f59e0b;box-shadow:0 10px 28px rgba(245,158,11,.16)}
.biz-row.tier-featured{border-color:#2563eb;box-shadow:0 8px 24px rgba(37,99,235,.12)}
.biz-tier-badge{font-family:var(--font-h);font-size:.64rem;font-weight:900;padding:3px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:.08em}
.biz-tier-badge.premium{background:#fef3c7;color:#92400e;border:1px solid #f59e0b}
.biz-tier-badge.featured{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}
.top10-logo img{width:100%;height:100%;object-fit:contain;border-radius:6px}

/* ── NO RESULTS ── */
.no-results{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:56px 24px;text-align:center}
.no-results i{font-size:2.4rem;color:var(--text-4);display:block;margin-bottom:14px}
.no-results h3{font-size:1.1rem;font-weight:700;margin-bottom:8px;color:var(--text-2)}

/* ── PAGINATION ── */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.pg-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;border:1.5px solid var(--border);background:#fff;font-family:var(--font-h);font-size:.82rem;font-weight:600;color:var(--text-3);cursor:pointer;transition:.2s}
.pg-btn:hover,.pg-btn.active{background:var(--purple);border-color:var(--purple);color:#fff}

/* Top 10 list */
.top-cat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tct{padding:4px 10px;border-radius:100px;font-size:.7rem;font-weight:600;background:var(--bg);border:1px solid var(--border);color:var(--text-3);cursor:pointer;transition:.2s}
.tct.active{background:var(--purple);border-color:var(--purple);color:#fff}
.top10-list{display:flex;flex-direction:column;gap:0}
.top10-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);text-decoration:none;transition:.2s;cursor:pointer}
.top10-item:last-child{border-bottom:none}
.top10-item:hover{padding-left:4px}
.top10-num{font-family:var(--font-h);font-size:.72rem;font-weight:800;color:var(--text-4);min-width:18px;text-align:center}
.top10-num.gold{color:var(--amber)}
.top10-logo{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;overflow:hidden}
.top10-info{flex:1;min-width:0}
.top10-name{font-family:var(--font-h);font-size:.78rem;font-weight:700;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top10-sub{font-size:.68rem;color:var(--text-4)}

/* Sidebar ad */
.sb-ad{min-height:250px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);border:1.5px dashed var(--border-2);border-radius:var(--r-xl);color:var(--text-4);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;position:relative}
.sb-ad::before{content:'Advertisement';position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:.58rem;letter-spacing:.1em;color:var(--text-4)}

/* ── LIST CTA BANNER ── */
.list-cta{background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:var(--r-xl);padding:36px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:36px;position:relative;overflow:hidden}
.list-cta::before{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.05);top:-50px;right:-50px}
.list-cta-text{position:relative;z-index:1}
.list-cta-text h3{font-family:var(--font-h);font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:6px}
.list-cta-text p{font-size:.875rem;color:rgba(255,255,255,.7);max-width:440px;line-height:1.7}
.list-cta-acts{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.lca-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:100px;font-family:var(--font-b);font-weight:700;font-size:.88rem;cursor:pointer;text-decoration:none;transition:var(--tr);border:none;white-space:nowrap}
.lca-web{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;animation:webGlow 2.5s infinite}
.lca-web:hover{transform:translateY(-2px);animation:none;box-shadow:0 10px 28px rgba(245,158,11,.5)}

/* Search Box */
.search-box{background:#fff;border-radius:var(--r-xl);padding:7px;display:flex;gap:0;box-shadow:0 20px 60px rgba(0,0,0,.35);max-width:900px;margin:0 auto;flex-wrap:wrap}
.sb-f{flex:1;min-width:140px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-right:1px solid var(--border);cursor:pointer;transition:var(--tr);border-radius:12px}
.sb-f:last-of-type{border-right:none}
.sb-f:hover{background:var(--bg)}
.sb-f i{font-size:.95rem;flex-shrink:0}
.sf-wrap{flex:1}
.sf-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-4);margin-bottom:2px}
.sf-wrap select,.sf-wrap input{width:100%;border:none;outline:none;background:transparent;font-family:var(--font-b);font-size:.85rem;font-weight:500;color:var(--text);cursor:pointer}
.sb-btn{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff;font-family:var(--font-b);font-weight:700;font-size:.88rem;padding:12px 22px;border-radius:var(--r-lg);border:none;cursor:pointer;transition:var(--tr);flex-shrink:0}
.sb-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(30,27,75,.4)}

 .footer-cta-btn {display: inline-flex; align-items: center;gap: 8px; background: var(--blue);color: #fff; text-decoration: none; padding: 11px 20px; border-radius: 100px;font-size: .85rem;font-weight: 600; transition: var(--tr)}

.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.site-logo{
  display:block;
  width:auto;
  max-width:100%;
  height:42px;
  object-fit:contain;
}

/* Header */
header .site-logo,
.hdr .site-logo,
.navbar .site-logo{
  height:42px;
}

/* Footer */
footer .site-logo{
  height:54px;
}

@media(max-width:768px){

  header .site-logo,
  .hdr .site-logo,
  .navbar .site-logo{
    height:36px;
  }

  footer .site-logo{
    height:48px;
  }

}

/* =========================
   TABLETS
========================= */
@media screen and (max-width: 992px) {

  .dir-body {
    display: flex;
    flex-direction: column;
    padding: 15px;
  }

  .dir-main,
  .dir-sidebar {
    width: 100%;
  }

  .search-box {
    flex-direction: column;
    gap: 15px;
  }

  .sb-f {
    width: 100%;
  }

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

  .list-cta {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .list-cta-acts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

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

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

  .soc-grid .sw {
    grid-column: span 1 !important;
  }

}


/* =========================
   MOBILE DEVICES
========================= */
@media screen and (max-width: 768px) {

  .search-hero {
    padding: 50px 15px;
    text-align: center;
  }

  .sh-title {
    font-size: 2rem;
    line-height: 1.3;
  }

  .sh-sub {
    font-size: 0.95rem;
  }

  .sh-stats {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .results-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sort-wrap {
    width: 100%;
  }

  .sort-select {
    width: 100%;
  }

  .biz-list {
    grid-template-columns: 1fr;
  }

  .modal-box {
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
  }

  .form-row {
    flex-direction: column;
  }

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

  .top10-list {
    overflow-x: auto;
  }


}


/* =========================
   SMALL MOBILE DEVICES
========================= */
@media screen and (max-width: 576px) {

  .sh-title {
    font-size: 1.7rem;
  }

  .search-box {
    padding: 15px;
  }

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

  .modal-top h2 {
    font-size: 1.1rem;
  }

  .sub-btn {
    width: 100%;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

}

/* Business directory: desktop grid preview with fixed sidebar */
.dir-body {
  max-width: 1512px;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}

.biz-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.biz-card {
  min-width: 0;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: var(--tr);
}

.biz-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.24);
}

.biz-card.tier-premium {
  border-color: #f59e0b;
  box-shadow: 0 10px 28px rgba(245,158,11,.14);
}

.biz-card.tier-featured {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37,99,235,.12);
}

.biz-card-top {
  height: 80px;
  padding: 0 16px;
  background: linear-gradient(135deg,var(--card-c1,#eff6ff),var(--card-c2,#fff));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.biz-card-badges {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 6px;
}

.biz-logo-box {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 16px rgba(15,23,42,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  overflow: hidden;
  flex-shrink: 0;
}

.biz-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.biz-cat-badge {
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.7);
  white-space: nowrap;
}

.biz-card-body {
  padding: 18px 18px 14px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.biz-name {
  font-family: var(--font-h);
  font-size: .98rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.biz-subcat {
  font-size: .75rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
}

.biz-desc {
  font-size: .8rem;
  color: var(--text-3);
  line-height: 1.55;
  min-height: 74px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.biz-info-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.biz-info-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .75rem;
  color: var(--text-3);
}

.biz-info-item i {
  color: var(--blue);
  font-size: .72rem;
  margin-top: 3px;
  width: 12px;
  flex-shrink: 0;
}

.biz-info-item a {
  color: inherit;
  text-decoration: none;
}

.biz-products {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}

.biz-prod-tag {
  font-size: .7rem;
  font-weight: 600;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  padding: 3px 10px;
  border-radius: 100px;
  text-decoration: none;
}

.biz-socials {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}

.biz-card-foot {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.biz-btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding: 9px 12px;
  font-size: .78rem;
}

.weblisto-directory-branding {
  margin: 28px 0 30px;
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  display: flex;
  align-items: center;
  gap: 16px;
}

.weblisto-brand-mark {
  width: 118px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  flex-shrink: 0;
}

.weblisto-brand-mark img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.weblisto-brand-copy {
  flex: 1;
  min-width: 0;
}

.weblisto-brand-copy strong {
  display: block;
  font-family: var(--font-h);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
}

.weblisto-brand-copy span {
  display: block;
  font-size: .84rem;
  color: var(--text-3);
  line-height: 1.55;
}

.weblisto-brand-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border: none;
  border-radius: 100px;
  background: linear-gradient(135deg,#1e1b4b,#312e81);
  color: #fff;
  font-family: var(--font-b);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.weblisto-business-directory-section {
  margin: 0 0 34px;
  padding: 0;
}

.weblisto-container {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.weblisto-heading-area {
  padding: 30px 32px 22px;
  background: linear-gradient(135deg,#eff6ff,#f8fafc);
  border-bottom: 1px solid var(--border);
}

.weblisto-main-heading {
  font-family: var(--font-h);
  font-size: clamp(1.45rem,2vw,2rem);
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0;
  margin: 0 0 8px;
}

.weblisto-sub-heading {
  max-width: 760px;
  font-size: .96rem;
  color: var(--text-3);
  line-height: 1.75;
  margin: 0;
}

.weblisto-content-area {
  padding: 28px 32px 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.weblisto-content-block {
  min-width: 0;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.weblisto-content-block:first-child {
  grid-column: 1 / -1;
  background: #fff;
}

.weblisto-small-heading {
  font-family: var(--font-h);
  font-size: 1.03rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
}

.weblisto-paragraph {
  font-size: .9rem;
  color: var(--text-3);
  line-height: 1.8;
  margin: 0 0 12px;
}

.weblisto-paragraph:last-child {
  margin-bottom: 0;
}

.weblisto-list {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
}

.weblisto-list li {
  position: relative;
  padding-left: 24px;
  font-size: .88rem;
  color: var(--text-3);
  line-height: 1.55;
}

.weblisto-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-l);
  color: var(--green);
  font-size: .62rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 901px) {
  .dir-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .dir-sidebar {
    width: auto;
    position: sticky;
    top: 82px;
  }
}

.no-results {
  grid-column: 1 / -1;
}

@media screen and (max-width: 1280px) {
  .biz-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 900px) {
  .dir-body {
    max-width: 100%;
    grid-template-columns: 1fr;
  }

  .biz-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 640px) {
  .biz-list {
    grid-template-columns: 1fr;
  }

  .biz-card-foot {
    flex-direction: column;
  }

  .weblisto-directory-branding {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .weblisto-brand-mark {
    margin: 0 auto;
  }

  .weblisto-heading-area,
  .weblisto-content-area {
    padding-left: 18px;
    padding-right: 18px;
  }

  .weblisto-content-area {
    grid-template-columns: 1fr;
  }
}

.ad-slot {display:none;}