:root {
  --bg: #0b0f14; --bg2: #0f141c; --card: #131a24; --card2: #182131; --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.12);
  --text: #e9edf3; --text2: #b2bccb; --muted: #7c879a;
  --violet: #a78bfa; --indigo: #818cf8; --cyan: #22d3ee; --green: #22c55e; --pink: #f472b6;
  --grad: linear-gradient(120deg, #a78bfa 0%, #818cf8 45%, #22d3ee 100%);
  --r: 18px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-d: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: -30vh -20vw auto auto; width: 80vw; height: 80vh; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(129,140,248,.16), transparent 70%); }
body::after { content: ""; position: fixed; inset: auto auto -30vh -20vw; width: 70vw; height: 70vh; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(34,211,238,.09), transparent 70%); }
a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
code { font-family: "Cascadia Mono", Consolas, monospace; font-size: .88em; background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-d); line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(26px, 3.2vw, 36px); text-align: center; }
h3 { font-size: 18px; }
.sub { text-align: center; color: var(--text2); margin: -6px auto 30px; max-width: 640px; }
.muted { color: var(--muted); font-size: 14px; }
.center { text-align: center; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
main > section { max-width: 1180px; margin: 0 auto; padding: 56px 22px; }

/* header */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; padding: 12px 24px;
  background: rgba(11,15,20,.78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 10px; box-shadow: 0 6px 18px rgba(129,140,248,.35); }
.brand span { display: flex; flex-direction: column; line-height: 1.1; }
.brand b { font: 700 17px var(--font-d); }
.brand small { color: var(--muted); font-size: 12px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--text2); font-size: 15px; }
.nav a:hover { color: var(--text); text-decoration: none; }
.donate-pill { margin-left: 8px; border: 0; cursor: pointer; font: 700 15px var(--font); color: #fff; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(120deg, #ec4899, #a78bfa); box-shadow: 0 8px 24px -8px rgba(236,72,153,.7); transition: transform .15s, filter .15s;
  animation: pulse 3s ease-in-out infinite; white-space: nowrap; }
.donate-pill:hover { transform: translateY(-1px) scale(1.03); filter: brightness(1.08); }
@keyframes pulse { 0%,100% { box-shadow: 0 8px 24px -8px rgba(236,72,153,.7); } 50% { box-shadow: 0 8px 34px -4px rgba(236,72,153,.95); } }

/* hero */
.hero { display: grid; grid-template-columns: 1.02fr 1fr; gap: 44px; align-items: center; padding-top: 56px !important; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.badges span { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; color: #c4b5fd; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.28); }
h1 { font-size: clamp(36px, 5vw, 58px); letter-spacing: -.5px; }
.lead { color: var(--text2); font-size: 18px; margin: 0 0 26px; }
.lead b { color: var(--text); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.btn-download, .btn-vt { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 14px; color: #fff; transition: transform .15s, filter .15s; }
.btn-download:hover, .btn-vt:hover { text-decoration: none; transform: translateY(-2px); filter: brightness(1.08); }
.btn-download { background: var(--grad); box-shadow: 0 16px 40px -12px rgba(129,140,248,.85), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-vt { background: linear-gradient(120deg, #16a34a, #22c55e); box-shadow: 0 14px 34px -14px rgba(34,197,94,.8), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-download svg, .btn-vt svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-download span, .btn-vt span { display: flex; flex-direction: column; line-height: 1.2; }
.btn-download b { font-size: 19px; }
.btn-vt b { font-size: 16px; }
.btn-download small, .btn-vt small { font-size: 13px; opacity: .9; }
.cta-note { color: var(--muted); font-size: 14px; margin-top: 14px; }

/* pay-what-you-want card */
.price-card { max-width: 620px; padding: 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(167,139,250,.10), rgba(34,211,238,.05)), var(--card); border: 1px solid var(--line2); box-shadow: 0 24px 60px -30px rgba(129,140,248,.6); }
.price-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.price-tag { font-size: 40px; font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price-text { display: flex; flex-direction: column; line-height: 1.25; }
.price-text b { font-size: 18px; }
.price-text small { color: var(--muted); font-size: 13.5px; }
.price-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.price-options div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.price-options span { font-size: 22px; }
.price-options b { font-size: 14.5px; }
.price-options small { color: var(--muted); font-size: 12.5px; }
.price-options div:last-child { border-color: rgba(244,114,182,.35); background: rgba(244,114,182,.06); }
.btn-pay { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; text-align: left; color: #111; background: #ffc439; box-shadow: 0 14px 34px -14px rgba(255,196,57,.85), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .15s, filter .15s; }
.btn-pay:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-pay svg { width: 28px; height: 28px; fill: none; stroke: #111; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-pay span { display: flex; flex-direction: column; line-height: 1.2; }
.btn-pay b { font-size: 19px; }
.btn-pay small { font-size: 13px; opacity: .75; }
.price-card .cta > * { flex: 1 1 220px; }
.price-card .btn-pay b, .price-card .btn-download b { font-size: 17px; white-space: nowrap; }
.price-note { color: var(--text2); font-size: 14.5px; line-height: 1.6; margin: 16px 0 0; }
.cta-sub { align-items: center; margin-top: 16px; }
.cta-sub .cta-note { margin: 0; line-height: 1.5; }

/* thank-you popup */
.thanks-card { width: min(500px, 100%); }
.confetti { font-size: 26px; letter-spacing: 4px; margin-bottom: 8px; animation: bounce 1.6s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dl-status { font-weight: 600; color: var(--text) !important; }
.btn-download.wide { width: 100%; justify-content: center; margin: 6px 0 12px; }
.btn-download.wide b { font-size: 16px; }
@media (max-width: 560px) {
  .price-card { padding: 16px; }
  .price-options { gap: 6px; }
  .price-options div { padding: 10px 4px; }
  .price-options small { font-size: 11.5px; }
}

.ba { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(167,139,250,.15);
  aspect-ratio: 16/9; cursor: ew-resize; user-select: none; touch-action: pan-y; }
.ba:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
.ba > img, .ba-before img { width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; width: 50%; overflow: hidden; border-right: 2px solid #fff; }
.ba-before img { width: auto; height: 100%; max-width: none; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; }
.ba-handle span { position: absolute; top: 50%; left: -21px; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: rgba(11,15,20,.75);
  border: 2px solid #fff; backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.ba-handle span::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 17px var(--font); letter-spacing: 2px; }
.ba-tag { position: absolute; top: 12px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: rgba(11,15,20,.7); backdrop-filter: blur(6px); }
.ba-tag.l { left: 12px; color: var(--text2); }
.ba-tag.r { right: 12px; background: linear-gradient(120deg, rgba(167,139,250,.9), rgba(34,211,238,.9)); color: #fff; }
.credit { color: var(--muted); font-size: 12.5px; text-align: center; margin-top: 10px; }

/* know */
.know h2 { margin-bottom: 26px; }
.know-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: linear-gradient(180deg, var(--card), var(--bg2)); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.card ul, .card ol { margin: 0 0 12px; padding-left: 20px; color: var(--text2); }
.card li { margin: 5px 0; }
.card li b { color: var(--text); }
.steps li::marker { color: var(--violet); font-weight: 700; }
.sha code { word-break: break-all; font-size: 11.5px; }

/* note */
.note-card { display: flex; gap: 22px; align-items: flex-start; padding: 30px; border-radius: 22px; background: linear-gradient(120deg, rgba(167,139,250,.12), rgba(34,211,238,.07));
  border: 1px solid rgba(167,139,250,.25); }
.note-card h2 { text-align: left; font-size: 26px; }
.note-card p { margin: 0; color: var(--text2); }
.note-card p b { color: var(--text); }
.note-heart { font-size: 44px; line-height: 1; }

/* features */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; transition: transform .2s, border-color .2s; }
.feat:hover { transform: translateY(-3px); border-color: var(--line2); }
.feat p { color: var(--text2); margin: 0; font-size: 15px; }
.feat p b { color: var(--text); }
.fi { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 22px; background: rgba(167,139,250,.12); margin-bottom: 12px; }
.feat.star { grid-column: span 2; background: linear-gradient(120deg, rgba(167,139,250,.16), rgba(34,211,238,.08)), var(--card); border-color: rgba(167,139,250,.35); }
.feat.star h3 { font-size: 22px; }
.feat.star h3::after { content: "NEW"; margin-left: 10px; font-size: 11px; vertical-align: middle; padding: 2px 8px; border-radius: 6px; background: var(--grad); color: #fff; }

/* compare */
.zoom-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 0 auto 26px; }
.zoom-pair figure, .shot { margin: 0; }
.zoom-pair img, .shot img { border-radius: 14px; border: 1px solid var(--line2); width: 100%; image-rendering: auto; }
figcaption { text-align: center; color: var(--muted); font-size: 14px; margin-top: 8px; }
.shot img { box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }

/* speed */
.speed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; margin: 0 auto 16px; }
.sp { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 16px; }
.sp b { display: block; font: 700 32px var(--font-d); }
.sp span { display: block; font-weight: 700; color: var(--violet); margin: 4px 0; }
.sp small { color: var(--muted); }
.sp.mid { border-color: rgba(167,139,250,.45); box-shadow: 0 0 0 3px rgba(167,139,250,.12); }

/* how */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.how-grid > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.how-grid p { color: var(--text2); margin: 0; font-size: 15px; }
.num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); font-weight: 700; margin-bottom: 10px; }

/* faq */
.faq { max-width: 860px !important; }
.faq h2 { margin-bottom: 22px; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; padding: 0 20px; }
details[open] { border-color: var(--line2); }
summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; position: relative; padding-right: 30px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 22px; color: var(--violet); }
details[open] summary::after { content: "–"; }
details p { color: var(--text2); margin: 0 0 18px; }

/* donate */
.give-card { text-align: center; padding: 40px 28px; border-radius: 24px; background: linear-gradient(120deg, rgba(236,72,153,.13), rgba(167,139,250,.13)); border: 1px solid rgba(236,72,153,.28); }
.give-card p { color: var(--text2); max-width: 640px; margin: 0 auto 22px; }
.give-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn-paypal, .btn-copy { border: 0; cursor: pointer; font: 700 15px var(--font); border-radius: 12px; padding: 12px 20px; transition: transform .15s, filter .15s; }
.btn-paypal { background: #ffc439; color: #111; box-shadow: 0 10px 26px -10px rgba(255,196,57,.8); }
.btn-copy { background: var(--card2); color: var(--text); border: 1px solid var(--line2); }
.btn-paypal:hover, .btn-copy:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-copy.sm { padding: 7px 12px; font-size: 13px; }
.btn-paypal.wide { width: 100%; padding: 14px; font-size: 16px; }
.credits { max-width: 860px !important; }
.credits p { color: var(--muted); text-align: center; font-size: 14px; }

/* ads */
.ad-slot { max-width: 1180px; margin: 0 auto; padding: 0 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ad-label { font-size: 11px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.g-ad { margin: 26px auto; padding: 0; }
.ad-foot { margin: 28px auto 8px; }

/* footer */
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; max-width: 1180px; margin: 0 auto; padding: 26px 22px 40px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }

/* modal + toast */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(4,6,10,.7); backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(460px, 100%); text-align: center; padding: 32px 28px 24px; border-radius: 22px; background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 30px 90px rgba(0,0,0,.6); animation: pop .2s ease; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.modal-card h2 { font-size: 23px; }
.modal-card p { color: var(--text2); }
.modal-heart { font-size: 46px; }
.modal-x { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.email-box { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 16px 0; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.email-box span { color: var(--muted); }
.small { font-size: 12.5px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60; padding: 12px 18px; border-radius: 12px; background: #1d2533; border: 1px solid var(--line2); box-shadow: 0 14px 40px rgba(0,0,0,.5); font-weight: 600; }

/* responsive */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .know-grid, .feat-grid { grid-template-columns: 1fr 1fr; }
  .feat.star { grid-column: span 2; }
  .how-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .nav { display: none; }
  .top { padding: 10px 14px; }
  .brand small { display: none; }
  .donate-pill { margin-left: auto; padding: 9px 14px; font-size: 14px; }
  main > section { padding: 40px 16px; }
  .know-grid, .feat-grid, .how-grid, .speed-grid, .zoom-pair { grid-template-columns: 1fr; }
  .feat.star { grid-column: auto; }
  .note-card { flex-direction: column; }
  .btn-download, .btn-vt { width: 100%; }
}

@media (min-width: 981px) { .feat.wide { grid-column: span 3; } }

/* ============ 1.2.0: Free vs Premium ============ */
@keyframes gradmove { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes shimmer { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(.96); } 45% { transform: scale(1.12); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fall { to { transform: translateY(620px) rotate(var(--r, 360deg)); opacity: .2; } }

.badges .b-prem { color: #fbcfe8; background: linear-gradient(120deg, rgba(244,114,182,.16), rgba(167,139,250,.16)); border-color: rgba(244,114,182,.4); }
.btn-premium { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; text-align: left; color: #fff; background: linear-gradient(120deg, #ec4899, #8b5cf6 50%, #06b6d4); background-size: 200% 100%;
  animation: gradmove 5s ease-in-out infinite; box-shadow: 0 16px 40px -12px rgba(236,72,153,.75), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .15s; }
.btn-premium:hover { transform: translateY(-2px) scale(1.015); }
.btn-premium .shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); animation: shimmer 3.6s ease-in-out infinite; pointer-events: none; }
.btn-premium .heart { font-size: 24px; animation: beat 1.6s ease-in-out infinite; }
.btn-premium > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.btn-premium b { font-size: 18px; white-space: nowrap; }
.btn-premium small { font-size: 13px; opacity: .9; }
.btn-premium.wide { width: 100%; justify-content: center; }
.hero .cta > * { flex: 1 1 240px; }
.mykey-pill { margin-left: 8px; border: 1px solid rgba(167,139,250,.45); cursor: pointer; font: 700 14px var(--font); color: #e9d5ff; padding: 9px 14px; border-radius: 999px; background: rgba(167,139,250,.12); white-space: nowrap; }
.mykey-pill[hidden] { display: none; }
.key-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; font-weight: 600; font-size: 14.5px;
  background: linear-gradient(120deg, rgba(236,72,153,.22), rgba(139,92,246,.22)); border-bottom: 1px solid rgba(236,72,153,.35); }
.key-banner[hidden] { display: none; }
.btn-mini { border: 0; cursor: pointer; font: 700 13.5px var(--font); padding: 7px 13px; border-radius: 9px; color: #fff; background: linear-gradient(120deg, #ec4899, #8b5cf6); }
.btn-mini.ghost { background: rgba(255,255,255,.08); color: var(--text2); }

.pricing h2 { margin-bottom: 14px; }
.plans { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line2); animation: rise .6s ease both; }
.plan h3 { font-size: 22px; margin-bottom: 4px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.plan-price b { font: 800 44px/1 var(--font-d); }
.plan-price span { color: var(--muted); font-weight: 600; }
.plan-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; flex: 1; }
.plan-list li { position: relative; padding-left: 28px; color: var(--text2); font-size: 15px; }
.plan-list li b { color: var(--text); }
.plan-list li::before { position: absolute; left: 0; top: 0; width: 20px; text-align: center; font-weight: 800; }
.plan-list li.y::before { content: "✓"; color: #86efac; }
.plan-list li.n::before { content: "•"; color: var(--muted); }
.plan-list li.p::before { content: "✦"; background: linear-gradient(120deg, #ff9ec7, #b794ff, #6ee7ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-plain { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 13px; border: 1px solid var(--line2); background: var(--card2);
  color: var(--text); font: 700 16px var(--font); cursor: pointer; transition: transform .15s, border-color .15s; }
.btn-plain:hover { text-decoration: none; transform: translateY(-1px); border-color: rgba(167,139,250,.5); }
.plan.premium { animation-delay: .12s; border: 1px solid transparent; padding-top: 30px;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(120deg, #ff9ec7, #b794ff, #6ee7ff, #ff9ec7) border-box; background-size: 100% 100%, 300% 300%;
  animation: rise .6s ease .12s both, gradmove 8s ease-in-out infinite; box-shadow: 0 30px 80px -34px rgba(183,148,255,.7); }
.plan.premium::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 100% 0%, rgba(255,158,199,.12), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(110,231,255,.08), transparent 60%); }
.plan-ribbon { position: absolute; top: -13px; left: 24px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; color: #1a1030;
  background: linear-gradient(120deg, #ffd6e8, #ffe7a3 50%, #c9b6ff); background-size: 200% 100%; animation: gradmove 6s ease-in-out infinite; }
.plan-bao { position: absolute; right: 10px; top: -64px; width: 128px; height: 120px; animation: floaty 3.4s ease-in-out infinite; }
.forever { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; font-size: 13.5px; font-weight: 700; color: #86efac; }
.kind { text-align: center; color: var(--text2); font-size: 14px; margin: 12px 0 0; }
.how-buy { max-width: 1000px; margin: 26px auto 0; padding: 22px 26px; border-radius: 20px; background: rgba(255,255,255,.025); border: 1px dashed var(--line2); }
.how-buy h3 { margin-bottom: 8px; }
.how-buy ol { margin: 0 0 10px; padding-left: 22px; color: var(--text2); }
.how-buy li { margin: 6px 0; }
.how-buy li b { color: var(--text); }
.chip-p { display: inline-block; vertical-align: 2px; margin: 0 2px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: #fff;
  background: linear-gradient(120deg, #ec4899, #8b5cf6); }
.feat h3 .chip-p { font-family: var(--font); }

.more-card { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; padding: 30px; border-radius: 24px;
  background: linear-gradient(120deg, rgba(34,197,94,.10), rgba(34,211,238,.08)); border: 1px solid rgba(34,211,238,.25); }
.more-text h2 { text-align: left; font-size: 28px; }
.more-text p { margin: 0; color: var(--text2); }
.more-links { display: grid; gap: 12px; }
.more-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line2); color: var(--text); transition: transform .18s, border-color .18s, box-shadow .18s; }
.more-link:hover { text-decoration: none; transform: translateY(-2px); border-color: rgba(34,211,238,.5); box-shadow: 0 14px 34px -18px rgba(34,211,238,.6); }
.more-link > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.more-link small { color: var(--muted); font-size: 13.5px; }
.ml-ico { font-size: 30px; }
.ml-go { font-size: 22px; color: var(--cyan); transition: transform .18s; }
.more-link:hover .ml-go { transform: translateX(4px); }

.m-bao { width: 150px; height: 140px; margin: -6px auto 4px; }
.t-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.t-confetti i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; animation: fall 2.8s linear forwards; }
.thanks-card { width: min(540px, 100%); overflow: hidden; }
.key-box { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; padding: 14px; border-radius: 14px;
  background: rgba(167,139,250,.08); border: 1px dashed rgba(167,139,250,.5); }
.key-box code { font-size: 18px; font-weight: 700; letter-spacing: 1px; background: none; user-select: all; }
.key-steps { text-align: left; color: var(--text2); font-size: 14.5px; padding-left: 22px; margin: 0 0 10px; }
.key-steps li { margin: 5px 0; }

@media (max-width: 860px) {
  .plans, .more-card { grid-template-columns: 1fr; }
  .plan-bao { width: 104px; height: 98px; top: -52px; }
  .plans { gap: 46px; }
}
@media (max-width: 680px) {
  .mykey-pill { display: none; }
  .btn-premium b { font-size: 16px; }
  .plan { padding: 22px 18px; }
}

.nav a { white-space: nowrap; }
@media (max-width: 900px) { .nav { gap: 14px; } .nav a { font-size: 14px; } }
.plan-list { align-content: start; }
.key-timer { margin: -4px 0 10px; font-weight: 600; color: #fde68a !important; font-size: 14.5px; }
.key-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; text-align: left; color: #fecaca !important; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.3); }
.key-warn b { color: #fff; }
.btn-copy[hidden], .btn-plain[hidden] { display: none; }
.contact-line { margin: 10px 0; font-size: 15px; color: var(--text2); }
.contact-line b { color: var(--text); }
.contact-line.small { font-size: 13.5px; }

/* ============ guides ============ */
.guide { max-width: 820px; margin: 0 auto; padding: 34px 22px 50px; }
.guide h1 { font-size: clamp(30px, 4.2vw, 44px); margin-bottom: 12px; }
.guide h2 { text-align: left; font-size: 25px; margin: 34px 0 10px; }
.guide p, .guide li { color: var(--text2); font-size: 16.5px; line-height: 1.7; }
.guide p b, .guide li b { color: var(--text); }
.g-crumb { font-size: 14px !important; margin: 0 0 10px; }
.g-lead { font-size: 18px !important; }
.g-quick { margin: 20px 0; padding: 18px 20px; border-radius: 16px; background: linear-gradient(120deg, rgba(167,139,250,.12), rgba(34,211,238,.07)); border: 1px solid rgba(167,139,250,.3); }
.g-quick > b { display: block; color: #c4b5fd; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 4px; }
.g-quick p { margin: 0; }
.g-fig { margin: 24px 0; }
.g-fig img { border-radius: 14px; border: 1px solid var(--line2); }
.g-steps { padding-left: 0; list-style: none; counter-reset: s; }
.g-steps li { position: relative; padding: 12px 14px 12px 54px; margin: 8px 0; border-radius: 14px; background: var(--card); border: 1px solid var(--line); counter-increment: s; }
.g-steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--grad); font-size: 14px; }
.g-tips { padding-left: 22px; }
.g-tips li { margin: 8px 0; }
.g-note { padding: 14px 16px; border-radius: 14px; background: rgba(244,114,182,.07); border: 1px solid rgba(244,114,182,.3); font-size: 15px !important; }
.g-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 10px; }
.g-cta > * { flex: 1 1 240px; }
.g-faq { padding: 0 !important; max-width: none !important; }
.g-faq h2 { text-align: left; }
.g-related, .guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.g-rel { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line2); color: var(--text); transition: transform .18s, border-color .18s; }
.g-rel:hover { text-decoration: none; transform: translateY(-2px); border-color: rgba(167,139,250,.5); }
.g-rel b { font-size: 16px; line-height: 1.3; }
.g-rel small { color: var(--muted); font-size: 14px; }