:root{
  --blue:#1b5fff;
  --yellow:#ffd84d;
  --ink:#0f172a;      /* მუქი ტექსტი */
  --bg:#ffffff;       /* თეთრი */
  --muted:#64748b;
  --card:#f8fafc;
  --ring: rgba(27,95,255,.25);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Utilities */
.container{ width:min(1100px, 92%); margin-inline:auto }
.section{ padding:56px 0 }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px }
.link{ color:var(--blue); text-decoration:none; font-weight:600 }
.link:hover{ text-decoration:underline }
.section-divider{ height:4px; background:var(--yellow) }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid #e8eef6; backdrop-filter:saturate(120%) blur(6px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px }
.logo{ display:inline-flex; align-items:center; text-decoration:none; color:var(--ink) }
.logo img{ height:40px; width:auto; display:block }
.nav{ display:flex; align-items:center }
.nav a{ color:var(--ink); text-decoration:none; margin-left:18px; padding:8px 10px; border-radius:10px; transition:all .2s ease }
.nav a:hover{ background:var(--card) }
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  border:1px solid #e2e8f0; background:#fff; cursor:pointer;
}
.nav-toggle span{
  width:20px; height:2px; background:var(--ink); display:block; position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
}
.nav-toggle span::before{ top:-6px }
.nav-toggle span::after{ top:6px }
.lang-switch{
  display:inline-flex; align-items:center; gap:6px; margin-left:16px;
  padding:4px; border-radius:999px; background:#f1f5ff; border:1px solid #dbe7ff;
}
.lang-switch a{
  margin-left:0; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; text-decoration:none; color:var(--ink);
}
.lang-switch a:hover{ background:#e8f0ff }
.lang-switch a.active{ background:var(--blue); color:#fff }

@media (max-width:900px){
  .nav-toggle{ display:inline-flex }
  .nav{
    position:fixed; top:64px; right:16px; left:16px;
    flex-direction:column; align-items:flex-start;
    background:#fff; padding:12px; border-radius:16px;
    border:1px solid #e2e8f0; box-shadow:0 18px 40px rgba(15,23,42,.12);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease;
  }
  .nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto }
  .nav a{ margin-left:0; width:100% }
  .lang-switch{ margin-left:0; margin-top:6px }
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
  cursor:pointer;
}
.btn:focus{ outline:none; box-shadow:0 0 0 6px var(--ring) }
.btn:active{ transform:translateY(1px) }

.btn-primary{ background:var(--blue); color:#fff }
.btn-primary:hover{ filter:brightness(1.05) }

.btn-secondary{ background:var(--yellow); color:#111 }
.btn-secondary:hover{ filter:brightness(1.03) }

.btn-outline{ background:#fff; border-color:#cbd5e1; color:#111 }
.btn-outline:hover{ background:#e8f0ff; border-color:var(--blue); color:var(--blue) }

.btn-sm{ padding:10px 14px; border-radius:10px; font-size:.95rem; background:var(--blue); color:#fff }
.btn-sm:hover{ filter:brightness(1.06) }

/* Hero */
.hero{ position:relative; min-height:64svh; display:grid; place-items:center; overflow:hidden; background:linear-gradient(180deg, #fff, #f6f9ff) }
#particles{ position:absolute; inset:0; width:100%; height:100% }
.hero-glyphs{ position:absolute; inset:0; pointer-events:none; z-index:1 }
.hero-glyphs span{
  position:absolute;
  left:var(--x); top:var(--y);
  font-size:var(--s);
  color:rgba(15,23,42,.22);
  animation: float-drift var(--d) ease-in-out infinite;
  filter:blur(.2px);
}
.hero-glyphs span:nth-child(2n){ color:rgba(27,95,255,.22) }
.hero-glyphs span:nth-child(3n){ color:rgba(255,216,77,.35) }
.hero-glyphs span:nth-child(4n){ animation-name: float-drift, float-spin }
.hero-glyphs span:nth-child(5n){ animation-duration: calc(var(--d) + 6s) }
.hero-content{ position:relative; z-index:2; text-align:center; padding:56px 0 }
.hero h1{ font-size:clamp(28px, 5vw, 52px); line-height:1.1; margin:0 0 12px }
.hero p{ margin:0 0 18px; color:var(--muted) }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

@keyframes float-drift{
  0%{ transform:translate3d(0,0,0) }
  50%{ transform:translate3d(10px,-16px,0) }
  100%{ transform:translate3d(0,0,0) }
}
@keyframes float-spin{
  0%{ transform:translate3d(0,0,0) rotate(0deg) }
  100%{ transform:translate3d(0,0,0) rotate(360deg) }
}

/* About */
.about{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px }
.about .about-text ul{ margin:0; padding-left:18px }
.about-card{
  background:conic-gradient(from 180deg at 50% 50%, #fff, #fff 80%, rgba(255,216,77,.35));
  border:1px solid #e7eefb; border-radius:16px; padding:22px;
  box-shadow:0 10px 30px rgba(27,95,255,.08);
}
.about-card h3{ margin-top:0 }

/* Courses grid (cards) */
.grid{ display:grid; gap:16px }
.courses-grid{ grid-template-columns:repeat(3, 1fr) }
@media (max-width:900px){ .courses-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:640px){ .courses-grid{ grid-template-columns:1fr } }

.course-card{
  position:relative; background:var(--card); border:1px solid #e7eefb; border-radius:16px; padding:18px;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.course-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(27,95,255,.10);
  border-color:#dbe7ff;
}
.course-card h3{ margin:6px 0 8px }
.course-card p{ margin:0 0 14px; color:var(--muted) }
.badge{
  position:absolute; top:10px; right:10px;
  background:#111; color:#fff; font-size:12px; padding:6px 9px; border-radius:999px;
}
.badge-blue{ background:var(--blue) }
.badge-yellow{ background:#111; box-shadow:0 0 0 3px var(--yellow) inset }

/* Footer */
.footer{ margin-top:44px; border-top:1px solid #e8eef6; background:#fff }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; padding:24px 0; gap:16px; flex-wrap:wrap }

/* კურსის სურათები */
.course-thumb{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.course-card:hover .course-thumb{
  transform:scale(1.03);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}


/* Page mini-hero (ქვესათაური ზემოთ) */
.page-hero{
  position:relative;
  padding:38px 0;
  border-bottom:1px solid #e8eef6;
  background:
    linear-gradient(90deg, rgba(255,216,77,.35), rgba(27,95,255,.15) 60%, #fff 95%);
}
.page-hero h1{
  margin:0 0 6px;
  font-size:clamp(24px, 4vw, 36px);
  letter-spacing:.2px;
}
.page-hero p{
  margin:0; color:var(--muted);
}

/* ნავიგაციაში „კურსები“ ოდნავ გამოკვეთილი იყოს */
.nav a[href$="courses.html"]{
  background:var(--card);
  box-shadow:0 1px 0 #e7eefb inset;
  border-radius:10px;
}


/* ფერადი ბლოკების თემა */
.block{ padding:36px 0 }
.block--cream{ background:linear-gradient(90deg, rgba(255,216,77,.18), rgba(27,95,255,.08)); }
.block--blue{ background:linear-gradient(180deg, #f4f7ff, #eef4ff); }
.block--sand{ background:#fffdf7; }

/* Metrics */
.metrics-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.metric{
  display:flex; gap:14px; align-items:center;
  background:#fff; border:1px solid #e7eefb; border-radius:18px; padding:16px 18px;
  box-shadow:0 10px 24px rgba(27,95,255,.06);
}
.metric-icon{
  display:grid; place-items:center; width:64px; height:64px; border-radius:999px; color:#fff;
}
.metric-icon--yellow{ background:var(--yellow) }
.metric-icon--red{ background:#b8332a }
.metric-icon--ink{ background:#334155 }
.metric-icon--teal{ background:#0f766e }
.metric-title{ font-weight:800; font-size:22px; line-height:1 }
.metric-sub{ color:var(--muted); font-size:14px }
@media (max-width:900px){ .metrics-row{ grid-template-columns:1fr 1fr } }

/* Teachers */
.teachers-grid{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1100px){ .teachers-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:760px){ .teachers-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .teachers-grid{ grid-template-columns:1fr } }

.teacher-card{
  background:#fff; border:1px solid #e7eefb; border-radius:18px; overflow:hidden;
  transition:transform .15s ease, box-shadow .2s ease;
  box-shadow:0 10px 24px rgba(27,95,255,.06);
}
.teacher-card:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(27,95,255,.12) }
.teacher-avatar{ width:100%; height:220px; object-fit:cover }
.teacher-body{ padding:14px 16px }
.teacher-body h3{ margin:6px 0 4px }
.teacher-body p{ margin:0 0 8px; color:var(--muted) }
.stars{ letter-spacing:2px; color:#f59e0b }

/* FAQ */
.faq-wrap{ display:grid; grid-template-columns:1fr 1.2fr; gap:28px }
.faq-left p{ color:var(--muted); max-width:46ch }
.faq-right{ background:#fff; border:1px solid #e7eefb; border-radius:16px }
.faq-item + .faq-item{ border-top:1px solid #e8eef6 }
.faq-q{
  width:100%; text-align:left; background:transparent; border:0; padding:16px 18px;
  font-weight:700; display:flex; align-items:center; justify-content:space-between;
}
.faq-q span{ color:var(--blue); font-size:20px; line-height:1 }
.faq-a{ display:none; padding:0 18px 16px; color:var(--muted) }
.faq-item.active .faq-a{ display:block }
.faq-item.active .faq-q span{ transform:rotate(45deg) }

@media (max-width:900px){ .faq-wrap{ grid-template-columns:1fr } }

/* Footer */
.footer{ margin-top:0; border-top:0; }
.footer--map{
  background:
   radial-gradient(40% 60% at 10% 10%, rgba(27,95,255,.06), transparent 60%),
   radial-gradient(50% 80% at 90% 20%, rgba(255,216,77,.20), transparent 70%),
   #f3f6fb;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px; padding:28px 0 }
.f-col h4{ margin:0 0 10px }
.f-list{ list-style:none; padding:0; margin:0 }
.f-list li+li{ margin-top:8px }
.brand-chip{
  display:inline-block; background:#0ea5a4; color:#fff; border-radius:14px; padding:10px 14px;
  font-weight:800; margin-bottom:10px;
}
.socials a{ display:inline-grid; place-items:center; width:36px; height:36px; background:#fff; border-radius:999px; margin-right:8px; color:#0f172a; border:1px solid #e7eefb }
.footer-bottom{ border-top:1px solid #dfe7f7; padding:12px 0; background:#f8fbff }

.to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:999px;
  border:1px solid #dbe7ff; background:#fff; cursor:pointer; display:none;
  box-shadow:0 10px 24px rgba(27,95,255,.15);
}
.to-top.show{ display:grid; place-items:center }



.page-hero--course{
  background:
    linear-gradient(0deg, rgba(255,255,255,.82), rgba(255,255,255,.82)),
    url('assets/img/course-hero.jpg') center/cover no-repeat;
  padding:48px 0; border-bottom:1px solid #e8eef6;
}
.page-hero--course h1{ margin:0 }