/* ============================================================
   MUGCO marketing site — styles
   Design tokens, theming, interactions, animations, responsive.
   Structural layout lives inline in index.html (pixel-exact from
   the design handoff); this file holds everything that can't be
   expressed inline: tokens, :hover / :focus, keyframes, media queries.
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
}

/* ---------- Theme tokens ---------- */
.mg-root {
  --bg:#0B0A0F;--band:rgba(255,255,255,.012);--nav-bg:rgba(11,10,15,.72);--grid:rgba(255,255,255,.022);
  --text:#F4F2F8;--text-strong:#E6E3EE;--text-quote:#D6D2E0;--text-list:#C7C3D2;
  --text-2:#9A95A8;--text-3:#8E8A9C;--text-4:#6A6578;
  --accent:#8B7CF0;--accent-text:#B5A8F6;--accent-text-2:#C4BAF5;--cream:#EDE0CF;--warm-solid:#EDE0CF;
  --border:rgba(255,255,255,.07);--border-2:rgba(255,255,255,.08);--border-3:rgba(255,255,255,.09);--border-chip:rgba(255,255,255,.10);--border-strong:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.025);--card-solid:#0B0A0F;--card-shadow:0 0 0 rgba(0,0,0,0);--card-hover-bg:rgba(255,255,255,.045);
  --chip-bg:rgba(255,255,255,.04);--input-bg:rgba(255,255,255,.03);--soft-bg:rgba(255,255,255,.05);--dot:#332F3D;
  --ai-card-bg:linear-gradient(180deg,rgba(139,124,240,.10),rgba(255,255,255,.02));

  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}

.mg-root[data-theme="light"] {
  --bg:#FFFFFF;--band:#F5F5F7;--nav-bg:rgba(255,255,255,.80);--grid:rgba(0,0,0,.03);
  --text:#17151E;--text-strong:#242131;--text-quote:#38343F;--text-list:#403C4A;
  --text-2:#5E5A69;--text-3:#6E6A78;--text-4:#9591A0;
  --accent:#6D5CE0;--accent-text:#5A4FC4;--accent-text-2:#5A4FC4;--cream:#B7852F;--warm-solid:#EAD3A2;
  --border:rgba(0,0,0,.09);--border-2:rgba(0,0,0,.10);--border-3:rgba(0,0,0,.11);--border-chip:rgba(0,0,0,.12);--border-strong:rgba(0,0,0,.14);
  --card:#FFFFFF;--card-solid:#FFFFFF;--card-shadow:0 1px 3px rgba(0,0,0,.06);--card-hover-bg:#FFFFFF;
  --chip-bg:rgba(0,0,0,.03);--input-bg:rgba(0,0,0,.02);--soft-bg:rgba(0,0,0,.035);--dot:#D2CFD8;
  --ai-card-bg:linear-gradient(180deg,rgba(139,124,240,.09),rgba(139,124,240,.02));
}

::selection { background: rgba(139,124,240,.35); }

/* ---------- Links / buttons / toggle ---------- */
.mg-link { transition: color .15s ease; }
.mg-link:hover { color: var(--text) !important; }

.mg-btn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.mg-btn:hover { transform: translateY(-1px); }

.mg-toggle:hover { color: var(--text) !important; }

/* ---------- Logo swap per theme ---------- */
.mg-root .logo-on-dark { display: block; }
.mg-root .logo-on-light { display: none; }
.mg-root[data-theme="light"] .logo-on-dark { display: none; }
.mg-root[data-theme="light"] .logo-on-light { display: block; }

/* ---------- Sun / moon icon swap ---------- */
.mg-root .icon-sun { display: flex; }
.mg-root .icon-moon { display: none; }
.mg-root[data-theme="light"] .icon-sun { display: none; }
.mg-root[data-theme="light"] .icon-moon { display: flex; }

/* ---------- Cards: hover + cursor spotlight ---------- */
.mg-card {
  position: relative;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mg-card:hover {
  border-color: rgba(139,124,240,.5) !important;
  background: var(--card-hover-bg) !important;
  transform: translateY(-2px);
}
.mg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(139,124,240,.16), transparent 62%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: -1;
}
.mg-card:hover::before { opacity: 1; }

/* ---------- Inputs ---------- */
.mg-input { transition: border-color .15s ease, background .15s ease; }
.mg-input:focus {
  outline: none;
  border-color: rgba(139,124,240,.7) !important;
  background: var(--soft-bg) !important;
}
.mg-input::placeholder { color: var(--text-4); }
.mg-input.mg-invalid { border-color: #ef6a6a !important; }

/* ---------- Hero glow animations ---------- */
@keyframes mgFloat { 0%,100%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) scale(1.09);} }
@keyframes mgDrift { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-24px,22px);} }
.mg-hero-glow { animation: mgFloat 10s ease-in-out infinite; }
.mg-hero-glow2 { animation: mgDrift 13s ease-in-out infinite; }

/* ---------- Scroll reveal (opacity only) ---------- */
.mg-root.js-ready .mg-card {
  transition: opacity .55s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mg-root.js-ready .mg-card:not(.mg-in) { opacity: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mg-hero-glow, .mg-hero-glow2 { animation: none; }
  .mg-root.js-ready .mg-card:not(.mg-in) { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   The design is authored at 1200px desktop width. These
   breakpoints collapse grids, shrink the H1, stack buttons,
   and simplify the nav for tablet / mobile.
   ============================================================ */

/* Tablet and below */
@media (max-width: 960px) {
  .mg-h1 { font-size: 58px !important; }
  .mg-h2 { font-size: 38px !important; }

  /* collapse multi-column grids to a single column */
  .mg-grid-2,
  .mg-grid-3 { grid-template-columns: 1fr !important; }

  /* stats: 2 x 2 */
  .mg-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .mg-stats .mg-stat:nth-child(2) { border-right: none !important; }

  /* big case study stacks; drop the left divider */
  .mg-case-big { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mg-case-quote { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--border-2); padding-top: 28px; }

  /* Why: single column, release the sticky column */
  .mg-why { grid-template-columns: 1fr !important; gap: 40px !important; }
  .mg-why-left { position: static !important; }

  /* Contact stacks */
  .mg-contact { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* Phones */
@media (max-width: 640px) {
  /* hide center nav links; logo + toggle + CTA remain */
  .mg-nav-links { display: none !important; }

  .mg-h1 { font-size: 42px !important; }
  .mg-h2 { font-size: 32px !important; }

  /* tighten section vertical rhythm and gutters */
  .mg-hero-inner { padding: 80px 22px 64px !important; }
  #solutions,
  #work > div,
  .mg-why,
  .mg-contact { padding-left: 22px !important; padding-right: 22px !important; }

  /* stack hero buttons full-width */
  .mg-hero-btns { flex-direction: column !important; align-items: stretch !important; }
  .mg-hero-btns .mg-btn { text-align: center; }

  /* stats: single column, no right dividers, add row separators */
  .mg-stats { grid-template-columns: 1fr !important; }
  .mg-stats .mg-stat { border-right: none !important; border-bottom: 1px solid var(--border); }
  .mg-stats .mg-stat:last-child { border-bottom: none; }

  /* two small testimonials stack */
  .mg-grid-2sm { grid-template-columns: 1fr !important; }

  /* contact name/email fields stack */
  .mg-form-row { grid-template-columns: 1fr !important; }

  /* footer: stack, left-aligned */
  .mg-footer { justify-content: flex-start !important; }
}