/* =========================================
   MHT CET LAW PORTAL — style.css
   Based on original Document 3 design system
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── DESIGN TOKENS ────────────────────── */
:root {
  --primary:       #2563eb;
  --primary-light: #3b82f6;
  --primary-dark:  #1e40af;
  --success:       #16a34a;
  --warning:       #d97706;
  --error:         #dc2626;
  --background:    #ffffff;
  --surface:       #f8fafc;
  --surface-2:     #f1f5f9;
  --border:        #e2e8f0;
  --text-primary:  #0f172a;
  --text-secondary:#475569;
  --text-muted:    #64748b;
  --shadow-sm:     0 1px 2px 0 rgba(0,0,0,.05);
  --shadow:        0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px 0 rgba(0,0,0,.06);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}
/* DARK MODE */
html[data-theme="dark"] {
  --background:    #0f172a;
  --surface:       #1e293b;
  --surface-2:     #1e293b;
  --border:        #334155;
  --text-primary:  #f1f5f9;
  --text-secondary:#cbd5e1;
  --text-muted:    #94a3b8;
  --shadow-sm:     0 1px 2px 0 rgba(0,0,0,.4);
  --shadow:        0 1px 3px 0 rgba(0,0,0,.5);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,.5);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,.5);
}

/* ── RESET ────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.6;
  color:var(--text-primary);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Hide body until splash finishes — fallback makes it visible after 3s if JS fails */
  visibility:hidden;
  animation: body-fallback-show 0s 3s forwards;
}
@keyframes body-fallback-show { to { visibility: visible; } }
body.ready {
  visibility:visible;
  animation: none;
}

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--surface); }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

/* ── GLOBAL LAYOUT FIX (Overflow + Scrollbar Issue) ── */

/* Prevent horizontal scroll */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make sure nothing exceeds viewport */
body {
  width: 100%;
}

/* Fix flex overflow issues */
.header-content,
.hero-ctas,
.header-actions,
.nav-container {
  min-width: 0;
}

/* Prevent buttons from breaking layout */
.btn {
  max-width: 100%;
}

/* Prevent grid overflow */
.card-grid,
.offer-grid,
.review-grid,
.stats {
  width: 100%;
}

/* Ensure container never causes overflow */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── SPLASH SCREEN ────────────────────── */
#splash {
  position:fixed; inset:0; z-index:9999;
  background:var(--background);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1.25rem;
  transition:opacity .35s ease, visibility .35s ease;
}
#splash.hide { opacity:0; visibility:hidden; pointer-events:none; }

.splash-logo {
  width:56px; height:56px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,99,235,.25);
  animation:splash-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.splash-logo svg { width:28px; height:28px; color:#fff; }

.splash-name {
  font-size:1.1rem; font-weight:700; color:var(--text-primary);
  letter-spacing:-.02em;
  animation:splash-pop .45s .1s cubic-bezier(.34,1.56,.64,1) both;
}

.splash-bar-wrap {
  width:160px; height:3px; background:var(--surface-2); border-radius:2px;
  overflow:hidden;
  animation:splash-pop .45s .15s ease both;
}
.splash-bar {
  height:100%; width:0; background:linear-gradient(90deg,var(--primary),var(--primary-light));
  border-radius:2px;
  animation:splash-fill .7s .2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes splash-pop  { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
@keyframes splash-fill { to{width:100%} }

/* ── CONTAINER ────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }

/* ── HEADER ───────────────────────────── */
.header {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 0;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: .875rem;
}

.logo {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo svg {
  width: 22px;
  height: 22px;
  color: #fff;
}

.brand-text h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.brand-text p {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: .1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── DARK MODE TOGGLE BUTTON ──────────── */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  pointer-events: none;
}
.theme-toggle:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* In dark mode, show sun icon colour */
html[data-theme="dark"] .theme-toggle {
  background: var(--surface);
  color: #fbbf24;
  border-color: var(--border);
}
html[data-theme="dark"] .theme-toggle:hover {
  background: #fbbf24;
  color: #0f172a;
  border-color: #fbbf24;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}
/* ── NAV ──────────────────────────────── */
.nav {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:69px; z-index:199;
}

.nav-container {
  display:flex; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.nav-container::-webkit-scrollbar { display:none; }

.nav-link {
  display:flex; align-items:center; gap:.4rem;
  padding:.875rem 1.25rem;
  color:var(--text-secondary); text-decoration:none;
  font-weight:500; font-size:.8125rem; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s, background .15s, border-color .15s;
}
.nav-link svg { width:15px; height:15px; flex-shrink:0; }
.nav-link:hover  { color:var(--primary); background:var(--background); }
.nav-link.active { color:var(--primary); border-bottom-color:var(--primary); background:var(--background); }

/* ── HERO ─────────────────────────────── */
.hero {
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff; padding:4.5rem 0;
  text-align:center;
  position:relative; overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-inner { position:relative; z-index:1; }

.hero h2 {
  font-size:clamp(2rem,4vw,2.75rem);
  font-weight:800; letter-spacing:-.03em; line-height:1.15;
  margin-bottom:1rem;
}
.hero p {
  font-size:1.0625rem; opacity:.88;
  max-width:560px; margin:0 auto 2.25rem;
  line-height:1.7;
}
.hero-ctas { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }

/* Stats bar inside hero */
.hero-stats {
  display:inline-flex; gap:0;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-lg);
  overflow:hidden;
  flex-wrap:wrap;
}
.hero-stat {
  padding:.875rem 1.75rem;
  border-right:1px solid rgba(255,255,255,.15);
  text-align:center;
}
.hero-stat:last-child { border-right:none; }
.hero-stat-num { font-size:1.5rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.hero-stat-lbl { font-size:.7rem; opacity:.75; margin-top:.25rem; font-weight:500; letter-spacing:.02em; }

/* ── MAIN AREA ────────────────────────── */
.main { padding:3rem 0; }

.section { margin-bottom:3rem; }

.section-header { margin-bottom:1.75rem; }
.section-title {
  font-size:1.5rem; font-weight:700; color:var(--text-primary);
  letter-spacing:-.02em;
}
.section-description { font-size:.875rem; color:var(--text-muted); margin-top:.25rem; }

/* ── NOTICE BOARD ─────────────────────── */
.notice-board {
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--warning);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.notice-board-header {
  display:flex; align-items:center; gap:.75rem;
  padding:1.125rem 1.5rem;
  background:var(--background);
  border-bottom:1px solid var(--border);
}
.notice-icon-box {
  width:34px; height:34px; border-radius:var(--radius);
  background:#fef3c7;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.notice-icon-box svg { width:17px; height:17px; color:#d97706; }
.notice-board-header h3 { font-size:.9375rem; font-weight:600; color:var(--text-primary); }
.notice-board-header p  { font-size:.72rem; color:var(--text-muted); margin-top:.1rem; }

.notice-list { padding:.875rem; display:flex; flex-direction:column; gap:.5rem; }

.notice-item {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.875rem 1rem;
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s;
}
.notice-item:hover { border-color:rgba(37,99,235,.25); box-shadow:var(--shadow-sm); }
.notice-item-left { display:flex; align-items:center; gap:.75rem; flex:1; min-width:0; }

.notice-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--success); flex-shrink:0;
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow:0 0 0 0 rgba(22,163,74,.35); }
  50%      { box-shadow:0 0 0 5px rgba(22,163,74,0); }
}
.notice-text { font-size:.8375rem; color:var(--text-primary); line-height:1.5; }

/* ── QUICK STATS ──────────────────────── */
.stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.25rem;
  margin-bottom:3rem;
}
.stat-card {
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s;
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.stat-number {
  font-size:2rem; font-weight:800; color:var(--primary);
  letter-spacing:-.03em; line-height:1;
}
.stat-label { font-size:.8rem; color:var(--text-muted); margin-top:.375rem; font-weight:500; }

/* ── CARD GRID ────────────────────────── */
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem;
}

.card {
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  will-change:transform;
}
.card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
  border-color:rgba(37,99,235,.18);
}

.card-header { padding:1.375rem 1.5rem; border-bottom:1px solid var(--border); }

.card-icon {
  width:42px; height:42px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.875rem; flex-shrink:0;
}
.card-icon svg { width:20px; height:20px; }

/* icon colour variants */
.icon-blue   { background:#eff6ff; color:#2563eb; }
.icon-green  { background:#f0fdf4; color:#16a34a; }
.icon-orange { background:#fff7ed; color:#ea580c; }
.icon-purple { background:#faf5ff; color:#7c3aed; }
.icon-teal   { background:#f0fdfa; color:#0d9488; }
.icon-red    { background:#fef2f2; color:#dc2626; }
.icon-yellow { background:#fefce8; color:#ca8a04; }
.icon-indigo { background:#eef2ff; color:#4338ca; }
.icon-primary { background:#eff6ff; color:var(--primary); }

.card-title {
  font-size:1rem; font-weight:700; color:var(--text-primary);
  letter-spacing:-.01em;
}
.card-description { font-size:.8rem; color:var(--text-muted); margin-top:.2rem; }

.card-body { padding:1.25rem 1.5rem; }
.card-content { margin-bottom:1.125rem; font-size:.8375rem; color:var(--text-secondary); line-height:1.65; }

/* lock inside card */
.card-locked { position:relative; }
.card-lock-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.lock-label {
  display:flex; align-items:center; gap:.375rem;
  font-size:.775rem; font-weight:600; color:var(--text-muted);
}
.lock-label svg { width:14px; height:14px; }

/* ── BUTTONS ──────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.375rem;
  padding:.625rem 1.25rem;
  font-family:inherit; font-size:.85rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  border-radius:var(--radius); border:1px solid transparent;
  transition:background .15s, box-shadow .15s, transform .15s, border-color .15s, color .15s;
  will-change:transform; white-space:nowrap;
}
.btn svg { width:15px; height:15px; flex-shrink:0; }

.btn-primary {
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 1px 2px rgba(37,99,235,.2);
}
.btn-primary:hover {
  background:var(--primary-dark); border-color:var(--primary-dark);
  box-shadow:0 4px 12px rgba(37,99,235,.3); transform:translateY(-1px);
}

.btn-outline {
  background:transparent; color:var(--primary); border-color:var(--primary);
}
.btn-outline:hover { background:var(--primary); color:#fff; }

.btn-ghost {
  background:transparent; color:var(--text-secondary); border-color:var(--border);
}
.btn-ghost:hover { background:var(--surface); color:var(--text-primary); }

.btn-white {
  background:#fff; color:var(--primary-dark); border-color:rgba(255,255,255,.8); font-weight:700;
}
.btn-white:hover { background:#f0f9ff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12); }

.btn-outline-white {
  background:transparent; color:#fff; border-color:rgba(255,255,255,.55);
}
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.9); }

.btn-tg {
  background:#229ed9; color:#fff; border-color:#229ed9;
}
.btn-tg:hover { background:#1a8bc4; transform:translateY(-1px); box-shadow:0 4px 12px rgba(34,158,217,.35); }

.btn-sm   { padding:.425rem .875rem; font-size:.775rem; }
.btn-full { width:100%; padding:.75rem 1.25rem; }

.btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.btn.loading { opacity:.6; pointer-events:none; }

/* ── ALERT ────────────────────────────── */
.alert {
  display:flex; align-items:flex-start; gap:.625rem;
  padding:.875rem 1rem;
  border-radius:var(--radius);
  font-size:.8125rem; line-height:1.55; margin:.875rem 0;
}
.alert svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.alert-info    { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.alert-warning { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* ─────────────────────────────────────
   STUDENT REVIEWS SECTION
───────────────────────────────────── */

.review-section {
  padding: 4rem 0;
  background: var(--background);
  border-top: 1px solid var(--border);
}

.review-section .section-title {
  text-align: center;
}

.review-section .section-description {
  text-align: center;
  max-width: 600px;
  margin: 0.5rem auto 0;
}

/* Grid Layout */
.review-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

/* Card */
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: 1.5rem;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
}

/* Top Section */
.review-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}

/* Avatar */
.review-avatar {
  width: 48px;
  height: 48px;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.review-avatar svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

/* Name */
.review-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* College Meta */
.review-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Stars */
.review-stars {
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin: 0.6rem 0 0.8rem;
  color: #f59e0b;
}

/* Review Text */
.review-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Subtle Quote Accent */
.review-card::before {
  content: "“";
  font-size: 3rem;
  position: absolute;
  top: 10px;
  right: 16px;
  opacity: 0.04;
  font-weight: bold;
  color: var(--primary);
}

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */

@media (max-width: 992px) {
  .review-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.4rem;
  }
}

@media (max-width: 600px) {
  .review-section {
    padding: 3rem 0;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }

  .review-card {
    padding: 1.25rem;
  }
}

/* ── WHAT WE OFFER ────────────────────── */
.offer-section {
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:3rem 0;
}
.offer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1rem;
  margin-top:1.75rem;
}
.offer-card {
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  display:flex; gap:.875rem; align-items:flex-start;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.offer-card:hover {
  box-shadow:var(--shadow-md);
  border-color:rgba(37,99,235,.2);
  transform:translateY(-1px);
}
.offer-icon {
  width:38px; height:38px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.offer-icon svg { width:18px; height:18px; }
.offer-title { font-size:.875rem; font-weight:700; color:var(--text-primary); margin-bottom:.2rem; }
.offer-desc  { font-size:.775rem; color:var(--text-muted); line-height:1.6; }

/* ── FOOTER ───────────────────────────── */
.footer {
  background:var(--surface-2);
  border-top:1px solid var(--border);
  padding:3rem 0 0;
}
.footer-content {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--border);
}
.footer-section h3 {
  font-size:.875rem; font-weight:700; color:var(--text-primary); margin-bottom:.875rem;
}
.footer-section p {
  font-size:.8rem; color:var(--text-muted); margin-bottom:.4rem; line-height:1.6;
}
.footer-section a {
  font-size:.8rem; color:var(--text-muted); text-decoration:none;
  display:flex; align-items:center; gap:.35rem;
  transition:color .15s; margin-bottom:.4rem;
}
.footer-section a svg { width:11px; height:11px; flex-shrink:0; }
.footer-section a:hover { color:var(--primary); }

.footer-social { display:flex; gap:.5rem; margin-top:.875rem; }
.social-btn {
  width:32px; height:32px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}
.social-btn svg { width:14px; height:14px; }
.social-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

.footer-bottom {
  padding:1.25rem 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.footer-bottom p { font-size:.775rem; color:var(--text-muted); }

/* ── MODAL ────────────────────────────── */
.modal-bg {
  position:fixed; inset:0;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  opacity:0; pointer-events:none;
  transition:opacity .22s;
}
.modal-bg.open { opacity:1; pointer-events:all; }

.modal {
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:2rem;
  max-width:400px; width:100%;
  text-align:center;
  box-shadow:var(--shadow-lg);
  position:relative;
  transform:scale(.93) translateY(12px);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-bg.open .modal { transform:scale(1) translateY(0); }

.modal-close {
  position:absolute; top:.875rem; right:.875rem;
  background:var(--surface); border:1px solid var(--border); border-radius:50%;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted);
  transition:background .15s, color .15s;
}
.modal-close:hover { background:var(--surface-2); color:var(--text-primary); }
.modal-close svg { width:14px; height:14px; }

.modal-icon-wrap {
  width:60px; height:60px; border-radius:14px;
  background:#eff6ff; border:2px solid #bfdbfe;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.25rem;
}
.modal-icon-wrap svg { width:26px; height:26px; color:var(--primary); }

.modal h3 { font-size:1.25rem; font-weight:700; color:var(--text-primary); margin-bottom:.5rem; letter-spacing:-.01em; }
.modal p  { font-size:.85rem; color:var(--text-muted); margin-bottom:1.5rem; line-height:1.6; }
.modal-btns { display:flex; flex-direction:column; gap:.6rem; }

/* ── FADE-IN ON SCROLL ────────────────── */
.fade-in {
  opacity:0; transform:translateY(14px);
  transition:opacity .4s ease, transform .4s ease;
  will-change:opacity,transform;
}
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════
   RESPONSIVE — All Devices
   iOS / Android / Tablet / Laptop / Desktop
   ══════════════════════════════════════════ */

/* ── BASE: ensure touch targets & safe areas ── */
* { -webkit-tap-highlight-color: transparent; }

html {
  /* Prevent font size inflation on iOS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Safe area padding for iPhone notch / Dynamic Island */
.header {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.footer {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* ── LARGE DESKTOP ≥ 1280px ─────────────── */
@media (min-width: 1280px) {
  .container { max-width: 1200px; padding: 0 2rem; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .stats     { grid-template-columns: repeat(4, 1fr); }
}

/* ── LAPTOP / SMALL DESKTOP 1025–1279px ──── */
@media (max-width: 1279px) and (min-width: 1025px) {
  .container { max-width: 960px; padding: 0 1.5rem; }
  .footer-content { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
}

/* ── TABLET LANDSCAPE + LAPTOP ≤ 1024px ──── */
@media (max-width: 1024px) {
  .container { padding: 0 1.5rem; }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .card-grid  { grid-template-columns: repeat(2, 1fr); }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .stats      { grid-template-columns: repeat(3, 1fr); }
}

/* ── TABLET PORTRAIT 768–1024px (iPad etc.) ─ */
@media (max-width: 1024px) and (min-width: 768px) {
  .hero { padding: 4rem 0; }
  .hero h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
  .hero p  { font-size: 1rem; }

  .brand-text h1 { font-size: 1.1rem; }
  .brand-text p  { font-size: .7rem; }

  /* Keep header buttons visible but compact */
  .header-actions { gap: 8px; }
  .btn-sm { padding: .4rem .9rem; font-size: .78rem; }

  .section-title { font-size: 1.35rem; }

  .review-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── MOBILE LANDSCAPE + SMALL TABLET ≤ 767px ─ */
@media (max-width: 767px) {
  .container { padding: 0 1rem; }

  /* Header: shrink brand text, tighten spacing */
  .header-content { padding: .75rem 0; }
  .logo { width: 38px; height: 38px; border-radius: 8px; }
  .logo svg { width: 19px; height: 19px; }
  .brand-text h1 { font-size: 1rem; }
  .brand-text p  { display: none; } /* hide subtitle to save space */
  .header-actions { gap: 7px; }

  /* Hide "Join Channel" text label, keep icon */
  .header-actions .btn-ghost span { display: none; }

  /* Nav */
  .nav { top: 61px; }
  .nav-link { padding: .75rem .875rem; font-size: .775rem; }

  /* Hero */
  .hero { padding: 3rem 0 2.5rem; }
  .hero h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .hero p  { font-size: .9375rem; margin-bottom: 1.75rem; }
  .hero-ctas { gap: .625rem; }
  .hero-stats { flex-direction: column; }
  .hero-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); padding: .75rem 1.5rem; }
  .hero-stat:last-child { border-bottom: none; }
  .hero-stat-num { font-size: 1.25rem; }

  /* Sections */
  .main { padding: 2rem 0; }
  .section { margin-bottom: 2rem; }
  .section-title { font-size: 1.25rem; }

  /* Grids → 1 column */
  .card-grid  { grid-template-columns: 1fr; gap: 1rem; }
  .offer-grid { grid-template-columns: 1fr; gap: .875rem; }
  .stats      { grid-template-columns: repeat(2, 1fr); gap: .875rem; }
  .review-grid { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Footer */
  .footer-content { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom  { flex-direction: column; text-align: center; gap: .5rem; }

  /* Modal: full-width on small screens */
  .modal { padding: 1.5rem; border-radius: var(--radius-lg); }
}

/* ── MOBILE PORTRAIT ≤ 480px (iPhone SE → 14) ─ */
@media (max-width: 480px) {
  .container { padding: 0 .875rem; }

  /* Header: very compact */
  .header-content { padding: .625rem 0; }
  .logo-section { gap: .625rem; }
  .logo { width: 36px; height: 36px; }
  .brand-text h1 { font-size: .9375rem; }
  .header-actions { gap: 6px; }

  /* Hide "Join Channel" button entirely on tiny screens */
  .header-actions .btn-ghost { display: none; }

  /* Buy button smaller */
  .header-actions .btn-primary { padding: .45rem .875rem; font-size: .775rem; }

  /* Theme toggle smaller */
  .theme-toggle { width: 34px; height: 34px; }
  .theme-toggle svg { width: 16px; height: 16px; }

  /* Nav */
  .nav { top: 57px; }
  .nav-link { padding: .7rem .75rem; font-size: .75rem; gap: .3rem; }

  /* Hero */
  .hero { padding: 2.5rem 0 2rem; }
  .hero h2 { font-size: clamp(1.35rem, 7vw, 1.75rem); letter-spacing: -.02em; }
  .hero p  { font-size: .875rem; margin-bottom: 1.5rem; padding: 0 .5rem; }
  .hero-ctas { flex-direction: column; gap: .625rem; }
  .hero-ctas .btn { width: 100%; justify-content: center; padding: .75rem 1rem; font-size: .875rem; }
  .hero-stat-num { font-size: 1.15rem; }
  .hero-stat-lbl { font-size: .65rem; }

  /* Cards */
  .card-header { padding: 1.125rem 1.25rem; }
  .card-body   { padding: 1rem 1.25rem; }
  .card-title  { font-size: .9375rem; }

  /* Stats */
  .stats { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .stat-number { font-size: 1.625rem; }
  .stat-card   { padding: 1.125rem; }

  /* Notice board */
  .notice-item { padding: .75rem; }
  .notice-text { font-size: .8rem; }

  /* Buttons */
  .btn-full { padding: .75rem 1rem; font-size: .875rem; }

  /* Footer */
  .footer { padding: 2rem 0 0; }
  .footer-bottom p { font-size: .725rem; }

  /* Modal */
  .modal { padding: 1.25rem; }
  .modal h3 { font-size: 1.1rem; }
}

/* ── VERY SMALL ≤ 360px (older Android) ─── */
@media (max-width: 360px) {
  .container { padding: 0 .75rem; }
  .brand-text h1 { font-size: .875rem; }
  .hero h2 { font-size: 1.25rem; }
  .nav-link { padding: .65rem .625rem; font-size: .7rem; }
  .stats { grid-template-columns: 1fr 1fr; gap: .625rem; }
  .stat-number { font-size: 1.375rem; }
}

/* ── TALL PHONES: safe bottom spacing ───── */
@media (max-width: 480px) {
  .footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── TOUCH DEVICES: bigger tap targets ──── */
@media (hover: none) and (pointer: coarse) {
  .btn     { min-height: 44px; }
  .nav-link { min-height: 44px; }
  .theme-toggle { min-height: 44px; min-width: 44px; }
  .social-btn { width: 40px; height: 40px; }
  .notice-item { padding: 1rem; }
  .card:hover { transform: none; box-shadow: var(--shadow); } /* disable hover lift on touch */
  .offer-card:hover { transform: none; }
  .stat-card:hover  { transform: none; }
}


/* ══════════════════════════════════════════
   MOBILE PATCH — Auth buttons + Header fix
   ══════════════════════════════════════════ */

/* Prevent horizontal scroll on all screens */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Header — flex wrap so auth buttons don't overflow */
.header-content {
  flex-wrap: wrap;
  gap: 8px;
}
.header-actions {
  flex-wrap: wrap;
  gap: 6px;
}

/* Auth buttons in header — shrink on mobile */
#authHeaderArea, #userHeaderArea {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Nav — horizontal scroll on mobile instead of wrapping */
.nav-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
  padding-bottom: 2px;
}
.nav-container::-webkit-scrollbar { display: none; }
.nav-link { white-space: nowrap; flex-shrink: 0; }

/* Contact section grid — single col on mobile */
@media (max-width: 600px) {
  #contact > .container > div > div > div > .form-row-contact,
  #contact [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #contact { padding: 32px 0; }
}

/* Hero CTAs — stack on mobile */
@media (max-width: 520px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: .625rem;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Header — on very small screens hide secondary btns */
@media (max-width: 480px) {
  /* Hide "Join Channel" + "Buy Course" from header, keep auth + theme */
  .header-actions > a.btn-ghost,
  .header-actions > a.btn-primary {
    display: none;
  }
  /* But keep auth area visible */
  .header-actions #authHeaderArea,
  .header-actions #userHeaderArea {
    display: flex !important;
  }
  #authHeaderArea a.btn-ghost { display: flex; }
  #authHeaderArea a.btn-primary { display: flex; }

  .brand-text p { display: none; }
  .logo { width: 36px; height: 36px; }
  .logo svg { width: 18px; height: 18px; }
}

/* Cards — ensure padding OK on small phones */
@media (max-width: 400px) {
  .card-header, .card-body { padding: 1rem; }
  .modal { padding: 1.25rem 1rem; }
  .btn { padding: .6rem .875rem; font-size: .8rem; }
}

/* Notice items — stack on mobile */
@media (max-width: 560px) {
  .notice-item {
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
  }
  .notice-item .btn { align-self: flex-start; }
}

/* Footer fix — proper stacking */
@media (max-width: 767px) {
  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Stats — 2 col on mobile */
@media (max-width: 600px) {
  .stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem;
  }
}

/* Section title responsive */
@media (max-width: 480px) {
  .section-title { font-size: 1.15rem; }
  .section-description { font-size: .85rem; }
}

/* Review section grid */
@media (max-width: 560px) {
  .review-grid { grid-template-columns: 1fr !important; }
}

/* Offer grid */
@media (max-width: 560px) {
  .offer-grid { grid-template-columns: 1fr !important; }
}