:root{
      --bg:#0b1220;
      --card:#0f1a30;
      --card2:#0e1830;
      --surface:#ffffff;
      --ink:#0f172a;
      --muted:#64748b;
      --muted2:#94a3b8;
      --border:rgba(148,163,184,.25);
      --border2:rgba(148,163,184,.18);
      --brand:#2563eb;
      --brand2:#1d4ed8;
      --ok:#16a34a;
      --warn:#f59e0b;
      --danger:#ef4444;
      --shadow: 0 10px 30px rgba(2,6,23,.35);
      --shadow2: 0 6px 16px rgba(2,6,23,.22);
      --r12:12px;
      --r16:16px;
      --r20:20px;
      --t: 180ms ease;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(900px 500px at 20% 10%, rgba(37,99,235,.35), transparent 55%),
        radial-gradient(900px 500px at 85% 15%, rgba(59,130,246,.22), transparent 60%),
        linear-gradient(180deg, #070b14 0%, #0a1020 40%, #0b1220 100%);
    }

    a{color:inherit}
    .skip-link{
      position:absolute; left:12px; top:-48px;
      padding:.75rem 1rem;
      background:#fff; color:#111827;
      border-radius:12px;
      border:1px solid rgba(15,23,42,.12);
      box-shadow:var(--shadow2);
      transition:var(--t);
      z-index:5000;
      text-decoration:none;
      font-weight:800;
    }
    .skip-link:focus{top:12px; outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.22), var(--shadow2);}

    .container{max-width:1180px;margin:0 auto;padding:0 1.25rem;}

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:3000;
      background:rgba(7,11,20,.65);
      backdrop-filter: blur(14px);
      border-bottom:1px solid rgba(148,163,184,.12);
    }
    .topbar.scrolled{background:rgba(7,11,20,.82)}
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:.9rem 0;
      gap:1rem;
    }
    .brand{
      display:flex; align-items:center; gap:.75rem;
      text-decoration:none;
    }
    .brand img{height:44px; width:auto; display:block}
    .navlinks{
      display:flex; align-items:center; gap:.9rem;
      list-style:none; padding:0; margin:0;
    }
    .navlinks a{
      text-decoration:none;
      color:rgba(226,232,240,.92);
      font-weight:700;
      font-size:.95rem;
      padding:.55rem .7rem;
      border-radius:12px;
      transition:var(--t);
    }
    .navlinks a:hover{background:rgba(148,163,184,.10); color:#fff}
    .navcta{
      display:flex; align-items:center; gap:.75rem;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
      padding:.7rem 1rem;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.18);
      background:rgba(15,23,42,.10);
      color:#e2e8f0;
      text-decoration:none;
      font-weight:800;
      transition:var(--t);
      cursor:pointer;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px); border-color:rgba(37,99,235,.45); background:rgba(37,99,235,.12)}
    .btn-primary{
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
      border-color:rgba(37,99,235,.55);
      color:#fff;
      box-shadow:0 10px 22px rgba(37,99,235,.22);
    }
    .btn-primary:hover{box-shadow:0 14px 26px rgba(37,99,235,.26)}
    .btn-ghost{
      background:transparent;
      border-color:rgba(148,163,184,.18);
    }

    .hamburger{
      display:none;
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.18);
      background:rgba(15,23,42,.10);
      color:#e2e8f0;
      cursor:pointer;
      transition:var(--t);
    }
    .hamburger:hover{border-color:rgba(37,99,235,.45); background:rgba(37,99,235,.10)}
    .hamburger span{display:block;height:2px;width:18px;margin:4px auto;background:#e2e8f0;border-radius:99px}

    /* Mobile drawer */
    .overlay{
      position:fixed; inset:0;
      background:rgba(2,6,23,.55);
      opacity:0; visibility:hidden;
      transition:var(--t);
      z-index:3500;
    }
    .overlay.open{opacity:1; visibility:visible}
    .drawer{
      position:fixed; top:0; right:0;
      height:100vh; width:min(380px, 92vw);
      background:rgba(255,255,255,.98);
      transform:translateX(110%);
      transition:var(--t);
      z-index:3600;
      box-shadow:var(--shadow);
      display:flex; flex-direction:column;
      padding:1rem;
    }
    .drawer.open{transform:translateX(0)}
    .drawerhead{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.25rem 0 1rem; border-bottom:1px solid rgba(15,23,42,.08)}
    .drawerhead img{height:42px}
    .drawerclose{
      width:44px;height:44px;border-radius:14px;border:1px solid rgba(15,23,42,.10);
      background:#f1f5f9; font-size:1.8rem; line-height:1; cursor:pointer; transition:var(--t);
    }
    .drawerclose:hover{background:#fff; border-color:rgba(37,99,235,.35); color:var(--brand)}
    .drawerlinks{list-style:none; padding:1rem 0; margin:0; display:flex; flex-direction:column; gap:.25rem}
    .drawerlinks a{
      padding:.9rem 1rem;
      border-radius:14px;
      text-decoration:none;
      font-weight:900;
      color:#0f172a;
      transition:var(--t);
    }
    .drawerlinks a:hover{background:#f1f5f9; color:var(--brand)}
    .drawercta{margin-top:auto; display:grid; gap:.75rem}

    body.nav-open{overflow:hidden}

    /* Hero */
    .hero{
      padding:4.25rem 0 3.25rem;
      color:#e2e8f0;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap:1.5rem;
      align-items:stretch;
    }
    .hero h1{
      font-size: clamp(2.15rem, 3.4vw, 3.25rem);
      line-height:1.05;
      margin:0 0 .8rem;
      letter-spacing:-.02em;
    }
    .hero p{
      margin:0;
      font-size:1.05rem;
      color:rgba(226,232,240,.86);
      max-width:62ch;
    }
    .hero-card{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(148,163,184,.14);
      border-radius:var(--r20);
      padding:1.15rem 1.2rem;
      backdrop-filter: blur(10px);
      box-shadow:0 18px 42px rgba(2,6,23,.28);
    }
    .metrics{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:.9rem;
      margin-top:1.35rem;
    }
    .metric{
      background:rgba(255,255,255,.07);
      border:1px solid rgba(148,163,184,.14);
      border-radius:var(--r16);
      padding: .95rem 1rem;
    }
    .metric strong{display:block; font-size:1.55rem; letter-spacing:-.02em}
    .metric span{display:block; margin-top:.25rem; color:rgba(226,232,240,.78); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em}

    /* Main surface sections */
    main{padding:0 0 2.5rem}
    .surface{
      margin-top:-2.1rem;
      background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, #ffffff 60%);
      border-radius:28px 28px 0 0;
      box-shadow: 0 -20px 60px rgba(2,6,23,.18);
      padding: 2.2rem 0 1.5rem;
    }
    .section{padding:1.5rem 0}
    .sectionhead{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:1rem; flex-wrap:wrap;
      margin-bottom:1rem;
    }
    .sectionhead h1{margin:0; font-size:1.5rem; letter-spacing:-.01em; color: #f1f5f9;}
    .sectionhead h2{margin:0; font-size:1.5rem; letter-spacing:-.01em}
    .muted{color:var(--muted); margin:0}
    .card{
      background:#fff;
      border:1px solid rgba(15,23,42,.10);
      border-radius:var(--r20);
      box-shadow: 0 6px 18px rgba(2,6,23,.08);
      overflow:hidden;
    }
    .cardpad{padding:1.25rem}

    /* Search form */
    .search-grid{
      display:grid;
      grid-template-columns: repeat(5, minmax(0,1fr));
      gap: .95rem;
      align-items:end;
    }
    label{
      display:block;
      font-weight:900;
      font-size:.85rem;
      letter-spacing:.02em;
      margin:0 0 .4rem;
      color:#0f172a;
    }
    select, input[type="text"]{
      width:100%;
      padding:.85rem .9rem;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.14);
      background:#fff;
      color:#0f172a;
      font-weight:700;
      outline:none;
      transition:var(--t);
      box-shadow: 0 1px 2px rgba(2,6,23,.04);
    }
    select:focus, input[type="text"]:focus{
      border-color:rgba(37,99,235,.55);
      box-shadow:0 0 0 4px rgba(37,99,235,.16);
    }
    .actions{
      display:flex;
      flex-direction:column;
      gap:.65rem;
    }
    .linklike{
      display:inline-flex;
      justify-content:center;
      padding:.7rem 1rem;
      border-radius:14px;
      border:1px dashed rgba(15,23,42,.20);
      text-decoration:none;
      font-weight:900;
      color:#334155;
      transition:var(--t);
      background:#fff;
    }
    .linklike:hover{border-color:rgba(37,99,235,.55); color:var(--brand); background:rgba(37,99,235,.05)}

    .helper{
      margin-top:1rem;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:.9rem;
    }
    .helper a{
      text-decoration:none;
      border-radius:var(--r16);
      border:1px solid rgba(15,23,42,.10);
      background:#f8fafc;
      padding:1rem 1.05rem;
      transition:var(--t);
      display:block;
    }
    .helper a:hover{transform:translateY(-2px); background:#fff; box-shadow:var(--shadow2); border-color:rgba(37,99,235,.22)}
    .helper strong{display:block; font-weight:950}
    .helper span{display:block; margin-top:.2rem; color:var(--muted); font-weight:700}

    /* Listing cards */
    .grid12{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:1rem;
    }
    .listing{
      text-decoration:none;
      color:inherit;
      border-radius:var(--r20);
      border:1px solid rgba(15,23,42,.10);
      background:#fff;
      overflow:hidden;
      transition:var(--t);
      box-shadow: 0 4px 14px rgba(2,6,23,.07);
      display:flex; flex-direction:column;
      min-height:160px;
    }
    .listing:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.12); border-color:rgba(37,99,235,.22)}
    .listingtop{padding:1rem 1.05rem .8rem; display:flex; justify-content:space-between; gap:.8rem}
    .listingname{font-weight:950; letter-spacing:-.01em; line-height:1.2}
    .listingmeta{padding:0 1.05rem .95rem; color:#334155; font-weight:750; display:grid; gap:.35rem}
    .pillrow{display:flex; flex-wrap:wrap; gap:.45rem}
    .pill{
      display:inline-flex; align-items:center;
      padding:.35rem .6rem;
      border-radius:999px;
      font-weight:900;
      font-size:.74rem;
      letter-spacing:.02em;
      border:1px solid rgba(15,23,42,.12);
      background:#f1f5f9;
      color:#0f172a;
      white-space:nowrap;
    }
    .pill.brand{background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.22); color:var(--brand)}
    .pill.ok{background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.22); color:var(--ok)}
    .pill.warn{background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); color:#92400e}
    .pill.danger{background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.22); color:var(--danger)}
    .listingfoot{
      margin-top:auto;
      padding:.85rem 1.05rem;
      border-top:1px solid rgba(15,23,42,.08);
      display:flex; align-items:center; justify-content:space-between;
      color:var(--muted);
      font-weight:800;
    }
    .openhint{color:var(--brand); font-weight:950}

    /* Browse by state */
    .toolbar{
      display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
      margin-bottom:.85rem;
    }
    .count{color:var(--muted); font-weight:800}
    .stategrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap:.75rem;
    }
    .state{
      text-decoration:none;
      padding:.85rem 1rem;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.10);
      background:#fff;
      font-weight:900;
      transition:var(--t);
      box-shadow: 0 1px 2px rgba(2,6,23,.05);
    }
    .state:hover{transform:translateY(-2px); border-color:rgba(37,99,235,.22); box-shadow:0 10px 18px rgba(2,6,23,.10); color:var(--brand)}

    /* Chips */
    .chips{display:flex; flex-wrap:wrap; gap:.75rem}
    .chip{
      text-decoration:none;
      padding:.6rem .9rem;
      border-radius:999px;
      border:1px solid rgba(15,23,42,.12);
      background:#fff;
      font-weight:900;
      transition:var(--t);
    }
    .chip:hover{border-color:rgba(37,99,235,.22); background:rgba(37,99,235,.05); color:var(--brand)}

    /* Footer */
    footer{
      background:rgba(7,11,20,.92);
      border-top:1px solid rgba(148,163,184,.12);
      color:#e2e8f0;
      padding:2.25rem 0 1.5rem;
      margin-top:1.75rem;
    }
    .footgrid{
      display:grid;
      grid-template-columns: 1.3fr .7fr .7fr;
      gap:1.25rem;
      align-items:start;
    }
    .footgrid h4{margin:.2rem 0 .75rem; font-size:1rem}
    .footgrid p{margin:.5rem 0 0; color:rgba(226,232,240,.80); line-height:1.6}
    .footlinks{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
    .footlinks a{color:rgba(226,232,240,.85); text-decoration:none; font-weight:800}
    .footlinks a:hover{color:#fff; text-decoration:underline}
    .footbottom{
      margin-top:1.35rem;
      padding-top:1.1rem;
      border-top:1px solid rgba(148,163,184,.12);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      color:rgba(226,232,240,.75);
      font-weight:800;
    }

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid{grid-template-columns:1fr}
      .metrics{grid-template-columns:1fr}
      .search-grid{grid-template-columns:1fr 1fr}
      .grid12{grid-template-columns:1fr 1fr}
      .helper{grid-template-columns:1fr}
      .navlinks{display:none}
      .hamburger{display:inline-block}
    }
    @media (max-width: 620px){
      .search-grid{grid-template-columns:1fr}
      .grid12{grid-template-columns:1fr}
      .footgrid{grid-template-columns:1fr}
      .brand img{height:40px}
    }

/* Active nav link */
.navlinks a[aria-current="page"]{
  background: rgba(56,189,248,.14);
  border: 1px solid rgba(56,189,248,.22);
  color:#fff;
}

/* =========================================================
   FAQ (Accordion)
   ---------------------------------------------------------
   Matches the modern dark UI tokens and card system.
   ========================================================= */
.faq-section{padding:28px 0 56px;}
.faq-intro{
  max-width: 920px;
  margin: 0 auto 18px;
  color: var(--muted2);
  line-height: 1.65;
}
.faq-accordion{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq-item{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--border2);
  border-radius: var(--r16);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px;
  background: transparent;
  border: 0;
  color: #e5e7eb;
  font-weight: 650;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
}
.faq-question:hover{
  background: rgba(37,99,235,.08);
}
.faq-icon{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: .9;
  transition: transform var(--t), opacity var(--t);
}
.faq-item.active .faq-icon{
  transform: rotate(180deg);
  opacity: 1;
}

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease;
}
.faq-item.active .faq-answer{
  max-height: 520px; /* roomy enough for most answers */
}
.faq-answer-content{
  padding: 0 16px 16px;
  color: #cbd5e1;
  line-height: 1.7;
}
.faq-answer-content a{
  color: #93c5fd;
  text-decoration: none;
  border-bottom: 1px solid rgba(147,197,253,.35);
}
.faq-answer-content a:hover{
  color: #bfdbfe;
  border-bottom-color: rgba(191,219,254,.6);
}

@media (min-width: 900px){
  .faq-section{padding:36px 0 70px;}
  .faq-question{padding:18px 20px;}
  .faq-answer-content{padding: 0 20px 20px;}
}

/* =========================================================
   Stats Dashboard
   ---------------------------------------------------------
   Modern dark UI for statistics and analytics pages.
   ========================================================= */

/* Stats Grid */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

/* Stat Card */
.stat-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--r16);
  padding: 1.5rem;
  box-shadow: var(--shadow2);
  transition: var(--t);
  position: relative;
}
.stat-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--brand);
  border-radius: var(--r16) 0 0 var(--r16);
  transition: var(--t);
}
.stat-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.stat-card:hover::before{
  width: 6px;
}

.stat-icon{
  width: 48px;
  height: 48px;
  border-radius: var(--r12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235,.12);
  color: var(--brand);
  margin-bottom: 1rem;
}
.stat-icon svg{
  width: 24px;
  height: 24px;
}

.stat-label{
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}

.stat-value{
  font-size: 2rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}

.stat-percent{
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
.stat-percent.ok{ color: var(--ok); }
.stat-percent.brand{ color: var(--brand); }
.stat-percent.warn{ color: var(--warn); }
.stat-percent.danger{ color: var(--danger); }

/* Progress Bar */
.progress-bar{
  background: #f1f5f9;
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
}
.progress-fill{
  height: 100%;
  border-radius: 8px;
  transition: width 1s ease;
  background: var(--brand);
}
.progress-fill.ok{ background: var(--ok); }
.progress-fill.brand{ background: var(--brand); }
.progress-fill.warn{ background: var(--warn); }
.progress-fill.danger{ background: var(--danger); }

/* Distribution Grid */
.distribution-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.distribution-item{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--r16);
  padding: 1.25rem;
  text-align: center;
  transition: var(--t);
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
}
.distribution-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: rgba(37,99,235,.18);
}

.distribution-icon{
  width: 52px;
  height: 52px;
  border-radius: var(--r12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235,.10);
  color: var(--brand);
  margin: 0 auto 1rem;
}

.distribution-label{
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}

.distribution-value{
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: .75rem;
}

/* Responsive Stats */
@media (max-width: 980px){
  .stats-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .distribution-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 620px){
  .stats-grid{
    grid-template-columns: 1fr;
  }
  .distribution-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-value{
    font-size: 1.75rem;
  }
  .distribution-value{
    font-size: 1.5rem;
  }
}

/* =========================================================
   About Page
   ---------------------------------------------------------
   Styles for the About Us page components.
   ========================================================= */

/* About Grid - Two Column Layout */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.about-content h2{
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
}

/* Quote Card */
.quote-card{
  background: linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(37,99,235,.03) 100%);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: var(--r16);
  padding: 1.5rem;
  position: relative;
}
.quote-icon{
  color: var(--brand);
  opacity: 0.4;
  margin-bottom: 0.75rem;
}
.quote-card blockquote{
  margin: 0;
}
.quote-card blockquote p{
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.quote-card blockquote cite{
  font-style: normal;
  font-weight: 700;
  color: var(--brand);
  font-size: 0.9rem;
}

/* Video Wrapper */
.about-video{
  position: sticky;
  top: 100px;
}
.video-wrapper{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r16);
  box-shadow: var(--shadow);
}
.video-wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Features Grid - Three Column */
.features-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.feature-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--r20);
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(2,6,23,.06);
  transition: var(--t);
}
.feature-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow2);
}
.feature-card h3{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 1rem;
}

.feature-icon{
  width: 52px;
  height: 52px;
  border-radius: var(--r12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235,.10);
  color: var(--brand);
  margin-bottom: 1rem;
}

/* Accordion */
.accordion{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.accordion-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--r12);
  overflow: hidden;
  transition: var(--t);
}
.accordion-item:hover{
  border-color: rgba(37,99,235,.2);
}
.accordion-header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.9rem;
  text-align: left;
  transition: var(--t);
}
.accordion-header:hover{
  background: #f1f5f9;
}
.accordion-icon{
  flex-shrink: 0;
  transition: transform var(--t);
  color: var(--muted);
}
.accordion-item.active .accordion-icon{
  transform: rotate(180deg);
}
.accordion-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-item.active .accordion-content{
  max-height: 200px;
}
.accordion-content p{
  padding: 0 1rem 1rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.9rem;
}
.accordion-content a{
  color: var(--brand);
  text-decoration: none;
}
.accordion-content a:hover{
  text-decoration: underline;
}

/* Skill Bars */
.skill-bars{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.skill-item{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.skill-header{
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Newsletter Card */
.newsletter-card{
  background: linear-gradient(135deg, var(--card) 0%, var(--card2) 100%);
  border: 1px solid var(--border2);
  border-radius: var(--r20);
  padding: 2rem;
  text-align: center;
}
.newsletter-card h3{
  color: #f1f5f9;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
}
.newsletter-card p{
  color: var(--muted2);
  margin: 0 0 1.5rem;
}

/* Responsive About Page */
@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-video{
    position: static;
  }
  .features-grid{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
@media (max-width: 620px){
  .about-content h2{
    font-size: 1.5rem;
  }
  .quote-card blockquote p{
    font-size: 1rem;
  }
  .feature-card{
    padding: 1.25rem;
  }
  .newsletter-card{
    padding: 1.5rem;
  }
}

/* ==========================================
   Results Page Styles
   ========================================== */

/* Results Header */
.results-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.results-header h1{
  color: #f1f5f9;
  font-size: 2rem;
  font-weight: 900;
  margin: 0;
}
.results-count{
  color: var(--muted2);
  font-size: 1rem;
  font-weight: 600;
  margin: 0.25rem 0 0;
}

/* Result Card */
.result-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  text-decoration: none;
  transition: var(--t);
  box-shadow: var(--shadow2);
}
.result-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--brand);
}
.result-main{
  flex: 1;
  min-width: 0;
}
.result-header{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.result-title{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.verified-icon{
  color: var(--brand);
  flex-shrink: 0;
}
.result-meta{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--muted);
}
.result-meta span{
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.result-meta svg{
  color: var(--muted2);
  flex-shrink: 0;
}
.result-location svg{
  color: var(--danger);
}
.result-members svg{
  color: var(--brand);
}
.result-updated svg{
  color: var(--muted2);
}
.result-action{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.view-hint{
  display: none;
}
.result-card:hover .view-hint{
  display: inline;
}

/* Ad Banner */
.ad-banner{
  background: linear-gradient(135deg, var(--card) 0%, var(--card2) 100%);
  border: 1px solid var(--border2);
  border-radius: var(--r16);
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* Pagination */
.pagination-wrapper{
  display: flex;
  justify-content: center;
  padding: 2rem 0 1rem;
}
.pagination{
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination li a,
.pagination li span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--r12);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: var(--t);
}
.pagination li a:hover{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.pagination li.active span,
.pagination li.active a{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.pagination li.disabled span{
  opacity: 0.5;
  cursor: not-allowed;
}

/* No Results */
.no-results{
  text-align: center;
  padding: 4rem 2rem;
}
.no-results svg{
  color: var(--muted2);
  margin-bottom: 1.5rem;
  opacity: 0.5;
}
.no-results h2{
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}
.no-results p{
  color: var(--muted);
  max-width: 400px;
  margin: 0 auto 1.5rem;
}

/* Responsive Results Page */
@media (max-width: 980px){
  .results-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .result-meta{
    gap: 0.75rem;
  }
}
@media (max-width: 620px){
  .results-header h1{
    font-size: 1.5rem;
  }
  .result-card{
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
  }
  .result-action{
    width: 100%;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
  }
  .view-hint{
    display: inline;
  }
  .result-meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ==========================================
   View Detail Page Styles
   ========================================== */

/* View Hero Section */
.view-hero{
  background: linear-gradient(135deg, var(--card) 0%, var(--card2) 100%);
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--border2);
}
.view-hero-content{
  max-width: 800px;
}
.view-hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.view-hero h1{
  color: #f1f5f9;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  line-height: 1.2;
}
.view-hero-website{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 1rem;
  transition: var(--t);
}
.view-hero-website:hover{
  color: #60a5fa;
  text-decoration: underline;
}
.view-hero-address,
.view-hero-phone{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--muted2);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.view-hero-address svg,
.view-hero-phone svg{
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--muted2);
}

/* View Grid Layout */
.view-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.view-main{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.view-sidebar{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* View Card */
.view-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  padding: 1.5rem;
  box-shadow: var(--shadow2);
}
.view-card h2{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.view-card h2 svg{
  color: var(--brand);
  flex-shrink: 0;
}
.view-card p{
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* Information Grid */
.info-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.info-item{
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: var(--r12);
}
.info-label{
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.info-value{
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

/* Sidebar Card */
.sidebar-card{
  position: sticky;
  top: 80px;
}
.sidebar-card h3{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 1rem;
}
.sidebar-card h3 svg{
  color: var(--brand);
}
.sidebar-content{
  color: var(--muted);
}
.sidebar-address{
  line-height: 1.7;
  margin: 0 0 1rem;
}
.sidebar-btn{
  width: 100%;
  justify-content: center;
}

/* Contact Info */
.contact-name{
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.contact-title{
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.contact-link{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  transition: var(--t);
}
.contact-link:hover{
  text-decoration: underline;
}
.contact-fax{
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

/* Back Link */
.back-link-wrapper{
  padding: 1rem 0 2rem;
  border-top: 1px solid var(--border);
}

/* Responsive View Page */
@media (max-width: 980px){
  .view-grid{
    grid-template-columns: 1fr;
  }
  .sidebar-card{
    position: static;
  }
  .info-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px){
  .view-hero h1{
    font-size: 1.5rem;
  }
  .view-hero{
    padding: 1.5rem 0;
  }
  .view-card{
    padding: 1.25rem;
  }
  .view-card h2{
    font-size: 1.1rem;
  }
  .info-grid{
    grid-template-columns: 1fr;
  }
}