/*
Theme Name: Web Cat Modern
Theme URI: https://webcat.com.au
Author: Web Cat Hosting
Description: Electric-brutalist marketing theme for Web Cat Hosting. Acid accents, kinetic type, terminal details — with all commerce actions wired to the WHMCS install at /client.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: webcat-modern
*/

/* ============================= Tokens ============================= */
:root {
  --ink: #0a0a0a;
  --panel: #101010;
  --panel-2: #161616;
  --paper: #f2f2ec;
  --dim: #9a9a90;
  --acid: #ccff00;
  --acid-dim: #a3cc00;
  --hair: rgba(242, 242, 236, 0.16);
  --hair-strong: rgba(242, 242, 236, 0.35);
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.05; }
p { margin: 0 0 1em; }
::selection { background: var(--acid); color: var(--ink); }

.wc-shell { width: min(1240px, 94vw); margin-inline: auto; }
.wc-shell-narrow { width: min(860px, 94vw); }

/* Custom cursor */
.wc-cursor { position: fixed; inset: 0; z-index: 99; pointer-events: none; }
.wc-cursor-dot, .wc-cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.wc-cursor-dot { width: 6px; height: 6px; background: var(--acid); margin: -3px 0 0 -3px; }
.wc-cursor-ring { width: 34px; height: 34px; border: 1px solid var(--acid); margin: -17px 0 0 -17px; opacity: 0.5; transition: width 0.2s, height 0.2s, margin 0.2s, opacity 0.2s; }
.wc-cursor.is-hover .wc-cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: 0.9; }
@media (pointer: coarse) { .wc-cursor { display: none; } }

/* ============================= Ticker ============================= */
.wc-ticker { border-bottom: 1px solid var(--hair); background: var(--ink); overflow: hidden; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--dim); }
.wc-ticker-track { display: flex; gap: 1.4rem; width: max-content; padding: 0.45rem 0; animation: tick 40s linear infinite; will-change: transform; transform: translateZ(0); }
.wc-ticker-track.is-paused, .wc-band-track.is-paused { animation-play-state: paused; }
.wc-ticker-track b { color: var(--acid); font-weight: 400; }
@keyframes tick { to { transform: translateX(calc(-100% / 3)); } }

/* ============================= Nav ============================= */
.wc-nav { position: sticky; top: 0; z-index: 80; background: rgba(10, 10, 10, 0.92); border-bottom: 1px solid var(--hair); }
.wc-nav-inner { width: min(1240px, 94vw); margin-inline: auto; display: flex; align-items: center; gap: 2rem; padding: 0.9rem 0; }
.wc-brand { display: inline-flex; align-items: center; gap: 0.65rem; }
.wc-mark { width: 34px; color: var(--acid); display: inline-grid; transition: transform 0.25s; }
.wc-brand:hover .wc-mark { transform: scale(1.1) rotate(-4deg); }
.wc-brand-word { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; letter-spacing: 0.04em; }
.wc-brand-word i { font-style: normal; color: var(--acid); font-size: 0.6em; vertical-align: super; }
.wc-menu { margin-left: auto; }
.wc-menu-list { display: flex; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.wc-menu-list a { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--dim); padding: 0.5rem 0.8rem; border: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.wc-menu-list a b { color: var(--acid); font-weight: 400; margin-right: 0.2em; }
.wc-menu-list a:hover { color: var(--paper); border-color: var(--hair); }
.wc-nav-cta { display: flex; gap: 0.6rem; }
.wc-burger { display: none; }

/* ============================= Buttons ============================= */
.wc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.3rem; font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; border: 1px solid var(--hair-strong); background: transparent; color: var(--paper); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; will-change: transform; }
.wc-btn-lg { padding: 0.95rem 1.9rem; font-size: 0.95rem; }
.wc-btn-block { width: 100%; }
.wc-btn-acid { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.wc-btn-acid:hover { background: var(--paper); border-color: var(--paper); }
.wc-btn-line:hover { border-color: var(--acid); color: var(--acid); }
.wc-btn-dark { background: var(--ink); border-color: var(--ink); color: var(--acid); }
.wc-btn-dark:hover { background: transparent; color: var(--ink); }

/* ============================= Hero ============================= */
.wc-hero { position: relative; padding: clamp(3rem, 9vh, 7rem) 0 clamp(3rem, 8vh, 6rem); border-bottom: 1px solid var(--hair); overflow: hidden; }
.wc-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.wc-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center; }
.wc-tag { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--acid); font-weight: 400; }
.wc-h1 { margin: 0; }
.wc-h1 .wc-tag { display: block; margin-bottom: 1rem; }
.wc-h1 .wc-display { display: block; }
.wc-display { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 7.2vw, 5.4rem); letter-spacing: -0.01em; text-transform: uppercase; }
.wc-display-sm { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.6rem); text-transform: uppercase; letter-spacing: 0; }
.wc-display .wc-line { display: block; }
.wc-line-outline { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.wc-line-acid { color: var(--acid); }
.wc-caret { font-style: normal; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wc-split .wc-ch { display: inline-block; transform: translateY(110%); animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--d, 0ms); }
.wc-line { overflow: hidden; }
@keyframes rise { to { transform: translateY(0); } }
.wc-lede { color: var(--dim); font-size: clamp(1rem, 1.8vw, 1.15rem); max-width: 30rem; margin-top: 1.2rem; }

/* Domain search — terminal input */
.wc-domain { margin-top: 2rem; max-width: 34rem; }
.wc-domain-label { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim); margin-bottom: 0.5rem; letter-spacing: 0.08em; }
.wc-domain-row { display: flex; border: 1px solid var(--hair-strong); background: var(--panel); transition: border-color 0.2s; }
.wc-domain-row:focus-within { border-color: var(--acid); }
.wc-domain-row input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--paper); font-family: var(--font-mono); font-size: 1rem; padding: 0.85rem 1.1rem; }
.wc-domain-row input::placeholder { color: var(--dim); }
.wc-domain-row .wc-btn { border: 0; border-left: 1px solid var(--hair-strong); }
.wc-domain-out { font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim); margin-top: 0.55rem; }
.wc-domain-out b { color: var(--acid); font-weight: 500; }

/* Terminal card */
.wc-term { border: 1px solid var(--hair-strong); background: var(--panel); box-shadow: 8px 8px 0 rgba(204, 255, 0, 0.14); }
.wc-term-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--hair); }
.wc-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--hair-strong); }
.wc-term-bar i:first-child { background: var(--acid); }
.wc-term-bar span { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim); }
.wc-term-body { padding: 1.1rem 1.2rem 1.3rem; font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.7; }
.wc-term-line { margin: 0; color: var(--dim); }
.wc-term-line b { color: var(--acid); font-weight: 500; }
.wc-term-line.is-hidden { display: none; }
.wc-term-cat { margin: 0.8rem 0 0.2rem; color: var(--acid); font-size: 0.86rem; line-height: 1.35; }

/* ============================= Acid marquee band ============================= */
.wc-band { background: var(--acid); color: var(--ink); overflow: hidden; border-bottom: 1px solid var(--hair); transform: rotate(-1.2deg) scale(1.02); margin-block: 1.5rem; }
.wc-band-track { display: flex; gap: 1.6rem; width: max-content; padding: 0.7rem 0; animation: tick 26s linear infinite; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; will-change: transform; transform: translateZ(0); }
.wc-band-track b { font-weight: 400; }

/* ============================= Stats ============================= */
.wc-stats { padding: clamp(2rem, 5vh, 3.5rem) 0; }
.wc-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hair); }
.wc-stat { padding: 1.8rem 1.2rem; border-right: 1px solid var(--hair); }
.wc-stat:last-child { border-right: 0; }
.wc-stat b { display: block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.4rem); color: var(--acid); letter-spacing: -0.04em; }
.wc-stat b span, .wc-stat b .wc-count { font-size: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.wc-stat span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }

/* ============================= Section heads ============================= */
.wc-section { padding: clamp(3.5rem, 9vh, 6.5rem) 0; border-bottom: 1px solid var(--hair); }
.wc-sec-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 2.2rem; flex-wrap: wrap; }
.wc-sec-num { font-family: var(--font-mono); color: var(--acid); font-size: 0.9rem; border: 1px solid var(--acid); padding: 0.15rem 0.5rem; }

/* ============================= Bento ============================= */
.wc-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.wc-cell { background: var(--ink); padding: 1.7rem; min-height: 240px; display: flex; flex-direction: column; transition: background 0.15s, color 0.15s; }
.wc-cell-wide { grid-column: span 2; }
.wc-cell h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; }
.wc-cell p { color: var(--dim); font-size: 0.94rem; transition: color 0.15s; }
.wc-cell-art { margin-top: auto; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; color: var(--acid); white-space: pre; overflow-x: auto; }
.wc-cell-big { margin-top: auto; font-family: var(--font-mono); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--acid); }
.wc-cell-foot { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--dim); margin: 0.4rem 0 0; }
.wc-cell:hover { background: var(--acid); color: var(--ink); }
.wc-cell:hover p, .wc-cell:hover .wc-cell-art, .wc-cell:hover .wc-cell-big, .wc-cell:hover .wc-cell-foot { color: var(--ink); }

/* ============================= Pricing ============================= */
.wc-billing-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--hair-strong); }
.wc-billing-toggle button { border: 0; background: none; color: var(--dim); font: 700 0.85rem var(--font-mono); padding: 0.5rem 1.1rem; cursor: pointer; letter-spacing: 0.04em; }
.wc-billing-toggle button.is-active { background: var(--acid); color: var(--ink); }
.wc-billing-toggle em { font-style: normal; opacity: 0.75; }
.wc-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
.wc-plan { display: flex; flex-direction: column; border: 1px solid var(--hair-strong); background: var(--panel); padding: 1.8rem 1.6rem; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.wc-plan:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--hair-strong); }
.wc-plan.is-featured { border-color: var(--acid); background: var(--panel-2); }
.wc-plan.is-featured:hover { box-shadow: 6px 6px 0 var(--acid); }
.wc-plan-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.wc-plan-idx { font-family: var(--font-mono); color: var(--acid); font-size: 0.8rem; }
.wc-plan-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0; }
.wc-plan-flag { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; background: var(--acid); color: var(--ink); padding: 0.22rem 0.5rem; font-weight: 700; }
.wc-plan-tagline { font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim); margin: 0.5rem 0 1.2rem; }
.wc-plan-price { font-family: var(--font-mono); margin: 0; letter-spacing: -0.03em; }
.wc-plan-price sup { color: var(--dim); font-size: 1.1rem; }
.wc-plan-price b { font-size: 3.1rem; font-weight: 700; }
.wc-plan-price span { color: var(--dim); font-size: 0.85rem; letter-spacing: 0; }
.wc-plan-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--dim); margin: 0.2rem 0 1.3rem; min-height: 1.2em; }
.wc-plan ul { list-style: none; margin: 0 0 1.6rem; padding: 1.1rem 0 0; border-top: 1px solid var(--hair); display: grid; gap: 0.5rem; }
.wc-plan li { font-size: 0.92rem; color: var(--dim); }
.wc-plan li b { color: var(--acid); font-weight: 400; margin-right: 0.45em; font-family: var(--font-mono); }
.wc-plan .wc-btn { margin-top: auto; }
.wc-plans-footnote { font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim); text-align: center; margin-top: 1.8rem; }

/* ============================= Acid CTA section ============================= */
.wc-acid { background: var(--acid); color: var(--ink); border-bottom: 1px solid var(--hair); }
.wc-acid-inner { padding: clamp(3rem, 8vh, 5rem) 0; text-align: center; }
.wc-acid-inner h2 { max-width: 20ch; margin-inline: auto; }
.wc-acid-inner p { font-family: var(--font-mono); font-size: 0.95rem; max-width: 46ch; margin: 0 auto 1.6rem; }

/* ============================= FAQ ============================= */
.wc-faq-item { border: 1px solid var(--hair); border-bottom: 0; background: var(--ink); }
.wc-faq-item:last-of-type { border-bottom: 1px solid var(--hair); }
.wc-faq-item summary { display: flex; align-items: center; gap: 1rem; cursor: pointer; list-style: none; padding: 1.15rem 1.4rem; font-weight: 700; font-size: 1.02rem; }
.wc-faq-item summary::-webkit-details-marker { display: none; }
.wc-faq-item summary b { font-family: var(--font-mono); color: var(--acid); font-weight: 400; font-size: 0.8rem; }
.wc-faq-x { margin-left: auto; font-family: var(--font-mono); color: var(--acid); font-size: 1.3rem; line-height: 1; transition: transform 0.25s; }
.wc-faq-item[open] .wc-faq-x { transform: rotate(45deg); }
.wc-faq-item[open] summary { background: var(--panel); }
.wc-faq-item p { padding: 1rem 1.4rem 1.3rem; margin: 0; color: var(--dim); border-top: 1px solid var(--hair); }

/* ============================= Final CTA ============================= */
.wc-final { padding: clamp(4rem, 10vh, 7rem) 0; border-bottom: 1px solid var(--hair); }
.wc-final-inner { text-align: center; }
.wc-final-ctas { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ============================= Footer ============================= */
.wc-footer { padding: 2.5rem 0 1.5rem; }
.wc-footer-word { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 14vw, 13rem); line-height: 0.95; margin: 0 0 2rem; color: transparent; -webkit-text-stroke: 2px rgba(242, 242, 236, 0.22); user-select: none; }
.wc-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--hair); }
.wc-footer-contact { display: grid; gap: 0.2rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--dim); }
.wc-footer-contact a:hover { color: var(--acid); }
.wc-footer-col { display: grid; gap: 0.5rem; align-content: start; }
.wc-footer-col h3 { font-family: var(--font-mono); font-size: 0.78rem; color: var(--acid); font-weight: 400; margin-bottom: 0.4rem; }
.wc-footer-col a { color: var(--dim); font-size: 0.93rem; transition: color 0.15s, transform 0.15s; }
.wc-footer-col a:hover { color: var(--paper); transform: translateX(4px); }
.wc-footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--hair); margin-top: 2.5rem; padding-top: 1.3rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim); }
.wc-footer-bar p { margin: 0; }
.wc-footer-pulse b { color: var(--acid); font-weight: 500; }
.wc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 0 rgba(204, 255, 0, 0.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(204, 255, 0, 0); } }

/* Live status */
.wc-stat-live { display: flex !important; align-items: center; gap: 0.7rem; }
.wc-stat-live .wc-dot { width: 14px; height: 14px; }
.wc-stat-live.is-down { color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24; background: none !important; }
.wc-stat-live.is-down .wc-dot { background: #fbbf24; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); }
.wc-footer-pulse.is-down .wc-dot { background: #fbbf24; }
.wc-footer-pulse.is-down b { color: #fbbf24; }

/* ============================= Reveal ============================= */
.wc-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.wc-reveal.is-in { opacity: 1; transform: none; }

/* ============================= Inner pages ============================= */
.wc-page { padding: clamp(3rem, 8vh, 5rem) 0; }
.wc-page-header h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase; }
.wc-page-header { margin-bottom: 2.5rem; }
.wc-prose { max-width: 760px; }
.wc-prose a { color: var(--acid); text-decoration: underline; }
.wc-prose blockquote { border-left: 3px solid var(--acid); margin: 1.5em 0; padding: 0.2em 0 0.2em 1.2em; color: var(--dim); }
.wc-prose code { font-family: var(--font-mono); background: var(--panel); border: 1px solid var(--hair); padding: 0.15em 0.4em; font-size: 0.9em; }
.wc-prose h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.45rem; margin-top: 2em; }
.wc-prose ul { padding-left: 1.2em; }
.wc-prose li { margin-bottom: 0.5em; color: var(--dim); }
.wc-prose li strong, .wc-prose p strong { color: var(--paper); }
.wc-prose p { color: var(--dim); }
.wc-prose table { border-collapse: collapse; width: 100%; margin: 1.2em 0; }
.wc-prose th { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); text-align: left; }
.wc-prose th, .wc-prose td { border: 1px solid var(--hair); padding: 0.7rem 0.9rem; }
.wc-prose td { font-family: var(--font-mono); font-size: 0.92rem; }
.wc-page .wc-lede { color: var(--dim); font-size: clamp(1rem, 1.8vw, 1.15rem); max-width: 40rem; margin-top: 1rem; }
.wc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.wc-card { background: var(--ink); padding: 1.6rem; }
.wc-card h3 a:hover { color: var(--acid); }
.wc-card p { color: var(--dim); font-size: 0.94rem; }

/* ============================= Responsive ============================= */
@media (max-width: 1020px) {
  .wc-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .wc-bento { grid-template-columns: 1fr 1fr; }
  .wc-cell-wide { grid-column: span 2; }
  .wc-plans, .wc-cards { grid-template-columns: 1fr; }
  .wc-stats-row { grid-template-columns: 1fr 1fr; }
  .wc-stat:nth-child(2) { border-right: 0; }
  .wc-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  .wc-footer-grid { grid-template-columns: 1fr 1fr; }

  .wc-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); border-bottom: 1px solid var(--hair); padding: 0.6rem 3vw 1.2rem; }
  .wc-menu.is-open { display: block; }
  .wc-menu .wc-menu-list { flex-direction: column; }
  .wc-menu .wc-menu-list a { display: block; padding: 0.8rem; font-size: 1rem; }
  .wc-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 1px solid var(--hair-strong); cursor: pointer; }
  .wc-burger span { display: block; height: 2px; background: var(--paper); transition: transform 0.25s; }
  .wc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .wc-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .wc-nav-cta { margin-left: auto; }
}
@media (max-width: 640px) {
  .wc-bento, .wc-stats-row, .wc-footer-grid { grid-template-columns: 1fr; }
  .wc-cell-wide { grid-column: span 1; }
  .wc-stat { border-right: 0; border-bottom: 1px solid var(--hair); }
  .wc-stat:last-child { border-bottom: 0; }
  .wc-nav-cta .wc-btn-line { display: none; }
  .wc-footer-bar { flex-direction: column; }
  .wc-sec-head { gap: 0.8rem; }
  .wc-billing-toggle { margin-left: 0; }
}

/* ============================= Static mode (?static=1) ============================= */
body.wc-static *, body.wc-static *::before, body.wc-static *::after { animation: none !important; transition: none !important; }
body.wc-static .wc-reveal { opacity: 1; transform: none; }
body.wc-static .wc-cursor, body.wc-static .wc-dots { display: none; }

/* ============================= Reduced motion ============================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .wc-reveal { opacity: 1; transform: none; }
  .wc-ticker-track, .wc-band-track { animation: none; }
  .wc-split .wc-ch { transform: none; animation: none; }
  .wc-cursor, .wc-dots { display: none; }
}

/* ============================= Status page ============================= */
.wc-status-headline { display: flex; align-items: center; gap: 1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4.5vw, 3rem); text-transform: uppercase; }
.wc-status-headline .wc-dot { width: 18px; height: 18px; flex: none; }
.wc-status-headline.is-up { color: var(--acid); }
.wc-status-headline.is-issues { color: #fbbf24; }
.wc-status-headline.is-issues .wc-dot { background: #fbbf24; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); }
.wc-status-services { border: 1px solid var(--hair-strong); margin-top: 1.5rem; }
.wc-status-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--hair); }
.wc-status-row:last-child { border-bottom: 0; }
.wc-status-name { font-weight: 700; }
.wc-status-pill { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.3rem 0.7rem; }
.wc-status-pill.is-ok { background: var(--acid); color: var(--ink); }
.wc-status-pill.is-warn { background: #fbbf24; color: var(--ink); }
.wc-status-pill.is-down { background: #ef4444; color: #fff; }
.wc-status-pill.is-dim { background: var(--panel-2); color: var(--dim); border: 1px solid var(--hair); }
.wc-status-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--dim); margin-top: 1rem; }
.wc-status-meta b { color: var(--acid); font-weight: 500; }
.wc-status-notices { display: grid; gap: 0.8rem; }
.wc-status-notice { border: 1px solid var(--hair); background: var(--panel); padding: 1.2rem 1.4rem; }
.wc-status-notice header { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.wc-status-notice h3 { margin: 0; font-size: 1.05rem; }
.wc-status-notice .wc-status-meta { margin-top: 0.5rem; }