/* ============================================================
   TG Ads UA — landing styles
   Mobile-first. Desktop = centered mobile container.
   ============================================================ */

:root{
  /* color */
  --bg:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#eef4fb;
  --ink:#0f1620;
  --ink-2:#3c4653;
  --muted:#697586;
  --line:#e5e9ef;
  --line-2:#d7dee7;
  --tg:#2aabee;
  --tg-600:#1e96d4;
  --tg-700:#1a86bf;
  --tg-tint:#e8f5fd;
  --tg-tint-2:#d6ecfb;
  --good:#0ea472;
  --good-tint:#e3f6ee;
  --warn:#f0a017;
  --price:#0f1620;

  /* radius */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:26px;
  --r-pill:999px;

  /* shadow */
  --sh-sm:0 1px 2px rgba(16,24,40,.05);
  --sh-md:0 6px 18px rgba(16,24,40,.07);
  --sh-lg:0 14px 40px rgba(16,24,40,.12);
  --sh-tg:0 8px 22px rgba(42,171,238,.30);

  /* layout */
  --pad:18px;
  --maxw:468px;

  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,p,ul,ol{margin:0}
h1,h2,h3{overflow-wrap:break-word}
ul{list-style:none;padding:0}

/* desktop: center a mobile container on a soft canvas */
.shell{
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--bg);
  min-height:100vh;
}
@media(min-width:520px){
  body{background:#e9edf3;background-image:radial-gradient(circle at 50% 0,#eef3f9,#e4e9f0)}
  .shell{
    box-shadow:0 0 0 1px rgba(16,24,40,.05),0 30px 80px rgba(16,24,40,.14);
    min-height:auto;
    margin:24px auto;
    border-radius:28px;
    overflow:hidden;
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;
  border:0;border-radius:var(--r-md);
  font-weight:700;font-size:15px;line-height:1;
  letter-spacing:-.01em;
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn--primary{background:var(--tg);color:#fff;box-shadow:var(--sh-tg)}
.btn--primary:hover{background:var(--tg-600)}
.btn--tg{background:var(--surface);color:var(--tg-700);border:1.5px solid var(--tg-tint-2)}
.btn--tg:hover{background:var(--tg-tint)}
.btn--block{width:100%}
.btn--sm{min-height:42px;padding:0 16px;font-size:14px}
.btn--lg{min-height:54px;font-size:16px}
.btn__ico{flex:0 0 auto}

.btn__spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.is-loading{pointer-events:none;opacity:.85}
.btn.is-loading .btn__spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- sections ---------- */
.section{padding:34px var(--pad);scroll-margin-top:14px}
.section__title{
  font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
}
.section__lead{color:var(--muted);margin-top:8px;font-size:15px}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:14px var(--pad) 30px;
  background:
    radial-gradient(120% 90% at 85% -10%,var(--tg-tint) 0,rgba(232,245,253,0) 60%),
    linear-gradient(180deg,#ffffff 0,#f7fafd 100%);
  border-bottom:1px solid var(--line);
}
.hero__brand{display:flex;align-items:center;gap:9px;padding:6px 0 20px}
.brand__mark{
  width:32px;height:32px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--tg),var(--tg-600));
  box-shadow:var(--sh-tg);
}
.brand__name{font-weight:800;font-size:15px;letter-spacing:-.01em}
.brand__tg{margin-left:auto;font-size:13px;font-weight:700;color:var(--tg-700);background:var(--tg-tint);padding:6px 11px;border-radius:var(--r-pill)}

.hero__eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tg-700);
  background:var(--tg-tint);padding:6px 12px;border-radius:var(--r-pill);
}
.hero__title{
  margin-top:16px;
  font-size:clamp(30px,8.5vw,38px);
  font-weight:800;line-height:1.06;letter-spacing:-.03em;
}
.hero__sub{margin-top:14px;color:var(--ink-2);font-size:16px;line-height:1.5;max-width:36ch}

.pricepill{
  display:inline-flex;align-items:baseline;gap:6px;margin-top:20px;
  background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:var(--r-pill);
  box-shadow:var(--sh-md);
}
.pricepill__from{font-size:13px;font-weight:600;opacity:.7}
.pricepill__val{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#7fd0f7}
.pricepill__unit{font-size:13px;font-weight:600;opacity:.7}

.hero__ticks{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.hero__ticks li{position:relative;padding-left:28px;font-size:15px;font-weight:600;color:var(--ink-2)}
.hero__ticks li::before{
  content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--good-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230ea472' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

.hero__cta{margin-top:24px;display:flex;flex-direction:column;gap:10px}

/* hero decorative chat */
.hero__art{margin-top:26px}
.chat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px;box-shadow:var(--sh-md);display:flex;flex-direction:column;gap:9px;
}
.chat__row{display:flex;align-items:center;gap:10px}
.chat__city{
  flex:0 0 auto;width:58px;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;color:var(--tg-700);
}
.chat__bubble{
  flex:1;background:var(--surface-2);border-radius:12px 12px 12px 4px;
  padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.chat__bubble--pin{background:var(--good-tint);color:#0b7a55}

/* ============ BENEFITS ============ */
.benefits{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 14px;box-shadow:var(--sh-sm);
}
.bcard__ico{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--tg-tint);color:var(--tg-700);margin-bottom:12px;
}
.bcard h3{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.bcard p{margin-top:7px;font-size:13px;color:var(--muted);line-height:1.45}

/* ============ TABS / PRICING ============ */
.tabs{
  display:flex;gap:4px;margin-top:18px;padding:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--sh-sm);position:sticky;top:8px;z-index:20;
}
.tab{
  flex:1;min-height:44px;border:0;background:transparent;border-radius:var(--r-pill);
  font-size:15px;font-weight:700;color:var(--muted);letter-spacing:-.01em;
  transition:color .15s,background .15s;
}
.tab.is-active{background:var(--tg);color:#fff;box-shadow:var(--sh-tg)}

/* month discount note */
.monthnote{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-md);
  background:linear-gradient(135deg,#fff7e8,#fdecc8);
  border:1px solid #f3dca3;
  display:flex;flex-direction:column;gap:4px;
}
.monthnote__title{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:#7a4d06}
.monthnote__text{font-size:13px;color:#8a5c14;line-height:1.45}
.monthnote__cta{
  margin-top:8px;align-self:flex-start;font-size:13px;font-weight:700;color:#7a4d06;
  text-decoration:underline;text-underline-offset:2px;
}

.panel{margin-top:16px;display:flex;flex-direction:column;gap:12px}

/* channel handles as tappable links to t.me */
.pcard__link,.panel__link{
  color:var(--tg-700);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-position:0 100%;background-repeat:no-repeat;background-size:100% 1px;
  padding-bottom:1px;
}
.pcard__link:hover,.panel__link:hover{color:var(--tg-600)}
.pcard__link{display:inline-flex;align-items:center;min-height:28px}
.panel__link{font-weight:700;display:inline-block;padding:2px 0}
.panel.is-hidden{display:none}
.panel__note{font-size:13px;color:var(--muted);font-weight:600;line-height:1.4;padding:0 2px}
.panel__note--muted{margin-top:2px;padding:12px 14px;background:var(--surface-2);border-radius:var(--r-md)}

/* pricing card */
.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px;box-shadow:var(--sh-sm);
}
.pcard__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.pcard__name{font-size:16px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}
.pcard__flag{font-size:11px;font-weight:800;color:var(--good);background:var(--good-tint);padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap}
.pcard__desc{font-size:13.5px;color:var(--muted);margin-bottom:12px;line-height:1.4}

.tiers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.tier{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:60px;padding:9px 4px;
  background:var(--surface-2);border:1.5px solid transparent;border-radius:var(--r-sm);
  transition:border-color .12s,background .12s,transform .1s;
}
.tier:hover{background:var(--tg-tint)}
.tier__freq{font-size:12px;font-weight:700;color:var(--muted)}
.tier__price{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.tier.is-selected{border-color:var(--tg);background:var(--tg-tint);box-shadow:var(--sh-tg)}
.tier.is-selected .tier__price{color:var(--tg-700)}

/* package card */
.pcard--pkg .pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard__price{font-size:22px;font-weight:800;letter-spacing:-.02em}

/* promo */
.promo{
  position:relative;border-radius:var(--r-lg);padding:18px 16px 16px;
  background:linear-gradient(160deg,#0f2a1f 0,#0b3b2a 100%);color:#fff;
  box-shadow:var(--sh-md);overflow:hidden;
}
.promo::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(14,164,114,.35);filter:blur(10px)}
.promo>*{position:relative;z-index:1}
.promo__badge{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:var(--good);color:#04150e;padding:5px 11px;border-radius:var(--r-pill);
}
.promo__title{margin-top:12px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.promo__desc{margin-top:6px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.45}
.promo__foot{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.promo__price{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#7ff0c3}
.promo--alt{background:linear-gradient(160deg,#0b2740 0,#124061 100%)}
.promo--alt::after{background:rgba(42,171,238,.4)}
.promo--alt .promo__badge{background:var(--tg);color:#04202f}
.promo--alt .promo__price{color:#8fd8fb}

/* upsell */
.upsell{
  border:1.5px dashed var(--line-2);border-radius:var(--r-md);padding:16px 14px;background:var(--surface);
}
.upsell__tag{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--warn)}
.upsell__title{margin-top:8px;font-size:16px;font-weight:800}
.upsell__desc{margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.45}

/* ============ STEPS ============ */
.steps{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;box-shadow:var(--sh-sm)}
.step__num{flex:0 0 auto;font-size:15px;font-weight:800;color:var(--tg-700);background:var(--tg-tint);width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.step h3{font-size:15px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.step p{margin-top:5px;font-size:13.5px;color:var(--muted);line-height:1.45}

/* ============ CALLOUT ============ */
.callout{
  background:linear-gradient(160deg,#ffffff 0,var(--tg-tint) 130%);
  border:1px solid var(--tg-tint-2);border-radius:var(--r-lg);
  padding:22px 18px;box-shadow:var(--sh-sm);text-align:center;
}
.callout__title{font-size:20px;font-weight:800;letter-spacing:-.02em}
.callout__text{margin:8px 0 16px;font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* ============ FORM ============ */
.formwrap{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:22px 18px;box-shadow:var(--sh-md);
}
.choice{
  margin-top:16px;display:flex;align-items:center;gap:12px;
  background:var(--tg-tint);border:1px solid var(--tg-tint-2);border-radius:var(--r-md);
  padding:12px 14px;
}
.choice.is-empty{background:var(--surface-2);border-color:var(--line)}
.choice__label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--tg-700);margin-bottom:3px}
.choice.is-empty .choice__label{color:var(--muted)}
.choice__val{font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.choice.is-empty .choice__val{font-weight:600;color:var(--muted)}
.choice__body{min-width:0}
.choice__change{
  margin-left:auto;flex:0 0 auto;border:0;background:var(--surface);color:var(--tg-700);
  font-size:13px;font-weight:700;min-height:40px;padding:0 14px;border-radius:var(--r-pill);box-shadow:var(--sh-sm);
}

.lead{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--ink-2)}
.field input,.field select{
  width:100%;min-height:50px;padding:0 14px;
  font-size:16px;font-family:inherit;font-weight:600;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-md);
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697586' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;
}
.field input:focus,.field select:focus{outline:0;border-color:var(--tg);box-shadow:0 0 0 3px var(--tg-tint)}
.field.is-invalid input,.field.is-invalid select{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.12)}
.err{font-size:12px;font-weight:600;color:#e5484d;min-height:0}
.err:empty{display:none}
.err--agree{margin-top:-6px}

.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.4}
.agree input{flex:0 0 auto;width:20px;height:20px;margin-top:1px;accent-color:var(--tg)}
.agree a{color:var(--tg-700);font-weight:700;text-decoration:underline}

.lead__hint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:-2px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formstate{border-radius:var(--r-md);padding:16px;text-align:center}
.formstate strong{display:block;font-size:16px;font-weight:800}
.formstate p{margin:6px 0 12px;font-size:13.5px}
.formstate--ok{background:var(--good-tint);color:#0b6b4c}
.formstate--err{background:#fdecec;color:#b4232a}
.formstate--err p{margin-bottom:0}

/* ============ FAQ ============ */
.faq{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm);overflow:hidden}
.acc summary{
  list-style:none;cursor:pointer;padding:15px 44px 15px 15px;position:relative;
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:16px;top:50%;width:11px;height:11px;
  border-right:2.2px solid var(--muted);border-bottom:2.2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.acc[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc__body{padding:0 15px 15px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ============ FOOTER ============ */
.foot{padding:28px var(--pad) calc(96px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--line);background:var(--surface)}
.foot__line{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.foot__tg{display:inline-block;margin:10px 0;font-size:14px;font-weight:800;color:var(--tg-700)}
.foot__link{display:block;font-size:13px;color:var(--muted);text-decoration:underline}
.foot__copy{margin-top:12px;font-size:12px;color:var(--muted)}

/* ============ STICKY BAR ============ */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:9px;
  max-width:var(--maxw);margin:0 auto;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .28s ease;
  pointer-events:none;
}
.sticky.is-visible{transform:translateY(0);pointer-events:auto}
.sticky__lead{flex:1}
.sticky__tg{flex:0 0 auto;padding:0 18px}

/* ============ MODALS (popup + privacy) ============ */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal__overlay{position:absolute;inset:0;background:rgba(15,22,32,.55);backdrop-filter:blur(2px);animation:fade .2s ease}
.modal__card{
  position:relative;z-index:1;width:100%;max-width:var(--maxw);
  max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface);border-radius:var(--r-xl);
  padding:24px 20px 22px;box-shadow:var(--sh-lg);
  animation:pop .22s cubic-bezier(.2,.8,.3,1);
}
.modal__card--doc{max-width:var(--maxw)}
.modal__x{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--surface-2);color:var(--muted);font-size:24px;line-height:1;display:grid;place-items:center;
}
.modal__title{font-size:20px;font-weight:800;letter-spacing:-.02em;padding-right:32px;line-height:1.2}
.modal__sub{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.45}
.lead--compact{margin-top:14px;gap:11px}
.popup__err{color:#e5484d;font-size:13px;font-weight:600;text-align:center;margin:0}
.popup__ok{text-align:center}
.popup__ok strong{display:block;font-size:16px;font-weight:800;color:#0b6b4c;margin-bottom:14px}

.doc{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.doc p{font-size:13.5px;color:var(--ink-2);line-height:1.55}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

body.no-scroll{overflow:hidden}

/* ============ tiny screens ============ */
@media(max-width:340px){
  :root{--pad:14px}
  .hero__title{font-size:27px}
  .tab{font-size:14px}
  .tier{min-height:58px;padding:8px 2px}
  .tier__price{font-size:14px}
  .tier__freq{font-size:11px}
  .benefits{gap:10px}
  .bcard{padding:14px 12px}
  .sticky__lead,.sticky__tg{font-size:14px}
  .sticky__tg{padding:0 14px}
}

/* ============ a11y motion ============ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .sticky{transition:none}
}