/* ==========================================================
   TekiToki Academy: refreshed theme (corporate · minimal · modern)
   Loads after Bootstrap 5.3. Brand colours unchanged:
   orange #FF4D00, lime #C8F542, ink #0A0A0A, cream #F5F2EC
   ========================================================== */
:root {
  --tt-ink:    #0F1115;
  --tt-text:   #3A3F47;
  --tt-muted:  #6B717B;
  --tt-white:  #FFFFFF;
  --tt-bg:     #FAF8F4;          /* softened cream */
  --tt-cream:  #F5F2EC;          /* brand cream */
  --tt-orange: #FF4D00;
  --tt-orange-dark: #D94000;
  --tt-orange-soft: #FFF1EA;
  --tt-lime:   #C8F542;
  --tt-lime-soft: #F2FBD0;
  --tt-line:   #E7E3DA;
  --tt-radius: 14px;
  --tt-radius-sm: 10px;
  --tt-shadow-sm: 0 1px 2px rgba(15,17,21,.05), 0 2px 8px rgba(15,17,21,.04);
  --tt-shadow:    0 4px 12px rgba(15,17,21,.05), 0 16px 40px rgba(15,17,21,.07);
  --tt-font-display: 'Space Grotesk', system-ui, sans-serif;

  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--tt-text);
  --bs-body-color-rgb: 58, 63, 71;
  --bs-body-bg: var(--tt-bg);
  --bs-body-bg-rgb: 250, 248, 244;
  --bs-border-radius: var(--tt-radius-sm);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
p { margin: 0; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid rgba(255,77,0,.45); outline-offset: 3px; border-radius: 6px; }
.tt-dark :focus-visible { outline-color: var(--tt-lime); }
.container { max-width: 1140px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--tt-font-display);
  color: var(--tt-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.tt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tt-orange-dark);
}
.tt-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--tt-orange); border-radius: 2px; }
.tt-eyebrow--light { color: #fff; }
.tt-eyebrow--light::before { background: #fff; }
.text-lime { color: var(--tt-lime); }
.tt-lead { font-size: 1.1rem; color: rgba(255,255,255,.75); max-width: 680px; }
.tt-muted { color: var(--tt-muted); max-width: 680px; font-size: 1.05rem; }
.tt-fade-text { color: rgba(255,255,255,.7); max-width: 640px; }
.tt-section-head { max-width: 760px; }

/* ---------- Sections ---------- */
.tt-section { padding: 96px 0; }
@media (max-width: 600px) { .tt-section { padding: 64px 0; } }
.tt-dark { background: var(--tt-ink); color: rgba(255,255,255,.8); }
.tt-dark h2, .tt-dark h3 { color: #fff; }
.tt-light { background: var(--tt-white); }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-x: 26px;
  --bs-btn-padding-y: 12px;
  --bs-btn-font-family: var(--tt-font-display);
  --bs-btn-font-weight: 600;
  --bs-btn-border-width: 1.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { --bs-btn-padding-x: 32px; --bs-btn-padding-y: 15px; --bs-btn-font-size: 1.02rem; }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--tt-orange); --bs-btn-border-color: var(--tt-orange);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tt-orange-dark); --bs-btn-hover-border-color: var(--tt-orange-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tt-orange-dark); --bs-btn-active-border-color: var(--tt-orange-dark);
  box-shadow: 0 6px 18px rgba(255,77,0,.28);
}
.btn-dark {
  --bs-btn-color: #fff; --bs-btn-bg: var(--tt-ink); --bs-btn-border-color: var(--tt-ink);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #262a31; --bs-btn-hover-border-color: #262a31;
  --bs-btn-active-bg: #262a31; --bs-btn-active-border-color: #262a31;
}
.btn-lime {
  --bs-btn-color: var(--tt-ink); --bs-btn-bg: var(--tt-lime); --bs-btn-border-color: var(--tt-lime);
  --bs-btn-hover-color: var(--tt-ink); --bs-btn-hover-bg: #D6FA63; --bs-btn-hover-border-color: #D6FA63;
  --bs-btn-active-bg: #D6FA63; --bs-btn-active-border-color: #D6FA63;
}
.btn-ghost {
  --bs-btn-color: var(--tt-ink); --bs-btn-bg: transparent; --bs-btn-border-color: #cfcabf;
  --bs-btn-hover-color: var(--tt-ink); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: var(--tt-ink);
  --bs-btn-active-bg: #fff; --bs-btn-active-border-color: var(--tt-ink);
}

/* ---------- Nav ---------- */
.tt-nav {
  --bs-navbar-padding-y: 10px;
  --bs-navbar-nav-link-padding-x: 14px;
  background: rgba(250,248,244,.88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--tt-line);
}
.tt-nav .navbar-brand { padding: 0; margin: 0; }
.tt-nav .navbar-brand img { display: block; width: auto; height: 52px; }
.tt-nav .nav-link { font-weight: 500; font-size: .95rem; color: var(--tt-text); transition: color .15s; }
.tt-nav .nav-link:hover, .tt-nav .nav-link:focus { color: var(--tt-orange-dark); }
.tt-nav__cta { --bs-btn-padding-x: 20px; --bs-btn-padding-y: 9px; --bs-btn-font-size: .9rem; }
.tt-nav .navbar-toggler { border: 1px solid var(--tt-line); border-radius: 10px; padding: 8px 10px; }
.tt-nav .navbar-toggler:focus { box-shadow: none; outline: 3px solid rgba(255,77,0,.35); }
@media (max-width: 767.98px) {
  .tt-nav .navbar-collapse { border-top: 1px solid var(--tt-line); margin-top: 10px; padding: 6px 0 18px; }
  .tt-nav .nav-link { padding: 14px 4px; border-bottom: 1px solid var(--tt-line); }
  .tt-nav__cta-item { margin-top: 16px; }
  .tt-nav__cta { display: flex; width: 100%; }
}

/* ---------- Hero ---------- */
.image-bg {
  background-image:
      linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.78) 0%,
          rgba(0, 0, 0, 0.55) 50%,
          rgba(0, 0, 0, 0.25) 100%
      ),
      url("../images/img-bg.jfif");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tt-hero {
  position: relative; overflow: hidden;
  padding: 88px 0 96px;
  background:
    radial-gradient(900px 420px at 88% -10%, var(--tt-orange-soft), transparent 70%),
    radial-gradient(700px 380px at -5% 110%, var(--tt-lime-soft), transparent 70%),
    var(--tt-bg);
}
.tt-hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; margin-bottom: 24px;
  background: #fff; border: 1px solid var(--tt-line); border-radius: 999px;
  font-size: .85rem; font-weight: 500; color: var(--tt-ink); box-shadow: var(--tt-shadow-sm);
}
.tt-hero__pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--tt-lime); box-shadow: 0 0 0 3px rgba(200,245,66,.35); }
.tt-hero__headline { margin-bottom: 22px; }
.tt-code-word { color: var(--tt-orange); position: relative; white-space: nowrap; }
.tt-code-word::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .22em;
  background: var(--tt-lime); z-index: -1; border-radius: 4px;
}
.tt-hero__sub { font-size: 1.1rem; color: var(--tt-text); max-width: 520px; margin-bottom: 32px; }
.tt-hero__stats { display: flex; gap: 36px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--tt-line); max-width: 520px; }
.tt-hero__stat-num { font-family: var(--tt-font-display); font-size: 1.9rem; font-weight: 700; color: var(--tt-ink); line-height: 1; margin-bottom: 6px; }
.tt-hero__stat-label { font-size: .82rem; color: var(--tt-muted); line-height: 1.35; max-width: 120px; }

/* Hero visual: calm code window instead of cartoon illustration */
.tt-visual { position: relative; padding: 24px 0 36px 24px; }
.tt-window {
  background: var(--tt-ink); border-radius: 18px; overflow: hidden;
  box-shadow: var(--tt-shadow);
}
.tt-window__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: #181b21; }
.tt-window__bar span { width: 10px; height: 10px; border-radius: 50%; background: #3a3f47; }
.tt-window__bar span:nth-child(1) { background: var(--tt-orange); }
.tt-window__bar span:nth-child(2) { background: var(--tt-lime); }
.tt-window__bar em { margin-left: auto; font-style: normal; font-size: .75rem; color: #8a909a; }
.tt-window pre {
  margin: 0; padding: 26px 24px 30px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; line-height: 1.85; color: #c9ced6; white-space: pre; overflow-x: auto;
}
.tt-window .k { color: var(--tt-orange); }
.tt-window .s { color: var(--tt-lime); }
.tt-window .c { color: #6b717b; }
.tt-window .cursor { display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom; background: var(--tt-lime); animation: tt-blink 1s steps(1) infinite; }
@keyframes tt-blink { 50% { opacity: 0; } }
.tt-float {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: #fff; border: 1px solid var(--tt-line);
  border-radius: 14px; box-shadow: var(--tt-shadow);
}
.tt-float strong { display: block; font-family: var(--tt-font-display); font-size: 1.3rem; color: var(--tt-ink); line-height: 1; }
.tt-float small { display: block; font-size: .75rem; color: var(--tt-muted); margin-top: 3px; }
.tt-float__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--tt-orange-soft); color: var(--tt-orange); }
.tt-float--a { left: 0; bottom: 0; }
.tt-float--b { right: -8px; top: 0; }
.tt-float--b .tt-float__icon { background: var(--tt-lime-soft); color: #5b7a00; }
@media (max-width: 991.98px) { .tt-visual { margin-top: 48px; padding-left: 0; } .tt-float--b { right: 0; } }
@media (max-width: 600px) { .tt-hero { padding: 56px 0 64px; } .tt-window pre { font-size: .8rem; } }

/* ---------- Trust strip (replaces ticker) ---------- */
.tt-trust { background: #fff; border-top: 1px solid var(--tt-line); border-bottom: 1px solid var(--tt-line); }
.tt-trust__item { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 8px; font-weight: 500; font-size: .92rem; color: var(--tt-ink); }
.tt-trust__item svg { color: var(--tt-orange); flex-shrink: 0; }

/* ---------- Problem (dark) ---------- */
.tt-point {
  padding: 28px; border-radius: var(--tt-radius);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  transition: background .2s, border-color .2s;
}
.tt-point:hover { background: rgba(255,255,255,.07); border-color: rgba(200,245,66,.35); }
.tt-point__icon {
  width: 44px; height: 44px; margin-bottom: 18px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(200,245,66,.12); color: var(--tt-lime);
}
.tt-point__text { font-size: .95rem; line-height: 1.65; color: rgba(255,255,255,.7); }
.tt-point__text strong { display: block; margin-bottom: 8px; font-family: var(--tt-font-display); font-size: 1.08rem; color: #fff; }
.tt-closer { font-family: var(--tt-font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.45; color: #fff; padding-left: 20px; border-left: 3px solid var(--tt-orange); }

/* ---------- Programme ---------- */
.tt-program__item {
  position: relative; height: 100%; padding: 32px 28px;
  background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow-sm); transition: transform .2s, box-shadow .2s;
}
.tt-program__item:hover { transform: translateY(-3px); box-shadow: var(--tt-shadow); }
.tt-program__num {
  width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--tt-font-display); font-weight: 700; font-size: 1rem;
  background: var(--tt-orange-soft); color: var(--tt-orange-dark);
}
.tt-program .col-md-4:nth-child(2) .tt-program__num { background: var(--tt-lime-soft); color: #4d6a00; }
.tt-program .col-md-4:nth-child(3) .tt-program__num { background: var(--tt-ink); color: var(--tt-lime); }
.tt-program__label { margin-bottom: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tt-muted); }
.tt-program__item p { font-size: .95rem; color: var(--tt-text); margin-top: 10px; }

.tt-chip { padding: 18px 20px; background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius-sm); }
.tt-chip .tt-mono { margin-bottom: 4px; font-size: .78rem; font-weight: 500; color: var(--tt-muted); }
.tt-chip strong { display: block; font-family: var(--tt-font-display); font-size: 1.02rem; color: var(--tt-ink); }

.tt-igcse { padding: 26px 28px; background: var(--tt-lime-soft); border: 1px solid #DDEFA3; border-radius: var(--tt-radius); }
.tt-igcse__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--tt-lime); color: var(--tt-ink); }
.tt-igcse h4 { font-size: 1.05rem; margin-bottom: 6px; }
.tt-igcse p { font-size: .92rem; color: var(--tt-text); }

/* ---------- Founder ---------- */
.tt-founder { background: var(--tt-bg); border: 1px solid var(--tt-line); border-radius: 20px; overflow: hidden; box-shadow: var(--tt-shadow-sm); }
.tt-founder__photo {
  position: relative; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px;
  background: linear-gradient(160deg, var(--tt-orange) 0%, #FF7A3D 100%); color: #fff;
}
.tt-founder__initials {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.55);
  font-family: var(--tt-font-display); font-size: 2rem; font-weight: 700;
}
.tt-founder__label { text-align: center; font-size: .85rem; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.92); }
.tt-founder__body { padding: 40px 40px; }
.tt-founder__name { font-family: var(--tt-font-display); font-size: 1.6rem; font-weight: 700; color: var(--tt-ink); margin-bottom: 4px; }
.tt-founder__name a { background-image: linear-gradient(var(--tt-lime), var(--tt-lime)); background-size: 100% 6px; background-position: 0 92%; background-repeat: no-repeat; transition: background-size .2s; }
.tt-founder__name a:hover { background-size: 100% 100%; }
.tt-founder__title { margin-bottom: 20px; font-size: .9rem; font-weight: 600; color: var(--tt-orange-dark); }
.tt-founder__bio { font-size: .98rem; margin-bottom: 18px; }
.tt-credential { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; color: var(--tt-ink); }
.tt-credential__dot { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; border-radius: 50%; background: var(--tt-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%230F1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
@media (max-width: 767.98px) { .tt-founder__body { padding: 28px 22px; } }

/* ---------- Pricing ---------- */
.tt-price { position: relative; padding: 40px 36px; border-radius: 20px; background: #fff; color: var(--tt-text); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.tt-price__badge { display: inline-block; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px; background: var(--tt-lime); color: var(--tt-ink); font-size: .8rem; font-weight: 600; }
.tt-price__amount { font-family: var(--tt-font-display); font-size: 3.4rem; font-weight: 700; line-height: 1; color: var(--tt-ink); margin-bottom: 6px; }
.tt-price__amount span { font-size: 1.6rem; color: var(--tt-muted); margin-right: 2px; }
.tt-price__period { margin-bottom: 28px; font-size: .92rem; color: var(--tt-muted); }
.tt-price__list { display: flex; flex-direction: column; gap: 14px; margin: 0 0 32px; padding: 28px 0 0; border-top: 1px solid var(--tt-line); }
.tt-price__list li { display: flex; align-items: flex-start; gap: 12px; font-size: .96rem; color: var(--tt-ink); }
.tt-price__list li::before { content: ''; width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; border-radius: 50%; background: var(--tt-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.tt-price .btn-primary { width: 100%; }
.tt-price__note { margin-top: 18px; text-align: center; font-size: .85rem; color: var(--tt-muted); }
.tt-policy { padding: 32px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: .95rem; line-height: 1.75; color: rgba(255,255,255,.72); }
.tt-policy strong { display: block; margin-bottom: 10px; font-family: var(--tt-font-display); font-size: 1.15rem; color: #fff; }

/* ---------- FAQ ---------- */
.tt-faq { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-btn-focus-box-shadow: none; max-width: 860px; }
.tt-faq .accordion-item { margin-bottom: 12px; background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius) !important; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.tt-faq .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(255,77,0,.45); box-shadow: var(--tt-shadow-sm); }
.tt-faq .accordion-button { gap: 16px; padding: 22px 24px; background: #fff; color: var(--tt-ink); font-family: var(--tt-font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.4; letter-spacing: normal; box-shadow: none; }
.tt-faq .accordion-button:not(.collapsed) { color: var(--tt-ink); background: #fff; }
.tt-faq .accordion-button::after {
  content: '+'; flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--tt-cream); background-image: none; color: var(--tt-ink);
  font-family: var(--tt-font-display); font-size: 1.2rem; font-weight: 500; transform: none; transition: background .2s, color .2s;
}
.tt-faq .accordion-button:not(.collapsed)::after { content: '–'; background: var(--tt-orange); color: #fff; transform: none; }
.tt-faq .accordion-body { padding: 0 24px 24px; font-size: .96rem; line-height: 1.75; color: var(--tt-text); }


/* ---------- Gallery ---------- */
.tt-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tt-gallery__item { margin: 0; overflow: hidden; aspect-ratio: 1; border-radius: var(--tt-radius); background: linear-gradient(135deg, var(--tt-orange-soft), var(--tt-lime-soft)); }
.tt-gallery__item--big { grid-column: span 2; aspect-ratio: 16 / 10; }
.tt-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tt-gallery__item:hover img { transform: scale(1.04); }
@media (min-width: 768px) {
  .tt-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; }
  .tt-gallery__item { aspect-ratio: auto; }
  .tt-gallery__item--big { grid-row: span 2; aspect-ratio: auto; }
}
.tt-gallery__note { display: flex; align-items: flex-start; gap: 10px; max-width: 720px; margin-top: 24px; font-size: .88rem; color: var(--tt-muted); }
.tt-gallery__note svg { flex-shrink: 0; margin-top: 2px; color: var(--tt-orange-dark); }

/* ---------- Enroll ---------- */
.tt-enroll { position: relative; overflow: hidden; background: var(--tt-orange); color: #fff; }
.tt-enroll::before { content: ''; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.08); }
.tt-enroll::after { content: ''; position: absolute; left: -80px; bottom: -140px; width: 300px; height: 300px; border-radius: 50%; background: rgba(0,0,0,.06); }
.tt-enroll .container { position: relative; z-index: 1; }
.tt-enroll h2 { color: #fff; }
.tt-enroll__sub { font-size: 1.1rem; color: rgba(255,255,255,.9); max-width: 620px; }
.tt-option {
  display: flex; align-items: flex-start; gap: 18px; padding: 28px; border-radius: 18px;
  color: var(--tt-text); background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.14);
  transition: transform .15s, box-shadow .15s;
}
.tt-option:hover { color: var(--tt-text); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.2); }
.tt-option__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--tt-orange-soft); color: var(--tt-orange); }
.tt-option:nth-child(1) .tt-option__icon, .col-md-6:first-child .tt-option__icon { background: var(--tt-lime-soft); color: #4d6a00; }
.tt-option__title { margin-bottom: 4px; font-family: var(--tt-font-display); font-size: 1.15rem; font-weight: 700; color: var(--tt-ink); }
.tt-option__desc { font-size: .92rem; }
.tt-enroll__note { margin-top: 36px; text-align: center; font-size: .88rem; color: rgba(255,255,255,.85); }

/* ---------- Footer ---------- */
.tt-footer { padding: 44px 0; background: var(--tt-ink); color: rgba(255,255,255,.6); }
.tt-footer__logo { display: inline-flex; align-items: center; }
.tt-footer__logo img { height: 44px; width: auto; padding: 6px 10px; background: #fff; border-radius: 10px; }
.tt-footer__links a { font-size: .92rem; color: rgba(255,255,255,.7); transition: color .15s; }
.tt-footer__links a:hover { color: var(--tt-lime); }
.tt-footer__copy { font-size: .85rem; }
.tt-footer__parent { display: block; margin-top: 4px; color: rgba(255,255,255,.85); }


/* ---------- Back to top (bottom-left) ---------- */
.tt-top {
  position: fixed; left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 1030;
  width: 48px; height: 48px; padding: 0; display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--tt-ink); color: var(--tt-lime); box-shadow: var(--tt-shadow); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, background-color .15s;
}
.tt-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.tt-top.is-visible:hover { background: #262a31; transform: translateY(-2px); }

/* ---------- Testimonials page ---------- */
.tt-feature { padding: 40px 36px; box-shadow: var(--tt-shadow); }
.tt-feature .tt-quote__text { font-family: var(--tt-font-display); font-size: 1rem; line-height: 1.5; font-weight: 500; }
.tt-video { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; background: var(--tt-ink); border-radius: var(--tt-radius); }
.tt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tt-video__play { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--tt-lime); color: var(--tt-ink); }
.tt-video__cap { margin-top: 12px; font-size: .9rem; color: var(--tt-muted); }
.tt-video__cap strong { display: block; color: var(--tt-ink); font-family: var(--tt-font-display); font-size: 1rem; }
.tt-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-filter { padding: 8px 18px; border: 1.5px solid var(--tt-line); border-radius: 999px; background: #fff; font-weight: 500; font-size: .92rem; color: var(--tt-ink); transition: background .15s, border-color .15s; }
.tt-filter:hover { border-color: var(--tt-ink); }
.tt-filter.is-on { background: var(--tt-ink); border-color: var(--tt-ink); color: #fff; }
[data-tag][hidden] { display: none !important; }
.tt-show { display: flex; flex-direction: column; padding: 20px; background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow-sm); color: var(--tt-text); transition: transform .2s, box-shadow .2s; }
a.tt-show:hover { color: var(--tt-text); transform: translateY(-3px); box-shadow: var(--tt-shadow); }
.tt-show img { width: 100%; height: 190px; object-fit: cover; object-position: top; margin-bottom: 18px; border-radius: var(--tt-radius-sm); border: 1px solid var(--tt-line); }
.tt-show strong { font-family: var(--tt-font-display); font-size: 1.1rem; color: var(--tt-ink); }
.tt-show__q { margin: 8px 0; font-weight: 500; color: var(--tt-ink); }
.tt-show__p { flex: 1; font-size: .9rem; color: var(--tt-muted); }
.tt-show__link { margin-top: 14px; font-weight: 600; font-size: .92rem; color: var(--tt-orange-dark); }
.tt-show--empty { justify-content: center; text-align: center; min-height: 260px; background: transparent; border-style: dashed; box-shadow: none; }
.tt-faqquote { margin: 16px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--tt-lime); font-weight: 500; color: var(--tt-ink); }
.tt-faqquote cite { display: block; margin-top: 6px; font-style: normal; font-size: .85rem; font-weight: 400; color: var(--tt-muted); }
@media (max-width: 600px) { .tt-feature { padding: 28px 22px; } .tt-feature .tt-quote__text { font-size: 1.15rem; } }


/* ==========================================================
   Hero fits the first desktop screen (nav + hero + trust strip)
   Desktop only. Mobile and tablet are unchanged.
   ========================================================== */
:root {
  --tt-nav-h: 73px;     /* navbar height */
  --tt-trust-h: 66px;   /* trust strip height */
}

@media (min-width: 992px) {
  .tt-hero {
    display: flex;
    align-items: center;
    padding: 48px 0;
    /* min-height, not height: if content ever needs more room, it grows instead of breaking */
    min-height: min(calc(100vh - var(--tt-nav-h) - var(--tt-trust-h)), 900px);
    min-height: min(calc(100dvh - var(--tt-nav-h) - var(--tt-trust-h)), 900px);
  }
  .tt-hero > .container { width: 100%; }
  .tt-hero__headline { font-size: clamp(2.2rem, min(4.2vw, 6.6vh), 3.4rem); margin-bottom: 18px; }
  .tt-hero__pill { margin-bottom: 18px; }
  .tt-hero__sub { margin-bottom: 26px; }
  .tt-hero .col-lg-6 > .d-flex { margin-bottom: 32px !important; }
}

/* Shorter laptop screens: the stats repeat the trust strip below, so hide them */
@media (min-width: 992px) and (max-height: 820px) {
  .tt-hero { padding: 32px 0; }
  .tt-hero__stats { display: none; }
  .tt-hero .col-lg-6 > .d-flex { margin-bottom: 0 !important; }
}

/* Very short screens: tighten a little more */
@media (min-width: 992px) and (max-height: 660px) {
  .tt-hero { padding: 24px 0; }
  .tt-hero__pill { display: none; }
  .tt-hero__headline { font-size: clamp(2rem, 6vh, 2.6rem); margin-bottom: 14px; }
  .tt-hero__sub { font-size: 1rem; margin-bottom: 20px; }
  .tt-visual { padding-top: 12px; padding-bottom: 24px; }
}


/* ---------- Team cards ---------- */
.tt-member { height: 100%; padding: 28px; background: var(--tt-bg); border: 1px solid var(--tt-line); border-radius: var(--tt-radius); }
.tt-member__avatar { width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-lime-soft); color: #4d6a00; font-family: var(--tt-font-display); font-size: 1.25rem; font-weight: 700; }
.tt-member:hover { border-color: #d6d0c4; }
.col-md-4:nth-child(2) > .tt-member .tt-member__avatar { background: var(--tt-orange-soft); color: var(--tt-orange-dark); }
.col-md-4:nth-child(3) > .tt-member .tt-member__avatar { background: var(--tt-ink); color: var(--tt-lime); }
.tt-member__name { font-family: var(--tt-font-display); font-size: 1.15rem; font-weight: 700; color: var(--tt-ink); }
.tt-member__role { margin-bottom: 12px; font-size: .88rem; font-weight: 600; color: var(--tt-orange-dark); }
.tt-member p { font-size: .94rem; color: var(--tt-text); }


/* ---------- Classes page ---------- */
.img-bg {
  background-image:
      linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.78) 0%,
          rgba(0, 0, 0, 0.55) 50%,
          rgba(0, 0, 0, 0.25) 100%
      ),
      url("../images/img-bg.jfif");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tt-glance { padding: 12px 28px; background: #fff; border: 1px solid var(--tt-line); border-radius: 20px; box-shadow: var(--tt-shadow); }
.tt-glance__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--tt-line); font-size: .95rem; }
.tt-glance__row:last-child { border-bottom: 0; }
.tt-glance__row span { color: var(--tt-muted); }
.tt-glance__row strong { text-align: right; font-family: var(--tt-font-display); color: var(--tt-ink); }