:root {
  --primary: #2563EB;
  --secondary: #4F46E5;
  --accent: #14B8A6;
  --bg: #F8FAFC;
  --ink: #0F172A;
  --muted: #64748B;
  --border: #E2E8F0;
  --card: #FFFFFF;
  --shadow-soft: 0 18px 60px rgba(15, 23, 42, 0.10);
  --shadow-glow: 0 18px 50px rgba(37, 99, 235, 0.22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34%),
    linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 45%, #F8FAFC 100%);
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

/* ==================== Header ==================== */
.site-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 1030;
}

.brand-logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--primary); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: var(--primary); color: #fff; font-size: 1.05rem;
}
.brand-name { font-size: 1.4rem; }

.primary-nav a {
  font-weight: 600; font-size: 0.95rem; color: #334155;
  display: inline-flex; align-items: center; gap: 0.25rem;
  transition: color 0.2s ease;
}
.primary-nav a:hover { color: var(--primary); }

.btn-icon {
  border: 1px solid var(--border); background: #fff; border-radius: 0.5rem;
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
}

.mobile-nav { display: none; border-top: 1px solid var(--border); }
.mobile-nav.open { display: block; }
.mobile-nav a { padding: 0.75rem 0.5rem; font-weight: 600; border-radius: 0.5rem; }
.mobile-nav a:hover { background: #F1F5F9; color: var(--primary); }

.btn-primary-gy {
  background: var(--primary); color: #fff; font-weight: 700; border: none;
  border-radius: 0.6rem; padding: 0.55rem 1.4rem;
  display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary-gy:hover { background: #1d4ed8; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-glow); }

.btn-outline-gy {
  border: 1.5px solid var(--border); color: var(--ink); font-weight: 700;
  border-radius: 0.6rem; padding: 0.55rem 1.4rem; background: #fff;
  display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.btn-outline-gy:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }

.btn-glass { background: rgba(255,255,255,0.15); color: #fff; border: none; font-weight: 600; }
.btn-glass:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* ==================== Hero ==================== */
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border); background: rgba(255,255,255,0.85);
  border-radius: 0.6rem; padding: 0.5rem 0.9rem; font-weight: 700; font-size: 0.9rem;
  color: var(--primary); box-shadow: 0 2px 10px rgba(15,23,42,0.05);
  animation: floatY 5s ease-in-out infinite;
}

.hero-title {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -0.01em;
  margin-top: 1.25rem; max-width: 40rem;
}
.text-accent-indigo { color: var(--secondary); }

.hero-sub { font-size: 1.1rem; color: var(--muted); line-height: 1.8; margin-top: 1.5rem; max-width: 34rem; }

.hero-stats .stat-value { font-size: 1.8rem; font-weight: 800; color: var(--primary); margin-bottom: 0; }
.hero-stats .stat-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 0; }

/* ==================== 3D tilt + reveal engine ==================== */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform 0.12s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.tilt-card > * { transform: translateZ(0); }

.reveal-3d {
  opacity: 0;
  transform: perspective(1400px) rotateX(35deg) rotateY(-6deg) translateY(70px) scale(0.94);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-3d.in-view {
  opacity: 1;
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1);
}

/* Continuous idle 3D drift on the hero dashboard preview so depth reads
   even before the visitor's cursor ever touches it. */
.dashboard-preview {
  animation: driftHero 7s ease-in-out infinite;
}
@keyframes driftHero {
  0%, 100% { transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(0); }
  50% { transform: perspective(1200px) rotateX(-2deg) rotateY(3deg) translateY(-10px); }
}
.dashboard-preview:hover { animation-play-state: paused; }

@keyframes floatY {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-10px) rotateZ(-2deg); }
}

.feature-demo-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.9rem; font-size: 0.8rem; font-weight: 700; color: var(--primary);
  transform: translateZ(30px);
}
.feature-card:hover .feature-demo-link i { transform: translateX(3px); }
.feature-demo-link i { transition: transform 0.2s ease; }

/* ==================== Dashboard preview ==================== */
.dashboard-preview {
  background: var(--card); border: 1px solid #DBEAFE; border-radius: 1rem;
  overflow: hidden; box-shadow: var(--shadow-soft);
}
.dp-sidebar { background: linear-gradient(180deg, var(--primary), var(--secondary)); color: #fff; padding: 1.25rem; }
.dp-brand { font-size: 1.2rem; font-weight: 800; }
.dp-nav-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 0.5rem;
  font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 0.35rem;
}
.dp-nav-item.active { background: rgba(255,255,255,0.16); color: #fff; }
.dp-main { padding: 1.25rem; background: #fff; }
.dp-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.dp-avatar {
  display: inline-block; width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(135deg, #FDE68A, #BFDBFE);
}
.dp-stat { background: #F8FAFC; border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.9rem; height: 100%; }
.dp-stat-label { font-size: 0.7rem; color: var(--muted); margin-bottom: 0.4rem; }
.dp-stat-value { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; }
.dp-stat-delta { font-size: 0.7rem; font-weight: 700; margin: 0; }
.dp-stat-delta.up { color: #0D9488; }
.dp-stat-delta.down { color: #F43F5E; }
.dp-panel { background: #F8FAFC; border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; }
.dp-chip { background: #fff; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 600; }
.dp-query-list { list-style: none; padding: 0; margin: 0; }
.dp-query-list li { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.35rem 0; }

/* ==================== Feature grid ==================== */
.feature-card {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 0.85rem; padding: 1.25rem; height: 100%;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover { box-shadow: var(--shadow-soft); border-color: #CBD5E1; }
.feature-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1rem;
}
.feature-card h3 { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin: 0; }

.tone-blue .feature-icon { background: #EFF6FF; color: var(--primary); }
.tone-amber .feature-icon { background: #FFFBEB; color: #D97706; }
.tone-sky .feature-icon { background: #F0F9FF; color: #0284C7; }
.tone-teal .feature-icon { background: #F0FDFA; color: var(--accent); }
.tone-violet .feature-icon { background: #F5F3FF; color: #7C3AED; }
.tone-indigo .feature-icon { background: #EEF2FF; color: var(--secondary); }

/* ==================== Solutions ==================== */
.eyebrow { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary); margin-bottom: 0.4rem; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0; }
.section-lead { color: var(--muted); max-width: 34rem; margin: 0; }

.solution-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.9rem; box-shadow: 0 1px 3px rgba(15,23,42,0.06); }

.coaching-banner { background: linear-gradient(120deg, #020617, #172554, var(--primary)); color: #fff; padding: 1.5rem; }
.tiny-label { font-size: 0.7rem; color: var(--muted); margin: 0; }
.tiny-bold { font-size: 0.75rem; font-weight: 700; margin: 0; }
.result-avatar {
  width: 2.75rem; height: 2.75rem; margin: 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, #DBEAFE, #CCFBF1); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700;
}

.kb-file { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); background: #fff; border-radius: 0.5rem; padding: 0.5rem; }
.kb-file i { color: var(--primary); }
.chat-bubble-user { background: var(--secondary); color: #fff; border-radius: 0.7rem; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 500; max-width: 90%; }
.chat-bubble-ai { background: #F8FAFC; border-radius: 0.7rem; padding: 0.9rem; font-size: 0.85rem; line-height: 1.6; }
.chat-source-chip { display: inline-block; background: #EFF6FF; color: var(--primary); border-radius: 0.5rem; padding: 0.35rem 0.6rem; font-size: 0.75rem; font-weight: 600; }
.chat-input { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.55rem 0.9rem; font-size: 0.85rem; color: var(--muted); }
.chat-input i { margin-left: auto; color: var(--primary); }

.teacher-thumb { display: block; width: 8rem; height: 8rem; border-radius: 0.75rem; overflow: hidden; background: linear-gradient(135deg, #F1F5F9, #DBEAFE); }
.teacher-thumb img { width: 100%; height: 100%; object-fit: cover; }
.teacher-name { font-size: 1.4rem; font-weight: 800; }
.teacher-name:hover { color: var(--primary); }
.text-primary-gy { color: var(--primary); }
.teacher-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; font-weight: 600; overflow-x: auto; }
.teacher-tabs span { padding-bottom: 0.75rem; color: var(--muted); white-space: nowrap; }
.teacher-tabs span.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
.course-card { border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; }
.pill { background: #F1F5F9; color: #475569; border-radius: 0.5rem; padding: 0.2rem 0.55rem; font-size: 0.75rem; font-weight: 600; }
.course-price { font-size: 1.3rem; font-weight: 800; color: #0D9488; margin: 0; }

/* ==================== Resources / Trust / Phone ==================== */
.trust-band { display: grid; gap: 1rem; border-radius: 0.85rem; padding: 1.25rem; color: #fff;
  background: linear-gradient(110deg, var(--primary), var(--secondary), var(--accent)); box-shadow: var(--shadow-glow); }
.trust-item { display: flex; align-items: center; gap: 0.75rem; }
.trust-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (min-width: 768px) { .trust-band { grid-template-columns: repeat(2, 1fr); } }

.phone-mock {
  max-width: 22rem; border-radius: 2rem; border: 8px solid #0F172A; background: #fff;
  padding: 1.25rem; box-shadow: var(--shadow-soft);
}
.phone-title { font-size: 1rem; font-weight: 800; }
.phone-search { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); background: #F8FAFC; border-radius: 0.6rem; padding: 0.6rem 0.9rem; font-size: 0.85rem; color: var(--muted); }
.phone-chip { background: #EFF6FF; color: var(--primary); border-radius: 0.6rem; padding: 0.6rem 0; font-weight: 700; }
.phone-course { border: 1px solid var(--border); border-radius: 0.7rem; padding: 0.65rem; }
.phone-course-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.phone-course-icon.blue { background: #DBEAFE; color: var(--primary); }
.phone-course-icon.violet { background: #EDE9FE; color: #7C3AED; }
.phone-progress { height: 0.4rem; border-radius: 1rem; background: #F1F5F9; }
.phone-progress div { height: 100%; border-radius: 1rem; background: var(--accent); transition: width 1s ease; }
.phone-tabs { border-top: 1px solid var(--border); font-size: 0.68rem; font-weight: 700; color: var(--muted); }
.phone-tabs .col.active { color: var(--primary); }
.phone-tabs i { display: block; margin: 0 auto 0.25rem; font-size: 1rem; }

/* ==================== Demo form ==================== */
.demo-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-soft); }
.demo-success { color: #0F766E; background: #F0FDFA; border-radius: 0.6rem; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem; }

/* ==================== Footer ==================== */
.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
  .reveal-3d { transform: perspective(900px) rotateX(6deg) translateY(24px); }
}

/* ==================== Feature detail pages ==================== */
.back-link { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.back-link:hover { color: var(--primary); }

.fp-hero {
  background: rgba(255,255,255,0.85); border: 1px solid var(--border); border-radius: 1rem;
  overflow: hidden; box-shadow: var(--shadow-soft);
}
.fp-mock-panel { padding: 1.5rem; display: flex; align-items: center; }
.fp-mock-shell {
  background: #fff; border-radius: 0.85rem; padding: 1.25rem; box-shadow: 0 25px 60px rgba(0,0,0,0.35);
  width: 100%;
}
.fp-mock-topbar { display: flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.fp-mock-topbar b { font-size: 0.9rem; }
.fp-mock-topbar i { margin-left: auto; color: var(--muted); }
.fp-mock-topbar .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.fp-mock-topbar .dot.rose { background: #FB7185; }
.fp-mock-topbar .dot.amber { background: #FBBF24; }
.fp-mock-topbar .dot.teal { background: #2DD4BF; }
.fw-800 { font-weight: 800; }
.text-teal { color: var(--accent); }
.text-secondary-gy { color: var(--secondary); }

.workflow-step { background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; padding: 1.25rem; height: 100%; }
.workflow-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: #EFF6FF; color: var(--primary);
  font-weight: 800; font-size: 0.9rem;
}
.outcome-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; padding: 1.25rem; height: 100%; }
.outcome-card i { color: var(--accent); font-size: 1.3rem; }

.cta-icon {
  width: 3rem; height: 3rem; border-radius: 0.7rem; background: #F0FDFA; color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0;
}

/* ==================== Coaching center page ==================== */
.cc-hero { border-radius: 1rem; overflow: hidden; }
.cc-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border-radius: 2rem; padding: 0.5rem 1rem; font-weight: 700; font-size: 0.9rem; color: var(--primary); box-shadow: 0 2px 10px rgba(15,23,42,0.06); }
.cc-stat-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #F5F3FF; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.cc-course-card { border-radius: 1rem; padding: 1.25rem; height: 100%; }
.cc-course-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.cc-nav a { padding-bottom: 0.6rem; font-weight: 600; font-size: 0.9rem; color: #334155; }
.cc-nav a.active { color: var(--primary); border-bottom: 2px solid var(--primary); }

/* ==================== Teacher showcase page ==================== */
.ts-hero { border-radius: 1rem; overflow: hidden; background: linear-gradient(120deg, #0F172A, #1E293B, var(--primary)); color: #fff; }
.ts-avatar { width: 9rem; height: 9rem; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-soft); }
.ts-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 0.75rem; padding: 1rem; text-align: center; }