/* შაბლონი „სარეკლამო“ — ერთგვერდიანი ლენდინგი ერთი მოქმედებისთვის.
   კარგია: პროდუქტი, აქცია, ღონისძიება, გაწევრიანება, სასწავლო კურსი.

   ★ ოთხი გადაწყვეტილება:
     1. **ცენტრირებული სექციები.** ლენდინგზე თვალი შუაში ეშვება; მარცხენა
        სწორება კატალოგისთვისაა, სადაც ბევრ ბლოკს ადარებ.
     2. **ჰერო ორ სვეტად** — ტექსტი მარცხნივ, სურათი მარჯვნივ ოდნავ დახრილ
        „ეკრანად“. ეს არის ის ერთი ადგილი, სადაც `.hero-bg` ფონი აღარაა.
     3. **ჩარჩოს ნაცვლად ჩრდილი.** ჩარჩოებიანი ბარათები გვერდს ბადედ ხატავს;
        რბილი ჩრდილი მათ ერთმანეთისგან აშორებს ხაზების დამატების გარეშე.
     4. **ერთი ღილაკი დომინირებს.** თავსართში CTA აბი, ჰეროში დიდი ღილაკი,
        ტარიფებში გამორჩეული ბარათი — სამივე ერთსა და იმავე ადგილას გზავნის.

   ⚠️ მარკაპი ყველა შაბლონისთვის საერთოა (იხ. CLAUDE.md) — აქ მხოლოდ სხვაობაა. */

.tpl-promo{--wrap:1140px}
.tpl-promo h1,.tpl-promo h2{letter-spacing:-.025em;text-wrap:balance}
.tpl-promo h1{font-size:clamp(2.2rem,5.6vw,3.9rem);line-height:1.06;font-weight:800}
.tpl-promo h2{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:800}
.tpl-promo .section{padding:clamp(3.5rem,8vw,6.5rem) 0}

/* --- თავსართი ------------------------------------------------------------ */
.tpl-promo .site-head{background:color-mix(in srgb,var(--header) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);box-shadow:none}
body.scrolled .tpl-promo .site-head,.tpl-promo body.scrolled .site-head{box-shadow:0 8px 30px rgba(0,0,0,.28)}
.tpl-promo .site-nav a{font-size:.94rem;opacity:.82}
.tpl-promo .site-nav .btn{border-radius:999px;box-shadow:0 8px 20px -8px var(--primary)}
.tpl-promo .btn{border-radius:999px;padding:.85rem 1.8rem;font-weight:700}
.tpl-promo .btn-ghost{border-radius:999px}

/* --- ჰერო: ტექსტი + „ეკრანი“ --------------------------------------------- */
.tpl-promo .hero{padding:clamp(3.5rem,8vw,6rem) 0 clamp(3rem,7vw,5rem);
  background:
    radial-gradient(1100px 520px at 8% -20%, color-mix(in srgb,var(--primary) 55%,transparent), transparent 62%),
    radial-gradient(760px 420px at 96% 10%, color-mix(in srgb,var(--primary) 26%,transparent), transparent 64%),
    var(--accent)}
.tpl-promo .hero h1{max-width:15ch}
.tpl-promo .hero .lead{max-width:44ch;font-size:1.13rem}
.tpl-promo .hero .btn{background:#fff;color:var(--accent);box-shadow:0 16px 40px -14px rgba(0,0,0,.6)}
.tpl-promo .hero .btn:hover{filter:none;background:#f1f5ff}

/* ★ `.hero-bg` აქ ფონი აღარაა — ის მარჯვენა სვეტის „ეკრანია“.
   ⚠️ საბაზისო წესი `inset:0` + `img{height:100%}`-ია; ორივე უნდა გაუქმდეს,
      თორემ სურათი ან იჭიმება, ან სიმაღლეს კარგავს. */
/* ⚠️⚠️ ტექსტის სვეტს **`width`-ით არ ვიწროვებ**: `.hero-inner` თავად `.wrap`-ია
   და `width:54%` ჰერო-ს (მთელი ეკრანის) 54%-ს ნიშნავს და არა კონტეინერის —
   1440px-ზე ეს 777px გამოდის და სათაური სურათს **ადებოდა**. სწორია შიგთავსის
   შეზღუდვა, კონტეინერის კი არა. */
@media (min-width:1100px){
  /* ⚠️⚠️ `overflow:visible` **აქ არ შეიძლება**: „ეკრანი“ მარჯვნივ -4%-ით
     გადმოდის და გვერდს ჰორიზონტალურ სკროლს უჩენდა (1440px-ზე 1492px —
     გაზომილია). ბაზისური `overflow:hidden` რჩება; სურათი ეკრანის კიდეზე
     იჭრება, რაც ისედაც სასურველი შედეგია. */
  .tpl-promo .hero{position:relative}
  .tpl-promo .hero.has-bg .hero-inner > *{max-width:min(46%,520px)}
  .tpl-promo .hero.has-bg h1{font-size:clamp(2.1rem,3.3vw,3.15rem)}
  .tpl-promo .hero.has-bg .hero-bg{opacity:1;inset:auto -4% auto 52%;width:52%;height:auto;
    border-radius:16px;overflow:hidden;top:50%;transform:translateY(-50%) perspective(1400px) rotateY(-7deg);
    box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1)}
  .tpl-promo .hero.has-bg .hero-bg img{height:auto;object-fit:contain}
}
@media (max-width:1099px){
  .tpl-promo .hero.has-bg .hero-bg{position:static;opacity:1;margin-top:2rem;
    border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
  .tpl-promo .hero.has-bg .hero-bg img{height:auto}
  /* ⚠️ სტატიკურ ნაკადში ის სათაურამდე დგება (მარკაპში პირველია) — `order`
     ცხადად აბრუნებს რიგს, თორემ გვერდი სურათით დაიწყებოდა. */
  .tpl-promo .hero.has-bg{display:flex;flex-direction:column}
  .tpl-promo .hero.has-bg .hero-inner{order:1}
  .tpl-promo .hero.has-bg .hero-bg{order:2}
}

/* --- ცენტრირებული სექციები ----------------------------------------------- */
.tpl-promo .section > .wrap > h2,
.tpl-promo .section > .wrap > .lead{text-align:center;margin-inline:auto}
.tpl-promo .section > .wrap > .lead{max-width:56ch}
.tpl-promo .section.alt{background:color-mix(in srgb,var(--primary) 5%,var(--bg))}
/* ⚠️ „ტექსტის“ სექციის სათაური `.wrap > div > h2`-ია და ზემოთა წესს **არ
   ემთხვევა**; თანაც 1140px-იან სვეტში ხაზი 120 სიმბოლოს აღწევს, რაც
   საკითხავად ორჯერ მეტია. ორივე აქ სწორდება. */
.tpl-promo .text-section > .wrap:not(.two-col){max-width:70ch}
.tpl-promo .text-section > .wrap:not(.two-col) h2{text-align:center}

/* --- ბარათები: ჩრდილი ჩარჩოს ნაცვლად ------------------------------------- */
.tpl-promo .card,.tpl-promo .plan{border:0;border-radius:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 12px 28px -18px rgba(15,23,42,.45)}
.tpl-promo .card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -22px rgba(15,23,42,.5)}
.tpl-promo .feature{padding:1.5rem 1.4rem;border-radius:18px;background:var(--bg);
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 26px -20px rgba(15,23,42,.5);
  transition:transform .2s ease,box-shadow .2s ease}
.tpl-promo .feature:hover{transform:translateY(-3px);box-shadow:0 20px 44px -22px rgba(15,23,42,.5)}

/* იკონი — რბილი გრადიენტის კვადრატი ნათებით */
.tpl-promo .ico-badge{width:50px;height:50px;border-radius:14px;color:#fff;
  background:linear-gradient(140deg,var(--primary),color-mix(in srgb,var(--primary) 55%,#000));
  box-shadow:0 10px 22px -10px var(--primary)}
.tpl-promo .ico-badge .ico{width:25px;height:25px}
.tpl-promo .card:hover .ico-badge,.tpl-promo .feature:hover .ico-badge{transform:translateY(-3px) scale(1.04)}

/* --- ციფრები ------------------------------------------------------------- */
.tpl-promo .stats{background:color-mix(in srgb,var(--primary) 6%,var(--bg));
  padding:clamp(2.2rem,5vw,3.2rem) 0}
.tpl-promo .stat-value{font-weight:800;letter-spacing:-.03em}
.tpl-promo .stat-label{font-size:.9rem;max-width:22ch;margin-inline:auto}

/* --- ნაბიჯები ------------------------------------------------------------ */
.tpl-promo .step-dot{background:linear-gradient(140deg,var(--primary),
  color-mix(in srgb,var(--primary) 55%,#000));color:#fff;
  box-shadow:0 10px 22px -12px var(--primary)}
.tpl-promo .step-dot:not(:empty)::after{background:var(--accent)}

/* --- ტარიფები ------------------------------------------------------------ */
.tpl-promo .plan{padding:2rem 1.6rem 1.7rem}
.tpl-promo .plan-amount{letter-spacing:-.04em}
/* ★ გამორჩეული ბარათი **ოდნავ დიდია** და არა მხოლოდ ფერადი: ზომა თვალს
   უფრო სწრაფად იჭერს, ვიდრე კონტური. */
@media (min-width:901px){
  .tpl-promo .plan.is-featured{transform:scale(1.045);z-index:1}
  .tpl-promo .plan.is-featured:hover{transform:scale(1.045) translateY(-3px)}
}
.tpl-promo .plan.is-featured{background:var(--bg);border:0;
  box-shadow:0 0 0 2px var(--primary),0 30px 60px -30px color-mix(in srgb,var(--primary) 85%,transparent)}
.tpl-promo .plan-badge{inset-inline-start:50%;transform:translateX(-50%);white-space:nowrap}

/* --- FAQ და მოწოდება ------------------------------------------------------ */
.tpl-promo .faq-item{border:0;margin-bottom:.6rem;border-radius:14px;
  background:color-mix(in srgb,var(--text) 4%,var(--bg))}
.tpl-promo .faq-item summary{padding:1rem 1.1rem;font-weight:700}
.tpl-promo .faq-item .rich{padding:0 1.1rem 1rem}
.tpl-promo .cta{background:linear-gradient(120deg,var(--accent),
  color-mix(in srgb,var(--primary) 70%,var(--accent)))}
.tpl-promo .cta-inner{text-align:center;flex-direction:column}
.tpl-promo .cta .btn{background:#fff;color:var(--accent)}

/* --- ქვესართი ------------------------------------------------------------- */
.tpl-promo .site-foot{margin-top:0}
.tpl-promo .foot-name{font-size:1.2rem}
.tpl-promo .reveal{transform:translateY(20px)}