/* 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}
}