/* my.oop.ge — საჯარო საიტების საბაზისო სტილი.
   ერთი ფაილი ყველა მოიჯარისთვის; განსხვავება ორ რამეშია:
   `:root`-ის ცვლადები (შაბლონი ბეჭდავს, `themeVars()`) და
   შაბლონის ფურცელი (`/assets/tpl-<key>.css`), რომელიც ამის შემდეგ ჯდება.

   ⚠️ ძველი საიტები `cdn.tailwindcss.com`-ს რთავდნენ — ბრაუზერში მომუშავე
      კომპილატორს. ეს ფაილი ~11 KB-ია და ქეშდება.

   ★ **ფონტი ლოკალურია.** აქამდე `font-family`-ში ეწერა „Noto Sans Georgian“,
     მაგრამ ფაილი არსად იტვირთებოდა: ვისაც ის სისტემაში არ ჰქონდა (Windows-ის
     უმეტესობა), Segoe UI-ს ხედავდა — ე.ი. დიზაინი ბრაუზერის მიხედვით იცვლებოდა.
     ★ `unicode-range` ქართულსა და ლათინურს ყოფს: ქართულ გვერდზე ლათინური
       ქვესიმრავლე **საერთოდ არ ჩამოიტვირთება**.
     ★ `font-display: swap` — ტექსტი მაშინვე ჩანს სისტემურ ფონტში და ფონტის
       ჩამოსვლისას ნაცვლდება; `block` ცარიელ ეკრანს აჩვენებდა.
*/

@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/sans-ka-400.woff2') format('woff2');
  unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F;}
@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/sans-lat-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/sans-ka-600.woff2') format('woff2');
  unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F;}
@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/sans-lat-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/sans-ka-700.woff2') format('woff2');
  unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F;}
@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/sans-lat-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/serif-ka-400.woff2') format('woff2');
  unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F;}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/serif-lat-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/serif-ka-600.woff2') format('woff2');
  unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F;}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/serif-lat-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/serif-ka-700.woff2') format('woff2');
  unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F;}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/serif-lat-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* ★ ორი ცვლადი: ტანი და სათაურები. შაბლონი მხოლოდ მათ ცვლის და
   მთელი ტიპოგრაფია ერთად გადაეწყობა. */
:root{
  --font-body:'Noto Sans Georgian','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-head:var(--font-body);
  --wrap:1180px;
}
body{margin:0;background:var(--bg);color:var(--text);
     font-family:var(--font-body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.25rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.muted{color:color-mix(in srgb,var(--text) 55%,transparent)}
.lead{font-size:1.1rem;color:color-mix(in srgb,var(--text) 72%,transparent);max-width:60ch}

.wrap{width:min(var(--wrap),100% - 2rem);margin-inline:auto}
.wrap.narrow{width:min(760px,100% - 2rem)}
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section.alt{background:color-mix(in srgb,var(--text) 4%,var(--bg))}

/* ღილაკები */
.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;
     padding:.8rem 1.6rem;border-radius:var(--radius);font-weight:600;border:0;cursor:pointer;
     transition:filter .15s ease,transform .15s ease}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.45rem 1rem;font-size:.95rem}
.btn-light{background:#fff;color:var(--accent)}
.link{color:var(--primary);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* თავსართი */
.site-head{position:sticky;top:0;z-index:50;background:var(--header);color:#fff;
           box-shadow:0 1px 0 rgba(255,255,255,.08)}
.head-inner{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-weight:700}
.brand-logo{max-height:40px;width:auto}
.brand-name{font-size:1.1rem}
.site-nav{margin-inline-start:auto;display:flex;align-items:center;gap:1.25rem}
.site-nav a{text-decoration:none;font-size:.97rem;opacity:.9}
.site-nav a:hover{opacity:1}
.lang{display:flex;gap:.4rem;font-size:.85rem;opacity:.8}
.lang a.on{font-weight:700;opacity:1;text-decoration:underline}
.nav-burger{display:none}

/* ჰერო */
.hero{position:relative;padding:clamp(4rem,10vw,7.5rem) 0;background:var(--accent);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:.35}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-inner{position:relative}
.hero h1{max-width:18ch}
.hero .lead{color:rgba(255,255,255,.85)}
.hero .btn{margin-top:1rem}

/* ბადეები და ბარათები */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.card{background:var(--bg);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
      border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
      transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:0 12px 30px rgba(0,0,0,.09);transform:translateY(-2px)}
.card-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-body{padding:1.1rem 1.2rem 1.3rem}
.card h3{margin-bottom:.35rem}
.card h3 a{text-decoration:none}
.card p{font-size:.96rem;color:color-mix(in srgb,var(--text) 68%,transparent)}
.rounded{border-radius:var(--radius)}

.chip{display:inline-block;font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;
      background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);margin-bottom:.5rem}
.chip-planned{background:color-mix(in srgb,#64748b 16%,transparent);color:#475569}
.chip-ongoing{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#b45309}

/* ციფრები */
.stats .stat{text-align:center}
.stat-value{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:var(--primary);line-height:1.1}
.stat-label{color:color-mix(in srgb,var(--text) 62%,transparent);font-size:.95rem}

/* FAQ */
.faq-item{border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent);padding:.35rem 0}
.faq-item summary{cursor:pointer;padding:.85rem 0;font-weight:600;list-style:none;
                  display:flex;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--primary);font-weight:700}
.faq-item[open] summary::after{content:"−"}
.faq-item .rich{padding-bottom:.9rem;color:color-mix(in srgb,var(--text) 72%,transparent)}

/* გალერეა */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin:1.5rem 0}
.gallery img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}

/* --- იკონები ------------------------------------------------------------ */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex:none}
/* სერვისის იკონი ფერად „ბალიშზე“ */
.ico-badge{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--radius);margin-bottom:.8rem;
  background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);
  transition:background .2s ease,color .2s ease,transform .2s ease}
.ico-badge .ico{width:26px;height:26px}
.card:hover .ico-badge{background:var(--primary);color:#fff;transform:translateY(-2px)}
.contact-list .ico{color:var(--primary);margin-inline-end:.5rem;width:1.15em;height:1.15em}
.foot-social a{display:inline-flex;align-items:center;gap:.4rem}
.link .ico{width:.95em;height:.95em;transition:transform .2s ease}
.link:hover .ico{transform:translateX(3px)}

/* ბარათი ფოტოს გარეშე */
.card-ph{aspect-ratio:4/3;display:grid;place-items:center;font-size:2.2rem;
  color:color-mix(in srgb,var(--primary) 55%,transparent);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--primary) 14%,transparent),
    color-mix(in srgb,var(--text) 6%,transparent))}

/* --- ანიმაციები ---------------------------------------------------------- */
/* ★ ელემენტი მარკაპში **ხილულია**; `reveal` კლასს JS ამატებს — ე.ი. JS-ის
   გარეშე (ბოტი, ძველი ბრაუზერი) გვერდი სრულად ჩანს. */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms),
             transform .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}

.card-img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card a:hover .card-img,.card:hover .card-img{transform:scale(1.04)}
.card a{display:block;overflow:hidden}
.gallery a{overflow:hidden;border-radius:var(--radius);display:block}
.gallery img{transition:transform .45s ease}
.gallery a:hover img{transform:scale(1.06)}

/* თავსართი გადაფურცვლისას */
.site-head{transition:box-shadow .25s ease,background-color .25s ease}
body.scrolled .site-head{box-shadow:0 6px 24px rgba(0,0,0,.18)}

/* ჰერო — ფოტოს გარეშეც არ უნდა იყოს ცარიელი მართკუთხედი */
.hero:not(.has-bg){background:
  radial-gradient(900px 420px at 12% -10%, color-mix(in srgb,var(--primary) 42%,transparent), transparent 60%),
  radial-gradient(700px 380px at 92% 8%, color-mix(in srgb,var(--primary) 22%,transparent), transparent 62%),
  var(--accent)}
.hero-inner>*{animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both}
.hero-inner>*:nth-child(2){animation-delay:.09s}
.hero-inner>*:nth-child(3){animation-delay:.18s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* სიახლეები */
.card time{display:block;font-size:.82rem;margin-bottom:.25rem}
.news-more{list-style:none;padding:0;margin:1rem 0 0}
.news-more li{padding:.6rem 0;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.news-more time{font-size:.8rem;display:block}
.news-more a{color:var(--primary);text-decoration:none;font-weight:600}
.news-more a:hover{text-decoration:underline}
.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.d-block{display:block}

/* ვიდეო */
.video-player{width:100%;height:auto;display:block;border-radius:var(--radius);
              background:#000;aspect-ratio:16/9;object-fit:contain}

/* მოწოდება */
.cta{background:var(--primary);color:#fff}
.cta h2{margin:0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

/* --- უპირატესობები ------------------------------------------------------- */
.feature h3{margin-bottom:.3rem}
.feature p{margin:0;font-size:.96rem;color:color-mix(in srgb,var(--text) 68%,transparent)}
.feature .ico-badge{margin-bottom:.7rem}
.feature:hover .ico-badge{background:var(--primary);color:#fff;transform:translateY(-2px)}

/* --- ნაბიჯები ------------------------------------------------------------ */
.step-list{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:1.4rem}
.step{counter-increment:step;display:flex;gap:1.1rem;align-items:flex-start}
.step-dot{flex:none;width:54px;height:54px;border-radius:999px;display:grid;place-items:center;
  position:relative;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.step-dot .ico{width:25px;height:25px}
/* ★ იკონი არჩეულია → ნომერი პატარა ნიშნადაა კუთხეში;
   ★ იკონი არ არის → ნომერი თავად ავსებს წრეს. */
.step-dot:not(:empty)::after{content:counter(step);position:absolute;inset-inline-end:-5px;top:-5px;
  width:23px;height:23px;border-radius:999px;background:var(--primary);color:#fff;
  font-size:.75rem;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px var(--bg)}
.step-dot:empty::before{content:counter(step);font-size:1.4rem;font-weight:800}
.step-body h3{margin-bottom:.25rem}
.step-body p{margin:0;color:color-mix(in srgb,var(--text) 68%,transparent);font-size:.96rem}
@media (min-width:901px){
  /* ორ სვეტად — ოთხი ნაბიჯი ერთ ეკრანზე ჯდება */
  .step-list{grid-template-columns:1fr 1fr;gap:1.6rem 2.5rem}
}

/* --- ტარიფები ------------------------------------------------------------ */
.plans{align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--bg);
  border:1px solid color-mix(in srgb,var(--text) 13%,transparent);border-radius:var(--radius);
  padding:1.7rem 1.4rem 1.5rem;transition:box-shadow .2s ease,transform .2s ease}
.plan:hover{box-shadow:0 14px 34px rgba(0,0,0,.08);transform:translateY(-2px)}
.plan-badge{position:absolute;top:-.75rem;inset-inline-start:1.3rem;background:var(--primary);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:.22rem .7rem;border-radius:999px}
.plan-name{font-weight:700;color:var(--primary)}
.plan-price{display:flex;align-items:baseline;gap:.35rem;margin:.15rem 0 .35rem;flex-wrap:wrap}
.plan-amount{font-size:clamp(2rem,4vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.plan-period{font-size:.9rem;color:color-mix(in srgb,var(--text) 58%,transparent)}
.plan-summary{font-size:.95rem;margin:0 0 .9rem;color:color-mix(in srgb,var(--text) 68%,transparent)}
.plan-feats{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.5rem;font-size:.95rem}
.plan-feats li{display:flex;gap:.55rem;align-items:flex-start}
.plan-feats .ico{flex:none;width:1.05em;height:1.05em;margin-top:.3em;color:var(--primary)}
/* ★ `margin-top:auto` — სხვადასხვა სიგრძის სიის შემთხვევაშიც ღილაკები
   ერთ ხაზზე დგება; თორემ ბარათები „კიბესავით“ გამოიყურებოდა. */
.plan-cta{margin-top:auto;text-align:center}
.btn-ghost{background:transparent;color:var(--primary);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--primary) 42%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);filter:none}
.plan.is-featured{border-color:var(--primary);
  box-shadow:0 20px 45px -20px color-mix(in srgb,var(--primary) 70%,transparent)}
.pricing-note{margin:1.6rem 0 0;text-align:center;font-size:.9rem}

/* ფორმა */
.form{display:grid;gap:.85rem}
.form label{display:grid;gap:.3rem;font-size:.9rem;font-weight:600}
.form input,.form textarea{font:inherit;padding:.7rem .85rem;border-radius:var(--radius);
    border:1px solid color-mix(in srgb,var(--text) 22%,transparent);background:var(--bg);color:var(--text)}
.form input:focus,.form textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.notice{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);
        padding:.8rem 1rem;border-radius:var(--radius);font-weight:600}
.contact-list{list-style:none;padding:0;display:grid;gap:.5rem}
.contact-list a{text-decoration:none;font-weight:600}
.map{margin-top:2rem}

/* დეტალი */
.detail .back{display:inline-block;margin-bottom:1rem;font-size:.95rem}
.detail .meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.detail-cover{margin:1.5rem 0}
.rich>:first-child{margin-top:0}
.rich ul,.rich ol{padding-inline-start:1.3rem}
.rich a{color:var(--primary)}
.rich blockquote{margin:1.2em 0;padding-inline-start:1rem;
                 border-inline-start:3px solid var(--primary);color:color-mix(in srgb,var(--text) 70%,transparent)}

/* ქვესართი */
.site-foot{background:var(--footer);color:#fff;padding:2.5rem 0 1.5rem;margin-top:2rem}
.foot-inner{display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap}
.foot-name{font-weight:700;font-size:1.05rem}
.site-foot .muted{color:rgba(255,255,255,.62)}
.foot-contact,.foot-social{display:grid;gap:.35rem}
.site-foot a{text-decoration:none;color:rgba(255,255,255,.88)}
.site-foot a:hover{color:#fff}
.copy{margin-top:1.75rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14);
      font-size:.85rem;color:rgba(255,255,255,.6)}

/* პრევიუს ზოლი */
.preview-bar{background:#f59e0b;color:#3b2500;text-align:center;font-weight:700;
             padding:.5rem 1rem;font-size:.9rem}

@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  /* მობილური მენიუ — CSS-ით, JS-ის გარეშე (checkbox + label) */
  .nav-burger{display:block;margin-inline-start:auto;width:28px;height:22px;position:relative;cursor:pointer}
  .nav-burger span,.nav-burger::before,.nav-burger::after{content:"";position:absolute;left:0;right:0;
      height:2px;background:#fff;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
  .nav-burger::before{top:0}.nav-burger span{top:10px}.nav-burger::after{bottom:0}
  .site-nav{position:fixed;inset:68px 0 auto;background:var(--header);flex-direction:column;
            align-items:flex-start;gap:0;padding:0 1rem;max-height:0;overflow:hidden;
            transition:max-height .25s ease;margin:0}
  .site-nav a{padding:.85rem 0;width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-toggle:checked ~ .site-nav{max-height:70vh;overflow:auto;padding-bottom:1rem}
  .nav-toggle:checked ~ .nav-burger span{opacity:0}
  .nav-toggle:checked ~ .nav-burger::before{top:10px;transform:rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger::after{bottom:10px;transform:rotate(-45deg)}
  .lang{padding:.85rem 0}
  .cta-inner{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  /* ⚠️⚠️ **`.reveal`-ს ცალკე დაბრუნება სჭირდება.** მხოლოდ ხანგრძლივობის
     განულება ელემენტს `opacity:0`-ზე დატოვებდა, თუ JS-მა `is-in` ვერ
     დაამატა (მაგ. IntersectionObserver-ის გარეშე) — ე.ი. „მოძრაობის
     გამორთვა“ შიგთავსის გაქრობად იქცეოდა. */
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    animation-delay:0ms !important;transition-delay:0ms !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* --- არჩევითი დეტალები (2026-10-20) ---------------------------------------
   ★ ყველა წესი **ახალ კლასზეა** (`.topbar`, `.hero-card`, `.font-bpg`…) — ის
     მარკაპში მხოლოდ მაშინ ჩნდება, როცა შესაბამისი ველი შევსებულია. ე.ი.
     არსებული საიტების იერსახე უცვლელია. */

/* BPG 110 (თემის `font: bpg`) — ლოკალური, CSP-ის `font-src 'self'`.
   ★ `@font-face` ფაილს **მხოლოდ გამოყენებისას** ითხოვს — სხვა საიტებს ის
     არ ჩამოეტვირთება. თავად ფონტს ერთი წონა აქვს; მსხვილს ბრაუზერი ხატავს. */
@font-face{font-family:'BPG 110';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/bpg-110.woff2') format('woff2')}
@font-face{font-family:'BPG 110 Caps';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/bpg-110-caps.woff2') format('woff2')}
body.font-bpg{--font-body:'BPG 110','Noto Sans Georgian',system-ui,sans-serif;--font-head:var(--font-body)}

/* ზედა ზოლი კონტაქტებით (თემის `topbar`) */
.topbar{background:var(--header);color:#fff;font-size:.85rem}
.topbar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1.2rem;padding:.45rem 0}
.tb-left,.tb-right{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.1rem}
.topbar span,.topbar a{display:inline-flex;align-items:center;gap:.45rem}
.topbar a{text-decoration:none;color:rgba(255,255,255,.92)}
.topbar a:hover{color:#fff}
.tb-addr{color:rgba(255,255,255,.85)}

/* ჰერო: წარწერა, გამოყოფილი სიტყვა, პუნქტები, მეორე ღილაკი, ციფრები */
.hero .hl{color:var(--primary)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;line-height:1.4;
  padding:.4rem .95rem;border-radius:999px;background:rgba(255,255,255,.12);margin:0 0 1.1rem}
.hero-eyebrow::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:999px;background:var(--primary)}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 .5rem;font-size:.9rem}
.hero-points li{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .8rem;border-radius:999px;
  background:rgba(255,255,255,.1)}
.hero-points li::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:999px;background:var(--primary)}
.hero .btn-2{margin-inline-start:.6rem;color:#fff;background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.8rem;max-width:36rem;margin-top:2rem}
.hero-fact{padding:.9rem 1rem;border-radius:var(--radius);background:rgba(255,255,255,.08)}
.hero-fact b{display:block;font-size:1.5rem;line-height:1.2}
.hero-fact span{display:block;font-size:.8rem;opacity:.85}
.hero-note{font-size:.8rem;opacity:.8;margin:.8rem 0 0}

/* ჰეროს გვერდითი ბარათი — შევსებულზე ბანერი ორ სვეტადაა */
.hero.has-card .hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero-card{background:var(--bg);color:var(--text);border-radius:calc(var(--radius) + 8px);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.hero-card-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;
  border-bottom:1px solid color-mix(in srgb,var(--primary) 60%,transparent);font-size:.9rem}
.hero-card-title{display:inline-flex;align-items:center;gap:.6rem;font-weight:600}
.hero-card-title::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:999px;background:var(--primary)}
.hero-card-cap{font-size:.8rem;text-align:end;color:color-mix(in srgb,var(--text) 65%,transparent)}
.hero-card-body{padding:1.25rem}
.hero-card-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.hero-card-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:1.1rem}
.hero-card-item h3{display:flex;align-items:center;gap:.45rem;font-size:.95rem;margin:0 0 .3rem}
.hero-card-item h3 .ico{color:var(--primary)}
.hero-card-item p{margin:0;font-size:.88rem;color:color-mix(in srgb,var(--text) 70%,transparent)}
@media (max-width:900px){.hero.has-card .hero-inner{grid-template-columns:minmax(0,1fr)}}

/* ღილაკი სექციის სათაურის გვერდით (სერვისები) */
.wrap:has(>.section-cta){position:relative}
.section-cta{position:absolute;top:0;inset-inline-end:0}
@media (max-width:640px){.section-cta{position:static;display:block;text-align:center;margin:0 0 1.5rem}}

/* მოწოდების წარწერა, სამუშაო საათები, სოციალური ქსელები კონტაქტში */
.cta-eyebrow{display:inline-block;font-size:.78rem;padding:.2rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.15);margin-bottom:.7rem}
.contact-social{display:flex;gap:.6rem;margin-top:1rem}
.contact-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--text) 15%,transparent);color:var(--text);background:var(--bg)}
.contact-social a:hover{color:var(--primary)}

/* --- მენიუდან (საიტის მოდული, sections/menu.php) ------------------------------ */
/* ★ ბარათი `.card`/`.card-img`/`.card-ph`-ია — ხუთივე შაბლონი მას თავისებურად ხატავს;
     აქ მხოლოდ ის, რაც კერძს სჭირდება: ფასი სათაურის გვერდით, ორხაზიანი აღწერა, „გათავდა“. */
.menu-card .menu-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.menu-media{position:relative;overflow:hidden}
.menu-emoji{font-size:3.2rem;line-height:1}
.menu-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.3rem}
.card .menu-head h3{margin:0;font-size:1.08rem;min-width:0;overflow-wrap:anywhere}
.menu-price{flex:none;font-weight:700;color:var(--primary);white-space:nowrap}
.card p.menu-descr{margin:0;font-size:.93rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.menu-badge{position:absolute;top:.6rem;inset-inline-start:.6rem;background:rgba(15,23,42,.84);color:#fff;
  font-size:.75rem;font-weight:700;padding:.2rem .65rem;border-radius:999px}
.menu-card.is-out .card-img,.menu-card.is-out .menu-emoji{filter:grayscale(1);opacity:.55}
.menu-card.is-out .menu-price{color:color-mix(in srgb,var(--text) 50%,transparent)}
.menu-cta{margin-top:2.75rem;text-align:center}  /* ★ promo/bold შუა სვეტს ქვემოთ წევს — 2rem იქ ღილაკს ეკვროდა */
.menu-cta .btn{display:inline-flex;align-items:center;gap:.5rem}
/* ★ ტელეფონზე — მენიუს სტრიქონი (მინიატურა + ტექსტი): 4:3 ბარათი 6 კერძზე ექვს ეკრანს ჭამდა. */
@media (max-width:640px){
  .menu-grid{gap:.75rem}
  .menu-card .menu-link{flex-direction:row;align-items:stretch}
  .menu-card .menu-media{flex:none;width:108px;border-radius:0;margin:0}
  .menu-card .menu-media .card-img,.menu-card .menu-media .card-ph{aspect-ratio:auto;height:100%;min-height:108px;
    margin:0;border-radius:0}
  .menu-emoji{font-size:2.3rem}
  .menu-card .menu-link .menu-body{padding:.75rem .9rem;min-width:0;flex:1}
  .card .menu-head h3{font-size:1rem}
  .menu-badge{top:.4rem;inset-inline-start:.4rem;font-size:.66rem;padding:.12rem .45rem}
}

/* --- „[შეავსეთ]“ მარკერი (AI-ის ოსტატი, PLAN-ai-onboarding A7) -----------------
   ★ ჩნდება **მხოლოდ** პრევიუსა და პანელში (`<mark class="ph-fill">`) — საჯარო
     გვერდზე სერვერი მას არ ბეჭდავს. ფერი ფიქსირებულია და არა თემის: ის
     კლიენტს ეუბნება „აქ შენი ტექსტი აკლია“ და ნებისმიერ ფონზე უნდა გამოჩნდეს.
   ★ კონტრასტი: #713f12 #fef3c7-ზე ≈ 8.6:1; წყვეტილი კონტური — ბეჭდვაზეც ჩანს. */
mark.ph-fill{background:#fef3c7;color:#713f12;border-radius:4px;padding:0 .3em;
  outline:1.5px dashed #d97706;outline-offset:1px;font-weight:600;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* --- ტაბლეტი: ნავიგაცია ერთ ხაზზე (2026-10-23) -------------------------------
   ⚠️ 641–900px-ზე ბურგერი ჯერ არ ჩანს, სრული მენიუ (6 ბმული + ენა + ტელეფონი)
     კი 660px-ზე ~100px-ით გადმოდიოდა — გვერდს ჰორიზონტალური სკროლი უჩნდებოდა
     (classic/bold/promo, გაზომილია). ვიწროვდება ჰარი და შრიფტი; ყველაზე
     ვიწროზე ტელეფონის ღილაკი იმალება — ის კონტაქტსა და ქვესართშიც არის. */
@media (min-width:641px) and (max-width:900px){
  .site-nav{gap:.7rem}
  .site-nav a{font-size:.86rem}
  .site-nav .btn-sm{padding:.4rem .75rem;font-size:.85rem}
}
@media (min-width:641px) and (max-width:780px){
  .site-nav .btn-sm{display:none}
}
/* შაბლონი „კომპაქტური“ — „ბენტო“: გვერდი ფილებისგან.
   კარგია: კაფე, მაღაზია, კატალოგი, ბევრი სერვისი — ბევრი შიგთავსი ერთ ეკრანზე.

   ★ სამი გადაწყვეტილება (2026-10-23):
     1. **ყოველი სექცია ცალკე მომრგვალებული ფილაა** შეფერილ ფონზე — გვერდი
        ერთ გრძელ ფურცლად კი არა, დალაგებულ დაფად იკითხება;
     2. **თავსართიც ფილაა** — კიდეებს მოშორებული, მცურავი;
     3. **უპირატესობები მოზაიკაა** — პირველი ფილა ორმაგია და მუქი, ე.ი.
        მთავარი არგუმენტი თავისით გამოირჩევა (რაოდენობას CSS ითვლის).

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

.tpl-compact{--wrap:1120px;font-size:16px;
  --gap:clamp(.45rem,1.1vw,.8rem);
  --panel-r:calc(var(--radius) * 1.4 + 10px);
  --tile:color-mix(in srgb,var(--text) 4.5%,var(--bg));
  /* ★ ფართო ეკრანზე ფილები 1400px-ზე ჩერდება — 1920px-ზე კიდიდან კიდემდე
       გაჭიმული „დაფა“ ფილებად აღარ იკითხებოდა. */
  --side:max(var(--gap),calc((100% - 1400px) / 2));
  background:color-mix(in srgb,var(--text) 6%,var(--bg))}
.tpl-compact h1{font-size:clamp(2.25rem,6vw,4rem);letter-spacing:-.035em;line-height:1.04}
.tpl-compact h2{font-size:clamp(1.4rem,2.6vw,1.95rem);letter-spacing:-.025em}
.tpl-compact .lead{font-size:1rem}
.tpl-compact .grid{gap:var(--gap)}

/* --- ფილები ---------------------------------------------------------------
   ★ `main > .section` — მხოლოდ მთავარი გვერდის სექციები; დეტალის გვერდიც
     `.section`-ია და იგივე ფილას იღებს. */
.tpl-compact main > section,
.tpl-compact main > article{margin:var(--gap) var(--side) 0;border-radius:var(--panel-r);
  background:var(--bg);overflow:hidden}
.tpl-compact .section{padding:clamp(2rem,4.5vw,3.4rem) 0}
.tpl-compact .section.alt{background:color-mix(in srgb,var(--primary) 7%,var(--bg))}
.tpl-compact .section > .wrap > h2{display:flex;align-items:center;gap:.6rem}
/* პატარა ფერადი წერტილი სათაურის წინ — ბენტოს „იარლიყი“ */
.tpl-compact .section > .wrap > h2::before{content:"";flex:none;width:.5em;height:.5em;
  border-radius:calc(var(--radius) / 2 + 2px);background:var(--primary)}

/* --- თავსართი: მცურავი ფილა --------------------------------------------- */
.tpl-compact .site-head{margin:var(--gap) var(--side) 0;top:var(--gap);border-radius:var(--panel-r);
  background:color-mix(in srgb,var(--header) 94%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.tpl-compact .head-inner{min-height:58px;width:min(var(--wrap),100% - 2.4rem)}
.tpl-compact .site-nav .btn{border-radius:999px}
.tpl-compact .topbar + .site-head{margin-top:var(--gap)}

/* --- ჰერო ----------------------------------------------------------------- */
.tpl-compact .hero{margin:var(--gap) var(--side) 0;border-radius:var(--panel-r);
  padding:clamp(3rem,8vw,6rem) 0}
.tpl-compact .hero.has-bg .hero-bg{opacity:1}
/* ★ ფარდა ნებისმიერ ფოტოზე (მათ შორის ღია, სტოკის): ჰეროს ფერით შეფერილი
     მუქი გრადიენტი, ტექსტის მხარეს ≥ .82 — თეთრი ტექსტი ყოველთვის ≥ 4.5:1.
     ვიწრო ეკრანზე ტექსტი მთელ სიგანეზეა → ფარდაც თანაბარია. */
.tpl-compact .hero.has-bg .hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    color-mix(in srgb,color-mix(in srgb,var(--accent) 55%,#000) 88%,transparent) 0%,
    color-mix(in srgb,color-mix(in srgb,var(--accent) 55%,#000) 62%,transparent) 55%,
    color-mix(in srgb,color-mix(in srgb,var(--accent) 55%,#000) 15%,transparent) 100%)}
.tpl-compact .hero.has-bg .hero-inner{text-shadow:0 1px 20px rgba(0,0,0,.35)}
@media (max-width:900px){
  .tpl-compact .hero.has-bg .hero-bg::after{
    background:color-mix(in srgb,color-mix(in srgb,var(--accent) 55%,#000) 74%,transparent)}
}
.tpl-compact .hero h1{max-width:14ch}
.tpl-compact .btn{border-radius:999px;padding:.8rem 1.55rem}
.tpl-compact .hero-eyebrow{background:rgba(255,255,255,.14)}
.tpl-compact .hero-fact{border-radius:calc(var(--panel-r) - 4px);background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px)}

/* --- ბარათები: ფილა ფილაში ----------------------------------------------- */
.tpl-compact .card{border:0;border-radius:calc(var(--panel-r) - 4px);background:var(--tile)}
.tpl-compact .section.alt .card{background:var(--bg)}
.tpl-compact .card:hover{box-shadow:none;transform:translateY(-2px);
  background:color-mix(in srgb,var(--primary) 6%,var(--tile))}
.tpl-compact .section.alt .card:hover{background:var(--bg);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.35)}
.tpl-compact .card-img{aspect-ratio:16/10}
.tpl-compact .card-body{padding:1rem 1.1rem 1.15rem}
.tpl-compact .card-ph{aspect-ratio:16/10}
.tpl-compact .chip{border-radius:calc(var(--radius) / 2 + 2px)}

.tpl-compact .ico-badge{width:44px;height:44px;border-radius:calc(var(--panel-r) - 8px);margin-bottom:.7rem;
  background:var(--bg);color:var(--primary);box-shadow:0 1px 0 color-mix(in srgb,var(--text) 8%,transparent)}
.tpl-compact .ico-badge .ico{width:22px;height:22px}

/* --- უპირატესობები: მოზაიკა ----------------------------------------------- */
.tpl-compact .feature{background:var(--tile);border-radius:calc(var(--panel-r) - 4px);
  padding:1.4rem 1.3rem;display:flex;flex-direction:column;
  transition:background .2s ease,transform .2s ease}
.tpl-compact .section.alt .feature{background:var(--bg)}
.tpl-compact .feature:hover{transform:translateY(-2px)}
.tpl-compact .feature h3{font-size:1.12rem}
/* ★ პირველი ფილა — მუქი (`--accent`, ჰეროს ფერი: ის ყოველთვის თეთრ ტექსტს
     იტანს, `--primary` კი შეიძლება ღია იყოს). */
.tpl-compact .features .feature:first-child{background:var(--accent);color:#fff}
.tpl-compact .features .feature:first-child p{color:rgba(255,255,255,.78)}
.tpl-compact .features .feature:first-child .ico-badge{background:var(--primary);color:#fff;box-shadow:none}
@media (min-width:901px){
  /* ★ რაოდენობა CSS-ით: 2/4/5/7 ბარათზე პირველი ორმაგია, 4/7-ზე ბოლოც —
       ე.ი. ბადეში ხვრელი არ რჩება. 3 და 6 თანაბრად ლაგდება. */
  .tpl-compact .features .feature:first-child:is(:nth-last-child(2),:nth-last-child(4),
    :nth-last-child(5),:nth-last-child(7)){grid-column:span 2;padding:1.8rem 1.7rem}
  .tpl-compact .features .feature:first-child:is(:nth-last-child(2),:nth-last-child(4),
    :nth-last-child(5),:nth-last-child(7)) h3{font-size:1.45rem;max-width:22ch}
  .tpl-compact .features .feature:last-child:is(:nth-child(4),:nth-child(7)){grid-column:span 2}
}

/* --- ციფრები: ფილები ------------------------------------------------------ */
.tpl-compact .stats .stat{text-align:start;background:var(--tile);
  border-radius:calc(var(--panel-r) - 4px);padding:1.2rem 1.3rem 1.1rem}
.tpl-compact .stat-value{font-size:clamp(1.8rem,3.8vw,2.6rem);letter-spacing:-.03em}
.tpl-compact .stat-label{font-size:.9rem}

/* --- ნაბიჯები ------------------------------------------------------------- */
.tpl-compact .step-list{gap:var(--gap)}
.tpl-compact .step{background:var(--tile);border-radius:calc(var(--panel-r) - 4px);padding:1.1rem 1.2rem}
.tpl-compact .section.alt .step{background:var(--bg)}
.tpl-compact .step-dot{width:46px;height:46px;border-radius:calc(var(--panel-r) - 8px);background:var(--bg)}
.tpl-compact .step-dot:not(:empty)::after{box-shadow:0 0 0 3px var(--tile)}

/* --- ტარიფები ------------------------------------------------------------- */
.tpl-compact .plan{border:0;background:var(--tile);border-radius:calc(var(--panel-r) - 4px)}
.tpl-compact .plan.is-featured{background:var(--accent);color:#fff;box-shadow:none}
.tpl-compact .plan.is-featured .plan-name{color:#fff;opacity:.85}
.tpl-compact .plan.is-featured .plan-period,
.tpl-compact .plan.is-featured .plan-summary{color:rgba(255,255,255,.72)}
.tpl-compact .plan.is-featured .plan-feats .ico{color:#fff}
.tpl-compact .plan.is-featured .btn{background:#fff;color:var(--accent)}
.tpl-compact .plan-badge{inset-inline-start:auto;inset-inline-end:1rem;top:1rem}

/* --- FAQ ------------------------------------------------------------------ */
.tpl-compact .faq-item{border:0;background:var(--tile);border-radius:calc(var(--panel-r) - 6px);
  padding:0 1.1rem;margin-bottom:.45rem}
.tpl-compact .faq-item summary{padding:.95rem 0}
.tpl-compact .faq-item summary::after{width:1.6rem;height:1.6rem;flex:none;border-radius:999px;
  display:grid;place-items:center;background:var(--bg);line-height:1}

/* --- მოწოდება, კონტაქტი, ქვესართი --------------------------------------- */
.tpl-compact .cta{background:var(--primary)}
.tpl-compact .cta .btn{border-radius:999px}
.tpl-compact .form input,.tpl-compact .form textarea{border:0;background:var(--bg);
  border-radius:calc(var(--panel-r) - 8px)}
.tpl-compact .section:not(.alt) .form input,
.tpl-compact .section:not(.alt) .form textarea{background:var(--tile)}
.tpl-compact .gallery{gap:var(--gap)}
.tpl-compact .gallery a,.tpl-compact .gallery img{border-radius:calc(var(--panel-r) - 4px)}
.tpl-compact .video-player,.tpl-compact .text-section .rounded,
.tpl-compact .detail-cover img{border-radius:calc(var(--panel-r) - 4px)}
.tpl-compact .site-foot{margin:var(--gap) var(--side);border-radius:var(--panel-r)}

/* --- „მენიუდან“ ----------------------------------------------------------- */
.tpl-compact .menu-media{border-radius:0}

/* ⚠️ 641–900px: მცურავი თავსართი ვიწროა (კიდეებს ფილის დაშორება აკლდება) —
   ექვსი ბმული + ენა + ტელეფონი 768px-ზე 11px-ით გადმოდიოდა (გაზომილია). */
@media (min-width:641px) and (max-width:960px){
  .tpl-compact .site-nav{gap:.8rem}
  .tpl-compact .site-nav a{font-size:.88rem}
  .tpl-compact .site-nav .btn-sm{padding:.4rem .8rem}
}
@media (max-width:640px){
  .tpl-compact{--gap:.4rem}
  /* ★ თავსართს backdrop-filter აქვს → მობილური მენიუს `position:fixed`
       თავსართის ყუთზე ითვლება; `top:100%` ზუსტად მის ქვეშ სვამს. */
  .tpl-compact .site-nav{inset:calc(100% + .4rem) 0 auto;border-radius:var(--panel-r);
    padding-inline:1.1rem}
  .tpl-compact .head-inner{min-height:56px}
  .tpl-compact .section > .wrap{width:calc(100% - 2rem)}
}
/* ანიმაციის ეფექტები — **გენერირებული ფაილი**, ხელით არ იხსნება.
   აგება: `node cli/build-anim.mjs`. წყარო: animate.css v4.1.1 (MIT).

   ★ კონტრაქტი (იხ. CLAUDE.md → „ანიმაციები“): ელემენტი მარკაპში **ხილულია**;
     `site.js` ამატებს `.reveal`-ს (დამალვა) და შემდეგ `.is-in`-ს (გაშვება).
     ე.ი. JS-ის გარეშე გვერდი სრულად ჩანს — ბოტი ცარიელს ვერასდროს დაინახავს.
   ★ ეფექტს **სექცია** ირჩევს: `<section data-fx="zoom-in" data-fx-speed="fast">`.
     სახელი `--fx-name` ცვლადში ჯდება, ე.ი. საერთო ბლოკი ერთია და თითო
     ეფექტი ერთ ხაზს იკავებს.
   ⚠️ **ჰერო განზრახ გარეთაა.** მას საკუთარი შემოსვლა აქვს (`heroIn`) და ის
     პირველი ეკრანია: LCP-ის ელემენტის დაყოვნება ყველაზე ძვირი ანიმაციაა. */

/* ★ სამი სიჩქარე — სახელით და არა ციფრით: კლიენტს „620ms“ არაფერს ეუბნება. */
[data-fx-speed="slow"]{--fx-dur:900ms}
[data-fx-speed="normal"]{--fx-dur:620ms}
[data-fx-speed="fast"]{--fx-dur:380ms}

/* ⚠️ `.reveal` ბაზისურად ტრანზიციითაა (site.css); დასახელებულ ეფექტზე ის
   უნდა გაითიშოს, თორემ ტრანზიცია და ანიმაცია ერთსა და იმავე `transform`-ს
   ეცილებიან და შედეგი ბრაუზერზეა დამოკიდებული. */
[data-fx]:not([data-fx="none"]) .reveal{transform:none;transition:none}
[data-fx]:not([data-fx="none"]) .reveal.is-in{
  animation-name:var(--fx-name);
  animation-duration:var(--fx-dur,620ms);
  animation-delay:var(--d,0ms);
  animation-timing-function:cubic-bezier(.2,.7,.3,1);
  /* ★ `both` სავალდებულოა: `forwards`-ის გარეშე ელემენტი დასრულების
     შემდეგ `.reveal`-ის `opacity:0`-ზე **ბრუნდებოდა** და ქრებოდა. */
  animation-fill-mode:both;
}
/* „ეფექტის გარეშე“ — ბლოკი უბრალოდ ჩანს. */
[data-fx="none"] .reveal{opacity:1;transform:none;animation:none;transition:none}

[data-fx="fade"]{--fx-name:fx-fade}
[data-fx="fade-up"]{--fx-name:fx-fade-up}
[data-fx="fade-down"]{--fx-name:fx-fade-down}
[data-fx="fade-left"]{--fx-name:fx-fade-left}
[data-fx="fade-right"]{--fx-name:fx-fade-right}
[data-fx="slide-up"]{--fx-name:fx-slide-up}
[data-fx="zoom-in"]{--fx-name:fx-zoom-in}
[data-fx="zoom-out"]{--fx-name:fx-zoom-out}
[data-fx="rise"]{--fx-name:fx-rise}
[data-fx="flip"]{--fx-name:fx-flip}
[data-fx="blur"]{--fx-name:fx-blur}
[data-fx="wipe"]{--fx-name:fx-wipe}
[data-fx="tilt"]{--fx-name:fx-tilt}

@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-fade-up{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-fade-down{from{opacity:0;transform:translate3d(0,-26px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-fade-left{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-fade-right{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-slide-up{from{opacity:1;transform:translate3d(0,38px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-zoom-in{from{opacity:0;transform:scale3d(.94,.94,1)}to{opacity:1;transform:scale3d(1,1,1)}}
@keyframes fx-zoom-out{from{opacity:0;transform:scale3d(1.06,1.06,1)}to{opacity:1;transform:scale3d(1,1,1)}}
@keyframes fx-rise{from{opacity:0;transform:translate3d(0,38px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes fx-flip{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{transform:perspective(400px);opacity:1}}
@keyframes fx-blur{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes fx-wipe{from{opacity:1;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes fx-tilt{from{opacity:0;transform:perspective(900px) rotateX(9deg) translate3d(0,26px,0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  /* ⚠️⚠️ მხოლოდ ხანგრძლივობის განულება **არ კმარა**: `clip-path` და
     `filter` საწყის კადრში რჩებოდა და ბლოკი დაჭრილი ან დაბინდული იყო.
     ამიტომ ანიმაცია მთლიანად ითიშება და ხილულობა ცხადად ბრუნდება. */
  [data-fx] .reveal,[data-fx] .reveal.is-in{
    animation:none!important;opacity:1!important;transform:none!important;
    filter:none!important;clip-path:none!important;
  }
}