/* ============================================================
   WapiGrow — layout.css
   Site-wide layout: container, navbar, mobile drawer, footer,
   plus the homepage's own section-level classes (hero, counter
   strip, marquee, steps, industry filter, testimonials, FAQ,
   CTA banner). None of these had any matching CSS anywhere in
   the previously-linked stylesheets — this file closes that gap
   using the same wg- / color- token system as main.css /
   components.css so it reads as one system, not a third one.
   ============================================================ */


  /* ============================================================
     CONTAINER & SECTION UTILITIES
     ============================================================ */
  .container {
    width: 100%; max-width: 1200px; margin-inline: auto;
    padding-inline: var(--wg-sp-4);
  }
  @media (min-width: 640px)  { .container { padding-inline: var(--wg-sp-6); } }
  @media (min-width: 1024px) { .container { padding-inline: var(--wg-sp-8); } }
  .container-sm { max-width: 760px; }

  .section { padding-block: var(--wg-sp-16); }
  @media (min-width: 768px) { .section { padding-block: var(--wg-sp-20); } }
  .bg-white      { background: var(--wg-white); }
  .bg-off-white  { background: var(--wg-off-white); }
  .bg-light-green{ background: var(--wg-green-light); }

  .section-header { text-align: center; max-width: 620px; margin: 0 auto var(--wg-sp-12); }
  .section-label {
    display: inline-block; margin-bottom: var(--wg-sp-3);
    font-size: var(--wg-text-sm); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--wg-green-dark);
  }
  .section-header h2 { margin-bottom: var(--wg-sp-3); }
  .section-header p { color: var(--wg-text-muted); }

  .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-6); }
  .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-6); }
  @media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

  /* ── Generic scroll-reveal (paired with main.js's `.reveal` observer) ── */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--wg-ease), transform .6s var(--wg-ease); }
  .reveal.visible { opacity: 1; transform: none; }
  .delay-1 { transition-delay: 100ms; }
  .delay-2 { transition-delay: 200ms; }
  .delay-3 { transition-delay: 300ms; }

  /* ============================================================
     NAVBAR
     ============================================================ */
  .navbar {
    position: sticky; top: 0; z-index: var(--z-sticky, 200);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--wg-t-base) var(--wg-ease), border-color var(--wg-t-base) var(--wg-ease), background var(--wg-t-base) var(--wg-ease);
  }

  /* Site-wide announcement bar */
  .announcement-bar {
    background: var(--wg-navy);
    color: var(--wg-white);
    font-size: var(--wg-text-sm);
  }
  .announcement-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wg-sp-4);
    min-height: 44px;
    padding-block: var(--wg-sp-2);
    text-align: center;
  }
  .announcement-cta {
    color: var(--wg-green-light);
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
  }
  .announcement-close {
    color: rgba(255,255,255,.75);
    background: transparent;
    border: 0;
    padding: var(--wg-sp-1) var(--wg-sp-2);
    line-height: 1;
  }
  .announcement-close:hover { color: var(--wg-white); }
  @media (max-width: 640px) {
    .announcement-bar .container { flex-wrap: wrap; gap: var(--wg-sp-2) var(--wg-sp-3); }
  }
  .navbar.scrolled {
    background: rgba(255,255,255,0.98);
    border-bottom-color: var(--wg-border);
    box-shadow: var(--wg-shadow-sm);
  }
  .navbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--wg-sp-6); padding-block: var(--wg-sp-4);
  }
  .navbar-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
  .navbar-logo img { height: 32px; width: auto; }

  .navbar-links { display: none; align-items: center; gap: var(--wg-sp-6); }
  .navbar-links > a {
    font-size: var(--wg-text-sm); font-weight: 600;
    color: var(--wg-text-secondary); white-space: nowrap;
    padding-block: var(--wg-sp-2);
    border-bottom: 2px solid transparent;
    transition: color var(--wg-t-fast) var(--wg-ease), border-color var(--wg-t-fast) var(--wg-ease);
  }
  .navbar-links > a:hover,
  .navbar-links > a.active { color: var(--wg-green-dark); border-bottom-color: var(--wg-green); }
  .nav-new-badge {
    display: inline-block; margin-left: 3px; padding: 1px 7px;
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; background: var(--wg-green-light); color: var(--wg-green-dark);
    border-radius: var(--wg-r-full); vertical-align: middle;
  }

  .navbar-ctas { display: none; align-items: center; gap: var(--wg-sp-3); flex-shrink: 0; }

  /* ── Dropdown (desktop "WhatsApp Suite" / "Resources" / account menu) ── */
  .nav-dropdown { position: relative; }
  .nav-dropdown > a:not(.wg-btn), .nav-dropdown-toggle {
    display: inline-flex; align-items: center; gap: var(--wg-sp-1);
    background: none; border: none; cursor: pointer; font: inherit;
  }
  .nav-dropdown-toggle {
    font-size: var(--wg-text-sm); font-weight: 600;
    color: var(--wg-text-secondary); padding-block: var(--wg-sp-2);
    transition: color var(--wg-t-fast) var(--wg-ease);
  }
  .nav-dropdown-toggle:hover { color: var(--wg-green-dark); }
  .nav-dropdown-menu {
    position: absolute; top: calc(100% + var(--wg-sp-2)); left: 0;
    min-width: 230px; max-height: 70vh; overflow-y: auto;
    background: var(--wg-white); border: 1px solid var(--wg-border);
    border-radius: var(--wg-r-lg); padding: var(--wg-sp-2);
    box-shadow: var(--wg-shadow-lg); z-index: var(--z-dropdown, 100);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(0.98); transform-origin: top left;
    transition: opacity var(--wg-t-fast) var(--wg-ease), transform var(--wg-t-fast) var(--wg-ease), visibility var(--wg-t-fast) var(--wg-ease);
  }
  .nav-dropdown-menu.dd-right { left: auto; right: 0; transform-origin: top right; }
  .nav-dropdown-menu::before {
    content: ''; position: absolute; top: -var(--wg-sp-2); left: 0; right: 0; height: var(--wg-sp-2);
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
  }
  .nav-dropdown-menu a {
    display: flex; align-items: center; gap: var(--wg-sp-2);
    padding: var(--wg-sp-2) var(--wg-sp-3); border-radius: var(--wg-r-md);
    font-size: var(--wg-text-sm); font-weight: 500;
    color: var(--wg-text-secondary);
    transition: background var(--wg-t-fast), color var(--wg-t-fast);
  }
  .nav-dropdown-menu a:hover { background: var(--wg-green-light); color: var(--wg-green-dark); }

  /* ── Hamburger ── */
  .hamburger {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 40px; height: 40px; border-radius: var(--wg-r-md);
    background: none; border: none; cursor: pointer; flex-shrink: 0;
  }
  .hamburger span {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--wg-text-primary); transition: transform var(--wg-t-fast) var(--wg-ease), opacity var(--wg-t-fast) var(--wg-ease);
  }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (min-width: 960px) {
    .navbar-links, .navbar-ctas { display: flex; }
    .hamburger { display: none; }
  }

  /* ============================================================
     MOBILE DRAWER
     ============================================================ */
  .mobile-drawer { position: fixed; inset: 0; z-index: var(--z-modal, 500); visibility: hidden; pointer-events: none; }
  .mobile-drawer.open { visibility: visible; pointer-events: auto; }
  .drawer-overlay {
    position: absolute; inset: 0; background: rgba(15,25,35,0.5);
    opacity: 0; transition: opacity var(--wg-t-base) var(--wg-ease);
  }
  .mobile-drawer.open .drawer-overlay { opacity: 1; }
  .drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 84vw);
    background: var(--wg-white); padding: var(--wg-sp-6) var(--wg-sp-5);
    display: flex; flex-direction: column; gap: var(--wg-sp-1);
    overflow-y: auto; box-shadow: var(--wg-shadow-xl);
    transform: translateX(100%); transition: transform var(--wg-t-base) var(--wg-ease);
  }
  .mobile-drawer.open .drawer-panel { transform: translateX(0); }
  .drawer-panel a {
    padding: var(--wg-sp-3) var(--wg-sp-2); border-radius: var(--wg-r-md);
    font-size: var(--wg-text-base); font-weight: 500;
    color: var(--wg-text-primary); display: flex; align-items: center; gap: var(--wg-sp-2);
  }
  .drawer-panel a:hover, .drawer-panel a.active { background: var(--wg-green-light); color: var(--wg-green-dark); }
  .drawer-close {
    align-self: flex-end; width: 36px; height: 36px; border-radius: var(--wg-r-md);
    background: var(--wg-gray-100); font-size: var(--wg-text-lg); margin-bottom: var(--wg-sp-2);
  }
  .drawer-ctas { display: flex; flex-direction: column; gap: var(--wg-sp-2); margin-top: var(--wg-sp-2); }
  @media (min-width: 960px) { .mobile-drawer { display: none; } }

  /* ============================================================
     HERO (homepage)
     ============================================================ */
  .hero { padding-block: var(--wg-sp-12) var(--wg-sp-16); overflow: hidden; }
  @media (min-width: 768px) { .hero { padding-block: var(--wg-sp-20) var(--wg-sp-24); } }
  .hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-12); align-items: center; }
  @media (min-width: 960px) { .hero-inner { grid-template-columns: 1.1fr 1fr; gap: var(--wg-sp-16); } }
  .hero-badge {
    display: inline-flex; align-items: center; gap: var(--wg-sp-2);
    padding: var(--wg-sp-2) var(--wg-sp-4); margin-bottom: var(--wg-sp-5);
    background: var(--wg-green-light); color: var(--wg-green-dark);
    border-radius: var(--wg-r-full); font-size: var(--wg-text-xs); font-weight: 700;
  }
  .hero h1 { margin-bottom: var(--wg-sp-5); }
  .hero-sub { margin-bottom: var(--wg-sp-6); max-width: 520px; }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--wg-sp-3); margin-bottom: var(--wg-sp-2); }
  .hero-trust { display: flex; flex-wrap: wrap; gap: var(--wg-sp-2) var(--wg-sp-5); margin-top: var(--wg-sp-6); }
  .hero-trust-item { display: inline-flex; align-items: center; gap: var(--wg-sp-2); font-size: var(--wg-text-sm); color: var(--wg-text-secondary); }
  .hero-trust-item svg { color: var(--wg-green); flex-shrink: 0; }
  .hero-visual { display: flex; justify-content: center; }

  .chat-mockup {
    width: 100%; max-width: 340px; background: var(--wg-white);
    border-radius: var(--wg-r-2xl); box-shadow: var(--wg-shadow-xl);
    padding: var(--wg-sp-4); display: flex; flex-direction: column; gap: var(--wg-sp-3);
  }
  .chat-mockup.float { animation: wg-float 4s ease-in-out infinite; }
  @keyframes wg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .chat-mockup-bar { display: flex; align-items: center; gap: var(--wg-sp-3); padding-bottom: var(--wg-sp-3); border-bottom: 1px solid var(--wg-border); }
  .chat-mockup-bar .avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--wg-green);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0;
  }
  .chat-mockup-bar .name { font-size: var(--wg-text-sm); font-weight: 700; color: var(--wg-text-primary); }
  .chat-mockup-bar .status { font-size: var(--wg-text-xs); color: var(--wg-green-dark); font-weight: 600; }
  .chat-bubble { max-width: 82%; padding: var(--wg-sp-3) var(--wg-sp-4); border-radius: var(--wg-r-lg); font-size: var(--wg-text-sm); line-height: 1.5; position: relative; }
  .chat-bubble.incoming { align-self: flex-start; background: var(--wg-gray-100); color: var(--wg-text-primary); border-bottom-left-radius: var(--wg-r-sm); }
  .chat-bubble.outgoing { align-self: flex-end; background: var(--wg-green-light); color: var(--wg-text-primary); border-bottom-right-radius: var(--wg-r-sm); }
  .chat-time { margin-top: var(--wg-sp-1); font-size: 0.68rem; color: var(--wg-text-muted); text-align: right; }

  /* ============================================================
     COUNTER STRIP
     ============================================================ */
  .counter-strip { padding-block: var(--wg-sp-10); background: var(--wg-navy); color: #fff; }
  .counter-strip-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wg-sp-8) var(--wg-sp-4); text-align: center; }
  @media (min-width: 720px) { .counter-strip-inner { grid-template-columns: repeat(5, 1fr); } }
  .counter-item { display: flex; flex-direction: column; gap: var(--wg-sp-1); }
  .counter-item-num { font-size: var(--wg-text-3xl); font-weight: 800; color: var(--wg-green); }
  .counter-item-label { font-size: var(--wg-text-xs); color: rgba(255,255,255,0.7); }

  /* ============================================================
     MARQUEE
     ============================================================ */
  .marquee-wrap { overflow: hidden; padding-block: var(--wg-sp-5); background: var(--wg-off-white); border-block: 1px solid var(--wg-border); }
  .marquee-item {
    display: inline-flex; align-items: center; gap: var(--wg-sp-2);
    font-size: var(--wg-text-sm); font-weight: 600; color: var(--wg-text-secondary);
    white-space: nowrap;
  }
  .marquee-item svg { color: var(--wg-green); flex-shrink: 0; }

  /* ============================================================
     ICON WRAPPERS (pain / product / bento) — sit on top of .wg-badge
     ============================================================ */
  .pain-icon, .product-icon, .bento-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: var(--wg-r-lg);
    margin-bottom: var(--wg-sp-4); padding: 0;
  }
  .bento-icon { width: 60px; height: 60px; }
  .wg-bento-stat {
    margin-top: var(--wg-sp-4); padding-top: var(--wg-sp-4); border-top: 1px solid var(--wg-border);
    font-size: var(--wg-text-xl); font-weight: 800; color: var(--wg-green-dark);
  }
  .wg-bento-stat small { display: block; font-size: var(--wg-text-xs); font-weight: 500; color: var(--wg-text-muted); margin-top: 2px; }
  .span-2 { grid-column: span 1; }
  @media (min-width: 1024px) { .span-2 { grid-column: span 2; } }

  /* ============================================================
     STEPS ("How it works")
     ============================================================ */
  .steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-8); }
  @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
  .step-card { text-align: center; padding: var(--wg-sp-4); }
  .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; background: var(--wg-green);
    color: #fff; font-size: var(--wg-text-lg); font-weight: 700; margin-bottom: var(--wg-sp-4);
  }
  .step-card h4 { margin-bottom: var(--wg-sp-2); }

  /* ============================================================
     INDUSTRY FILTER + CARDS
     ============================================================ */
  .industry-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wg-sp-2); margin-bottom: var(--wg-sp-10); }
  .filter-pill {
    padding: var(--wg-sp-2) var(--wg-sp-5); border-radius: var(--wg-r-full);
    background: var(--wg-white); border: 1.5px solid var(--wg-border);
    font-size: var(--wg-text-sm); font-weight: 600; color: var(--wg-text-secondary);
    transition: all var(--wg-t-fast) var(--wg-ease);
  }
  .filter-pill:hover { border-color: var(--wg-green); color: var(--wg-green-dark); }
  .filter-pill.active { background: var(--wg-green); border-color: var(--wg-green); color: #fff; }

  .industry-cards-grid { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-6); }
  @media (min-width: 640px)  { .industry-cards-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .industry-cards-grid { grid-template-columns: repeat(3, 1fr); } }
  .industry-card {
    display: none; background: var(--wg-white); border: 1px solid var(--wg-border);
    border-radius: var(--wg-r-xl); padding: var(--wg-sp-6);
    transition: box-shadow var(--wg-t-base) var(--wg-ease), transform var(--wg-t-base) var(--wg-ease);
  }
  .industry-card.visible { display: block; }
  .industry-card:hover { box-shadow: var(--wg-shadow-lg); transform: translateY(-3px); }
  .wg-btn.btn-sm { padding: var(--wg-sp-2) var(--wg-sp-4); font-size: var(--wg-text-sm); min-height: 38px; }

  /* ============================================================
     TESTIMONIALS
     ============================================================ */
  .testimonial-featured {
    max-width: 720px; margin: 0 auto var(--wg-sp-12); text-align: center;
    background: var(--wg-green-light); border-radius: var(--wg-r-2xl); padding: var(--wg-sp-10) var(--wg-sp-8);
  }
  .testimonial-featured blockquote { font-size: var(--wg-text-xl); font-weight: 600; line-height: 1.5; color: var(--wg-text-primary); margin-bottom: var(--wg-sp-5); font-style: normal; }
  .testimonial-author { font-weight: 700; color: var(--wg-text-primary); }
  .testimonial-sub { font-size: var(--wg-text-sm); color: var(--wg-text-muted); }

  .testimonials-scroll { overflow: hidden; }
  .testimonials-track { display: flex; gap: var(--wg-sp-5); width: max-content; animation: wg-carousel 44s linear infinite; }
  .testimonials-track:hover { animation-play-state: paused; }
  .t-card {
    width: 300px; flex-shrink: 0; background: var(--wg-white); border: 1px solid var(--wg-border);
    border-radius: var(--wg-r-xl); padding: var(--wg-sp-5); display: flex; flex-direction: column; gap: var(--wg-sp-3);
  }
  .t-stars { display: inline-flex; gap: 2px; }
  .t-quote { font-size: var(--wg-text-sm); line-height: 1.6; color: var(--wg-text-secondary); flex: 1; }
  .t-avatar { display: flex; align-items: center; gap: var(--wg-sp-3); }
  .t-initials {
    width: 38px; height: 38px; border-radius: 50%; background: var(--wg-green-light);
    color: var(--wg-green-dark); display: flex; align-items: center; justify-content: center;
    font-size: var(--wg-text-xs); font-weight: 700; flex-shrink: 0;
  }
  .t-name { font-size: var(--wg-text-sm); font-weight: 700; color: var(--wg-text-primary); }
  .t-meta { font-size: var(--wg-text-xs); color: var(--wg-text-muted); }

  /* ============================================================
     FAQ ACCORDION
     ============================================================ */
  .faq-item { border-bottom: 1px solid var(--wg-border); }
  .faq-question {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wg-sp-4);
    padding-block: var(--wg-sp-5); font-weight: 600; color: var(--wg-text-primary); cursor: pointer;
  }
  .faq-chevron {
    flex-shrink: 0; width: 20px; height: 20px; position: relative; transition: transform var(--wg-t-fast) var(--wg-ease);
  }
  .faq-chevron::before, .faq-chevron::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px;
    background: var(--wg-green-dark); border-radius: 2px;
  }
  .faq-chevron::before { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--wg-t-fast) var(--wg-ease); }
  .faq-item.open .faq-chevron::before { transform: translate(-50%, -50%) rotate(0deg); }
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--wg-t-base) var(--wg-ease); }
  .faq-item.open .faq-answer { max-height: 400px; }
  .faq-answer-inner { padding-bottom: var(--wg-sp-5); color: var(--wg-text-secondary); font-size: var(--wg-text-sm); line-height: 1.65; }

  /* ============================================================
     CTA BANNER (final, pre-footer)
     ============================================================ */
  .cta-banner { padding-block: var(--wg-sp-16); background: var(--wg-navy); color: #fff; text-align: center; }
  .cta-banner h2 { color: #fff; margin-bottom: var(--wg-sp-3); }
  .cta-banner p { color: rgba(255,255,255,0.75); margin-bottom: var(--wg-sp-8); }
  .cta-banner-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wg-sp-3); margin-bottom: var(--wg-sp-6); }
  .trust-cities { max-width: 640px; margin: 0 auto; font-size: var(--wg-text-xs); color: rgba(255,255,255,0.55); line-height: 1.7; }

  /* ============================================================
     FOOTER
     ============================================================ */
  .site-footer { background: var(--wg-navy); color: var(--wg-gray-200); padding-block: var(--wg-sp-16) 0; }
  .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--wg-sp-10); padding-block-end: var(--wg-sp-12); }
  @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--wg-sp-8); } }
  .footer-brand img { height: 30px; margin-bottom: var(--wg-sp-4); }
  .footer-tagline { color: var(--wg-gray-400); font-size: var(--wg-text-sm); line-height: 1.65; max-width: 320px; margin-bottom: var(--wg-sp-5); }
  .footer-social { display: flex; gap: var(--wg-sp-2); margin-bottom: var(--wg-sp-4); }
  .footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--wg-r-full);
    background: rgba(255,255,255,0.08); color: var(--wg-gray-200);
    border: 1px solid rgba(255,255,255,0.1);
    transition: background var(--wg-t-fast), border-color var(--wg-t-fast), color var(--wg-t-fast);
  }
  .footer-social a:hover { background: var(--wg-green); border-color: var(--wg-green); color: #fff; }
  .footer-made { font-size: var(--wg-text-sm); color: var(--wg-gray-400); }
  .footer-col h4 { color: #fff; font-size: var(--wg-text-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--wg-sp-4); }
  .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--wg-sp-3); }
  .footer-col a { color: var(--wg-gray-400); font-size: var(--wg-text-sm); transition: color var(--wg-t-fast); }
  .footer-col a:hover { color: #fff; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-block: var(--wg-sp-6); }
  .footer-bottom-inner { display: flex; flex-direction: column; gap: var(--wg-sp-4); }
  @media (min-width: 720px) { .footer-bottom-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--wg-sp-8); } }
  .footer-copy { color: var(--wg-gray-400); font-size: var(--wg-text-xs); white-space: nowrap; }
  .city-seo { color: rgba(255,255,255,0.4); font-size: var(--wg-text-xs); line-height: 1.7; }
  .city-seo a { color: rgba(255,255,255,0.55); }
  .city-seo a:hover { color: var(--wg-green); }