/* =========================================================================
   TekSathi - home.css
   Additive styles for the upgraded site-wide header (mega menu + CTAs) and
   the B2B2C marketplace homepage sections. Reuses the design tokens defined
   in style.css (--primary, --surface, --border, --radius-*, --shadow, etc.).
   This file NEVER redefines base tokens; it only adds new components.
   ========================================================================= */

/* ---------- small button variant + sticky header ---------- */
.btn-sm{padding:9px 16px;font-size:.86rem}

.navbar{transition:background .3s, box-shadow .3s, border-color .3s}
.navbar.scrolled{
  background:rgba(7,17,31,.82);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
body.light-mode .navbar.scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(16,34,56,.08);
}

/* ---------- header CTA groups ---------- */
.nav-cta-desktop{display:flex;align-items:center;gap:10px}
.nav-cta-mobile{display:none}
.nav-login-link{display:none}

/* ---------- MEGA MENU ---------- */
.mega-dropdown{position:relative}
.mega-menu{
  min-width:640px;
  padding:18px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg-2);
  box-shadow:var(--shadow);
  left:50%;
  transform:translateX(-50%);
}
.mega-dropdown:hover .mega-menu{display:block}

.mega-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.mega-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:14px;
  transition:.2s;
}
.mega-item:hover{background:var(--surface)}
.mega-ico{
  width:40px;height:40px;flex:none;border-radius:12px;
  display:grid;place-items:center;font-size:1.15rem;
  background:linear-gradient(135deg,rgba(31,143,229,.18),rgba(89,184,12,.16));
}
.mega-txt{display:flex;flex-direction:column;line-height:1.25}
.mega-txt strong{font-size:.95rem;color:var(--text)}
.mega-txt small{font-size:.78rem;color:var(--muted)}

.mega-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.mega-col h5{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--primary);margin-bottom:12px;font-weight:800;
}
.mega-col a{
  display:block;padding:7px 0;color:var(--muted);font-size:.92rem;
  transition:.2s;
}
.mega-col a:hover{color:var(--text);transform:translateX(3px)}
.mega-col-cta{
  border-left:1px solid var(--border);padding-left:22px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
}
.mega-col-cta .btn{width:100%;text-align:center}
.mega-col-cta a:hover{transform:none}
.mega-login{color:var(--primary)!important;font-weight:700;font-size:.9rem;margin-top:2px}

/* =========================================================================
   HERO (marketplace)
   ========================================================================= */
.mkt-hero{
  padding:64px 0 40px;
  position:relative;
}
.mkt-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
}
.mkt-hero h1{
  font-size:clamp(2.6rem,4.4vw,4.4rem);line-height:1.05;
  letter-spacing:-.03em;margin-bottom:18px;
}
.mkt-hero .lead{font-size:1.06rem;max-width:600px;margin-bottom:26px;color:var(--muted)}
.mkt-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}

/* hero search */
.hero-search{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:999px;padding:8px 8px 8px 20px;max-width:600px;
  box-shadow:var(--shadow);
}
.hero-search input{
  flex:1;border:none;background:none;outline:none;
  color:var(--text);font-size:.98rem;min-width:0;
}
.hero-search .hero-search-ico{color:var(--muted);font-size:1rem}
.hero-search button{white-space:nowrap}

.hero-trust{margin-top:18px;display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:.86rem}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust i{color:var(--green)}

/* hero ecosystem visual - orbital hub & spoke: TekSathi at the centre,
   each service category orbiting it and connected by a ray, which encodes
   the actual idea ("one hub, many services") rather than decorating it. */
.ecosystem{
  position:relative;overflow:hidden;
  border-radius:32px;aspect-ratio:1;max-width:460px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--border);box-shadow:var(--shadow);
  --radius:150px;
}
body.light-mode .ecosystem{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78))}
.ecosystem::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 16%, rgba(31,143,229,.22), transparent 42%),
    radial-gradient(circle at 82% 84%, rgba(89,184,12,.16), transparent 42%);
}

.ecosystem-orbit-ring{
  position:absolute;top:50%;left:50%;z-index:0;
  width:calc(var(--radius) * 2 + 96px);height:calc(var(--radius) * 2 + 96px);
  margin:calc(-1 * (var(--radius) + 48px)) 0 0 calc(-1 * (var(--radius) + 48px));
  border-radius:50%;border:1px dashed rgba(31,143,229,.28);
  animation:eco-spin 70s linear infinite;
}
body.light-mode .ecosystem-orbit-ring{border-color:rgba(20,122,209,.2)}
@keyframes eco-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ecosystem-orbit-ring{animation:none}
  .eco-node{transition:none}
}

.ecosystem-core{
  position:relative;z-index:2;text-align:center;
  width:132px;height:132px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;
  background:linear-gradient(160deg,var(--bg-2),rgba(31,143,229,.12));
  border:1px solid var(--border);
  box-shadow:0 0 0 6px rgba(31,143,229,.07),0 14px 32px rgba(0,0,0,.28);
}
.ecosystem-core strong{
  font-size:1.18rem;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--primary),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ecosystem-core span{display:block;font-size:.66rem;color:var(--muted);margin-top:5px;line-height:1.35;padding:0 6px}

.ecosystem-ring{position:absolute;inset:0;z-index:1}
.eco-ray{
  position:absolute;top:50%;left:50%;width:var(--radius);height:1px;
  background:linear-gradient(90deg,rgba(31,143,229,.5),transparent);
  transform-origin:0 50%;transform:rotate(var(--angle));
}
.eco-node{
  position:absolute;top:50%;left:50%;width:80px;margin:-40px 0 0 -40px;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  transform:rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle)));
  transition:transform .3s;
}
.eco-node:hover{
  transform:rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) translateY(-5px);
}
.eco-node-inner{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.35rem;
  background:var(--eco-tint,var(--surface));border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.eco-node small{font-size:.74rem;color:var(--muted);font-weight:600;white-space:nowrap}
.eco-c1{--eco-tint:linear-gradient(135deg,rgba(31,143,229,.30),rgba(31,143,229,.08))}
.eco-c2{--eco-tint:linear-gradient(135deg,rgba(147,51,234,.30),rgba(147,51,234,.08))}
.eco-c3{--eco-tint:linear-gradient(135deg,rgba(89,184,12,.30),rgba(89,184,12,.08))}
.eco-c4{--eco-tint:linear-gradient(135deg,rgba(217,119,6,.30),rgba(217,119,6,.08))}
.eco-c5{--eco-tint:linear-gradient(135deg,rgba(219,39,119,.30),rgba(219,39,119,.08))}
.eco-c6{--eco-tint:linear-gradient(135deg,rgba(13,148,136,.30),rgba(13,148,136,.08))}

@media (max-width:480px){
  .ecosystem{--radius:104px;max-width:300px}
  .eco-node{width:62px;margin:-31px 0 0 -31px}
  .eco-node-inner{width:42px;height:42px;font-size:1.05rem;border-radius:12px}
  .eco-node small{font-size:.64rem}
  .ecosystem-core{width:96px;height:96px}
  .ecosystem-core strong{font-size:.96rem}
  .ecosystem-core span{font-size:.56rem}
}

/* =========================================================================
   SECTION HELPERS
   ========================================================================= */
.mkt-section{padding:56px 0}
.mkt-center{text-align:center;max-width:720px;margin:0 auto 38px}
.mkt-center .tag{
  display:inline-block;text-transform:uppercase;letter-spacing:.12em;
  font-size:.76rem;color:var(--primary);font-weight:800;margin-bottom:10px;
}
.mkt-center h2{font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.12;margin-bottom:10px}
.mkt-center p{color:var(--muted)}

/* =========================================================================
   POPULAR CATEGORIES
   ========================================================================= */
.cat-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.cat-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px 20px;transition:.3s;
  display:block;
}
.cat-card::after{
  content:"";position:absolute;inset:0;opacity:0;transition:.3s;
  background:linear-gradient(135deg,rgba(31,143,229,.10),rgba(89,184,12,.08));
}
.cat-card:hover{transform:translateY(-6px);border-color:rgba(31,143,229,.4)}
.cat-card:hover::after{opacity:1}
.cat-card .cat-emoji{
  position:relative;z-index:1;
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  font-size:1.5rem;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(31,143,229,.18),rgba(89,184,12,.16));
}
.cat-card h3{position:relative;z-index:1;font-size:1.08rem;margin-bottom:4px}
.cat-card p{position:relative;z-index:1;font-size:.86rem;color:var(--muted);margin-bottom:10px}
.cat-card .cat-link{position:relative;z-index:1;font-size:.85rem;color:var(--primary);font-weight:700}

/* =========================================================================
   FEATURED ORGANIZATIONS
   ========================================================================= */
.org-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.org-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;transition:.3s;
  display:flex;flex-direction:column;
}
.org-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.org-cover{
  height:120px;position:relative;
  background-size:cover;background-position:center;
}
.org-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.org-verified{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(7,17,31,.7);color:#fff;border:1px solid rgba(255,255,255,.2);
  padding:5px 10px;border-radius:999px;font-size:.72rem;font-weight:700;
}
.org-verified i{color:#3fb0ff}
.org-logo{
  width:58px;height:58px;border-radius:16px;object-fit:cover;
  border:3px solid var(--bg-2);background:var(--bg-2);
  margin:-34px 0 0 20px;position:relative;z-index:2;
}
.org-body{padding:12px 20px 20px}
.org-cat{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);font-weight:800}
.org-body h3{font-size:1.1rem;margin:4px 0 6px}
.org-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.org-loc{font-size:.86rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.org-rating{font-size:.86rem;color:var(--text);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.org-rating i{color:#f5b301}
.org-card .btn{width:100%;text-align:center;margin-top:auto}

/* =========================================================================
   HOW IT WORKS (tabs)
   ========================================================================= */
.hiw-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:34px}
.hiw-tab{
  padding:12px 26px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-weight:700;cursor:pointer;
  transition:.25s;font-size:.95rem;
}
.hiw-tab.active{background:linear-gradient(135deg,var(--primary),var(--green));color:#fff;border-color:transparent}
.hiw-panel{display:none}
.hiw-panel.active{display:block}
.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
.hiw-step{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:26px;text-align:center;
}
.hiw-num{
  width:46px;height:46px;margin:0 auto 14px;border-radius:14px;
  display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--green));
}
.hiw-step h3{font-size:1.1rem;margin-bottom:8px}
.hiw-step p{color:var(--muted);font-size:.92rem}

/* =========================================================================
   WHY TEKSATHI (grid)
   ========================================================================= */
.why-features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wf-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:22px;transition:.3s;
}
.wf-card:hover{transform:translateY(-4px)}
.wf-ico{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-size:1.25rem;margin-bottom:14px;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--green));
}
.wf-card h3{font-size:1.05rem;margin-bottom:6px}
.wf-card p{color:var(--muted);font-size:.9rem}

/* =========================================================================
   FOR BUSINESSES
   ========================================================================= */
.fb-section{
  background:linear-gradient(180deg,rgba(31,143,229,.06),rgba(89,184,12,.04));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.fb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.fb-card{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:22px;transition:.3s;
  display:flex;flex-direction:column;
}
.fb-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.fb-ico{font-size:1.7rem;margin-bottom:12px}
.fb-card h3{font-size:1.05rem;margin-bottom:6px}
.fb-card p{color:var(--muted);font-size:.86rem;margin-bottom:14px;flex:1}
.fb-card .fb-link{font-size:.86rem;font-weight:700;color:var(--primary)}

/* =========================================================================
   APP PREVIEW
   ========================================================================= */
.preview-stage{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:20px;flex-wrap:wrap;
}
.device{
  border:1px solid var(--border);border-radius:22px;overflow:hidden;
  background:var(--bg-2);box-shadow:var(--shadow);
}
.device img{display:block;width:100%;height:100%;object-fit:cover}
.device-desktop{width:min(560px,90%)}
.device-desktop img{height:340px}
.device-mobile{width:180px;border-radius:26px}
.device-mobile img{height:360px}

/* =========================================================================
   TESTIMONIALS (slider)
   ========================================================================= */
.tsl-wrap{position:relative;max-width:820px;margin:0 auto;overflow:hidden}
.tsl-track{display:flex;transition:transform .5s ease}
.tsl-slide{min-width:100%;padding:6px}
.tsl-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:34px;text-align:center;box-shadow:var(--shadow);
}
.tsl-stars{color:#f5b301;margin-bottom:14px;font-size:.95rem}
.tsl-quote{font-size:1.12rem;line-height:1.7;color:var(--text);margin-bottom:18px}
.tsl-who{display:flex;align-items:center;justify-content:center;gap:12px}
.tsl-avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(31,143,229,.2),rgba(89,184,12,.18));font-size:1.3rem}
.tsl-who strong{display:block;font-size:.98rem}
.tsl-who small{color:var(--muted)}
.tsl-nav{display:flex;justify-content:center;gap:10px;margin-top:22px}
.tsl-dot{width:9px;height:9px;border-radius:50%;background:var(--border);border:none;cursor:pointer;transition:.25s}
.tsl-dot.active{background:var(--primary);width:26px;border-radius:6px}

/* =========================================================================
   FAQ (accordion)
   ========================================================================= */
.acc{max-width:820px;margin:0 auto;display:grid;gap:12px}
.acc-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.acc-q{
  width:100%;text-align:left;padding:18px 20px;background:none;border:none;cursor:pointer;
  color:var(--text);font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.acc-q .acc-sign{color:var(--primary);font-size:1.3rem;transition:.25s;flex:none}
.acc-item.open .acc-sign{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-a p{padding:0 20px 18px;color:var(--muted);font-size:.94rem;line-height:1.7}

/* =========================================================================
   FINAL DUAL CTA
   ========================================================================= */
.dual-cta{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dual-card{
  border-radius:var(--radius-xl);padding:38px;border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.dual-card.members{background:linear-gradient(135deg,rgba(31,143,229,.16),rgba(31,143,229,.06))}
.dual-card.business{background:linear-gradient(135deg,rgba(89,184,12,.16),rgba(89,184,12,.06))}
.dual-card h3{font-size:1.6rem;margin-bottom:8px}
.dual-card p{color:var(--muted);margin-bottom:20px}

/* =========================================================================
   HERO MULTI-FIELD SEARCH
   ========================================================================= */
.hero-search-multi{
  border-radius:20px;padding:6px;gap:5px;flex-wrap:wrap;
  max-width:100%; /* fluid - was a fixed 640px that could exceed the actual
                     hero column width, forcing an ugly mid-row wrap */
}
.hero-search-multi .hsf{
  display:flex;align-items:center;gap:6px;padding:7px 10px;
  border-radius:14px;background:var(--surface-2);border:1px solid var(--border);
  min-width:0;transition:border-color .2s,box-shadow .2s;
}
.hero-search-multi .hsf:focus-within{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,143,229,.15);
}
.hero-search-multi .hsf i{color:var(--muted);font-size:.85rem;flex-shrink:0}
.hero-search-multi .hsf input,
.hero-search-multi .hsf select{
  border:none;background:none;outline:none;color:var(--text);
  font-size:.92rem;min-width:0;width:100%;
}
.hero-search-multi .hsf-q{flex:2 1 170px}
.hero-search-multi .hsf-loc{flex:1 1 90px}
.hero-search-multi .hsf-cat{flex:1 1 120px;position:relative}
.hero-search-multi > .btn{flex:0 0 auto;padding:12px 22px}
.hero-search-multi .hsf select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:16px;/* room for our own chevron instead of the browser's native arrow */
}
.hero-search-multi .hsf select::-ms-expand{display:none}
.hero-search-multi .hsf-cat-chevron{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:.62rem;color:var(--muted);pointer-events:none;
}
.hero-search-multi .hsf select option{color:#111}

/* Quick category pills under the search bar - tap straight into /explore
   pre-filtered, no typing or dropdown needed. */
.hero-cat-pills{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.hero-cat-pill{
  display:inline-flex;align-items:center;
  padding:7px 16px;border-radius:999px;font-size:.82rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  transition:.2s;
}
.hero-cat-pill:hover{
  border-color:var(--primary);color:var(--primary);transform:translateY(-2px);
  background:rgba(31,143,229,.08);
}

/* =========================================================================
   CATEGORY "COMING SOON"
   ========================================================================= */
.cat-badge{
  position:absolute;z-index:2;top:12px;right:12px;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border);
}
.cat-soon{opacity:.92}
.cat-soon .cat-emoji{filter:grayscale(.15)}
.cat-link-muted{color:var(--muted)!important;cursor:default}

/* =========================================================================
   POPULAR SERVICES
   ========================================================================= */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svc-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:20px;transition:.3s;
}
.svc-card:hover{transform:translateY(-5px);border-color:rgba(31,143,229,.4)}
.svc-body h3{font-size:1.02rem;margin-bottom:4px}
.svc-body p{font-size:.85rem;color:var(--muted)}
.svc-cta{font-size:.84rem;font-weight:700;color:var(--primary)}

/* =========================================================================
   ORG cover (plain, no image) + EMPTY STATE
   ========================================================================= */
.org-cover-plain{
  background:linear-gradient(135deg,rgba(31,143,229,.35),rgba(89,184,12,.30));
}
.org-empty{
  text-align:center;max-width:560px;margin:0 auto;
  background:var(--surface);border:1px dashed var(--border);
  border-radius:var(--radius-xl);padding:44px 28px;
}
.org-empty-ico{font-size:2.4rem;margin-bottom:10px}
.org-empty h3{font-size:1.2rem;margin-bottom:8px}
.org-empty p{color:var(--muted);margin-bottom:18px}

/* =========================================================================
   HEALTHCARE DISCOVERY
   ========================================================================= */
.hc-section{
  background:linear-gradient(180deg,rgba(31,143,229,.06),transparent);
  border-top:1px solid var(--border);
}
.hc-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px;
}
.hc-stat{
  text-align:center;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:20px;
}
.hc-stat strong{display:block;font-size:1.7rem;line-height:1;
  background:linear-gradient(135deg,var(--primary),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hc-stat span{font-size:.85rem;color:var(--muted)}
.hc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.hc-card{
  text-align:center;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:24px 16px;transition:.3s;display:block;
}
.hc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.hc-ico{font-size:1.8rem;margin-bottom:10px}
.hc-card h3{font-size:1rem;margin-bottom:6px}
.hc-card p{font-size:.84rem;color:var(--muted)}

/* =========================================================================
   DOWNLOAD APP
   ========================================================================= */
.app-cta{
  display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;
  background:linear-gradient(135deg,rgba(31,143,229,.14),rgba(89,184,12,.10));
  border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:40px;box-shadow:var(--shadow);
}
.app-cta-text h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-bottom:10px}
.app-cta-text p{color:var(--muted);max-width:460px;margin-bottom:22px}
.app-badges{display:flex;gap:14px;flex-wrap:wrap}
.app-badge{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--border);
}
.app-badge i{font-size:1.6rem;color:var(--text)}
.app-badge span{display:flex;flex-direction:column;line-height:1.2}
.app-badge small{font-size:.68rem;color:var(--muted)}
.app-badge strong{font-size:.98rem;color:var(--text)}
.app-cta-visual{display:flex;justify-content:center}
.app-cta-visual .device-mobile{width:200px}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1100px){
  .mkt-hero-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .org-grid{grid-template-columns:repeat(2,1fr)}
  .fb-grid{grid-template-columns:repeat(3,1fr)}
  .why-features{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .hc-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .nav-cta-desktop{display:none}
  .mega-menu{min-width:0;width:100%;position:static;transform:none;box-shadow:none;padding:8px 0}
  .mega-grid{grid-template-columns:1fr}
  .mega-cols{grid-template-columns:1fr}
  .mega-col-cta{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:14px}
  .nav-login-link{display:block}
  .nav-cta-mobile{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:6px}
  .nav-cta-mobile .btn{width:100%;text-align:center}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .org-grid{grid-template-columns:1fr}
  .hiw-steps{grid-template-columns:1fr}
  .why-features{grid-template-columns:1fr}
  .fb-grid{grid-template-columns:1fr}
  .dual-cta{grid-template-columns:1fr}
  .hiw-tab{padding:10px 18px;font-size:.88rem}
  .svc-grid{grid-template-columns:1fr}
  .hc-grid{grid-template-columns:1fr}
  .hc-stats{grid-template-columns:repeat(2,1fr)}
  .app-cta{grid-template-columns:1fr;padding:26px}
  .app-cta-visual{display:none}
  .hero-search-multi .hsf-q,
  .hero-search-multi .hsf-loc,
  .hero-search-multi .hsf-cat{flex:1 1 100%}
  .hero-search-multi > .btn{width:100%}
}
@media (max-width:520px){
  .cat-grid{grid-template-columns:1fr}
}