/* ===== A to Z Classified E-Paper — shared site styles ===== */

:root {
  /* ===== DARK GOLDEN / LUXURY THEME (per client request) =====
     Background is near-black (not mid-brown) with only a faint warm
     undertone — classic "gold on black" luxury contrast, where the gold
     elements pop hard against the dark surface instead of blending into a
     washed-out brown. Text/lines are "light color at low opacity" since
     they sit on a dark surface.
  */
  --ink: #0F0A03;
  --ink-soft: #090601;
  --card: #1C1408;
  --paper: #F4E3B8;
  --paper-dim: #C7AD6E;
  --brass: #CBA135;
  --brass-hi: #E8C765;
  --brass-dim: #8A6E23;
  --forest: #25493A;
  --forest-hi: #3C7259;
  --rust: #8B3A2B;
  --line-dark: rgba(244, 227, 184, 0.14);
  --line-light: rgba(14, 13, 11, 0.12);
  --line: #3A2B10;

  /* Aliases used by inner pages */
  --panel: #1C1408;
  --panel-raised: #251B0B;
  --gold: var(--brass-hi);
  --gold-soft: var(--brass-dim);
  --off: var(--paper);
  --muted: rgba(244, 227, 184, 0.55);
  --wa: #3FA66E;
  --wa-bg: rgba(63, 166, 110, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--off);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3, .display { font-family: 'Fraunces', serif; letter-spacing: -0.01em; }
.mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.05em; }

::selection { background: var(--brass); color: var(--ink); }

/* grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Promotes this fixed overlay to its own compositor layer. It never
     changes on its own, but mix-blend-mode means the browser recomposites
     it against whatever's scrolling underneath on every frame — isolating
     it as its own layer keeps that cheap instead of re-blending against the
     full page repeatedly. Doesn't change how it looks. */
  transform: translateZ(0);
}
/* Home.html's hero section runs several always-on infinite CSS animations
   at once (ticker marquee, premium-ad glow, eyebrow pulse/sweep, star
   pulse) — none of them pause when off-screen. Combined with .grain's
   mix-blend-mode above, the browser recomposites the full viewport against
   all of them every single frame, and that cost scales with viewport area:
   a laptop screen is ~6-8x more pixels than a phone screen for the exact
   same animations, which is what made Home.html specifically feel slow/
   laggy on desktop while staying fine on phone. Dropping the blend mode
   (just at desktop widths, just on this page) removes that recompositing
   cost; opacity is upped slightly since a flat overlay reads fainter than
   the same opacity did under "overlay" blending. */
@media (min-width: 961px) {
  .page-home .grain { mix-blend-mode: normal; opacity: 0.035; }
}

/* ===== MARQUEE TICKER ===== */
.ticker {
  background: var(--ink); color: var(--paper-dim); overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
  padding: 9px 0;
}
.ticker-track { display: flex; width: max-content; animation: dc-scroll 32s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 28px; white-space: nowrap; display: flex; align-items: center; gap: 28px;
}
.ticker-track span::after { content: "—"; color: var(--brass-dim); }
@keyframes dc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ===== HEADER (brand row + nav row, merged into one component) ===== */
header.masthead {
  position: sticky; top: 0; z-index: 100;
  /* Solid instead of blurred-glass: backdrop-filter on a sticky element
     forces the browser to re-blur everything scrolling underneath it on
     every frame, which is one of the most expensive things a sticky header
     can do and was the main cause of scroll lag site-wide. */
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  transition: padding 0.3s ease, box-shadow 0.3s ease;
  /* Tells the browser these two properties are about to change (they only
     ever do so on the .scrolled toggle), so it can prepare ahead of time
     instead of reacting cold on the first frame of the transition. */
  will-change: padding, box-shadow;
}
header.masthead.scrolled { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); }

.masthead-brand-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 22px 6px 18px;
  transition: padding 0.3s ease;
  will-change: padding;
}
header.masthead.scrolled .masthead-brand-row { padding: 13px 6px 11px; }
/* Logo and om-badge share one square box size at every breakpoint (was
   height:auto-width, two different sizes) — object-fit:contain scales each
   image to fit without stretching, since the shield (portrait) and the
   badge (near-square) have different aspect ratios. */
.launch-banner-logo, .masthead-om-badge {
  width: 190px; height: 190px; object-fit: contain;
  transition: width 0.3s ease, height 0.3s ease; will-change: width, height;
}
.launch-banner-logo { justify-self: start; }
.masthead-om-badge { justify-self: end; }
header.masthead.scrolled .launch-banner-logo,
header.masthead.scrolled .masthead-om-badge { width: 135px; height: 135px; }
.launch-banner-text { grid-column: 2; text-align: center; }
.launch-banner-name {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 32px;
  color: var(--paper); letter-spacing: 0.01em;
  /* Restored now that the theme is dark again — a soft gold glow behind
     light text reads well here, unlike on the light-background variant. */
  text-shadow: 0 0 18px rgba(232, 199, 101, 0.35);
}
.launch-banner-tagline {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--brass); margin-top: 9px;
}
.launch-banner-tagline .star { color: var(--brass-hi); font-size: 10px; vertical-align: middle; }

/* ===== LAUNCH RIBBON ===== */
.launch-ribbon-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.ribbon-line {
  width: 34px; height: 1px; flex-shrink: 0;
  background: repeating-linear-gradient(90deg, var(--brass-dim) 0, var(--brass-dim) 4px, transparent 4px, transparent 8px);
}
.launch-ribbon {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  padding: 8px 26px 6px; clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  background: linear-gradient(180deg, #F7DE85 0%, #D9A62E 35%, #B4801A 60%, #F7DE85 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.ribbon-main {
  font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #3a2a06;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.6);
}
.ribbon-sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #4a3609; margin-top: 1px;
}
.launch-cities {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--paper-dim); margin-top: 10px;
}
.launch-cities .dot { color: var(--brass-dim); margin: 0 2px; }
header.masthead.scrolled .launch-ribbon-row,
header.masthead.scrolled .launch-cities { display: none; }

/* Tablet / small laptop tier — bridges the gap between full desktop size
   and the phone tier below, since the nav already switches to the
   hamburger menu at 900px but the brand row previously stayed full-size
   all the way down to 560px. */
@media (max-width: 900px) {
  .masthead-brand-row { grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); gap: 10px; }
  .launch-banner-logo, .masthead-om-badge { width: 115px; height: 115px; }
  header.masthead.scrolled .launch-banner-logo,
  header.masthead.scrolled .masthead-om-badge { width: 90px; height: 90px; }
  .launch-banner-name { font-size: 22px; }
  .launch-banner-tagline { font-size: 11px; }
  .ribbon-line { width: 24px; }
  .ribbon-main { font-size: 12px; }
  .ribbon-sub { font-size: 8px; }
  .launch-cities { font-size: 9px; }
}
@media (max-width: 700px) {
  .launch-cities { white-space: normal; padding: 0 12px; line-height: 1.6; }
}
@media (max-width: 560px) {
  .masthead-brand-row { grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr); gap: 8px; padding-left: 4px; padding-right: 4px; }
  .launch-banner-logo, .masthead-om-badge { width: 65px; height: 65px; }
  .launch-banner-name { font-size: 12px; }
  .launch-banner-tagline { font-size: 8px; }
  .ribbon-line { width: 16px; }
  .launch-ribbon { padding: 6px 16px 5px; }
  .ribbon-main { font-size: 10px; }
  .ribbon-sub { font-size: 7px; }
  .launch-cities { font-size: 7px; }
  header.masthead.scrolled .launch-banner-logo,
  header.masthead.scrolled .masthead-om-badge { width: 52px; height: 52px; }
}
@media (max-width: 380px) {
  .launch-banner-logo, .masthead-om-badge { width: 50px; height: 50px; }
  header.masthead.scrolled .launch-banner-logo,
  header.masthead.scrolled .masthead-om-badge { width: 50px; height: 50px; }
  .launch-banner-name { font-size: 10.5px; }
  .ribbon-line { display: none; }
  .ribbon-main { font-size: 9px; }
  .ribbon-sub { font-size: 6.5px; }
  .launch-cities { font-size: 6.5px; }
}

.masthead-inner {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 13px 0; border-top: 1px solid var(--line-dark);
}
@media (max-width: 900px) {
  .masthead-inner { justify-content: space-between; position: relative; }
}
@media (max-width: 560px) {
  .wrap.masthead-inner {
    padding: 10px 8px;
  }
}

nav.primary { display: flex; align-items: center; gap: 36px; }
nav.primary ul { display: flex; gap: 20px; list-style: none; }
nav.primary a {
  font-size: 13.5px; font-weight: 500; color: var(--paper-dim); position: relative; padding-bottom: 5px;
  transition: color 0.2s; white-space: nowrap;
}
nav.primary a:hover, nav.primary a.active { color: var(--paper); }
nav.primary a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--brass-hi);
  transition: width 0.25s ease;
}
nav.primary a:hover::after, nav.primary a.active::after { width: 100%; }

.call-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--brass); color: var(--brass-hi);
  padding: 9px 18px; border-radius: 2px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.03em; white-space: nowrap; transition: background 0.25s, color 0.25s;
}
.call-btn:hover { background: var(--brass); color: var(--ink); }

.visit-counter {
  display: inline-flex; align-items: center; gap: 9px;
  padding-left: 14px; border-left: 1px solid var(--line-dark);
}
/* Hidden until common.js has the real total — avoids flashing the static
   placeholder baked into the markup on every page load/refresh. */
[data-visitor-count], [data-visitor-count-badge], .visit-counter-digits {
  opacity: 0; transition: opacity 0.2s ease;
}
.visit-counter-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); white-space: nowrap;
}
.visit-counter-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brass-hi);
  box-shadow: 0 0 0 0 rgba(203, 161, 53, 0.6);
  animation: visitPulse 2s ease-out infinite;
}
@keyframes visitPulse {
  0%   { box-shadow: 0 0 0 0 rgba(203, 161, 53, 0.55); }
  70%  { box-shadow: 0 0 0 5px rgba(203, 161, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(203, 161, 53, 0); }
}
.visit-counter-digits { display: inline-flex; gap: 3px; }
.visit-counter .digit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 24px; padding: 0 2px;
  border: 1px solid var(--brass); border-radius: 3px;
  background: linear-gradient(180deg, #1c1509, var(--ink));
  color: var(--brass-hi);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700;
  box-shadow: 0 0 7px rgba(203, 161, 53, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (max-width: 900px) {
  .visit-counter { padding-left: 10px; gap: 6px; }
  .visit-counter-label span.visit-counter-text { display: none; }
  .visit-counter .digit { min-width: 13px; height: 20px; font-size: 11px; }
}

.menu-toggle {
  display: none; color: var(--paper); font-size: 22px; background: none; border: none;
  cursor: pointer; padding: 4px; line-height: 1; z-index: 120;
}
@media (max-width: 900px) {
  /* 36px (the desktop gap) was never reduced here, so once the link list
     hides, the remaining search icon / WhatsApp pill / visitor counter
     still sat 36px apart each — on narrow phones that's wider than the
     row has room for, so it overflows nav.primary's box and visually
     collides with the hamburger button next to it. */
  nav.primary { gap: 10px; }
  nav.primary ul { display: none; }
  .menu-toggle { display: flex; }
  .call-btn { padding: 6px 12px; font-size: 11px; gap: 6px; }
}
@media (max-width: 560px) {
  nav.primary { gap: 6px; }
}

/* Header search — injected by js/common.js on every page except ads.html
   (has its own inline search bar) and reader.html. */
.header-search { position: relative; }
.header-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-dark); background: none; color: var(--paper-dim);
  cursor: pointer; font-size: 14px; transition: border-color 0.2s, color 0.2s;
}
.header-search-toggle:hover { border-color: var(--brass); color: var(--brass-hi); }
@media (max-width: 900px) {
  .header-search-toggle { width: 57px; height: 57px; font-size: 27px; }
}
.header-search-panel {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 130;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; gap: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.header-search-panel.open { display: flex; }
.header-search-panel input {
  width: 220px; background: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  color: var(--off); padding: 8px 10px; font-size: 13px; font-family: 'Inter', sans-serif;
}
.header-search-panel input:focus { outline: none; border-color: var(--brass-dim); }
.header-search-panel button {
  background: var(--brass-hi); color: var(--ink); border: none; border-radius: 6px;
  padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
@media (max-width: 900px) {
  /* The icon becomes the leftmost item in nav.primary once the link list
     hides (see initHeaderSearch() in common.js), so a popover anchored to
     the icon itself (the desktop behaviour, via .header-search's
     position:relative) can run off either edge depending on screen width
     and get silently clipped by body{overflow-x:hidden} — looks like the
     icon "does nothing." Anchor to .wrap.masthead-inner instead (it's
     position:relative above), so the panel sits flush under the whole
     nav row, full-width, regardless of where the icon lands in it. */
  .header-search { position: static; }
  .header-search-panel.open { position: absolute; top: 100%; left: 0; right: 0; justify-content: center; }
  /* iOS Safari force-zooms the whole page on focus of any input/select/textarea
     with a computed font-size under 16px — the 13px above was triggering it,
     which is what made the just-opened panel look broken/cut off on phones. */
  .header-search-panel input { width: 100%; flex: 1; min-width: 0; font-size: 16px; }
  .header-search-panel button { display: none; }
}

.mobile-nav {
  position: fixed; inset: 0; z-index: 150; background: rgba(14, 13, 11, 0.98);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 90px 40px 40px; gap: 2px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.mobile-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav-brand {
  display: flex; align-items: center; gap: 12px; width: 100%; flex-shrink: 0;
  margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line-dark);
}
.mobile-nav-brand img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.mobile-nav-brand span { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--paper); }
.mobile-nav a {
  font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; color: var(--paper);
  padding: 9px 0; border-bottom: 1px solid var(--line-dark); width: 100%; flex-shrink: 0;
}
.mobile-nav a:hover, .mobile-nav a.active { color: var(--brass-hi); }
.mobile-nav .mobile-call {
  margin-top: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.06em;
  color: var(--brass-hi); text-transform: uppercase; flex-shrink: 0;
}
@media (max-width: 380px), (max-height: 640px) {
  .mobile-nav a { font-size: 19px; padding: 7px 0; }
  .mobile-nav { gap: 0; padding: 80px 28px 28px; }
}
.mobile-close {
  position: absolute; top: 26px; right: 32px; color: var(--paper); font-size: 26px;
  background: none; border: none; cursor: pointer;
}
@media (min-width: 901px) { .mobile-nav { display: none; } }

/* ===== SHARED BUTTONS ===== */
.btn {
  padding: 15px 26px; border-radius: 2px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.25s ease, background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-primary { background: var(--brass-hi); color: var(--ink); }
.btn-primary:hover { background: var(--paper); }
.btn-ghost { border-color: var(--line-dark); color: var(--paper); }
.btn-ghost:hover { border-color: var(--brass-hi); color: var(--brass-hi); }

/* ===== FOOTER ===== */
footer.site-footer {
  background: var(--ink); color: var(--paper-dim); border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  padding: 72px 0 56px; border-bottom: 1px solid var(--line-dark);
}
.footer-grid h5 {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 20px;
}
.footer-brand .name { font-family: 'Fraunces', serif; color: var(--paper); font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.footer-brand p { font-size: 13.5px; max-width: 300px; line-height: 1.75; }
.footer-brand .visitor-count { margin-top: 14px; color: var(--brass); }
.footer-brand .visitor-count strong { color: var(--paper); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper-dim); font-size: 11px; font-weight: 700; text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.footer-social a:hover { border-color: var(--brass); color: var(--brass-hi); }
.footer-social svg, .social-links svg { display: block; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-grid a { font-size: 13.5px; transition: color 0.2s; }
.footer-grid a:hover { color: var(--paper); }
.footer-grid address { font-size: 13.5px; line-height: 1.85; font-style: normal; }

.footer-mark {
  text-align: center; padding: 34px 0 6px; overflow: hidden;
}
.footer-mark span {
  display: block; font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(48px, 11vw, 150px); letter-spacing: -0.02em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(244, 227, 184, 0.16);
  white-space: nowrap;
}
.bottom-bar {
  display: flex; justify-content: space-between; align-items: center; padding: 22px 0;
  font-size: 11.5px; color: rgba(244, 227, 184, 0.4); flex-wrap: wrap; gap: 10px;
}
.bottom-bar a { color: rgba(244, 227, 184, 0.6); }
.footer-disclaimer {
  padding: 20px 0; border-top: 1px solid var(--line-dark);
  font-size: 11.5px; line-height: 1.75; color: rgba(244, 227, 184, 0.45);
}
.footer-disclaimer strong { color: rgba(244, 227, 184, 0.7); }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .wrap { padding: 0 20px; } }

/* ===== SCROLL REVEAL ===== */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-reveal-stagger].in > * { opacity: 1; transform: translateY(0); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

/* ===== COMING SOON PANEL (shared) ===== */
.coming-soon-panel {
  text-align: center; padding: 70px 30px; border: 1px dashed var(--line-dark);
  background: linear-gradient(160deg, rgba(203, 161, 53, 0.06), transparent);
}
.coming-soon-panel img { width: 64px; height: auto; margin: 0 auto 22px; }
.coming-soon-panel h3 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--paper); margin-bottom: 12px; }
.coming-soon-panel p { max-width: 46ch; margin: 0 auto 26px; color: rgba(244, 227, 184, 0.62); font-size: 14px; line-height: 1.65; }

/* ===== FLOATING WHATSAPP BUTTON ===== */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 250;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(63, 166, 110, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px -8px rgba(63, 166, 110, 0.75); }
.wa-float svg { width: 28px; height: 28px; fill: #0D0D0F; }
@media (max-width: 560px) {
  .wa-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .wa-float svg { width: 25px; height: 25px; }
}