:root { --font-sans: "Manrope", sans-serif; --font-display: "Space Grotesk", sans-serif; --font-mono: "IBM Plex Mono", monospace; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }
svg.icon { width: 16px; height: 16px; flex-shrink: 0; }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.muted { color: var(--muted-foreground); }
.ml-auto { margin-left: auto; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.dot.sm { width: 4px; height: 4px; }
.dot.ok { background: var(--success); }
.row { display: flex; align-items: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 6px; font: 500 13px var(--font-sans); cursor: pointer; border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn svg.icon { width: 15px; height: 15px; }
.btn-lg { height: 44px; padding: 0 22px; }
.btn-full { width: 100%; }
.btn-celestial { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-primary); }
.btn-celestial:hover { filter: brightness(1.08); }
.btn-cosmic { background: color-mix(in oklch, var(--secondary) 80%, transparent); color: var(--foreground); border-color: var(--border); }
.btn-cosmic:hover { border-color: var(--muted-foreground); }
.btn-selected { background: var(--accent); color: var(--primary); border-color: var(--primary); }
.btn-ghost { background: transparent; color: var(--muted-foreground); padding: 0 10px; }
.btn-ghost:hover { color: var(--foreground); background: var(--muted); }
.amount-presets .btn { flex: 1; }
.input { width: 100%; height: 44px; border-radius: 6px; border: 1px solid var(--input); background: var(--background); color: var(--foreground); padding: 0 12px; font: 14px var(--font-sans); outline: none; }
.input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent); }
.currency-field .input { padding-left: 30px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: var(--overlay); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-backdrop.open { display: flex; }
.modal { position: relative; width: 100%; max-width: 448px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 28px; animation: entrance .25s ease both; }
.modal h2 { font-size: 24px; font-weight: 500; margin: 12px 0 6px; }
.modal-close { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: var(--muted-foreground); cursor: pointer; font-size: 22px; line-height: 1; padding: 4px 8px; }
.modal-close:hover { color: var(--foreground); }
.field-label { display: block; font-size: 12px; margin-bottom: 8px; }
.fine-print { font-size: 10px; color: var(--muted-foreground); line-height: 1.7; }
.fine-print a, .legal-page a { color: var(--primary); }
.back-link { font-size: 12px; color: var(--primary); display: inline-flex; align-items: center; gap: 8px; }
.only-wide { display: none; }
@media (min-width: 1024px) { .only-wide { display: inline-flex; align-items: center; gap: 6px; } }
@media (max-width: 640px) { .nav-cta { display: none; } }
:root {
  color-scheme: dark;
  --radius: 0.5rem;
  --background: oklch(0.135 0.015 260);
  --foreground: oklch(0.965 0.008 250);
  --card: oklch(0.175 0.016 260);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.82 0.105 235);
  --primary-foreground: oklch(0.18 0.03 250);
  --secondary: oklch(0.225 0.022 255);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.20 0.015 260);
  --muted-foreground: oklch(0.68 0.02 250);
  --accent: oklch(0.265 0.038 250);
  --accent-foreground: var(--primary);
  --destructive: oklch(0.73 0.14 25);
  --destructive-foreground: var(--foreground);
  --border: oklch(0.30 0.024 255);
  --input: oklch(0.34 0.026 255);
  --ring: var(--primary);
  --success: oklch(0.78 0.13 160);
  --bronze: oklch(0.73 0.075 58);
  --silver: oklch(0.8 0.012 245);
  --gold: oklch(0.84 0.12 85);
  --diamond: oklch(0.85 0.08 230);
  --overlay: oklch(0.08 0.015 255 / 85%);
  --shadow-primary: 0 0 30px oklch(0.72 0.12 240 / 10%);
  --hero-fade: linear-gradient(to bottom, oklch(0.135 0.015 260 / 15%) 0%, oklch(0.135 0.015 260 / 20%) 45%, var(--background) 100%);
  --surface-sheen: linear-gradient(140deg, oklch(0.25 0.04 250 / 40%), oklch(0.16 0.015 260 / 85%));
}
  * { border-color: var(--border); letter-spacing: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 90px; }
  body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--font-display); }
  ::selection { background: var(--primary); color: var(--primary-foreground); }
.page-container { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; height: 88px; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid color-mix(in oklch, var(--border) 65%, transparent); }
.brand { display: inline-flex; gap: 10px; align-items: center; font-family: var(--font-display); font-size: 25px; font-weight: 700; }
.brand svg { width: 34px; height: 34px; color: var(--primary); }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-link { font-size: 13px; color: var(--muted-foreground); }
.nav-link:hover { color: var(--foreground); }
.hero { position: relative; overflow: hidden; padding: 148px 0 58px; text-align: center; }
.cosmic-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .64; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-fade); pointer-events: none; }
.hero-content { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); text-transform: uppercase; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; color: var(--primary); }
.hero h1 { margin: 23px 0 18px; font-size: 72px; font-weight: 500; line-height: 1.09; }
.hero h1 span { color: var(--primary); }
.hero-description { color: var(--muted-foreground); font-size: 16px; line-height: 1.85; max-width: 540px; margin: 0 auto; }
.hero-description strong { color: var(--foreground); font-weight: 500; }
.hero-actions { display: flex; justify-content: center; gap: 14px; margin: 28px 0 17px; }
.hero-caption { font-size: 11px; color: var(--muted-foreground); display: flex; align-items: center; justify-content: center; gap: 6px; }
.request-preview { max-width: 760px; margin: 46px auto 0; text-align: left; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklch, var(--background) 90%, transparent); box-shadow: var(--shadow-primary); overflow: hidden; }
.preview-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-size: 10px; font-family: var(--font-mono); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { height: 6px; width: 6px; border-radius: 50%; background: var(--border); }
.preview-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; padding: 22px 0; }
.preview-cell { padding: 0 22px; min-width: 0; }
.preview-cell + .preview-cell { border-left: 1px solid var(--border); }
.preview-label { display: flex; align-items: center; gap: 7px; color: var(--muted-foreground); font-size: 10px; margin-bottom: 12px; }
.preview-value { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; }
.preview-note { font-size: 10px; color: var(--muted-foreground); margin-top: 8px; }
.method-tag { color: var(--primary); font-size: 9px; background: var(--accent); padding: 3px 5px; border-radius: 3px; }
.section { padding-block: 68px; }
.section-heading { text-align: center; margin-bottom: 36px; }
.section-heading h2 { font-size: 36px; line-height: 1.2; font-weight: 500; margin-top: 12px; margin-bottom: 12px; }
.section-heading p { font-size: 13px; color: var(--muted-foreground); line-height: 1.7; }
.how-section { border-bottom: 1px solid var(--border); padding: 32px 0 48px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.step-number { color: var(--primary); font: 11px var(--font-mono); }
.steps h3 { font-size: 15px; font-weight: 500; }
.steps p { font-size: 12px; color: var(--muted-foreground); line-height: 1.85; }
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan-card { position: relative; padding: 25px 22px 22px; border: 1px solid var(--border); background: var(--surface-sheen); border-radius: 8px; transition: transform .2s, border-color .2s; }
.plan-card:hover { transform: translateY(-4px); border-color: var(--muted-foreground); }
.plan-card.featured { border-color: var(--primary); box-shadow: var(--shadow-primary); }
.featured-label { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 4px; font-size: 9px; background: var(--primary); color: var(--primary-foreground); font-weight: 700; white-space: nowrap; }
.plan-card svg.plan-icon { margin-bottom: 16px; width: 25px; height: 25px; }
.plan-card[data-plan="bronze"] .plan-icon { color: var(--bronze); }
.plan-card[data-plan="silver"] .plan-icon { color: var(--silver); }
.plan-card[data-plan="gold"] .plan-icon { color: var(--gold); }
.plan-card[data-plan="diamond"] .plan-icon { color: var(--diamond); }
.plan-card h3 { font-size: 17px; font-weight: 500; }
.plan-description { min-height: 37px; margin: 8px 0 20px; font-size: 11px; line-height: 1.7; color: var(--muted-foreground); }
.plan-price { font-family: var(--font-display); font-size: 35px; font-weight: 500; }
.plan-price span { font-family: var(--font-sans); font-size: 11px; color: var(--muted-foreground); font-weight: 400; }
.plan-limit { margin: 23px 0 18px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.plan-limit svg { color: var(--primary); }
.plan-features { display: grid; gap: 12px; margin-bottom: 26px; }
.plan-features li { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted-foreground); }
.plan-features svg { width: 12px; height: 12px; color: var(--primary); }
.plans-note { margin-top: 24px; text-align: center; font-size: 11px; color: var(--muted-foreground); display: flex; gap: 7px; align-items: center; justify-content: center; }
.support-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 57px 0; }
.support-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.support-section h2 { font-size: 30px; font-weight: 500; margin: 12px 0; }
.support-section p { font-size: 12px; line-height: 1.9; color: var(--muted-foreground); max-width: 390px; }
.donation-label { font-size: 12px; margin-bottom: 12px; display: block; }
.amount-presets { display: flex; gap: 8px; margin-bottom: 12px; }
.donation-row { display: flex; gap: 10px; }
.currency-field { position: relative; flex: 1; min-width: 0; }
.currency-field > span { position: absolute; left: 13px; top: 12px; color: var(--muted-foreground); font-size: 13px; }
.donation-note { display: flex; align-items: center; gap: 6px; font-size: 10px; margin-top: 12px; color: var(--muted-foreground); }
.site-footer { padding: 44px 0 22px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; }
.footer-brand p { font-size: 11px; color: var(--muted-foreground); margin-top: 12px; line-height: 1.8; }
.footer-heading { font-size: 10px; margin: 4px 0 14px; color: var(--foreground); }
.footer-detail { color: var(--muted-foreground); font-size: 11px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.footer-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 10px; color: var(--muted-foreground); }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover, .footer-detail a:hover { color: var(--primary); }
.legal-page { padding: 146px 0 80px; max-width: 750px; min-height: 65vh; }
.legal-page h1 { font-size: 44px; margin: 17px 0; font-weight: 500; }
.legal-page h2 { font-size: 20px; margin: 32px 0 12px; }
.legal-page p, .legal-page li { font-size: 14px; color: var(--muted-foreground); line-height: 1.9; }
.legal-page ul { list-style: disc; padding-left: 20px; }
.legal-notice { border-left: 2px solid var(--primary); padding: 12px 18px; background: var(--muted); margin: 24px 0; }
.form-message { color: var(--primary); font-size: 12px; line-height: 1.7; margin-top: 12px; }
.modal-plan { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.entrance { animation: entrance .8s ease both; }
@media (max-width: 900px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .support-layout { gap: 35px; }
  .footer-top { grid-template-columns: 1.3fr 1fr; gap: 30px; }
  .nav-links { gap: 9px; }
}
@media (max-width: 600px) {
  .page-container { width: calc(100% - 36px); }
  .site-header { height: 74px; }
  .brand { font-size: 22px; gap: 7px; }
  .brand svg { width: 28px; height: 28px; }
  .nav-links { gap: 4px; }
  .nav-link { font-size: 11px; padding-inline: 8px; }
  .nav-how { display: none; }
  .hero { padding: 126px 0 35px; }
  .hero h1 { font-size: 46px; margin-top: 22px; }
  .hero-description { font-size: 13px; padding-inline: 10px; }
  .hero-actions { gap: 10px; }
  .request-preview { margin-top: 35px; }
  .preview-grid { grid-template-columns: 1fr 1fr; padding: 18px 0; }
  .preview-cell { padding-inline: 13px; }
  .preview-cell:last-child { display: none; }
  .preview-value { font-size: 10px; gap: 5px; }
  .preview-top { padding-inline: 13px; }
  .section { padding-block: 46px; }
  .section-heading h2 { font-size: 29px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .step-top { margin-bottom: 7px; }
  .steps p { padding-left: 28px; }
  .how-section { padding: 12px 0 36px; }
  .plans-grid { grid-template-columns: 1fr; gap: 24px; }
  .plan-card { padding: 24px; }
  .plan-description { min-height: 0; }
  .plan-features li { font-size: 12px; }
  .support-layout { grid-template-columns: 1fr; gap: 27px; }
  .support-section { padding-block: 40px; }
  .donation-row { flex-wrap: wrap; }
  .footer-top { gap: 27px 18px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 14px; }
  .legal-page { padding-top: 118px; }
  .legal-page h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}