/* Mighty Maverick Plugins — "Polar Night" theme */

:root {
  --night: #05080f;
  --night-2: #0a101c;
  --frost-panel: rgba(140, 180, 230, 0.055);
  --frost-border: rgba(170, 210, 255, 0.16);
  --frost-border-hot: rgba(190, 225, 255, 0.38);
  --text: #eef4fc;
  --muted: #93a3ba;
  --ice: #9fd0f5;
  --ice-bright: #cfe9ff;
  --ice-deep: #5f93c9;
  --glow: rgba(127, 184, 230, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--night);
  color: var(--text);
  font-family: "Instrument Sans", -apple-system, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ---------- Atmosphere: aurora, frost grain, snowfall ---------- */

.atmo, .atmo::before, .atmo::after {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.atmo::before {
  content: "";
  background:
    radial-gradient(42% 34% at 18% 8%, rgba(89, 190, 214, 0.16), transparent 70%),
    radial-gradient(50% 40% at 85% 12%, rgba(127, 184, 230, 0.13), transparent 70%),
    radial-gradient(45% 38% at 55% 96%, rgba(96, 120, 200, 0.10), transparent 70%);
  filter: blur(60px);
  animation: aurora 46s ease-in-out infinite alternate;
}
.atmo::after {
  content: "";
  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'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

.snow, .snow.far {
  position: fixed; top: -10vh; left: 0; width: 4px; height: 4px;
  border-radius: 50%; background: transparent; pointer-events: none; z-index: 0;
}
.snow {
  box-shadow:
    4vw 12vh rgba(255,255,255,.55), 11vw 68vh rgba(255,255,255,.35), 17vw 32vh rgba(255,255,255,.5),
    23vw 84vh rgba(255,255,255,.3), 29vw 8vh rgba(255,255,255,.45), 34vw 51vh rgba(255,255,255,.35),
    41vw 27vh rgba(255,255,255,.55), 47vw 73vh rgba(255,255,255,.3), 53vw 15vh rgba(255,255,255,.4),
    58vw 92vh rgba(255,255,255,.35), 64vw 41vh rgba(255,255,255,.5), 71vw 63vh rgba(255,255,255,.3),
    77vw 22vh rgba(255,255,255,.45), 83vw 78vh rgba(255,255,255,.35), 89vw 47vh rgba(255,255,255,.5),
    95vw 6vh rgba(255,255,255,.4);
  animation: snowfall 26s linear infinite;
}
.snow.far {
  width: 3px; height: 3px;
  box-shadow:
    7vw 44vh rgba(210,230,255,.3), 14vw 19vh rgba(210,230,255,.25), 20vw 87vh rgba(210,230,255,.2),
    27vw 58vh rgba(210,230,255,.3), 37vw 35vh rgba(210,230,255,.2), 44vw 95vh rgba(210,230,255,.25),
    50vw 61vh rgba(210,230,255,.2), 61vw 12vh rgba(210,230,255,.3), 68vw 81vh rgba(210,230,255,.2),
    75vw 39vh rgba(210,230,255,.25), 86vw 70vh rgba(210,230,255,.2), 92vw 26vh rgba(210,230,255,.3);
  animation-duration: 40s;
}
@keyframes snowfall {
  from { transform: translateY(-10vh); }
  to   { transform: translateY(110vh); }
}
@media (prefers-reduced-motion: reduce) {
  .snow, .snow.far, .atmo::before { animation: none; }
}

.wrap { max-width: 920px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ---------- Header ---------- */

header.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0;
}
header.site .brand {
  font-family: "Sora", sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: 0.01em;
  color: var(--text); text-decoration: none;
}
header.site .brand span { color: var(--ice); }
header.site nav a {
  color: var(--muted); text-decoration: none; font-size: 15px; margin-left: 24px;
}
header.site nav a:hover { color: var(--ice-bright); }

/* ---------- Hero ---------- */

.hero { padding: 84px 0 56px; position: relative; }
.hero h1 {
  font-family: "Sora", sans-serif;
  font-size: clamp(36px, 6.4vw, 62px);
  line-height: 1.08; letter-spacing: -0.025em; font-weight: 700;
  max-width: 14.5em;
  background: linear-gradient(115deg, #ffffff 20%, var(--ice-bright) 55%, var(--ice) 78%, var(--ice-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--ice-bright);
  text-shadow: 0 0 46px rgba(127, 184, 230, 0.18);
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero p.lead {
  margin-top: 22px; font-size: 19px; color: var(--muted); max-width: 35em;
  animation: rise 0.9s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.cta-row {
  margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap;
  animation: rise 0.9s 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.price-note { margin-top: 14px; color: var(--muted); font-size: 15px; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero.split {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center;
}
.hero-icon {
  width: min(300px, 100%); justify-self: center;
  filter: drop-shadow(0 22px 55px rgba(127, 184, 230, 0.35));
  animation: bob 7s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-14px) rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero p.lead, .cta-row { animation: none; }
  .hero-icon { animation: none; }
}

/* ---------- Bundle art (homepage hero) ---------- */

.bundle-art {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 34px 26px;
  background: var(--frost-panel);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--frost-border);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 60px rgba(127, 184, 230, 0.08);
  animation: rise 0.9s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bundle-art img {
  width: 118px; height: 118px; border-radius: 26px;
  filter: drop-shadow(0 14px 32px rgba(127, 184, 230, 0.3));
}
.bundle-art img:first-child { animation: bob 7s ease-in-out infinite; }
.bundle-art img:last-child { animation: bob 7s 1.2s ease-in-out infinite; }
.bundle-art .plus {
  font-family: "Sora", sans-serif;
  font-size: 34px; font-weight: 600; color: var(--ice);
  text-shadow: 0 0 18px rgba(159, 208, 245, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .bundle-art, .bundle-art img { animation: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--ice-bright), var(--ice) 55%, var(--ice-deep));
  color: #071018;
  font-weight: 600; font-size: 16px; text-decoration: none;
  padding: 14px 30px; border-radius: 12px; min-width: 184px; text-align: center;
  box-shadow: 0 8px 28px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 40px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn.secondary {
  background: var(--frost-panel); color: var(--text);
  border: 1px solid var(--frost-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: none;
}
.btn.secondary:hover { border-color: var(--frost-border-hot); box-shadow: 0 8px 26px rgba(127, 184, 230, 0.15); }

/* ---------- Sections ---------- */

section { padding: 52px 0; }
.eyebrow {
  font-family: "Sora", sans-serif;
  display: block; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 12px;
}
section h2 {
  font-family: "Sora", sans-serif;
  font-size: 28px; letter-spacing: -0.015em; margin-bottom: 16px; font-weight: 600;
}
section p { color: var(--muted); max-width: 40em; margin-bottom: 14px; }
section p strong, section li strong { color: var(--ice-bright); font-weight: 600; }

.divider {
  height: 1px; border: 0; margin: 8px 0;
  background: linear-gradient(90deg, transparent, rgba(170, 210, 255, 0.28), transparent);
}

/* ---------- Frosted cards ---------- */

.products { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.card {
  background: var(--frost-panel);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--frost-border);
  border-radius: 20px; padding: 30px; display: block;
  color: var(--text); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--frost-border-hot);
  box-shadow: 0 18px 50px rgba(5, 10, 20, 0.6), 0 0 0 1px rgba(190, 225, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.card img.icon {
  width: 88px; height: 88px; border-radius: 20px;
  filter: drop-shadow(0 10px 24px rgba(127, 184, 230, 0.28));
}
.card h3 { font-family: "Sora", sans-serif; margin-top: 20px; font-size: 21px; font-weight: 600; }
.card p { color: var(--muted); font-size: 15.5px; margin-top: 8px; }
.card .more { color: var(--ice); font-size: 15px; margin-top: 14px; display: inline-block; }
.card:hover .more { color: var(--ice-bright); }

/* ---------- Steps ---------- */

.steps { list-style: none; counter-reset: step; max-width: 42em; }
.steps li {
  counter-increment: step; padding: 16px 0 16px 58px; position: relative;
  color: var(--muted); border-bottom: 1px solid rgba(170, 210, 255, 0.09);
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--frost-panel); border: 1px solid var(--frost-border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ice-bright); font-family: "Sora", sans-serif; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(127, 184, 230, 0.14);
}

ul.plain { list-style: none; max-width: 42em; }
ul.plain li { padding: 9px 0; color: var(--muted); border-bottom: 1px solid rgba(170, 210, 255, 0.09); }
ul.plain li:last-child { border-bottom: none; }

/* ---------- Verdict mock: frosted macOS window ---------- */

.mock {
  background: linear-gradient(180deg, rgba(150, 190, 235, 0.10), rgba(140, 180, 230, 0.045) 30%);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--frost-border);
  border-radius: 16px;
  padding: 0; max-width: 500px; margin: 26px 0;
  font-size: 15px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(3, 6, 12, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.mock .chrome {
  display: flex; gap: 7px; padding: 12px 16px;
  border-bottom: 1px solid rgba(170, 210, 255, 0.10);
}
.mock .chrome i {
  width: 11px; height: 11px; border-radius: 50%; display: block;
  background: rgba(190, 220, 255, 0.22);
}
.mock .chrome i:first-child { background: rgba(255, 130, 120, 0.75); }
.mock .mock-title { font-weight: 700; padding: 16px 24px 8px; font-family: "Sora", sans-serif; }
.mock pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px; color: var(--muted); line-height: 1.75;
  white-space: pre-wrap; overflow-x: auto; padding: 0 24px 22px;
}
.mock pre .hot {
  color: var(--ice-bright); font-weight: 700;
  text-shadow: 0 0 14px rgba(159, 208, 245, 0.5);
}

.caption { font-size: 13px; color: var(--muted); }

/* ---------- FAQ ---------- */

.faq h3 {
  font-family: "Sora", sans-serif;
  font-size: 17.5px; margin: 28px 0 6px; font-weight: 600; color: var(--ice-bright);
}
.faq p { margin-bottom: 0; }

img.product-shot {
  max-width: 100%; height: auto; border-radius: 14px;
  filter: drop-shadow(0 20px 45px rgba(3, 6, 12, 0.6));
}
.shot-narrow { max-width: 430px; }

/* ---------- Pricing ---------- */

.pricing {
  background: var(--frost-panel);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--frost-border);
  border-radius: 22px;
  padding: 44px; text-align: center; max-width: 500px; margin: 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 70px rgba(127, 184, 230, 0.07);
}
.pricing .amount {
  font-family: "Sora", sans-serif;
  font-size: 62px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(115deg, #ffffff, var(--ice-bright) 60%, var(--ice));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--ice-bright);
}
.pricing p { margin: 10px auto 24px; }

/* ---------- Footer ---------- */

footer.site {
  border-top: 1px solid rgba(170, 210, 255, 0.10); margin-top: 64px;
  padding: 34px 0 52px; color: var(--muted); font-size: 14px;
}
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ice); }
footer.site .updated { margin-top: 8px; font-size: 13px; }

@media (max-width: 720px) {
  .products { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 36px; }
  .hero.split { grid-template-columns: 1fr; }
  .hero-icon { width: min(210px, 60%); order: -1; }
}