/* Public homepage + minimal app additions on top of Tailwind CDN */
html { scroll-behavior: smooth; }

/* Desktop typography — base copy was too small (14px text-sm everywhere) */
@media (min-width: 1024px) {
  .gs-home {
    font-size: 1.0625rem;
    line-height: 1.65;
  }
  .gs-home .text-sm {
    font-size: 1.0625rem;
    line-height: 1.65;
  }
  .gs-home .text-xs {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .gs-home .text-base,
  .gs-home .md\:text-base {
    font-size: 1.125rem;
    line-height: 1.65;
  }
  .gs-home .text-lg {
    font-size: 1.375rem;
    line-height: 1.45;
  }
  .gs-home .text-xl {
    font-size: 1.5rem;
    line-height: 1.35;
  }
  .gs-home h1,
  .gs-home .text-3xl {
    font-size: clamp(2.35rem, 3.2vw, 3.35rem);
    line-height: 1.1;
  }
  .gs-home .md\:text-4xl {
    font-size: clamp(2.35rem, 3.2vw, 3.35rem);
  }
  .gs-home .lg\:text-\[2\.65rem\] {
    font-size: clamp(2.5rem, 3.4vw, 3.5rem);
  }
  .gs-home h2.text-2xl,
  .gs-home .md\:text-3xl {
    font-size: clamp(1.875rem, 2.4vw, 2.625rem);
    line-height: 1.2;
  }
  .gs-home .gs-pill {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
  .gs-home .gs-nav-link {
    font-size: 1rem;
  }
}

/* Join CTA — gradient instead of recycled step photo */
.gs-join-panel {
  background:
    radial-gradient(ellipse 80% 70% at 20% 50%, rgba(16, 185, 129, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 30%, rgba(45, 212, 191, 0.12), transparent 50%),
    linear-gradient(135deg, rgb(15 23 42), rgb(2 6 23));
}

/* Scattered gamma mark watermark on public homepage */
.gs-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.gs-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/assets/images/gamma-bg-pattern.svg?v=3");
  background-repeat: repeat;
  background-size: 560px 560px;
  background-position: 0 0;
  opacity: 1;
}
.gs-home-pattern {
  display: none; /* pattern now on .gs-home::before */
}
.gs-home-content {
  position: relative;
  z-index: 1;
}

/* Wide page container — uses more desktop real estate */
.gs-page-wrap {
  width: min(1600px, 96vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 2.5vw, 2.75rem);
  padding-right: clamp(1rem, 2.5vw, 2.75rem);
}

/* Hero ambient glow — reduces flat dark void feel */
#gamma-ai {
  background:
    radial-gradient(ellipse 70% 55% at 78% 35%, rgba(16, 185, 129, 0.1), transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(45, 212, 191, 0.06), transparent 60%);
}

/* ── Public header / footer ── */
.gs-header {
  background: rgba(2, 6, 23, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gs-nav a {
  color: rgba(226, 232, 240, 0.85);
  transition: color 0.15s ease;
}
.gs-nav a:hover { color: #fff; }
.gs-muted { color: rgba(148, 163, 184, 0.9); }
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gs-btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.gs-btn-primary:hover { background: rgba(255, 255, 255, 0.14); }
.gs-footer {
  background: #020617;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(148, 163, 184, 0.95);
}
.gs-footer a { color: rgba(226, 232, 240, 0.85); }
.gs-footer a:hover { color: #fff; }
.gs-logo-header { height: clamp(2.75rem, 4.5vw, 4rem); width: auto; }
.gs-logo-footer { max-height: clamp(2.75rem, 4vw, 3.75rem); width: auto; opacity: 0.95; }
.gs-brand-mm { color: #F9AF55; }

/* Consistent image containers — fill aspect box, no letterboxing */
.gs-media {
  display: block;
  overflow: hidden;
  background: rgb(15 23 42);
}
.gs-media-16x10 { aspect-ratio: 16 / 10; }
.gs-media-16x9 { aspect-ratio: 16 / 9; }
.gs-media-4x3 { aspect-ratio: 4 / 3; }
.gs-media-1x1 { aspect-ratio: 1 / 1; }
.gs-media picture,
.gs-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.gs-media-top img { object-position: center top; }
.gs-media picture { height: 100%; }

/* ── Audience pills ── */
.gs-pill {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.9);
  border-radius: 9999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.gs-pill:hover { background: rgba(255, 255, 255, 0.08); }
.gs-pill-active,
.gs-pill[aria-selected="true"] {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.22);
  color: #d1fae5;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.15);
}

/* ── Grade band strip ── */
.gs-grade-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 767px) {
  .gs-grade-band { grid-template-columns: 1fr 1fr; }
}
.gs-grade-band-item {
  border-radius: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.gs-grade-foundation { background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(255, 255, 255, 0.03)); }
.gs-grade-intermediate { background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(255, 255, 255, 0.03)); }
.gs-grade-senior { background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(255, 255, 255, 0.03)); }
.gs-grade-fet { background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(255, 255, 255, 0.03)); }

/* ── Scroll reveal ── */
.gs-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.gs-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .gs-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Sticky mobile CTA ── */
.gs-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
  background: rgba(2, 6, 23, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.gs-sticky-cta-visible { transform: translateY(0); }
@media (min-width: 768px) {
  .gs-sticky-cta { display: none; }
}

/* ── WhatsApp button ── */
.gs-wa-btn {
  background: #25d366;
  color: #fff;
}
.gs-wa-btn:hover { background: #20bd5a; }

/* ── Telegram button ── */
.gs-tg-btn {
  background: #229ed9;
  color: #fff;
}
.gs-tg-btn:hover { background: #1b8ec4; }

/* ── Hero visual composition ── */
.gs-hero-visual {
  width: 100%;
}
.gs-hero-visual-grid {
  display: grid;
  gap: 0.625rem;
}
@media (min-width: 1024px) {
  .gs-hero-visual-grid {
    grid-template-columns: 1.35fr 0.65fr;
    gap: 0.75rem;
    align-items: stretch;
    min-height: 400px;
  }
}
.gs-hero-stage {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(52, 211, 153, 0.14);
  min-height: 280px;
}
@media (min-width: 1024px) {
  .gs-hero-stage { min-height: 400px; }
}
.gs-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center top;
}
@media (min-width: 1024px) {
  .gs-hero-img { min-height: 400px; }
}
.gs-hero-chat {
  border: 1px solid rgba(52, 211, 153, 0.32);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.6);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Image frames — stronger contrast on dark bg */
.gs-img-frame {
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(52, 211, 153, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.gs-img-frame-sm {
  border-radius: 0.75rem;
}
.gs-img-frame picture,
.gs-img-frame img {
  display: block;
  width: 100%;
}

.gs-hero-chat {
  border: 1px solid rgba(52, 211, 153, 0.28);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.55);
}

/* Cards — brighter on dark background */
.gs-card {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.gs-card-accent {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.1);
}

.gs-chip {
  border-radius: 9999px;
  border: 1px solid rgba(52, 211, 153, 0.25);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.55rem;
  color: rgba(226, 232, 240, 0.9);
}

/* Pills — horizontal scroll on small phones */
.gs-pill-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gs-pill-scroll::-webkit-scrollbar { display: none; }
.gs-pill-scroll .gs-pill {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Readable long-form public pages (About, Privacy, etc.) */
.gs-prose a {
  color: #6ee7b7;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.gs-prose a:hover { color: #a7f3d0; }
.gs-prose h2 { scroll-margin-top: 6rem; }

/* Department / evidence page — quieter official surface */
.gs-dept h1 { letter-spacing: -0.02em; }
.gs-dept .tabular-nums { font-variant-numeric: tabular-nums; }

@media print {
  .gs-header,
  .gs-footer,
  .gs-sticky-cta,
  .gs-no-print,
  .gs-home::before,
  .gs-home-pattern {
    display: none !important;
  }
  .gs-home,
  .gs-dept {
    background: #fff !important;
    color: #0f172a !important;
  }
  .gs-dept .text-white,
  .gs-dept .text-slate-100,
  .gs-dept .text-slate-200,
  .gs-dept .text-slate-300,
  .gs-dept .text-teal-100,
  .gs-dept .text-teal-200,
  .gs-dept .text-amber-100,
  .gs-dept h1,
  .gs-dept h2,
  .gs-dept h3 {
    color: #0f172a !important;
  }
  .gs-dept .text-slate-400,
  .gs-dept .text-slate-500 {
    color: #475569 !important;
  }
  .gs-dept [class*="border"],
  .gs-dept [class*="bg-"] {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
  }
  .gs-page-wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .gs-dept figure,
  .gs-dept .gs-media,
  .gs-dept .gs-img-frame {
    break-inside: avoid;
  }
  a[href]::after {
    content: none !important;
  }
}