:root {
  --bg: #070709;
  --surface: #111114;
  --surface2: #18181d;
  --border: #2c2c35;
  --text: #f2f2f7;
  --muted: #9b9ba8;
  --accent: #ff2d55;
  --accent2: #ff6b8a;
  --tg: #2AABEE;
  --glow: rgba(255, 45, 85, 0.35);
  --green: #4ade80;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html[data-theme="light"] {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface2: #eef1f7;
  --border: #d9deea;
  --text: #11131a;
  --muted: #606779;
  --glow: rgba(255, 45, 85, 0.2);
  --green: #168a48;
}

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

[hidden] { display: none !important; }
/* Opacity-0 overlays still capture clicks. Closed dialogs must not. */
.topup-modal:not(.is-open),
.ug-notice:not(.is-open) {
  pointer-events: none !important;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  overflow-x: hidden;
  padding-bottom: 88px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 18px; }

/* HEADER */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(7, 7, 9, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
html[data-theme="light"] header {
  background: rgba(246, 247, 251, 0.88);
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}
.logo img {
  display: block;
  width: 190px;
  height: auto;
  max-width: 22vw;
  object-fit: contain;
}
html[data-theme="light"] .logo img {
  content: url('brand-logo-light-fast.webp');
}
.footer-logo {
  margin-bottom: 16px;
}
.footer-logo img {
  width: 270px;
  height: auto;
  max-width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.theme-toggle {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.theme-toggle:hover {
  border-color: rgba(255, 45, 85, 0.55);
  background: rgba(255, 45, 85, 0.12);
  transform: translateY(-1px);
}
/* Keep the theme control visible even when the icon library is delayed or
   blocked. The icon is rendered by CSS and follows the active theme. */
.theme-toggle::before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l1.41 1.41' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l1.41 1.41' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme="light"] .theme-toggle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.theme-toggle > svg,
.theme-toggle > [data-lucide] {
  display: none;
}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .account-trigger {
  border-color: rgba(17, 19, 26, 0.12);
  background: rgba(255,255,255,0.72);
}
html[data-theme="light"] .lang-switch select {
  border-color: rgba(17, 19, 26, 0.12);
  background: rgba(255,255,255,0.72);
  color: #11131a;
}

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 800;
}
.lang-switch::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}
.lang-switch select {
  appearance: none;
  width: 68px;
  min-height: 38px;
  padding: 8px 26px 8px 11px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.lang-switch select:hover,
.lang-switch select:focus {
  border-color: rgba(255, 45, 85, 0.55);
  background: rgba(255, 45, 85, 0.1);
  box-shadow: 0 10px 24px rgba(255, 45, 85, 0.12);
}
.lang-switch option {
  color: #11131a;
  background: #fff;
}

.site-account {
  position: relative;
}
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 10px 6px 7px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}
.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
  border-color: rgba(255, 45, 85, 0.55);
  background: rgba(255, 45, 85, 0.12);
}
.account-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  font-weight: 950;
}
.account-trigger-text {
  display: grid;
  min-width: 0;
  text-align: left;
  line-height: 1.1;
}
.account-trigger-text strong {
  max-width: 126px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
}
.account-trigger-text small {
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 800;
}
.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 260;
  display: grid;
  gap: 6px;
  min-width: 250px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(17, 17, 20, 0.98);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
html[data-theme="light"] .account-menu {
  border-color: rgba(17, 19, 26, 0.12);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(28, 35, 55, 0.18);
}
.account-menu-head {
  display: grid;
  gap: 2px;
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--border);
}
.account-menu-head strong {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}
.account-menu-head span {
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 800;
}
.account-menu button,
.account-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.account-menu button:hover,
.account-menu a:hover {
  background: rgba(255,255,255,0.08);
}

/* BUTTONS */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 0.92rem;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s, filter 0.18s, background 0.18s;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  text-align: center;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -65%;
  z-index: 1;
  width: 58%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::before {
  opacity: 1;
  animation: cta-shine 0.78s ease-out;
}
.btn:active {
  transform: translateY(0) scale(0.97);
}
.btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn svg,
.trust-row svg,
.upload-main svg,
.mode-row svg,
.stat svg,
.step-num svg,
.feature-icon svg,
.plan-icon,
.pack-card svg,
.preset-grid svg,
.referral-band svg,
.account-trigger svg,
.account-menu svg,
.topup-actions svg,
.modal-close svg,
.theme-toggle svg,
.session-card svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.3;
}
.btn-tg {
  background: linear-gradient(135deg, #2AABEE, #4adeff 52%, #198dd1);
  color: #fff;
  box-shadow: 0 7px 24px rgba(42, 171, 238, 0.38);
}
.btn-tg:hover {
  transform: translateY(-3px) scale(1.02);
  filter: saturate(1.12) brightness(1.04);
  box-shadow: 0 12px 34px rgba(42, 171, 238, 0.5);
}
.btn-google {
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 4px 20px rgba(255,255,255,0.16);
}
.btn-google::before {
  content: "G";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #4285f4;
  border: 1px solid #dadce0;
  font-weight: 800;
  font-family: Arial, sans-serif;
}
.btn-google:hover {
  background: #f8fafd;
  transform: translateY(-2px);
}
.btn-accent {
  background: linear-gradient(135deg, #ff174f 0%, #ff2d55 34%, #ff6b8a 68%, #b44cff 100%);
  background-size: 220% 220%;
  color: #fff;
  box-shadow:
    0 7px 24px var(--glow),
    0 0 0 1px rgba(255,255,255,0.08) inset;
  text-shadow: 0 1px 8px rgba(0,0,0,0.24);
}
.btn-accent:hover {
  transform: translateY(-3px) scale(1.025);
  filter: saturate(1.15) brightness(1.05);
  box-shadow:
    0 14px 40px rgba(255, 45, 85, 0.45),
    0 0 0 1px rgba(255,255,255,0.14) inset;
  animation: cta-gradient 1.8s ease infinite;
}
.btn-lg {
  padding: 16px 34px;
  font-size: 1.08rem;
  border-radius: 14px;
}
.btn-pulse {
  animation: pulse 2.1s infinite, cta-gradient 3.4s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 7px 24px var(--glow), 0 0 0 0 rgba(255, 45, 85, 0.48); }
  50% { box-shadow: 0 16px 46px rgba(255, 45, 85, 0.42), 0 0 0 15px rgba(255, 45, 85, 0); }
}
@keyframes cta-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes cta-shine {
  0% { transform: translateX(0) rotate(18deg); }
  100% { transform: translateX(330%) rotate(18deg); }
}

.tg-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* HERO */
.hero {
  padding: 42px 0 16px;
  text-align: center;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, 100vw);
  height: 700px;
  background: radial-gradient(circle, rgba(255, 45, 85, 0.18) 0%, transparent 65%);
  pointer-events: none;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 45, 85, 0.12);
  border: 1px solid rgba(255, 45, 85, 0.3);
  color: var(--accent2);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.28);
  color: var(--green);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: livepulse 1.6s infinite;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.hero h1 .grad {
  background: linear-gradient(90deg, #ff2d55, #ff8a5c, #ff2d55);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shine 4s linear infinite;
}
@keyframes shine {
  to { background-position: 200% center; }
}
.hero-sub {
  font-size: 1.03rem;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 18px;
}
.hero-sub strong { color: var(--text); }
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 14px;
}
.free-note {
  font-size: 0.95rem;
  color: var(--muted);
}
.free-note strong { color: var(--green); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.84rem;
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* WEB GENERATOR */
.generator-section {
  padding: 14px 0 42px;
}
.generator-head {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 14px;
}
.generator-head h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.15;
  margin-bottom: 6px;
  font-weight: 850;
}
.generator-head p {
  color: var(--muted);
  font-size: 0.94rem;
}
.generator-app {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  gap: 16px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(255,45,85,0.08), rgba(42,171,238,0.06));
  border-radius: 22px;
}
html[data-theme="light"] .generator-app {
  border-color: rgba(17, 19, 26, 0.08);
  background: linear-gradient(135deg, rgba(255,45,85,0.1), rgba(42,171,238,0.06));
}
.generator-panel,
.result-panel {
  background: rgba(17, 17, 20, 0.94);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
html[data-theme="light"] .generator-panel {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(17, 19, 26, 0.1);
  box-shadow: 0 18px 60px rgba(28, 35, 55, 0.14);
}
.session-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,45,85,0.12), rgba(42,171,238,0.07));
}
html[data-theme="light"] .session-card {
  border-color: rgba(255,45,85,0.22);
  background: linear-gradient(135deg, rgba(255,45,85,0.1), rgba(42,171,238,0.08));
}
.session-card > svg {
  flex: 0 0 auto;
  color: var(--accent2);
}
.session-card strong,
.session-card small {
  display: block;
}
.session-card strong {
  font-size: 0.98rem;
}
.session-card small {
  color: var(--muted);
  font-size: 0.84rem;
}
.account-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.account-row strong,
.account-row small,
.mini-label {
  display: block;
}
.mini-label {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0;
}
.account-row strong {
  font-size: 1rem;
}
.account-row small {
  color: var(--green);
  font-size: 0.82rem;
}
.btn-sm {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
}
.login-box {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(42, 171, 238, 0.35);
  background: rgba(42, 171, 238, 0.08);
  border-radius: 14px;
}
html[data-theme="light"] .login-box {
  background: rgba(42, 171, 238, 0.1);
}
.login-box p {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 10px;
}
.referral-card {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(74,222,128,0.11), rgba(42,171,238,0.08));
  border: 1px solid rgba(74, 222, 128, 0.28);
}
html[data-theme="light"] .referral-card {
  background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(42,171,238,0.09));
  border-color: rgba(22, 138, 72, 0.24);
}
.referral-card[hidden] {
  display: none;
}
.referral-card strong,
.referral-card small {
  display: block;
}
.referral-card small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 0.82rem;
}
.referral-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.referral-actions input {
  min-width: 0;
  color: var(--text);
  background: #0e0e12;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-size: 0.82rem;
}
html[data-theme="light"] .referral-actions input,
html[data-theme="light"] .web-form textarea {
  background: #ffffff;
}
.referral-actions button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  color: #07130d;
  background: var(--green);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(74, 222, 128, 0.25);
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.referral-actions button:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 13px 32px rgba(74, 222, 128, 0.35);
}
.checkout-panel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 45, 85, 0.08);
  border: 1px solid rgba(255, 45, 85, 0.28);
}
html[data-theme="light"] .checkout-panel {
  background: rgba(255, 45, 85, 0.1);
}

.discount-box {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}
html[data-theme="light"] .discount-box {
  background: rgba(255, 255, 255, 0.72);
}
.discount-box label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}
.discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.discount-row input {
  min-width: 0;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--border);
  padding: 0 12px;
  color: var(--text);
  background: var(--surface2);
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
}
.discount-row input:focus {
  outline: none;
  border-color: rgba(255, 45, 85, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.13);
}
.discount-row button {
  border: 0;
  border-radius: 11px;
  padding: 0 15px;
  color: #fff;
  background: linear-gradient(135deg, #ff174f, #ff2d55 55%, #b44cff);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}
.discount-note {
  min-height: 16px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.discount-note.success {
  color: var(--green);
}
.discount-note.error {
  color: var(--accent2);
}
.discount-note.working {
  color: var(--tg);
}
.checkout-panel[hidden] {
  display: none;
}
.checkout-head strong,
.checkout-head small {
  display: block;
}
.checkout-head small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 0.82rem;
}
.pack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pack-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px 10px;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  text-align: center;
  justify-items: center;
}
.pack-card > svg {
  color: var(--green);
}
.pack-card em {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff2d55, #b44cff);
  box-shadow: 0 4px 14px rgba(255, 45, 85, 0.4);
  font-style: normal;
  font-size: 0.63rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 3;
}
.pack-card.featured {
  border: 1.5px solid rgba(255, 45, 85, 0.9);
  box-shadow: 0 12px 38px rgba(255, 45, 85, 0.22);
}
.pack-card.featured::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.55), rgba(180, 76, 255, 0.55));
  filter: blur(12px);
  opacity: 0.45;
  animation: pack-glow 2.6s ease-in-out infinite;
  pointer-events: none;
}
.pack-card.featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.13) 50%, transparent 62%);
  background-size: 250% 100%;
  animation: pack-shine 3.6s ease-in-out infinite;
}
@keyframes pack-glow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes pack-shine { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }
.pack-card strong {
  font-size: 0.95rem;
}
.pack-bonus {
  display: inline-block;
  margin-top: -2px;
  color: var(--accent2);
  font-size: 0.72rem;
  font-weight: 950;
}
.pack-card .pack-badge.pop { background: var(--accent2); }
.pack-card .pack-credits { font-size: 1.05rem; font-weight: 900; margin-top: 4px; }
.pack-card .pack-save {
  position: absolute; top: -9px; left: 8px; padding: 3px 7px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 0.66rem; font-weight: 950;
}
.pack-card .pack-perimg {
  color: var(--muted); font-size: 0.74rem; font-weight: 700; margin-top: -2px;
}
.pack-card .pack-perimg s { color: var(--muted); opacity: 0.7; margin-left: 3px; }
.pack-card .pack-gens {
  color: var(--accent2); font-size: 0.72rem; font-weight: 900; margin-top: -3px;
}
/* Save pill top-right so it never collides with the now-centered ribbon. */
.pack-card .pack-save { left: auto; right: 8px; }
.pack-card { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.pack-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3); }
/* Cards stagger in each time the checkout modal opens. */
#checkout-panel.is-open .pack-card {
  animation: pack-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes pack-in {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-card, .pack-card.featured::before, .pack-card.featured::after,
  #checkout-panel.is-open .pack-card { animation: none !important; }
}
.pack-card .pack-perks {
  list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 3px;
  width: 100%;
}
.pack-card .pack-perks li {
  display: flex; align-items: center; gap: 5px; justify-content: center;
  font-size: 0.72rem; color: var(--muted); line-height: 1.3;
}
.pack-card .pack-perks svg { width: 13px; height: 13px; color: var(--green); flex: none; }
.pack-card .pack-price {
  color: var(--green);
  font-weight: 900;
}
.pack-card .pack-price.discounted {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}
.pack-card .pack-price.discounted s {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}
.pack-card .pack-price.discounted b {
  color: var(--green);
  font-size: 1.1rem;
}
.pack-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pack-actions button:only-child {
  grid-column: 1 / -1;
}
.pack-card button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  padding: 9px 8px;
  color: #fff;
  background: linear-gradient(135deg, #ff174f, #ff2d55 48%, #b44cff);
  background-size: 180% 180%;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 45, 85, 0.28);
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.pack-card button.pay-card-pack {
  background: linear-gradient(135deg, #27d17f, #21b7ff 55%, #6d5dfc);
  box-shadow: 0 8px 22px rgba(33, 183, 255, 0.22);
}
.pack-card button.pay-card-pack:hover {
  box-shadow: 0 13px 32px rgba(33, 183, 255, 0.36);
}
.pack-card button:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05) saturate(1.12);
  box-shadow: 0 13px 32px rgba(255, 45, 85, 0.42);
  animation: cta-gradient 1.8s ease infinite;
}
.pack-card button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.card-fallback {
  display: block;
  text-align: center;
  color: var(--tg);
  font-size: 0.86rem;
  font-weight: 800;
}
.modal-open {
  overflow: hidden;
}
.topup-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.topup-modal.is-open {
  opacity: 1;
}
.topup-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
html[data-theme="light"] .topup-backdrop {
  background: rgba(246, 247, 251, 0.74);
}
.topup-dialog {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,45,85,0.24), transparent 30%),
    linear-gradient(145deg, #15151a, #0d0d11);
  box-shadow: 0 28px 110px rgba(0,0,0,0.6);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.18s ease;
}
html[data-theme="light"] .topup-dialog {
  border-color: rgba(17, 19, 26, 0.1);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,45,85,0.16), transparent 32%),
    linear-gradient(145deg, #ffffff, #f2f4fa);
  box-shadow: 0 28px 110px rgba(28, 35, 55, 0.22);
}
.topup-modal.is-open .topup-dialog {
  transform: translateY(0) scale(1);
}
.topup-dialog h3 {
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.1;
  font-weight: 900;
}
.topup-dialog p,
.topup-note {
  color: var(--muted);
}
.topup-costs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  font-size: 0.88rem;
}
.topup-costs span { display: block; }
.topup-costs b { color: var(--text); }
.topup-costs-starter { grid-column: 1 / -1; }
html[data-theme="light"] .topup-costs {
  border-color: rgba(17,19,26,0.1);
  background: rgba(17,19,26,0.035);
}
@media (max-width: 520px) {
  .topup-costs { grid-template-columns: 1fr; }
  .topup-costs-starter { grid-column: auto; }
}
.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}
.topup-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.topup-actions button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 28px rgba(0,0,0,0.2);
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.topup-actions button:hover {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.04);
  box-shadow: 0 14px 36px rgba(0,0,0,0.28);
}
.topup-actions .card-fallback {
  background: linear-gradient(135deg, #2AABEE, #53d7ff, #198dd1);
}
.topup-actions .telegram-link {
  color: #fff;
  background: linear-gradient(135deg, #1f2937, #111827);
  border: 1px solid rgba(255,255,255,0.16);
}
html[data-theme="light"] .topup-actions .telegram-link {
  color: #07130d;
  background: linear-gradient(135deg, #d9f99d, #86efac);
  border-color: rgba(22, 138, 72, 0.25);
  box-shadow: 0 9px 28px rgba(22, 138, 72, 0.2);
}
html[data-theme="light"] .topup-actions .telegram-link:hover {
  box-shadow: 0 14px 36px rgba(22, 138, 72, 0.28);
}
.topup-note {
  display: block;
  font-size: 0.78rem;
  text-align: center;
}
.web-form {
  display: grid;
  gap: 12px;
}
.web-form.is-locked {
  opacity: 0.62;
}
.upload-zone {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 126px;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: 14px;
  background: var(--surface2);
  cursor: pointer;
  text-align: center;
}
html[data-theme="light"] .upload-zone,
html[data-theme="light"] .mode-row label,
html[data-theme="light"] .preset-tabs button,
html[data-theme="light"] .preset-grid button {
  border-color: rgba(17, 19, 26, 0.12);
  background: #eef1f7;
}
.upload-zone:hover {
  border-color: var(--accent);
}
.upload-zone.has-preview {
  place-items: center;
  text-align: center;
}
.upload-zone-secondary {
  min-height: 110px;
  border-style: solid;
  background:
    linear-gradient(135deg, rgba(42,171,238,0.12), rgba(255,45,85,0.08)),
    var(--surface2);
}
.upload-zone input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.upload-preview {
  width: 100%;
  max-height: min(58vh, 520px);
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #09090c;
  box-shadow: 0 16px 42px rgba(0,0,0,0.28);
}
html[data-theme="light"] .upload-preview {
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(28, 35, 55, 0.14);
}
.upload-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
}
.upload-sub {
  color: var(--muted);
  font-size: 0.84rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.upload-tip {
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 800;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mode-row label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.mode-row label:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 45, 85, 0.5);
}
.mode-row label.active,
.mode-row label:has(input:checked) {
  border-color: rgba(255, 45, 85, 0.86);
  background:
    linear-gradient(135deg, rgba(255,45,85,0.2), rgba(180,76,255,0.12)),
    var(--surface2);
  box-shadow: 0 12px 30px rgba(255, 45, 85, 0.14);
}
.mode-row label.video-coming-soon {
  cursor: not-allowed;
  opacity: 0.86;
  border-color: rgba(180, 76, 255, 0.42);
  background:
    linear-gradient(135deg, rgba(180, 76, 255, 0.13), rgba(255, 45, 85, 0.09)),
    var(--surface2);
}
.mode-row label.video-coming-soon:hover {
  transform: none;
  border-color: rgba(180, 76, 255, 0.42);
}
.mode-row label.video-coming-soon input {
  cursor: not-allowed;
  pointer-events: none;
}
.video-soon-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b44cff, #ff2d55);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.preset-picker {
  display: grid;
  gap: 8px;
}
.preset-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.preset-top .field-label {
  width: 100%;
}
.preset-top button {
  border: 0;
  background: transparent;
  color: var(--tg);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}
.preset-top button[hidden] {
  display: none;
}
.scene-help {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.scene-help[hidden] {
  display: none;
}
/* Category row: a segmented tray, deliberately NOT card-shaped. Categories and
   presets used to be the same pill, so in Scene mode (whose presets carry no
   icon) "Sex" and "Missionary" looked like peers rather than a filter and a
   choice. */
.preset-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}
html[data-theme="light"] .preset-tabs { background: rgba(17, 19, 26, 0.05); }
.preset-tabs button,
.preset-grid button {
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.preset-tabs button {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  border-radius: 9px;
  background: transparent;      /* the tray is the surface, not each tab */
  border-color: transparent;
}
.preset-tabs button:hover {
  background: var(--surface2);
  border-color: transparent;
  transform: none;              /* tabs do not lift; presets do */
}
/* the presets are the choice, so they get the breathing room */
.preset-grid { margin-top: 4px; }
.preset-tabs button.active,
.preset-grid button.active {
  color: #fff;
  border-color: rgba(255, 45, 85, 0.95);
  background:
    linear-gradient(135deg, rgba(255, 45, 85, 0.95), rgba(180, 76, 255, 0.78));
  box-shadow: 0 10px 22px rgba(255, 45, 85, 0.22);
}
.preset-tabs button.active svg,
.preset-grid button.active svg { color: #fff; }
.preset-tabs button.active {
  color: #fff;
  border-color: rgba(255, 45, 85, 0.95);
  background:
    linear-gradient(135deg, rgba(255, 45, 85, 0.95), rgba(180, 76, 255, 0.78));
  box-shadow: 0 12px 26px rgba(255, 45, 85, 0.25);
}
html[data-theme="light"] .preset-tabs button.active,
html[data-theme="light"] .preset-grid button.active {
  color: #fff;
  border-color: rgba(255, 45, 85, 0.95);
  background:
    linear-gradient(135deg, rgba(255, 45, 85, 0.95), rgba(180, 76, 255, 0.78));
  box-shadow: 0 12px 28px rgba(255, 45, 85, 0.22);
}
html[data-theme="light"] .preset-tabs button.active svg,
html[data-theme="light"] .preset-grid button.active svg { color: #fff; }
.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.preset-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.preset-grid svg {
  color: var(--accent2);
  flex-shrink: 0;
}
.preset-grid button:hover {
  border-color: rgba(255, 45, 85, 0.65);
  transform: translateY(-1px);
}
/* Locked presets (free users) — dimmed with a lock badge; click = upsell. */
.preset-grid button.locked { position: relative; opacity: 0.55; }
.preset-grid button.locked:hover { transform: none; border-color: var(--border); }
.preset-grid button.locked .preset-lock {
  position: absolute; top: 5px; right: 6px; display: inline-flex;
}
.preset-grid button.locked .preset-lock svg { width: 13px; height: 13px; color: var(--muted); }
/* "Write my own prompt" button — full-width, revealed field is a paid feature. */
.write-own-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin: 8px 0 2px; min-height: 42px; padding: 8px 14px;
  border: 1px dashed var(--border); border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--text); font-weight: 650; font-size: 0.9rem;
  font-family: inherit; transition: .15s;
}
.write-own-btn:hover { border-color: rgba(255, 45, 85, 0.65); }
.write-own-btn svg { width: 16px; height: 16px; color: var(--accent2); }
.write-own-btn.locked { opacity: 0.7; }
.write-own-btn.locked svg { color: var(--muted); }
.field-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.web-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 116px;
  color: var(--text);
  background: #0e0e12;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
}
.web-form textarea:focus {
  outline: none;
  border-color: rgba(255, 45, 85, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.14);
}
.advanced-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.advanced-options label {
  display: grid;
  gap: 6px;
}
.advanced-options span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}
.advanced-options select {
  width: 100%;
  min-height: 42px;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 800;
  outline: none;
}
html[data-theme="light"] .advanced-options select {
  color: #11131a;
  background: #eef1f7;
  border-color: rgba(17, 19, 26, 0.12);
}
.advanced-options select:focus {
  border-color: rgba(255, 45, 85, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.14);
}
.variation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
}
html[data-theme="light"] .variation-row {
  background: #eef1f7;
  border-color: rgba(17, 19, 26, 0.12);
}
.variation-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.variation-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}
.variation-row select {
  min-height: 38px;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  font: inherit;
  font-weight: 850;
  outline: none;
  color-scheme: dark;
}
.variation-row select option {
  color: #f2f2f7;
  background: #111114;
}
.variation-row select option:disabled {
  color: #6f7280;
  background: #111114;
}
html[data-theme="light"] .variation-row select {
  color: #11131a;
  background: #ffffff;
  border-color: rgba(17, 19, 26, 0.12);
  color-scheme: light;
}
html[data-theme="light"] .variation-row select option {
  color: #11131a;
  background: #ffffff;
}
html[data-theme="light"] .variation-row select option:disabled {
  color: #a6adbd;
  background: #ffffff;
}
.variation-row small {
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}
.consent-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 0.84rem;
}
.consent-line span {
  display: grid;
  gap: 3px;
}
.consent-links {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.consent-line a {
  color: var(--accent2);
  font-weight: 800;
}
.consent-line input {
  margin-top: 4px;
  accent-color: var(--accent);
}
.form-status {
  min-height: 22px;
  color: var(--muted);
  font-size: 0.88rem;
}
.form-status[data-tone="error"] { color: #fb7185; }
.form-status[data-tone="success"] { color: var(--green); }
.form-status[data-tone="working"] { color: var(--tg); }
.result-panel {
  /* Not stretch: the panel used to be pulled to the full height of the (much
     taller) form column, which is where the empty white expanse came from. It
     now sizes to its content and rides at the vertical middle of that column,
     with its own contents centred inside it. */
  min-height: 420px;
  align-self: center;
  display: grid;
  align-content: center;
  justify-items: center;
  /* spacing between panel states lives here, not on a margin: a margin on the
     preview left it sitting 14px above the true centre */
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 34%),
    rgba(17, 17, 20, 0.94);
}
html[data-theme="light"] .result-panel {
  background:
    linear-gradient(180deg, rgba(255,45,85,0.05), transparent 34%),
    rgba(255, 255, 255, 0.92);
}
.result-empty {
  align-self: center;
  justify-self: center;
  text-align: center;
  max-width: 320px;
}
.result-empty strong,
.result-empty span {
  display: block;
}
.result-empty span {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 8px;
}
.generation-loader {
  align-self: center;
  justify-self: center;
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  padding: 28px 22px;
}
.generation-loader[hidden] {
  display: none;
}
.gen-orbit {
  width: 82px;
  height: 82px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.12) 0 34%, transparent 36%),
    conic-gradient(from 0deg, var(--accent), var(--accent2), var(--tg), var(--accent));
  animation: gen-spin 1.15s linear infinite;
  box-shadow: 0 0 42px rgba(255, 45, 85, 0.26);
}
.gen-orbit::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: var(--surface);
}
html[data-theme="light"] .gen-orbit::before {
  background: #fff;
}
.gen-orbit span {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 24px rgba(255, 45, 85, 0.6);
}
.gen-loader-copy strong,
.gen-loader-copy span {
  display: block;
}
.gen-loader-copy strong {
  font-size: 1.12rem;
  font-weight: 950;
}
.gen-loader-copy span {
  max-width: 310px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}
.gen-progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
}
html[data-theme="light"] .gen-progress {
  background: rgba(17, 19, 26, 0.08);
}
.gen-progress span {
  display: block;
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--tg));
  background-size: 180% 100%;
  box-shadow: 0 0 18px rgba(255, 45, 85, 0.42);
  transition: width 0.45s ease;
  animation: gen-flow 1.3s ease-in-out infinite;
}
/* an empty results grid is still a grid item, so it took a row and the panel's
   gap, pushing the working preview off-centre */
.web-results:empty { display: none; }
.web-results { width: 100%; display: block; }
.web-results a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.web-results img {
  width: 100%;
  display: block;
}
.ug-video-result video {
  display: block;
  width: 100%;
  max-height: min(72vh, 760px);
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 14px 14px 0 0;
  background: #050507;
}

@keyframes gen-spin {
  to { transform: rotate(360deg); }
}
@keyframes gen-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* STATS */
.stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px 44px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 18px 0 0;
}
.stat { text-align: center; }
.stat svg {
  color: var(--accent2);
  margin-bottom: 6px;
}
.stat-num {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 2px;
}

/* SECTIONS */
.section { padding: 64px 0; }
.section-title {
  text-align: center;
  font-size: clamp(1.55rem, 3.5vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.section-sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 18px;
  text-align: center;
  transition: transform 0.25s, border-color 0.25s;
}
.step:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 45, 85, 0.4);
}
.step-num {
  width: 38px;
  height: 38px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin: 0 auto 14px;
  font-size: 0.95rem;
}
.step-num svg {
  color: #fff;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.9rem; }

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1120px;
  margin: 0 auto;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  transition: border-color 0.2s, transform 0.2s;
}
.feature:hover {
  border-color: rgba(255, 45, 85, 0.35);
  transform: translateY(-2px);
}
.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 45, 85, 0.18);
  border: 1px solid rgba(255, 45, 85, 0.28);
  margin-bottom: 10px;
}
.feature h3 { font-size: 1.05rem; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 0.9rem; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}
.tag {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 0.84rem;
  color: var(--muted);
  transition: all 0.2s;
}
.tag:hover {
  border-color: var(--accent);
  color: var(--accent2);
}

/* VALUE / PRICING TEASER */
.promo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 0 auto 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,45,85,0.16), rgba(42,171,238,0.08));
  border: 1px solid rgba(255,45,85,0.32);
  box-shadow: 0 18px 50px rgba(255, 45, 85, 0.08);
}
.promo-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent2);
  font-weight: 950;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.promo-strip strong {
  font-size: 0.98rem;
}
.promo-strip small {
  color: var(--muted);
  font-weight: 700;
}
.promo-strip svg {
  width: 18px;
  height: 18px;
}
.pricing-note {
  max-width: 820px;
  margin: 0 auto 22px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 45, 85, 0.28);
  border-radius: 14px;
  background: rgba(255, 45, 85, 0.08);
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}
.pricing-note strong {
  color: var(--text);
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}
.value-card.highlight {
  border-color: rgba(255, 45, 85, 0.45);
  background: linear-gradient(160deg, rgba(255,45,85,0.12), var(--surface) 55%);
  box-shadow: 0 0 40px rgba(255, 45, 85, 0.12);
}
.value-card .vc-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent2);
  background: rgba(255, 45, 85, 0.15);
  border: 1px solid rgba(255, 45, 85, 0.3);
  padding: 4px 10px;
  border-radius: 100px;
}
.value-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.plan-icon {
  color: var(--accent2);
  margin-bottom: 8px;
}
.value-card .price {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.value-card .price span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
.value-card ul {
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.value-card li {
  padding: 5px 0;
  padding-left: 1.2em;
  position: relative;
}
.value-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* SOCIAL PROOF STRIP */
.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}
.proof-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 280px;
}
.proof-chip strong { color: var(--text); display: block; margin-bottom: 2px; }
.referral-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  max-width: 820px;
  margin: 28px auto 0;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(255,45,85,0.08));
  border: 1px solid rgba(74,222,128,0.24);
}
.referral-band > svg {
  width: 30px;
  height: 30px;
  color: var(--green);
}
.referral-band strong,
.referral-band span {
  display: block;
}
.referral-band span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* CTA BAND */
.cta-band {
  background: linear-gradient(135deg, rgba(255,45,85,0.14), rgba(42,171,238,0.08));
  border: 1px solid rgba(255,45,85,0.25);
  border-radius: 22px;
  padding: 48px 28px;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  margin-bottom: 10px;
}
.cta-band p {
  color: var(--muted);
  margin-bottom: 22px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.cta-band .urgency {
  font-size: 0.9rem;
  color: var(--green);
  margin-top: 14px;
  font-weight: 600;
}

/* FOOTER */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 36px;
  text-align: center;
}
.footer-seo {
  max-width: 720px;
  margin: 0 auto 24px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.65;
}
.disclaimer {
  font-size: 0.75rem;
  color: var(--muted);
  max-width: 560px;
  margin: 16px auto 0;
  line-height: 1.5;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin: 20px auto 14px;
  max-width: 840px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 800;
}
.footer-links a {
  color: var(--text);
  opacity: 0.84;
  transition: color 0.18s, opacity 0.18s;
}
.footer-links a:hover {
  color: var(--accent2);
  opacity: 1;
}
.footer-more {
  width: fit-content;
  max-width: 100%;
  margin: -4px auto 14px;
  color: var(--muted);
}
.footer-more summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 8px;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 700;
}
.footer-more summary::-webkit-details-marker { display: none; }
.footer-more summary::after {
  content: "+";
  color: var(--accent2);
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.18s ease;
}
.footer-more[open] summary::after { transform: rotate(45deg); }
.footer-secondary-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 14px;
  max-width: 680px;
  margin: 4px auto 2px;
  font-size: 0.78rem;
  font-weight: 650;
}
.footer-secondary-links a {
  color: var(--muted);
  transition: color 0.18s;
}
.footer-secondary-links a:hover { color: var(--accent2); }
.operator-line {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 8px auto 0;
  max-width: 720px;
}

/* Homepage footer: product discovery first, policies present but visually
   quieter. The older compact footer remains available to legal/localized pages. */
footer.home-footer {
  padding: 48px 0 30px;
  text-align: left;
  background: var(--surface);
}
.home-footer-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(140px, .8fr));
  gap: 42px;
  align-items: start;
}
.home-footer-brand .logo { margin-bottom: 14px; }
.home-footer-brand .logo img { width: 190px; max-width: 100%; }
.home-footer-brand p {
  max-width: 315px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.65;
}
.home-footer-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent2);
  font-size: .88rem;
  font-weight: 850;
}
.home-footer-action:hover { color: var(--text); }
.home-footer-column h2 {
  margin: 3px 0 13px;
  color: var(--text);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.home-footer-column nav { display: grid; gap: 9px; }
.home-footer-column a {
  width: fit-content;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
  transition: color .18s ease;
}
.home-footer-column a:hover { color: var(--accent2); }
.home-footer-safety a { font-size: .8rem; }
.home-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.5;
}
.home-footer-bottom p { margin: 0; }
.home-footer-bottom p:last-child { text-align: right; }
@media (max-width: 900px) {
  .home-footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 32px 26px; }
  .home-footer-brand { grid-column: 1 / -1; }
  .home-footer-brand p { max-width: 520px; }
}
@media (max-width: 620px) {
  footer.home-footer { padding: 38px 0 24px; }
  .home-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .home-footer-brand { grid-column: 1 / -1; }
  .home-footer-column a { min-height: 34px; display: flex; align-items: center; }
  .home-footer-bottom { display: grid; gap: 8px; margin-top: 30px; }
  .home-footer-bottom p:last-child { text-align: left; }
}
@media (max-width: 350px) {
  .home-footer-grid { grid-template-columns: 1fr; }
  .home-footer-brand { grid-column: auto; }
}
.legal-page {
  padding-bottom: 0;
}
.legal-hero {
  padding: 64px 0 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,45,85,0.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}
html[data-theme="light"] .legal-hero {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,45,85,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(246,247,251,0));
}
.legal-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 12px auto 12px;
  max-width: 900px;
}
.legal-hero p {
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.02rem;
}
.legal-shell {
  padding: 26px 0 70px;
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.legal-toc,
.legal-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(17,17,20,0.9);
  box-shadow: 0 18px 48px rgba(0,0,0,0.2);
}
html[data-theme="light"] .legal-toc,
html[data-theme="light"] .legal-card {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 48px rgba(17,19,26,0.08);
}
.legal-toc {
  position: sticky;
  top: 86px;
  padding: 16px;
}
.legal-toc strong {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 0.82rem;
  text-transform: uppercase;
}
.legal-toc a {
  display: block;
  padding: 8px 0;
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
html[data-theme="light"] .legal-toc a {
  border-top-color: rgba(17,19,26,0.08);
}
.legal-toc a:hover {
  color: var(--accent2);
}
.legal-card {
  padding: clamp(22px, 4vw, 44px);
}
.legal-card section + section {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.legal-card h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.18;
  margin-bottom: 12px;
}
.legal-card h3 {
  font-size: 1.05rem;
  margin: 22px 0 8px;
}
.legal-card p,
.legal-card li {
  color: var(--muted);
  font-size: 0.98rem;
}
.legal-card p + p,
.legal-card ul + p,
.legal-card p + ul {
  margin-top: 12px;
}
.legal-card ul {
  padding-left: 20px;
}
.legal-card li + li {
  margin-top: 8px;
}
.legal-callout {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(255,45,85,0.35);
  border-radius: 14px;
  background: rgba(255,45,85,0.1);
  color: var(--text);
}
.legal-callout strong {
  color: var(--text);
}
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.legal-mini-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
}
html[data-theme="light"] .legal-mini-card {
  background: rgba(246,247,251,0.72);
}
.legal-mini-card strong {
  display: block;
  margin-bottom: 5px;
}
.report-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.report-form label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-weight: 800;
}
.report-form input,
.report-form select,
.report-form textarea {
  width: 100%;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
}
.report-form textarea {
  min-height: 130px;
  resize: vertical;
}
.legal-address {
  white-space: pre-line;
}

/* STICKY BOTTOM CTA */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  padding: 10px 14px calc(10px + var(--safe-bottom));
  background: rgba(7, 7, 9, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-theme="light"] .sticky-cta {
  background: rgba(246, 247, 251, 0.92);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sticky-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -32px;
  width: min(620px, 90vw);
  height: 74px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255,45,85,0.18), transparent 68%);
  pointer-events: none;
}
.sticky-copy {
  flex: 1;
  min-width: 0;
}
.sticky-copy strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.25;
}
.sticky-copy span {
  font-size: 0.78rem;
  color: var(--muted);
}
.sticky-cta .btn {
  flex-shrink: 0;
  padding: 12px 18px;
  animation: pulse 2.3s infinite, cta-gradient 3.4s ease infinite;
}

/* AGE / EXIT SOFT NUDGE - optional toast */
.toast {
  position: fixed;
  bottom: calc(90px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 250;
  background: var(--surface);
  border: 1px solid rgba(42, 171, 238, 0.4);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.88rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  max-width: min(360px, calc(100vw - 32px));
  text-align: center;
}
html[data-theme="light"] .toast {
  box-shadow: 0 12px 40px rgba(28, 35, 55, 0.16);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast a {
  color: var(--tg);
  font-weight: 700;
}

@media (max-width: 980px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .generator-app {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
  }
  .result-panel { min-height: 360px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .container { padding: 0 12px; }
  .lang-switch select { width: 62px; min-height: 38px; padding: 8px 24px 8px 10px; }
  .lang-switch::after { right: 9px; }
  .logo { max-width: 164px; }
  .logo img { width: 138px; max-width: 138px; }
  .header-right { gap: 8px; }
  .header-right > .btn { display: none; }
  .theme-toggle { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
  .account-trigger { padding-right: 7px; }
  .account-trigger-text { display: none; }
  .account-menu { right: -2px; min-width: min(270px, calc(100vw - 28px)); }
  .hero { padding: 40px 0 22px; }
  .hero h1 {
    max-width: 340px;
    font-size: 2rem;
    line-height: 1.08;
  }
  .hero-sub,
  .generator-head p {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .trust-row {
    gap: 8px;
    justify-content: center;
  }
  .trust-row span {
    width: 100%;
    justify-content: center;
  }
  .btn-lg { width: 100%; max-width: 360px; }
  .generator-app { grid-template-columns: 1fr; }
  .generator-panel,
  .result-panel { border-radius: 14px; padding: 14px; }
  .session-card { align-items: flex-start; }
  .account-row { align-items: flex-start; }
  .referral-actions { grid-template-columns: 1fr; }
  .mode-row { grid-template-columns: 1fr 1fr; }
  .mode-row label.video-coming-soon,
  .mode-row label.video-live { grid-column: 1 / -1; }
  .pack-grid { grid-template-columns: 1fr; }
  .topup-modal { padding: 12px; align-items: end; }
  .topup-dialog {
    width: min(100%, 520px);
    max-height: calc(100vh - 24px);
    padding: 18px;
    border-radius: 18px 18px 0 0;
  }
  .topup-actions { grid-template-columns: 1fr; }
  .preset-tabs,
  .preset-grid { grid-template-columns: 1fr; }
  .preset-top .field-label {
    font-size: 0.72rem;
    line-height: 1.28;
  }
  .promo-strip { display: grid; justify-content: stretch; }
  .proof-chip { max-width: 100%; }
  .referral-band { grid-template-columns: 1fr; text-align: center; }
  .referral-band > svg { margin: 0 auto; }
  .features { grid-template-columns: 1fr; }
  .result-panel { min-height: 280px; }
  .stats { gap: 20px 32px; }
  .sticky-copy span { display: none; }
}

@media (max-width: 430px) {
  body { padding-bottom: 104px; }
  .container { padding: 0 12px; }
  header { padding: 10px 0; }
  .header-inner { gap: 8px; }
  .logo { max-width: 124px; }
  .logo img { width: 120px; max-width: 120px; }
  .header-right { gap: 6px; }
  .header-right > .btn {
    min-height: 38px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 0.82rem;
  }
  .theme-toggle {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .account-trigger {
    min-height: 38px;
    padding: 4px;
    border-radius: 12px;
  }
  .account-avatar {
    width: 30px;
    height: 30px;
  }
  .hero { padding-top: 32px; }
  .trust-row {
    gap: 8px;
    justify-content: flex-start;
  }
  .trust-row span {
    width: 100%;
    justify-content: center;
  }
  .generator-app {
    padding: 6px;
    border-radius: 18px;
  }
  .generator-panel,
  .result-panel {
    padding: 12px;
  }
  .upload-zone {
    min-height: 112px;
    padding: 14px;
  }
  .upload-preview {
    max-height: min(52vh, 420px);
  }
  .preset-tabs { grid-template-columns: 1fr; }
  .preset-grid { grid-template-columns: 1fr; }
  .web-form textarea { min-height: 104px; }
  .steps { grid-template-columns: 1fr; }
  .section { padding: 44px 0; }
  .section-sub { margin-bottom: 24px; }
  .value-card { padding: 20px 16px; }
  .cta-band {
    padding: 34px 16px;
    border-radius: 18px;
  }
  .sticky-inner { gap: 8px; }
  .sticky-copy strong { font-size: 0.84rem; }
  .sticky-cta .btn {
    padding: 11px 12px;
    font-size: 0.84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-pulse { animation: none; }
  .sticky-cta .btn { animation: none; }
  .btn:hover::before { animation: none; opacity: 0; }
  .live-dot { animation: none; }
  .hero h1 .grad { animation: none; }
}

/* --- Email signup / login (Google + Email) --- */
.login-choices { display:flex; gap:10px; margin-top:6px; }
.login-choices .btn { flex:1 1 0; min-width:0; justify-content:center; gap:9px; height:50px;
  border-radius:14px; font-weight:750; font-size:14px; padding:0 12px; line-height:1.1; }
.login-choices .btn svg { flex:none; }
.login-choices .btn span, .login-choices .btn { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn.btn-google { background:#fff; color:#1f1f24; border:1px solid rgba(0,0,0,0.14); box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.btn.btn-google:hover { background:#f4f5f7; }
/* Google is the primary path (no email deliverability dependency); email is
   demoted to a quiet secondary so users lead with Google. */
.btn.btn-email { background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none; font-weight:600; }
.btn.btn-email:hover { background:rgba(127,127,127,0.10); }
.btn.btn-email .mlogo { color:var(--muted); }
.email-hint { margin:2px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.email-hint strong { color:var(--text); }


/* Message card shown in the results window (errors, sign-in prompts). */
.result-notice { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:30px 22px; }
.rn-icon { font-size:34px; line-height:1; }
.rn-title { margin:0; font-size:18px; font-weight:800; color:var(--text); }
.rn-sub { margin:0 0 6px; font-size:13.5px; line-height:1.5; color:var(--muted); max-width:340px; }
.rn-cta { min-width:200px; margin-top:4px; }
@media (max-width:560px){ .login-choices { flex-direction:column; } .login-choices .btn { flex:0 0 auto; height:48px; } }

.email-auth { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.email-auth input { width:100%; height:46px; padding:0 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:15px; outline:none; }
.email-auth input::placeholder { color:var(--muted); }
.email-auth input:focus { border-color:#ff2f63; box-shadow:0 0 0 3px rgba(255,47,99,0.18); }
.email-auth #email-code { text-align:center; letter-spacing:10px; font-size:22px; font-weight:800; }
.email-auth .btn { width:100%; justify-content:center; height:48px; }
.email-sent-copy { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.email-auth-links { display:flex; justify-content:space-between; gap:12px; }
.link-btn { background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; padding:2px 0; text-decoration:underline; }
.link-btn:hover { color:var(--text); }
.login-error { margin:10px 0 0; color:#ff8095; font-size:13px; font-weight:600; }

/* ---- Dedicated referral page (referral.html) ---- */
.referral-page { padding:36px 0 64px; }
.referral-hero { text-align:center; max-width:680px; margin:0 auto 26px; }
.referral-hero h1 { font-size:clamp(26px,4vw,40px); margin:12px 0 10px; }
.referral-lede { color:var(--muted); font-size:16px; line-height:1.6; }
.referral-lede strong { color:var(--text); }
.referral-anon { max-width:420px; margin:0 auto; }
.referral-panel { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.referral-linkcard { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; }
.referral-linkcard .mini-label { display:block; margin-bottom:10px; }
.referral-share-hint { display:block; margin-top:10px; color:var(--muted); font-size:12.5px; }
.referral-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.ref-stat { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; text-align:center; }
.ref-stat strong { display:block; font-size:24px; font-weight:900; color:var(--text); line-height:1.1; }
.ref-stat span { display:block; margin-top:6px; font-size:12.5px; color:var(--muted); }
.ref-stat:first-child strong, .ref-stat:nth-child(2) strong { color:var(--accent); }
.referral-withdraw-note { text-align:center; color:var(--muted); font-size:14px; margin:0; }
.referral-withdraw-note a { color:var(--accent); text-decoration:none; font-weight:700; }
.referral-withdraw-note a:hover { text-decoration:underline; }
.referral-how { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 24px; }
.referral-how h2 { margin:0 0 14px; font-size:19px; }
.referral-how ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.referral-how li { color:var(--muted); line-height:1.55; }
.referral-how li strong { color:var(--text); }
.referral-how .ref-pct, #ref-revshare-pct { color:var(--accent); font-weight:800; }
#ref-copy.copied { opacity:0.85; }

/* =====================================================================
   Mobile usability pass (applies to the control page AND lp2, which both
   load this stylesheet). Appended last so it wins over the earlier
   breakpoint blocks at equal specificity.
   ===================================================================== */
@media (max-width: 700px) {
  /* iOS Safari zooms the whole page when a text field smaller than 16px
     takes focus, and leaves the layout zoomed afterwards. The email signup
     field was 15px, i.e. it happened right in the signup flow. */
  input[type="text"], input[type="email"], input[type="number"],
  input[type="password"], input[type="search"], input[type="tel"],
  input[type="url"], textarea {
    font-size: 16px;
  }

  /* ~44px minimum touch target (Apple HIG / Material guidance) */
  .preset-tabs button,
  .preset-grid button,
  .write-own-btn,
  .advanced-options select,
  .variation-row select,
  .lang-switch select,
  .login-choices .btn,
  .account-menu a,
  .account-menu button,
  .footer-links a,
  .footer-more summary,
  .footer-secondary-links a {
    min-height: 44px;
  }
  .theme-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  .account-trigger { min-height: 44px; }
  /* the logo is a link — give it a full-height hit area */
  .logo { display: inline-flex; align-items: center; min-height: 44px; }

  /* native checkbox/radio are ~13px: enlarge the control itself so the tap
     is comfortable even when the user misses the surrounding label */
  .mode-row input[type="radio"],
  .consent-line input[type="checkbox"],
  input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px; flex: 0 0 auto;
  }

  /* footer link rows get breathing room once they are 44px tall */
  .footer-links { gap: 2px 14px; }
}

@media (max-width: 430px) {
  /* keep the enlarged toggle at the smallest sizes too (an earlier block
     shrinks it to 38px) */
  .theme-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  .lang-switch select { min-height: 44px; }
}

@media (max-width: 700px) {
  /* fine-print legal links stay inline (breaking the sentence would be worse),
     but get padding so they are not 17px-tall pin-pricks */
  .consent-links a, .toast a { display: inline-block; padding: 5px 2px; }
  /* the sticky bar is the main mobile CTA — keep it a full target */
  .sticky-cta .btn { min-height: 44px; }
}

@media (max-width: 700px) {
  /* The switcher had a fixed 62px width, which clipped the native CJK labels
     (日本語 needs ~37px of text room but only ~28px was available). Size to
     content instead, with a cap so it can never crowd out the header. */
  .lang-switch select { width: auto; min-width: 58px; max-width: 104px; }
}


/* ===== Plain notice popup ==========================================
   Used when a free user taps a gated preset: explains what the free
   generation covers. Deliberately has no pack grid. */
.ug-notice {
  position: fixed; inset: 0; z-index: 160;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.ug-notice.is-open { opacity: 1; }
.ug-notice[hidden] { display: none; }
.ug-notice-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.ug-notice-box {
  position: relative; width: min(420px, 100%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 22px 20px; text-align: center;
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  transform: translateY(8px); transition: transform .18s ease;
}
.ug-notice.is-open .ug-notice-box { transform: none; }
.ug-notice-title { display: block; font-size: 1.05rem; margin-bottom: 8px; }
.ug-notice-msg { color: var(--muted); margin: 0 0 18px; line-height: 1.5; font-size: .93rem; }
.ug-notice-ok { width: 100%; min-height: 44px; }

/* Saved-recipe naming modal. This deliberately matches the app instead of
   exposing the browser's generic security prompt. */
.ug-recipe-name-dialog {
  position: fixed; inset: 0; z-index: 170;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.ug-recipe-name-dialog.is-open { opacity: 1; }
.ug-recipe-name-dialog[hidden] { display: none; }
.ug-recipe-name-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.64); }
.ug-recipe-name-box {
  position: relative; width: min(440px, 100%); padding: 24px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  box-shadow: 0 28px 75px rgba(0,0,0,.48); transform: translateY(9px) scale(.98);
  transition: transform .18s ease;
}
.ug-recipe-name-dialog.is-open .ug-recipe-name-box { transform: none; }
.ug-recipe-name-box > strong { display: block; font-size: 1.12rem; }
.ug-recipe-name-box > p { margin: 7px 0 18px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.ug-recipe-name-box label { display: block; margin-bottom: 7px; font-size: .8rem; font-weight: 850; color: var(--muted); }
.ug-recipe-name-box input {
  width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 11px; color: var(--text); background: var(--surface2); font: inherit;
}
.ug-recipe-name-box input:focus { outline: none; border-color: rgba(255,45,85,.75); box-shadow: 0 0 0 3px rgba(255,45,85,.13); }
.ug-recipe-name-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.ug-recipe-name-actions button { min-height: 42px; padding: 0 15px; }

/* Saved-recipe delete confirmation: same native product modal, never the
   browser's generic confirm sheet. */
.ug-recipe-delete-dialog {
  position: fixed; inset: 0; z-index: 170;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.ug-recipe-delete-dialog.is-open { opacity: 1; }
.ug-recipe-delete-dialog[hidden] { display: none; }
.ug-recipe-delete-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.64); }
.ug-recipe-delete-box {
  position: relative; width: min(430px, 100%); padding: 24px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  box-shadow: 0 28px 75px rgba(0,0,0,.48); transform: translateY(9px) scale(.98);
  transition: transform .18s ease;
}
.ug-recipe-delete-dialog.is-open .ug-recipe-delete-box { transform: none; }
.ug-recipe-delete-box > strong { display: block; font-size: 1.12rem; }
.ug-recipe-delete-copy { margin: 7px 0 18px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.ug-recipe-delete-actions { display: flex; gap: 10px; justify-content: flex-end; }
.ug-recipe-delete-actions button { min-height: 42px; padding: 0 15px; }
.ug-recipe-delete-confirm { background: var(--accent); border-color: var(--accent); color: #fff; }
.ug-recipe-delete-confirm:hover { filter: brightness(1.06); }

/* ===== "Working on your photo" preview =============================
   Shown in the result panel on BOTH landing pages while a job runs.
   The uploaded photo, heavily pixelated and slowly resolving, under a
   scanning sweep, with a bar that fills towards the expected wait. */
/* a centred column in the panel rather than a stretched grid item: as a
   stretched item it grew to the full panel height and dragged the sweep with
   it, so the red band kept travelling well below the photo */
.ug-preview {
  align-self: center; justify-self: center;
  width: min(360px, 100%);
}
.ug-preview[hidden] { display: none; }
/* the sweep is positioned against THIS box, so it stops at the photo's
   bottom edge no matter how tall the panel is */
.ug-preview-media {
  position: relative; line-height: 0;
  border-radius: 14px; overflow: hidden;
}
.ug-preview canvas {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;          /* keep the blocks crisp */
  background: var(--surface2, #18181d);
}
.ug-preview-scan {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.ug-preview-scan::before {
  content: ""; position: absolute; left: 0; right: 0; height: 38%;
  background: linear-gradient(180deg, transparent,
              rgba(255,255,255,.16) 45%, rgba(255,45,85,.20) 55%, transparent);
  animation: ug-scan 1.9s ease-in-out infinite;
}
@keyframes ug-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(320%); }
}
.ug-preview-label {
  margin: 12px 0 8px; text-align: center;
  font-size: .9rem; font-weight: 600; color: var(--muted);
}
.ug-preview-label b { color: var(--text); }
/* the bar genuinely fills; width is set from elapsed time in site.js */
.ug-preview-bar {
  width: 100%; height: 9px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
}
html[data-theme="light"] .ug-preview-bar { background: rgba(17,19,26,.08); }
.ug-preview-bar span {
  display: block; width: 2%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 18px rgba(255,45,85,.42);
  transition: width .3s linear;
}

/* ===== Results: download + save reminder =========================== */
/* .ug-result, not .result-card: that was the marquee's class, and its rules
   (opacity: 0 pending a .loaded flag, object-fit: cover, a fixed 156x224 on
   mobile) applied to generated results too, which is why the finished image
   came out cropped and then invisible. The marquee is gone now, but the name
   stays distinct.
   Plain block, NOT flex: as a flex column the image link became a flex item
   and got compressed (a 200x300 photo rendered 155x171). The picture must keep
   its natural aspect exactly as it did before the button existed. */
.ug-result { display: block; }
.ug-result > a:first-child { display: block; }
.ug-result > a:first-child img {
  width: 100%; height: auto; display: block;
  opacity: 1; transform: none; object-fit: fill;
}
.result-download {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px;
  min-height: 44px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface2, #18181d); border: 1px solid var(--border);
  color: var(--text); font-weight: 700; font-size: .88rem; text-decoration: none;
}
.result-download:hover { border-color: var(--accent2); }
.result-download i, .result-download svg { width: 17px; height: 17px; }
.result-save-note {
  grid-column: 1 / -1; margin: 4px 0 0; text-align: center;
  font-size: .84rem; line-height: 1.45; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .ug-preview-scan::before { animation: none; }
  .ug-preview-bar span { transition: none; }
}

/* ===== "Example of result": before / after ==========================
   Replaced the sliding marquee: one comparison a visitor can actually study
   beats a strip nobody can pause. */
.ex-wrap { padding: 28px 0 8px; }
#ex-mount {
  /* The example is hydrated after the critical landing content. Reserving its
     final footprint keeps the sections below it from jumping when it arrives. */
  min-height: 700px;
}
.ex-kicker {
  text-align: center; margin: 0 0 12px;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.ex-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 880px; margin: 0 auto;
}
.ex-pane {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface2);
  aspect-ratio: 3 / 4;      /* both halves share a frame so they line up */
}
.ex-pane img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .35s ease;
}
.ex-pane img.is-in { opacity: 1; }
.ex-tag {
  position: absolute; left: 10px; top: 10px;
  padding: 5px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  background: rgba(9, 9, 12, .72);
}
.ex-tag-after { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.ex-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: 16px;
}
.ex-actions .btn { min-height: 46px; }
.ex-more {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
}
.ex-more:hover { border-color: var(--accent2); }
@media (max-width: 520px) {
  #ex-mount { min-height: 430px; }
  .ex-wrap { padding: 20px 0 4px; }
  .ex-card { gap: 8px; }
  .ex-actions { flex-direction: column; }
  .ex-actions .btn { width: 100%; }
  .ex-tag { left: 8px; top: 8px; font-size: .64rem; padding: 4px 8px; }
}
@media (min-width: 521px) and (max-width: 980px) {
  #ex-mount { min-height: 610px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-pane img { transition: none; }
}

/* ===== Result carousel =============================================
   A batch used to render as small side-by-side thumbnails. Every image now
   takes the full frame and the user pages through them: native snap
   scrolling for swipes, arrows for the desktop. */
.ug-gallery { position: relative; }
.ug-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* deliberately NOT scroll-behavior: smooth. Where the compositor is not
     animating, a smooth scroll never lands and the arrows do nothing at all.
     Swiping stays smooth either way: that is the browser's own gesture. */
  /* no gap: each card is exactly one track width, which keeps scrollLeft an
     exact multiple of it, so the arrows and the counter cannot drift */
  gap: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ug-track::-webkit-scrollbar { display: none; }
.ug-result { flex: 0 0 100%; scroll-snap-align: start; }
.ug-nav {
  position: absolute; top: calc(50% - 26px); transform: translateY(-50%);
  z-index: 2; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  color: #fff; background: rgba(9, 9, 12, .62);
  border: 1px solid rgba(255, 255, 255, .2);
}
.ug-nav:hover:not(:disabled) { background: rgba(9, 9, 12, .82); }
.ug-nav:disabled { opacity: .25; cursor: default; }
.ug-nav svg, .ug-nav i { width: 20px; height: 20px; }
.ug-nav-prev { left: 8px; }
.ug-nav-next { right: 8px; }
.ug-count {
  margin: 8px 0 0; text-align: center;
  font-size: .82rem; font-weight: 700; color: var(--muted);
}
@media (max-width: 520px) {
  .ug-nav { width: 36px; height: 36px; }
  .ug-nav-prev { left: 6px; }
  .ug-nav-next { right: 6px; }
}

/* the pitch column's link down to the before/after example */
.ex-peek-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 14px; min-height: 48px; padding: 10px 16px;
  border-radius: 14px; cursor: pointer; text-align: left;
  color: var(--text); font-weight: 700; font-size: .92rem;
  background: linear-gradient(135deg, rgba(255,45,85,.14), rgba(42,171,238,.10));
  border: 1px solid var(--border);
}
.ex-peek-btn:hover { border-color: var(--accent2); }
.ex-peek-btn span { flex: 1; }
.ex-peek-btn svg, .ex-peek-btn i { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.ex-peek-btn svg:last-child { color: var(--muted); }
.ex-note {
  max-width: 640px; margin: 14px auto 0; text-align: center;
  font-size: .82rem; line-height: 1.5; color: var(--muted);
}

/* .section sets display, so the UA's [hidden] rule needs the help */
.section[hidden] { display: none; }

/* a slow gloss travelling across the link, so it reads as something to press */
.ex-peek-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,.13) 45%, rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.13) 55%, transparent 70%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: ex-gloss 3.2s ease-in-out infinite;
}
html[data-theme="light"] .ex-peek-btn::after {
  background-image: linear-gradient(105deg,
    transparent 30%, rgba(255,45,85,.10) 45%, rgba(255,45,85,.20) 50%,
    rgba(255,45,85,.10) 55%, transparent 70%);
}
@keyframes ex-gloss {          /* left to right, then a beat before repeating */
  0%        { background-position: -60% 0; }
  55%, 100% { background-position: 150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-peek-btn::after { animation: none; opacity: 0; }
}

/* Compact internal-discovery block. It uses ordinary crawlable links and sits
   below the generator, preserving the landing page's primary action. */
.discovery-section { padding-top: 18px; }
.discovery-intro {
  max-width: 690px; margin: -18px auto 26px; text-align: center;
  color: var(--muted); line-height: 1.65;
}
.discovery-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px;
}
.discovery-grid a {
  min-width: 0; padding: 19px; border: 1px solid var(--border); border-radius: 17px;
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.discovery-grid a:hover { transform: translateY(-2px); border-color: rgba(255,45,85,.55); }
.discovery-grid svg { width: 21px; height: 21px; margin-bottom: 11px; color: var(--accent2); }
.discovery-grid strong { display: block; margin-bottom: 6px; font-size: .98rem; }
.discovery-grid span { display: block; color: var(--muted); font-size: .86rem; line-height: 1.48; }
.discovery-all { margin: 22px 0 0; text-align: center; }
.discovery-all a { color: var(--accent2); font-weight: 850; text-decoration: none; }
@media (max-width: 850px) { .discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .discovery-grid { grid-template-columns: 1fr; }
  .discovery-intro { margin-top: -12px; }
}