/* Base */
:root{
  --bg1:#0f1020; --bg2:#182642; --card:#0f1424cc; --accent:#7c5cff; --accent2:#00d4ff;
  --text:#e6e8ee; --muted:#9aa4b2; --success:#16c79a; --ring:#9f8cff55;
}
*{box-sizing:border-box}
html,body{height:100%}
html{ font-size: clamp(14px, 0.95vw + 10px, 16px) }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  line-height:1.55;
  text-rendering:optimizeLegibility;
  background: radial-gradient(1200px 600px at 10% 10%, #1c2750 0%, transparent 60%),
              radial-gradient(1000px 500px at 90% 20%, #142038 0%, transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

/* Prevent long strings from breaking layout */
*{ min-width:0 }
p, h1, h2, h3, .price-cost, .profile-meta, .auth-msg{ overflow-wrap:anywhere; word-break:break-word }
a{ overflow-wrap:anywhere; word-break:break-word }

/* Better readability */
.card{ color:var(--text) }
.price-title, .header h1, .header h2{ text-shadow: 0 2px 18px rgba(0,0,0,.45) }

/* Falling snow canvas */
.snow-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:40;
}

/* Page loader */
.page-loader{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); backdrop-filter:saturate(140%) blur(10px) }
.page-loader[aria-hidden="true"]{ display:none }
.page-loader-card{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 18px; border-radius:16px; border:1px solid #ffffff14; background:#0b1222cc; box-shadow:0 20px 70px rgba(0,0,0,.6) }
.page-loader-text{ font-weight:800; color:#e6e8ee; letter-spacing:.2px }
.spinner{ width:34px; height:34px; border-radius:999px; border:3px solid #ffffff22; border-top-color: var(--accent2); border-right-color: var(--accent); animation: spin 0.85s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

h1,h2,h3{ line-height:1.15 }
p{ line-height:1.6 }

.container{ max-width:1240px }
.container{ padding-top:96px }
.header p{ max-width: 68ch; margin-left:auto; margin-right:auto; font-size: clamp(14px, 0.6vw + 12px, 18px) }

/* Only hero needs strict centering + nicer wrapping */
.header.hero{ display:flex; flex-direction:column; align-items:center }
.header.hero p{ text-align:center; text-wrap: pretty; width:100% }
.header.hero h1{ text-wrap: balance }

.top-widgets{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:70; display:flex; gap:12px; align-items:center; justify-content:space-between; width:min(980px, calc(100vw - 32px)); }
.top-header-left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.lang{ position:relative; z-index:70 }
.lang-btn{
  appearance:none; border:1px solid #ffffff1a; background:#0f1424b8; color:var(--text);
  padding:10px 12px; border-radius:12px; font-weight:800; cursor:pointer;
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 10px 24px #0007, inset 0 1px 0 #ffffff12;
  transition:transform .12s ease, border-color .2s ease, background .2s ease;
}
.lang-btn-accent{ background:linear-gradient(135deg, #ff7a45, #ff3d6a); border-color:transparent; box-shadow:0 12px 26px #0008, inset 0 1px 0 #ffffff22 }
.lang-btn-accent:hover{ border-color:transparent }
.lang-btn:hover{ transform:translateY(-1px); border-color:#ffffff2a; background:#0f1424dd }
.lang-btn:active{ transform:translateY(0) scale(.99) }

.lang-menu{
  position:absolute; right:0; top:46px; min-width:120px;
  border:1px solid #ffffff1a; background:#0f1424b8; border-radius:14px; padding:8px;
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 16px 34px #0009, inset 0 1px 0 #ffffff10;
  opacity:0; transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.lang-menu.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }
.lang-item{
  width:100%; display:flex; justify-content:center; align-items:center;
  appearance:none; border:1px solid transparent; background:#1b2238; color:#fff;
  padding:10px 10px; border-radius:12px; font-weight:800; cursor:pointer;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.lang-item + .lang-item{ margin-top:8px }
.lang-item:hover{ transform:translateY(-1px); background:#242c46; border-color:#ffffff14 }
.lang-item:active{ transform:translateY(0) scale(.99) }

@keyframes floaty{
  0%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(10px,-14px,0) scale(1.03) }
  100%{ transform:translate3d(0,0,0) scale(1) }
}

@keyframes floaty2{
  0%{ transform:translate3d(0,0,0) scale(1) }
  50%{ transform:translate3d(-14px,10px,0) scale(1.04) }
  100%{ transform:translate3d(0,0,0) scale(1) }
}

/* Background orbs */
.bg::before,.bg::after{
  content:""; position:fixed; inset:auto; width:28rem; height:28rem; filter:blur(80px); z-index:0;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 60%);
  animation: floaty 9s ease-in-out infinite;
}
.bg::after{ right:-6rem; bottom:-6rem; background: radial-gradient(circle at 70% 70%, var(--accent2) 0%, transparent 60%); animation: floaty2 11s ease-in-out infinite }

.container{ position:relative; z-index:1; margin:0 auto; padding:72px 24px 40px }
.header{ text-align:center; margin-bottom:34px }
.header h1{ margin:0 0 10px; font-size:clamp(28px,3.8vw,46px); letter-spacing:-0.02em }
.header p{ margin:0; color:var(--muted) }

.section{ margin-top:22px }
.section + .section{ margin-top:20px }

.hero{
  padding:28px;
}

.card{
  backdrop-filter:saturate(140%) blur(14px); background:var(--card); border:1px solid #ffffff14; border-radius:18px;
  padding:22px; box-shadow:0 10px 30px #0008, inset 0 1px 0 #ffffff18;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Disable snow caps (was too heavy) */
.card::before, .card::after, .price-card::before, .price-card::after{ display:none }

.card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 40px #0009, inset 0 1px 0 #ffffff18;
  border-color:#ffffff22;
}

.field-group{ margin-bottom:14px }
.field-group label{ display:block; margin-bottom:8px; color:var(--muted); font-weight:600 }
.field{ display:flex; gap:10px; align-items:center }
.field input{ flex:1; padding:14px 14px; border-radius:12px; border:1px solid #ffffff1a; background:#0b1222; color:var(--text);
  outline:none; box-shadow: inset 0 0 0 1px transparent; transition:box-shadow .2s, border-color .2s }
.field input:focus{ border-color:var(--ring); box-shadow:0 0 0 6px var(--ring) }

.remember-row{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-weight:700;
  user-select:none;
}

.remember-row input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color: var(--accent);
}

.tg-popup{
  position:fixed;
  right:18px;
  bottom:18px;
  width:min(360px, calc(100vw - 36px));
  z-index:90;
  border:1px solid #ffffff1a;
  background:#0f1424e6;
  border-radius:16px;
  padding:14px;
  backdrop-filter:saturate(140%) blur(12px);
  box-shadow:0 16px 36px #0009, inset 0 1px 0 #ffffff10;
  opacity:0;
  transform:translateY(18px);
  pointer-events:none;
  transition:opacity .24s ease, transform .28s ease;
}

.tg-popup.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.tg-popup-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.tg-popup-title{
  font-weight:900;
  color:var(--text);
}

.tg-popup-text{
  margin-top:6px;
  color:var(--muted);
  font-weight:700;
}

.tg-popup-close{
  appearance:none;
  border:1px solid #ffffff1a;
  background:#0f1424b8;
  color:var(--text);
  border-radius:10px;
  width:30px;
  height:30px;
  cursor:pointer;
}

.tg-popup-actions{ display:flex; gap:10px; margin-top:12px }

.corner-tree{
  position:fixed;
  left:14px;
  bottom:14px;
  width:170px;
  max-width:42vw;
  height:auto;
  z-index:60;
  pointer-events:none;
  user-select:none;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
}

.actions{ display:flex; gap:8px }
.btn{ appearance:none; border:none; border-radius:12px; padding:12px 14px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  color:#fff; background:#2b3247; transition:transform .12s ease, background .2s, box-shadow .2s, filter .2s }
.btn:hover{ transform:translateY(-2px); filter:saturate(1.1) }
.btn:active{ transform:translateY(-1px) scale(.99) }
.btn.primary:hover{ box-shadow:0 10px 26px #0008 }
.btn.success:hover{ box-shadow:0 10px 26px #0008 }
.btn.primary{ background:linear-gradient(135deg, var(--accent), #5a8fff) }
.btn.ghost{ background:#1b2238 }
.btn.success{ background:linear-gradient(135deg, var(--success), #22e1b9) }

.btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none }

/* Disabled download */
.btn[aria-disabled="true"], .btn.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:saturate(.6);
  pointer-events:none;
}

/* Auth */
.auth-card{ border:1px solid #ffffff12; background:#0b1222aa; border-radius:14px; padding:14px }
.auth-card .field-group{ margin-bottom:12px }
.auth-card .field input{ padding:12px 12px }
.auth-card .actions{ gap:10px }
.auth-card .btn{ padding:10px 12px }
.auth-msg{ margin-top:10px; color:#fca5a5; font-weight:600; min-height:18px }
.captcha-row{ margin:10px 0 8px }
.captcha-row .cf-turnstile{ display:flex; justify-content:flex-start }

.profile-title{ text-align:center; font-weight:900; font-size:18px; margin:6px 0 14px }
.profile-grid{ display:flex; flex-direction:column; gap:10px }
.profile-item{ display:grid; grid-template-columns: 140px 1fr; gap:10px; align-items:center }
.profile-label{ background:linear-gradient(135deg, var(--accent), #5a8fff); border-radius:8px; padding:8px 10px; font-weight:800; font-size:12px; color:#fff }
.profile-value{ background:#121828; border:1px solid #ffffff14; border-radius:8px; padding:8px 10px; font-weight:700; color:#cbd5e1 }
.profile-item .profile-value{ box-shadow: inset 0 1px 0 #ffffff0a }
.profile-item{ min-width:0 }
.profile-label,.profile-value{ overflow-wrap:anywhere; word-break:break-word }

@media (max-width: 520px){
  .profile-item{ grid-template-columns: 1fr; }
  .profile-label{ justify-self:stretch }
}
.profile-row{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap }
.profile-name{ font-weight:800; font-size:16px }
.profile-meta{ color:var(--muted); margin-top:6px; font-weight:700 }

/* Fullscreen modal */
.modal{ position:fixed; inset:0; z-index:80; display:none }
.modal.is-open{ display:block }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55) }
.modal-card{ position:absolute; left:14px; right:14px; top:72px; bottom:14px; margin:0; padding:18px }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
.modal-title{ font-weight:900; font-size:16px }
.modal-x{ padding:8px 10px }
.modal-body{ display:grid; grid-template-columns:1fr; gap:12px; overflow:auto; max-height:calc(100% - 44px) }

@media (max-width: 520px){
  .modal-card{ left:12px; right:12px; top:56px; bottom:12px; padding:14px }
}

hr{ border:none; height:1px; background:#ffffff14; margin:16px 0 }

.grid-2{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px }
@media (max-width: 820px){ .grid-2{ grid-template-columns:1fr } }

.options{ display:flex; flex-direction:column; gap:12px; padding:10px 12px; border:1px solid #ffffff12; border-radius:14px; background:#0b1222aa }
.option{ display:flex; flex-direction:column; gap:8px }
.option.cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; align-items:center }
.option label{ display:flex; gap:8px; align-items:center; color:#cbd5e1 }

.save{ display:flex; justify-content:flex-end; margin-top:10px }
.footer{ text-align:center; margin-top:16px; color:var(--muted); font-size:14px }
.footer{ font-size: clamp(12px, 0.4vw + 11px, 14px) }

/* Pricing */
.pricing{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px }
.price-card{ border:1px solid #ffffff12; background:#0b1222aa; border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.price-title{ font-weight:700 }
.price-cost{ color:#cbd5e1; margin-top:-4px }
.price-btn{ width:100%; justify-content:center }
@media (max-width: 820px){ .pricing{ grid-template-columns:1fr !important } }

@media (max-width: 520px){
  .top-widgets{ left:50%; transform:translateX(-50%); top:12px; width:calc(100vw - 24px); justify-content:space-between }
  .container{ padding-left:14px; padding-right:14px }
  .header-actions{ gap:10px }
  .corner-tree{ left:8px; bottom:8px; width:120px; opacity:.98 }
}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .bg::before,.bg::after{ animation:none !important }
  .card,.btn,.reveal{ transition:none !important }
  .reveal{ opacity:1 !important; transform:none !important }
  .snow-canvas{ display:none !important }
}

/* Mobile */
@media (max-width: 820px){
  .container{ padding:44px 16px 28px }
  .hero{ padding:18px }
  .header{ margin-bottom:22px }
  .header h1{ font-size:clamp(26px,8vw,38px) }
}

@media (max-width: 520px){
  .container{ padding:36px 14px 22px }
  .card{ padding:16px }
  .price-card{ padding:14px }
  .btn{ width:100%; padding:13px 14px }
  .actions{ width:100% }
  .header-actions{ width:100% }
  .header-actions .btn{ width:100% }
  .pricing{ gap:10px }
  hr{ margin:14px 0 }
}

@media (max-width: 420px){
  .bg::before,.bg::after{ width:20rem; height:20rem; filter:blur(70px) }
  .section{ margin-top:16px }
  .section + .section{ margin-top:14px }
}

/* Touch devices: не дёргать карточки/кнопки */
@media (hover: none){
  .card:hover{ transform:none }
  .btn:hover{ transform:none }
}