/* ============================================================================
   SiteWash — Technical SEO Service homepage
   A bespoke, fully self-contained landing experience.
   Everything is scoped under .sw-root so it never leaks into theme chrome.
   Concept: "Drive in dirty. Roll out ranking." — a car wash for websites.
   ========================================================================== */

.sw-root {
  /* ---- palette (dark, premium "wash bay") ---- */
  --sw-bg:        #060a14;
  --sw-bg-2:      #080d1a;
  --sw-surface:   #0d1424;
  --sw-surface-2: #121b30;
  --sw-surface-3: #18243f;
  --sw-line:      rgba(255,255,255,.08);
  --sw-line-2:    rgba(255,255,255,.14);

  --sw-blue:   #0096ff;   /* signature */
  --sw-blue-2: #4db8ff;
  --sw-cyan:   #25e0e6;   /* "shine / clean" */
  --sw-deep:   #1f74bf;
  --sw-green:  #2bd9a3;   /* healthy / fixed */
  --sw-amber:  #ffb454;   /* warning */
  --sw-red:    #ff5b78;   /* problem / dirt */
  --sw-violet: #9b8cff;

  --sw-text: #c2d0e8;
  --sw-head: #ffffff;
  --sw-mut:  #7a89a8;
  --sw-foam: #eaf4ff;

  --sw-grad:      linear-gradient(135deg, #0096ff 0%, #25e0e6 100%);
  --sw-grad-soft: linear-gradient(135deg, rgba(0,150,255,.18), rgba(37,224,230,.10));
  --sw-grad-dirt: linear-gradient(90deg, #ff5b78 0%, #ffb454 50%, #2bd9a3 100%);

  --sw-r-sm: 12px;
  --sw-r:    18px;
  --sw-r-lg: 26px;
  --sw-r-xl: 36px;

  --sw-shadow:   0 24px 60px -24px rgba(0,0,0,.7);
  --sw-glow:     0 0 0 1px rgba(0,150,255,.35), 0 20px 60px -18px rgba(0,150,255,.45);
  --sw-maxw: 1200px;

  position: relative;
  width: 100%;
  margin: 0;
  color: var(--sw-text);
  background: var(--sw-bg);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* pull above the theme's container paddings so sections are edge-to-edge */
  isolation: isolate;
}

/* hard reset within our scope */
.sw-root *,
.sw-root *::before,
.sw-root *::after { box-sizing: border-box; }

.sw-root h1, .sw-root h2, .sw-root h3,
.sw-root h4, .sw-root h5, .sw-root p,
.sw-root ul, .sw-root li, .sw-root figure { margin: 0; padding: 0; }

.sw-root ul { list-style: none; }

.sw-root a { color: var(--sw-blue-2); text-decoration: none; transition: color .2s ease; }
.sw-root a:hover { color: var(--sw-cyan); }

.sw-root img { max-width: 100%; display: block; }

.sw-root ::selection { background: rgba(0,150,255,.35); color: #fff; }

/* keep [hidden] authoritative even where we set display on the class */
.sw-root [hidden] { display: none !important; }

/* neutralise UA / inherited control styling. :where() keeps these at zero
   specificity so our own .sw-* component rules below always win. */
:where(.sw-root) button {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer;
  text-transform: none; letter-spacing: normal; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
:where(.sw-root) input {
  font: inherit; color: inherit; background: none; border: 0; margin: 0;
  box-shadow: none; -webkit-appearance: none; appearance: none; border-radius: 0;
}
:where(.sw-root) input:focus { outline: none; }
:where(.sw-root) dl, :where(.sw-root) dt, :where(.sw-root) dd,
:where(.sw-root) blockquote { margin: 0; }
/* default icon size so any unsized inline svg renders sanely (eyebrows etc.);
   context rules below (.sw-btn svg, .sw-card3d__icon svg, …) override per use */
.sw-root svg { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle; max-width: none; }
/* the parent theme follows the OS colour scheme; on a light OS its element
   rules (e.g. `… span{color:var(--jkd-h-col)}`) leak black into our dark cards.
   Force our unclassed value spans to inherit our own colours instead. */
.sw-root span[data-countup] { color: inherit !important; }
.sw-root .sw-prefix, .sw-root .sw-suffix { color: var(--sw-cyan) !important; }

/* hide the theme's default page header / article header on the homepage */
body.home .page-header,
body.home #post-header,
body.home #single-progress-bar { display: none !important; }

/* ============================== LAYOUT ===================================== */
.sw-section { position: relative; padding: clamp(64px, 9vw, 130px) 0; }
/* offset in-page anchor jumps so the sticky nav doesn't cover headings */
.sw-root section[id], .sw-root [id^="sw-"] { scroll-margin-top: 100px; }
.sw-section--tight { padding: clamp(48px, 6vw, 88px) 0; }

.sw-container {
  width: 100%;
  max-width: var(--sw-maxw);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
  position: relative;
  z-index: 2;
}
.sw-container--wide { max-width: 1360px; }

/* ============================== TYPOGRAPHY ================================= */
.sw-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sw-blue-2);
  padding: 7px 15px;
  border: 1px solid var(--sw-line-2);
  border-radius: 100px;
  background: rgba(0,150,255,.06);
  backdrop-filter: blur(6px);
}
.sw-eyebrow svg { width: 15px; height: 15px; color: var(--sw-cyan); }
.sw-eyebrow .sw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sw-cyan); box-shadow: 0 0 10px var(--sw-cyan);
  animation: sw-pulse 1.8s ease-in-out infinite;
}

.sw-h1 {
  color: var(--sw-head);
  font-weight: 800;
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.sw-h2 {
  color: var(--sw-head);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.sw-h3 { color: var(--sw-head); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }
.sw-lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--sw-text); line-height: 1.7; }
.sw-muted { color: var(--sw-mut); }

.sw-grad-text {
  background: var(--sw-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sw-underline-shine { position: relative; white-space: nowrap; }
.sw-underline-shine::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .14em;
  background: var(--sw-grad); border-radius: 4px; transform: scaleX(0); transform-origin: left;
  animation: sw-underline 1s cubic-bezier(.2,.8,.2,1) .5s forwards;
}

.sw-section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sw-section-head.sw-center { margin-inline: auto; text-align: center; }
.sw-section-head .sw-eyebrow { margin-bottom: 20px; }
.sw-section-head .sw-lead { margin-top: 18px; }

/* ============================== BUTTONS =================================== */
.sw-btn {
  --b: var(--sw-blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 16px 26px; border-radius: 100px; border: 1px solid transparent;
  cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  text-align: center; white-space: nowrap;
}
.sw-btn svg { width: 18px; height: 18px; }
.sw-btn--primary {
  color: #001220; background: var(--sw-grad);
  box-shadow: 0 14px 34px -12px rgba(0,150,255,.7);
}
.sw-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -12px rgba(0,150,255,.85); color:#001220; }
.sw-btn--ghost {
  color: var(--sw-head); background: rgba(255,255,255,.04);
  border-color: var(--sw-line-2); backdrop-filter: blur(8px);
}
.sw-btn--ghost:hover { transform: translateY(-3px); border-color: var(--sw-blue); color: #fff; background: rgba(0,150,255,.10); }
.sw-btn--block { width: 100%; }
.sw-btn--lg { padding: 19px 34px; font-size: 1.06rem; }
/* buttons are often <a>, so out-specify the generic `.sw-root a` colour rule */
.sw-root a.sw-btn { text-decoration: none; }
.sw-root a.sw-btn--primary, .sw-root a.sw-btn--primary:hover { color: #001220; }
.sw-root a.sw-btn--ghost,   .sw-root a.sw-btn--ghost:hover   { color: #ffffff; }

.sw-link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.sw-link-arrow svg { width: 16px; height: 16px; transition: transform .25s ease; }
.sw-link-arrow:hover svg { transform: translateX(4px); }

/* ============================ BACKGROUND FX =============================== */
.sw-bg-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.sw-orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; pointer-events: none;
}
.sw-orb--blue  { background: radial-gradient(circle, rgba(0,150,255,.55), transparent 70%); }
.sw-orb--cyan  { background: radial-gradient(circle, rgba(37,224,230,.40), transparent 70%); }
.sw-orb--violet{ background: radial-gradient(circle, rgba(155,140,255,.35), transparent 70%); }

/* rising foam bubbles */
.sw-bubbles { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.sw-bubbles span {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), rgba(0,150,255,.15) 60%, transparent 70%);
  border: 1px solid rgba(255,255,255,.18);
  animation: sw-rise linear infinite;
  opacity: 0;
}

/* ================================ HERO ==================================== */
.sw-hero {
  position: relative;
  padding-top: clamp(130px, 17vh, 220px);
  padding-bottom: clamp(60px, 8vw, 110px);
  overflow: hidden;
  background:
    radial-gradient(1100px 560px at 78% -8%, rgba(0,150,255,.20), transparent 60%),
    radial-gradient(900px 520px at 10% 8%, rgba(37,224,230,.10), transparent 60%),
    var(--sw-bg);
}
.sw-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "copy visual" "copy form";
  column-gap: clamp(30px, 5vw, 64px);
  row-gap: 26px;
  align-items: start;
}
.sw-hero__copy   { grid-area: copy; align-self: center; min-width: 0; }
.sw-hero__visual { grid-area: visual; }
.sw-hero__form   { grid-area: form; min-width: 0; }
.sw-hero__form .sw-hero__scanbox { margin-top: 0; }

.sw-hero h1 { margin: 22px 0 0; }
.sw-hero__sub { margin-top: 24px; max-width: 560px; }
.sw-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.sw-hero__scanbox {
  margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap;
  padding: 9px; border: 1px solid var(--sw-line-2); border-radius: 100px;
  background: rgba(255,255,255,.03); max-width: 560px; backdrop-filter: blur(8px);
}
.sw-hero__scanbox .sw-url-wrap { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; padding-left: 16px; min-width: 0; }
.sw-hero__scanbox .sw-url-wrap svg { width: 18px; height: 18px; color: var(--sw-mut); flex: none; }
.sw-hero__scanbox input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--sw-head); font-family: inherit; font-size: 1rem;
}
.sw-hero__scanbox input::placeholder { color: var(--sw-mut); }

.sw-trust { margin-top: 40px; }
.sw-trust__label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sw-mut); margin-bottom: 14px; }
.sw-trust__logos { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.sw-trust__logos span { font-weight: 700; font-size: 1.15rem; color: #aab8d4; opacity: .85; letter-spacing: .01em; }

/* hero stat chips */
.sw-hero__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sw-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 100px; border: 1px solid var(--sw-line);
  background: rgba(255,255,255,.03); font-size: .9rem; color: var(--sw-text);
}
.sw-chip b { color: var(--sw-head); }
.sw-chip .sw-ic { width: 16px; height: 16px; color: var(--sw-cyan); }

/* ---- hero visual: the wash tunnel with a "site car" ---- */
.sw-wash { position: relative; aspect-ratio: 1 / 1.02; border-radius: var(--sw-r-xl); overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,150,255,.16), transparent 55%),
    linear-gradient(180deg, #0a1426, #070d1a 70%);
  border: 1px solid var(--sw-line-2); box-shadow: var(--sw-shadow);
}
.sw-wash__rails { position: absolute; inset: 0; }
.sw-wash__rail { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(0,150,255,.4), transparent); }
.sw-wash__rail.l { left: 22%; } .sw-wash__rail.r { right: 22%; }

.sw-wash__jets { position: absolute; top: 8%; left: 12%; right: 12%; height: 34%; display: flex; justify-content: space-between; }
.sw-wash__jet { width: 3px; background: linear-gradient(180deg, rgba(37,224,230,.0), rgba(37,224,230,.65)); border-radius: 4px; transform-origin: top; animation: sw-spray 1.4s ease-in-out infinite; }

/* the foam arches */
.sw-wash__arch { position: absolute; left: 8%; right: 8%; height: 16px; border-radius: 50%;
  border-top: 3px solid rgba(255,255,255,.10); filter: blur(.4px); }

/* conveyor */
.sw-wash__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, rgba(0,150,255,.05), rgba(0,0,0,.4)); border-top: 1px solid var(--sw-line); overflow: hidden; }
.sw-wash__belt { position: absolute; bottom: 22px; left: -20%; right: -20%; height: 3px; display: flex; gap: 26px; }
.sw-wash__belt i { flex: none; width: 26px; height: 3px; background: rgba(0,150,255,.5); border-radius: 3px; animation: sw-belt 1.1s linear infinite; }

/* the "car" = a browser window that gets washed */
.sw-car {
  position: absolute; left: 50%; bottom: 26%; width: 58%; translate: -50% 0;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--sw-line-2);
  background: #0c1426; box-shadow: 0 20px 40px -16px rgba(0,0,0,.7);
  animation: sw-bob 3.4s ease-in-out infinite;
}
.sw-car__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #0a1120; border-bottom: 1px solid var(--sw-line); }
.sw-car__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3550; }
.sw-car__bar i:nth-child(1){ background:#ff5b78; } .sw-car__bar i:nth-child(2){ background:#ffb454; } .sw-car__bar i:nth-child(3){ background:#2bd9a3; }
.sw-car__url { margin-left: 8px; height: 9px; flex: 1; border-radius: 4px; background: rgba(255,255,255,.08); }
.sw-car__screen { position: relative; height: 120px; padding: 14px; display: grid; gap: 9px; }
.sw-car__line { height: 9px; border-radius: 5px; background: rgba(255,255,255,.10); }
.sw-car__line.w70{ width:70%; } .sw-car__line.w90{ width:90%; } .sw-car__line.w50{ width:50%; } .sw-car__line.w80{ width:80%; }
.sw-car__block { height: 34px; border-radius: 8px; background: rgba(0,150,255,.14); border: 1px solid rgba(0,150,255,.25); }
/* dirty overlay that fades as it "washes" */
.sw-car__dirt { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,91,120,.5), transparent 9%),
    radial-gradient(circle at 70% 60%, rgba(255,180,84,.45), transparent 8%),
    radial-gradient(circle at 45% 80%, rgba(255,91,120,.4), transparent 7%),
    radial-gradient(circle at 85% 25%, rgba(255,180,84,.4), transparent 6%),
    radial-gradient(circle at 35% 50%, rgba(255,91,120,.35), transparent 6%);
  animation: sw-dirtwash 5s ease-in-out infinite;
}
.sw-car__shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
  animation: sw-shine 5s ease-in-out infinite; }

.sw-wash__badge {
  position: absolute; top: 16px; left: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 100px;
  background: rgba(7,13,26,.7); border: 1px solid var(--sw-line-2); backdrop-filter: blur(8px);
  font-size: .78rem; font-weight: 600; color: var(--sw-foam);
}
.sw-wash__badge .sw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-green); box-shadow: 0 0 8px var(--sw-green); }

/* marquee strip under hero */
.sw-marquee { border-block: 1px solid var(--sw-line); background: rgba(255,255,255,.015); overflow: hidden; }
.sw-marquee__track { display: flex; gap: 48px; padding: 18px 0; width: max-content; animation: sw-marq 34s linear infinite; }
.sw-marquee:hover .sw-marquee__track { animation-play-state: paused; }
.sw-marquee__item { display: inline-flex; align-items: center; gap: 12px; color: var(--sw-mut); font-weight: 600; white-space: nowrap; }
.sw-marquee__item svg { width: 18px; height: 18px; color: var(--sw-blue); }

/* ============================ SCANNER ==================================== */
.sw-scan { position: relative; }
.sw-scan__panel {
  border-radius: var(--sw-r-lg); border: 1px solid var(--sw-line-2);
  background: linear-gradient(180deg, var(--sw-surface), var(--sw-bg-2));
  box-shadow: var(--sw-shadow); overflow: hidden;
}
.sw-scan__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--sw-line); background: rgba(255,255,255,.02); }
.sw-scan__dot { width: 11px; height: 11px; border-radius: 50%; }
.sw-scan__addr {
  flex: 1 1 280px; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 11px 16px; border-radius: 100px; border: 1px solid var(--sw-line-2); background: var(--sw-bg);
}
.sw-scan__addr svg { width: 16px; height: 16px; color: var(--sw-mut); flex: none; }
.sw-scan__addr input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--sw-head); font-family: inherit; font-size: .96rem; }
.sw-scan__addr input::placeholder { color: var(--sw-mut); }
.sw-scan__run { flex: none; }

.sw-scan__body { display: grid; grid-template-columns: 320px 1fr; gap: 0; min-height: 440px; }
.sw-scan__left { border-right: 1px solid var(--sw-line); padding: 26px; display: flex; flex-direction: column; gap: 22px; }
.sw-scan__right { padding: 26px; }

/* health gauge (radial) */
.sw-gauge { position: relative; width: 200px; height: 200px; margin: 6px auto 0; }
.sw-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sw-gauge__track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 14; }
.sw-gauge__val { fill: none; stroke: url(#sw-gauge-grad); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 534; stroke-dashoffset: 534; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.sw-gauge__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sw-gauge__num { font-size: 3rem; font-weight: 800; color: var(--sw-head); line-height: 1; }
.sw-gauge__lbl { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sw-mut); margin-top: 6px; }
.sw-gauge__grade { margin-top: 4px; font-weight: 700; font-size: .85rem; }

.sw-scan__status { font-size: .85rem; color: var(--sw-mut); display: flex; align-items: center; gap: 9px; min-height: 22px; }
.sw-scan__status .sw-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--sw-cyan); animation: sw-rot .8s linear infinite; }

.sw-scan__counts { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sw-count { text-align: center; padding: 14px 6px; border-radius: var(--sw-r-sm); border: 1px solid var(--sw-line); background: rgba(255,255,255,.02); }
.sw-count b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.sw-count span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-mut); margin-top: 6px; display: block; }
.sw-count.high b { color: var(--sw-red); } .sw-count.med b { color: var(--sw-amber); } .sw-count.low b { color: var(--sw-blue-2); }

/* CWV trio */
.sw-cwv { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; }
.sw-cwv__card { padding: 16px; border-radius: var(--sw-r-sm); border: 1px solid var(--sw-line); background: rgba(255,255,255,.02); position: relative; overflow: hidden; }
.sw-cwv__name { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sw-mut); }
.sw-cwv__val { font-size: 1.7rem; font-weight: 800; color: var(--sw-head); margin-top: 7px; line-height: 1; }
.sw-cwv__val small { font-size: .8rem; font-weight: 600; color: var(--sw-mut); }
.sw-cwv__bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 12px; overflow: hidden; }
.sw-cwv__bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 1.2s ease .2s; }
.sw-cwv__tag { position: absolute; top: 14px; right: 14px; font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 100px; }
.sw-bad  { color: var(--sw-red);   background: rgba(255,91,120,.12); }
.sw-warn { color: var(--sw-amber); background: rgba(255,180,84,.12); }
.sw-good { color: var(--sw-green); background: rgba(43,217,163,.12); }
.sw-cwv__bar i.bad{ background: var(--sw-red); } .sw-cwv__bar i.warn{ background: var(--sw-amber); } .sw-cwv__bar i.good{ background: var(--sw-green); }

.sw-issues__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sw-issues__head h4 { color: var(--sw-head); font-size: 1rem; font-weight: 700; }
.sw-issues { display: flex; flex-direction: column; gap: 9px; }
.sw-issue {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: var(--sw-r-sm);
  border: 1px solid var(--sw-line); background: rgba(255,255,255,.02);
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease, border-color .3s;
}
.sw-issue.in { opacity: 1; transform: none; }
.sw-issue__sev { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.sw-issue__sev.high{ background: var(--sw-red); box-shadow: 0 0 8px var(--sw-red); }
.sw-issue__sev.med { background: var(--sw-amber); }
.sw-issue__sev.low { background: var(--sw-blue-2); }
.sw-issue__txt { flex: 1; min-width: 0; }
.sw-issue__txt b { color: var(--sw-head); font-weight: 600; font-size: .94rem; display: block; }
.sw-issue__txt span { font-size: .8rem; color: var(--sw-mut); }
.sw-issue__count { font-weight: 800; color: var(--sw-head); font-size: .95rem; }
.sw-issue__badge { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 100px; flex: none; }

.sw-scan__cta { margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sw-scan__note { font-size: .8rem; color: var(--sw-mut); }
.sw-scan__empty { color: var(--sw-mut); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 300px; gap: 14px; }
.sw-scan__empty svg { width: 48px; height: 48px; color: var(--sw-blue); opacity: .7; }

/* ============================ TUNNEL / PROCESS =========================== */
.sw-tunnel { position: relative; }
.sw-tunnel__track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sw-tunnel__line { position: absolute; top: 64px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--sw-red), var(--sw-amber) 50%, var(--sw-green)); opacity: .35; z-index: 0; }
.sw-bay {
  position: relative; z-index: 1; padding: 30px; border-radius: var(--sw-r-lg);
  border: 1px solid var(--sw-line); background: linear-gradient(180deg, var(--sw-surface), var(--sw-bg-2));
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sw-bay:hover { transform: translateY(-6px); border-color: var(--sw-line-2); box-shadow: var(--sw-shadow); }
.sw-bay__no { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem;
  color: #001220; background: var(--sw-grad); box-shadow: 0 10px 26px -10px rgba(0,150,255,.6); margin-bottom: 20px; }
.sw-bay__stage { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sw-cyan); font-weight: 700; }
.sw-bay h3 { margin: 6px 0 14px; }
.sw-bay__wwh { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.sw-wwh { padding-left: 16px; border-left: 2px solid var(--sw-line-2); }
.sw-wwh dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-blue-2); font-weight: 700; margin-bottom: 3px; }
.sw-wwh dd { font-size: .92rem; color: var(--sw-text); }
.sw-bay__tools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.sw-tool { font-size: .72rem; padding: 5px 10px; border-radius: 100px; border: 1px solid var(--sw-line-2); color: #aebbd6; background: rgba(255,255,255,.04); }

/* ============================ SERVICE MENU (flip) ======================== */
.sw-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sw-card3d { perspective: 1600px; min-height: 340px; }
.sw-card3d__in { position: relative; width: 100%; height: 100%; min-height: 340px; transition: transform .7s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.sw-card3d.flip .sw-card3d__in { transform: rotateY(180deg); }
.sw-card3d__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--sw-r-lg); border: 1px solid var(--sw-line); padding: 28px;
  background: linear-gradient(180deg, var(--sw-surface), var(--sw-bg-2)); display: flex; flex-direction: column;
}
.sw-card3d__face--back { transform: rotateY(180deg); background: linear-gradient(180deg, var(--sw-surface-2), var(--sw-surface)); }
.sw-card3d__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px;
  color: var(--sw-cyan); background: var(--sw-grad-soft); border: 1px solid var(--sw-line-2); }
.sw-card3d__icon svg { width: 28px; height: 28px; }
.sw-card3d h3 { margin-bottom: 10px; }
.sw-card3d__desc { font-size: .94rem; color: var(--sw-text); flex: 1; }
.sw-card3d__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.sw-card3d__flip { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 600; font-size: .9rem; color: var(--sw-blue-2); background: none; border: 0; font-family: inherit; padding: 0; }
.sw-card3d__flip svg { width: 16px; height: 16px; transition: transform .3s; }
.sw-card3d.flip .sw-card3d__flip svg, .sw-card3d__face--back .sw-card3d__flip svg { transform: rotate(180deg); }
.sw-card3d__face--back h4 { color: var(--sw-head); font-size: 1.05rem; margin-bottom: 14px; }
.sw-wwh-list { display: flex; flex-direction: column; gap: 13px; flex: 1; }
.sw-wwh-list .sw-wwh dd { font-size: .88rem; }

/* ============================ BEFORE / AFTER ============================= */
.sw-ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items: center; }
.sw-ba__compare { position: relative; border-radius: var(--sw-r-lg); overflow: hidden; border: 1px solid var(--sw-line-2);
  box-shadow: var(--sw-shadow); display: grid; grid-template-rows: 1fr auto 1fr; }
.sw-ba__col { padding: 24px 26px; display: flex; flex-direction: column; gap: 13px; position: relative; }
.sw-ba__before { background: linear-gradient(135deg, #1c1018, #160c12); }
.sw-ba__after  { background: linear-gradient(135deg, #07151f, #081a23); }
.sw-ba__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sw-ba__tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; }
.sw-ba__before .sw-ba__tag { color: var(--sw-red); background: rgba(255,91,120,.14); }
.sw-ba__after .sw-ba__tag { color: var(--sw-green); background: rgba(43,217,163,.14); }
.sw-ba__metric { display: flex; align-items: baseline; gap: 7px; }
.sw-ba__metric b { font-size: 2rem; font-weight: 800; line-height: 1; }
.sw-ba__before .sw-ba__metric b { color: var(--sw-red); } .sw-ba__after .sw-ba__metric b { color: var(--sw-green); }
.sw-ba__metric span { font-size: .76rem; color: var(--sw-mut); white-space: nowrap; }
.sw-ba__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.sw-ba__row { display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.sw-ba__row svg { width: 17px; height: 17px; flex: none; }
.sw-ba__before .sw-ba__row { color: #e7b9c2; } .sw-ba__before .sw-ba__row svg { color: var(--sw-red); }
.sw-ba__after .sw-ba__row { color: #b6e8d6; } .sw-ba__after .sw-ba__row svg { color: var(--sw-green); }
.sw-ba__divider { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px;
  background: rgba(4,8,16,.55); border-block: 1px solid var(--sw-line-2); color: var(--sw-cyan);
  font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; }
.sw-ba__divider svg { width: 18px; height: 18px; animation: sw-bob 2.4s ease-in-out infinite; }

/* ============================ CASE STUDIES ============================== */
.sw-cases__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.sw-tab {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 100px;
  border: 1px solid var(--sw-line-2); background: rgba(255,255,255,.02); color: var(--sw-text);
  font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all .25s ease;
}
.sw-tab:hover { color: #fff; border-color: var(--sw-blue); }
.sw-tab.active { color: #001220; background: var(--sw-grad); border-color: transparent; }
.sw-tab small { font-weight: 500; opacity: .7; font-size: .78rem; }
.sw-tab.active small { opacity: .8; }

.sw-case { display: none; }
.sw-case.active { display: block; animation: sw-fadeup .5s ease; }
.sw-case__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px,4vw,50px); }
.sw-case__panel { border-radius: var(--sw-r-lg); border: 1px solid var(--sw-line); background: linear-gradient(180deg, var(--sw-surface), var(--sw-bg-2)); padding: clamp(26px,3vw,40px); }
.sw-case__head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.sw-case__logo { font-size: 1.7rem; font-weight: 800; color: var(--sw-head); }
.sw-case__industry { font-size: .8rem; color: var(--sw-mut); border-left: 1px solid var(--sw-line-2); padding-left: 16px; }
.sw-case__story { display: flex; flex-direction: column; gap: 22px; }
.sw-story__item { position: relative; padding-left: 40px; }
.sw-story__ic { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.sw-story__ic svg { width: 16px; height: 16px; }
.sw-story__item.dirt .sw-story__ic { background: rgba(255,91,120,.12); color: var(--sw-red); }
.sw-story__item.wash .sw-story__ic { background: rgba(0,150,255,.12); color: var(--sw-blue-2); }
.sw-story__item.shine .sw-story__ic { background: rgba(43,217,163,.12); color: var(--sw-green); }
.sw-story__item h5 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-mut); margin-bottom: 6px; font-weight: 700; }
.sw-story__item p { font-size: .95rem; color: var(--sw-text); }

.sw-case__metrics { display: flex; flex-direction: column; gap: 16px; }
.sw-metric { padding: 24px; border-radius: var(--sw-r); border: 1px solid var(--sw-line); background: rgba(255,255,255,.02); position: relative; overflow: hidden; }
.sw-metric::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sw-grad); }
.sw-metric b { display: block; font-size: clamp(2rem,3.4vw,2.8rem); font-weight: 800; color: var(--sw-head); line-height: 1; }
.sw-metric b .sw-prefix, .sw-metric b .sw-suffix { color: var(--sw-cyan); }
.sw-metric b { white-space: nowrap; }
.sw-metric > span { font-size: .88rem; color: var(--sw-text); margin-top: 8px; display: block; }
.sw-case__quote { margin-top: 22px; padding: 24px; border-radius: var(--sw-r); border: 1px solid var(--sw-line); background: rgba(0,150,255,.04); }
.sw-case__quote p { font-style: italic; color: var(--sw-foam); font-size: .98rem; line-height: 1.7; }
.sw-case__quote cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; color: var(--sw-mut); font-size: .85rem; }

/* ============================ LIVE BAY (stats + queue) ================== */
.sw-livebay__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(26px,4vw,52px); align-items: center; }
.sw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sw-stat { padding: 24px; border-radius: var(--sw-r); border: 1px solid var(--sw-line); background: linear-gradient(180deg, var(--sw-surface), var(--sw-bg-2)); position: relative; overflow: hidden; }
.sw-stat__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--sw-cyan); background: var(--sw-grad-soft); border: 1px solid var(--sw-line-2); margin-bottom: 14px; }
.sw-stat__ic svg { width: 20px; height: 20px; }
.sw-stat b { display: block; font-size: clamp(1.9rem,3.2vw,2.6rem); font-weight: 800; color: var(--sw-head); line-height: 1; }
.sw-stat b .sw-prefix, .sw-stat b .sw-suffix { color: var(--sw-cyan); }
.sw-stat b { white-space: nowrap; }
.sw-stat > span { display: block; margin-top: 8px; font-size: .86rem; color: var(--sw-text); }

.sw-queue { border-radius: var(--sw-r-lg); border: 1px solid var(--sw-line-2); background: linear-gradient(180deg, var(--sw-surface), var(--sw-bg-2)); box-shadow: var(--sw-shadow); overflow: hidden; }
.sw-queue__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sw-line); background: rgba(255,255,255,.02); }
.sw-queue__title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--sw-head); font-size: .98rem; }
.sw-queue__live { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: var(--sw-green); text-transform: uppercase; letter-spacing: .08em; }
.sw-queue__live .sw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sw-green); box-shadow: 0 0 9px var(--sw-green); animation: sw-pulse 1.6s ease-in-out infinite; }
.sw-queue__list { display: flex; flex-direction: column; }
.sw-q { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--sw-line); transition: background .3s; }
.sw-q:last-child { border-bottom: 0; }
.sw-q__n { font-size: .8rem; font-weight: 700; color: var(--sw-mut); }
.sw-q__site { min-width: 0; }
.sw-q__dom { color: var(--sw-head); font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-q__bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 8px; overflow: hidden; }
.sw-q__bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--sw-grad); transition: width 1.2s cubic-bezier(.3,.8,.3,1); }
.sw-q__status { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 11px; border-radius: 100px; white-space: nowrap; }
.sw-q__status[data-stage="queued"]  { color: var(--sw-mut);   background: rgba(255,255,255,.05); }
.sw-q__status[data-stage="presoak"] { color: var(--sw-blue-2); background: rgba(0,150,255,.12); }
.sw-q__status[data-stage="scrub"]   { color: var(--sw-cyan);   background: rgba(37,224,230,.12); }
.sw-q__status[data-stage="wax"]     { color: var(--sw-violet); background: rgba(155,140,255,.14); }
.sw-q__status[data-stage="done"]    { color: var(--sw-green);  background: rgba(43,217,163,.14); }
.sw-q.is-done { opacity: .55; }

/* ============================ PRICING =================================== */
.sw-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.sw-plan { position: relative; border-radius: var(--sw-r-lg); border: 1px solid var(--sw-line); background: linear-gradient(180deg, var(--sw-surface), var(--sw-bg-2));
  padding: 34px 30px; display: flex; flex-direction: column; transition: transform .3s ease, border-color .3s ease, box-shadow .3s; }
.sw-plan:hover { transform: translateY(-6px); border-color: var(--sw-line-2); }
.sw-plan--feat { border-color: rgba(0,150,255,.5); box-shadow: var(--sw-glow); background: linear-gradient(180deg, #0c1a30, var(--sw-bg-2)); }
.sw-plan__pop { position: absolute; top: -13px; left: 50%; translate: -50% 0; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #001220; background: var(--sw-grad); padding: 7px 16px; border-radius: 100px; box-shadow: 0 10px 24px -8px rgba(0,150,255,.6); }
.sw-plan__tier { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sw-cyan); font-weight: 700; }
.sw-plan__name { color: var(--sw-head); font-size: 1.45rem; font-weight: 800; margin: 8px 0 4px; }
.sw-plan__for { font-size: .88rem; color: var(--sw-mut); min-height: 40px; }
.sw-plan__price { margin: 18px 0; display: flex; align-items: baseline; gap: 6px; }
.sw-plan__price b { font-size: 2.4rem; font-weight: 800; color: var(--sw-head); line-height: 1; }
.sw-plan__price span { color: var(--sw-mut); font-size: .9rem; }
.sw-plan__feats { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 26px; flex: 1; }
.sw-plan__feats li { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; }
.sw-plan__feats svg { width: 18px; height: 18px; color: var(--sw-green); flex: none; margin-top: 2px; }

/* ============================ VEXEL APP ================================= */
.sw-vexel { position: relative; border-radius: var(--sw-r-xl); overflow: hidden; border: 1px solid var(--sw-line-2);
  background: radial-gradient(120% 120% at 85% -10%, rgba(155,140,255,.18), transparent 55%), linear-gradient(180deg, var(--sw-surface), var(--sw-bg-2)); }
.sw-vexel__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px,4vw,50px); align-items: center; padding: clamp(34px,5vw,64px); }
.sw-vexel__badge { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sw-violet); padding: 7px 14px; border-radius: 100px; border: 1px solid rgba(155,140,255,.3); background: rgba(155,140,255,.08); margin-bottom: 20px; }
.sw-vexel__badge svg { width: 15px; height: 15px; color: var(--sw-violet); }
.sw-vexel h2 { margin-bottom: 16px; }
.sw-vexel__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0; }
.sw-vexel__feat { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; }
.sw-vexel__feat svg { width: 19px; height: 19px; color: var(--sw-violet); flex: none; margin-top: 2px; }
.sw-vexel__shot { border-radius: var(--sw-r-lg); overflow: hidden; border: 1px solid var(--sw-line-2); box-shadow: var(--sw-shadow); background: #0a1020; }
.sw-vexel__shot img { width: 100%; height: auto; display: block; }

/* ============================ FAQ ====================================== */
.sw-faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.sw-acc { border: 1px solid var(--sw-line); border-radius: var(--sw-r); background: rgba(255,255,255,.02); overflow: hidden; transition: border-color .25s; }
.sw-acc.open { border-color: var(--sw-line-2); }
.sw-acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px;
  background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 1.04rem; font-weight: 600; color: var(--sw-head); text-align: left; }
.sw-acc__q svg { width: 20px; height: 20px; flex: none; color: var(--sw-blue); transition: transform .3s ease; }
.sw-acc.open .sw-acc__q svg { transform: rotate(45deg); }
.sw-acc__a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.sw-acc__a p { padding: 0 24px 22px; color: var(--sw-text); font-size: .96rem; }

/* ============================ FINAL CTA ================================ */
.sw-final { position: relative; overflow: hidden; }
.sw-final__box { position: relative; border-radius: var(--sw-r-xl); overflow: hidden; padding: clamp(44px,6vw,90px) clamp(26px,5vw,80px); text-align: center;
  border: 1px solid var(--sw-line-2);
  background: radial-gradient(100% 140% at 50% 0%, rgba(0,150,255,.22), transparent 60%), linear-gradient(180deg, var(--sw-surface-2), var(--sw-bg-2)); }
.sw-final h2 { margin-bottom: 18px; }
.sw-final .sw-lead { max-width: 620px; margin: 0 auto 34px; }
.sw-final__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sw-final__sub { margin-top: 22px; font-size: .85rem; color: var(--sw-mut); }

/* ============================ REVEAL =================================== */
.sw-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.sw-reveal.in { opacity: 1; transform: none; }
.sw-reveal[data-d="1"] { transition-delay: .08s; }
.sw-reveal[data-d="2"] { transition-delay: .16s; }
.sw-reveal[data-d="3"] { transition-delay: .24s; }
.sw-reveal[data-d="4"] { transition-delay: .32s; }
.sw-reveal[data-d="5"] { transition-delay: .40s; }

/* ============================ KEYFRAMES =============================== */
@keyframes sw-pulse { 0%,100%{ transform: scale(1); opacity:1 } 50%{ transform: scale(1.4); opacity:.5 } }
@keyframes sw-underline { to { transform: scaleX(1); } }
@keyframes sw-rise { 0%{ transform: translateY(0) scale(.6); opacity:0 } 12%{ opacity:.8 } 88%{ opacity:.45 } 100%{ transform: translateY(-115vh) scale(1); opacity:0 } }
@keyframes sw-spray { 0%,100%{ transform: scaleY(.55); opacity:.5 } 50%{ transform: scaleY(1); opacity:1 } }
@keyframes sw-belt { to { transform: translateX(52px); } }
@keyframes sw-bob { 0%,100%{ transform: translate(-50%, 0); } 50%{ transform: translate(-50%, -6px); } }
@keyframes sw-shine { 0%,55%{ left:-50%; } 80%,100%{ left:130%; } }
@keyframes sw-dirtwash { 0%,40%{ opacity:1; } 75%,100%{ opacity:0; } }
@keyframes sw-rot { to { transform: rotate(360deg); } }
@keyframes sw-marq { to { transform: translateX(-50%); } }
@keyframes sw-fadeup { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }

/* ============================ RESPONSIVE ============================== */
@media (max-width: 980px) {
  .sw-hero__inner { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "form"; }
  .sw-hero__copy { align-self: start; }
  .sw-hero__visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .sw-scan__body { grid-template-columns: 1fr; }
  .sw-scan__left { border-right: 0; border-bottom: 1px solid var(--sw-line); flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sw-gauge { margin: 0; }
  .sw-tunnel__track { grid-template-columns: 1fr; }
  .sw-tunnel__line { display: none; }
  .sw-menu { grid-template-columns: 1fr 1fr; }
  .sw-ba { grid-template-columns: 1fr; }
  .sw-case__grid { grid-template-columns: 1fr; }
  .sw-pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .sw-vexel__grid { grid-template-columns: 1fr; }
  .sw-vexel__shot { order: -1; }
  .sw-livebay__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sw-root { font-size: 15px; }
  .sw-menu { grid-template-columns: 1fr; }
  .sw-cwv { grid-template-columns: 1fr; }
  .sw-vexel__feats { grid-template-columns: 1fr; }
  .sw-scan__counts { grid-template-columns: repeat(3,1fr); }
  .sw-btn { width: 100%; }
  .sw-hero__cta, .sw-final__cta, .sw-scan__cta { width: 100%; }
}

/* ============================ HERO INSTANT-AUDIT CARD ===================== */
.sw-audit {
  position: relative; border-radius: var(--sw-r-lg);
  border: 1px solid var(--sw-line-2);
  background: linear-gradient(180deg, var(--sw-surface-2), var(--sw-bg-2));
  box-shadow: var(--sw-shadow);
  padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow: hidden;
}
.sw-audit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 85% -10%, rgba(0,150,255,.16), transparent 60%);
}
.sw-audit > * { position: relative; z-index: 1; }

.sw-audit__bar {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 100px;
  background: rgba(7,13,26,.7); border: 1px solid var(--sw-line); font-size: 13px;
}
.sw-audit__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sw-red); box-shadow: 0 0 8px var(--sw-red); transition: background .3s ease; }
.sw-audit__host { color: var(--sw-foam); font-weight: 600; letter-spacing: .01em; }
.sw-audit__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--sw-mut); font-size: 12px; white-space: nowrap; }
.sw-audit__live .sw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-green); box-shadow: 0 0 8px var(--sw-green); }

.sw-audit__top { display: flex; align-items: center; gap: 18px; }
.sw-audit__ring { position: relative; width: 116px; height: 116px; flex: 0 0 auto; }
.sw-audit__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sw-audit__track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10; }
.sw-audit__arc { fill: none; stroke: url(#sw-audit-grad); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.3s cubic-bezier(.22,.9,.3,1); }
.sw-audit__score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sw-audit__score b { font-size: 32px; font-weight: 800; color: var(--sw-head); line-height: 1; font-variant-numeric: tabular-nums; }
.sw-audit__score small { font-size: 10px; color: var(--sw-mut); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

.sw-audit__summary { min-width: 0; }
.sw-audit__grade { font-weight: 700; font-size: 14px; color: var(--sw-mut); }
.sw-audit__note { margin: 6px 0 10px; font-size: 13px; line-height: 1.5; color: var(--sw-text); }
.sw-audit__note b { color: var(--sw-foam); }
.sw-audit__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sw-audit__chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; border: 1px solid var(--sw-line); }
.sw-audit__chip b { font-weight: 800; }

.sw-audit__bars { display: flex; flex-direction: column; gap: 11px; padding-top: 2px; }
.sw-audit__row { display: grid; grid-template-columns: 18px 96px 1fr 36px; align-items: center; gap: 10px; }
.sw-audit__ico { color: var(--sw-blue-2); display: inline-flex; }
.sw-audit__ico svg { width: 16px; height: 16px; }
.sw-audit__name { font-size: 13px; color: var(--sw-text); white-space: nowrap; }
.sw-audit__meter { height: 7px; border-radius: 100px; background: rgba(255,255,255,.07); overflow: hidden; }
.sw-audit__fill { display: block; height: 100%; width: 0; border-radius: 100px; background: var(--sw-grad); transition: width 1.1s cubic-bezier(.22,.9,.3,1); }
.sw-audit__fill.good { background: linear-gradient(90deg, var(--sw-green), var(--sw-cyan)); }
.sw-audit__fill.warn { background: linear-gradient(90deg, var(--sw-amber), #ffd28a); }
.sw-audit__fill.bad  { background: linear-gradient(90deg, var(--sw-red), #ff8aa0); }
.sw-audit__pct { font-size: 12.5px; font-weight: 700; color: var(--sw-foam); text-align: right; font-variant-numeric: tabular-nums; }

.sw-audit__more {
  margin-top: 2px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 100px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
  color: #fff; background: var(--sw-grad); border: none; box-shadow: 0 12px 30px -12px rgba(0,150,255,.7);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sw-audit__more:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(0,150,255,.85); }
.sw-audit__more svg { width: 16px; height: 16px; transition: transform .2s ease; }
.sw-audit__more:hover svg { transform: translateX(3px); }

.sw-audit.is-live .sw-audit__dot { background: var(--sw-green); box-shadow: 0 0 8px var(--sw-green); }

@media (max-width: 560px) {
  .sw-audit__top { flex-direction: column; align-items: stretch; text-align: center; }
  .sw-audit__ring { margin: 0 auto; }
  .sw-audit__chips { justify-content: center; }
  .sw-audit__row { grid-template-columns: 18px 88px 1fr 34px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sw-root *, .sw-root *::before, .sw-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
  .sw-reveal { opacity: 1; transform: none; }
}

/* ============================ FOOTER BLEND (front page only) =============
   The theme footer (#jkd-ft) sits OUTSIDE .sw-root, so it inherits the theme's
   body background (--jkd-bg-col-sec → #28292a dark-grey), which clashes with the
   SiteWash navy (--sw-bg #060a14) above it. This stylesheet is enqueued only on
   the front page, but we still scope to body.home and use literal hex (the --sw-*
   vars don't cascade outside .sw-root). Gated to [data-cs="dark"] so a light-mode
   toggle keeps the theme's own light footer (dark text stays readable). */
body.home[data-cs="dark"] { background-color: #060a14; }
body.home[data-cs="dark"] #jkd-ft {
  background: #060a14;
  border-top: 1px solid rgba(255,255,255,.08);
}