/* site/site.css — marketing site styles, imports brand tokens */
@import url('../colors_and_type.css?v=1779213422164');

/* Hide native scrollbars project-wide — content still scrolls,
   the chrome strip doesn't ruin mobile/desktop look. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: #07080d;
  color: var(--mlc-cream);
  font-family: var(--mlc-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mlc-fg-8); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--mlc-fg-7); }

/* Deep wizard-hat atmosphere — not black, but deep-navy with cosmic glow */
.mlc-atmosphere {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.mlc-atmosphere::before {
  content: ''; position: absolute;
  top: -30%; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 900px;
  background: radial-gradient(ellipse at center,
    rgba(33,88,164,0.35) 0%,
    rgba(33,88,164,0.12) 35%,
    transparent 70%);
  filter: blur(40px);
}
.mlc-atmosphere::after {
  content: ''; position: absolute;
  bottom: -20%; right: -10%;
  width: 800px; height: 800px;
  background: radial-gradient(circle at center,
    rgba(244,205,99,0.10) 0%,
    rgba(235,162,93,0.05) 40%,
    transparent 70%);
  filter: blur(60px);
}

/* Star field */
.mlc-stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(254,255,238,0.5), transparent),
    radial-gradient(1px 1px at 68% 34%, rgba(254,255,238,0.35), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(244,205,99,0.4), transparent),
    radial-gradient(1px 1px at 82% 88%, rgba(254,255,238,0.3), transparent),
    radial-gradient(1px 1px at 45% 10%, rgba(254,255,238,0.25), transparent),
    radial-gradient(1px 1px at 92% 52%, rgba(254,255,238,0.4), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(244,205,99,0.3), transparent),
    radial-gradient(1px 1px at 58% 62%, rgba(254,255,238,0.2), transparent);
}

/* Shared layout */
.mlc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

/* Nav */
.mlc-nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(7,8,13,0.72);
  border-bottom: 1px solid var(--mlc-fg-9);
}
.mlc-nav-inner {
  display: flex; align-items: center; gap: 32px;
  height: 60px;
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
}
.mlc-nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.01em; font-size: 15px;
}
.mlc-nav-brand-mark {
  width: 26px; height: 26px;
  filter: drop-shadow(0 0 8px rgba(244,205,99,0.4));
}
.mlc-nav-links { display: flex; gap: 4px; flex: 1; }
.mlc-nav-links a {
  padding: 6px 12px; border-radius: 6px;
  font-size: 13px; color: var(--mlc-fg-4);
  transition: color .15s, background .15s;
}
.mlc-nav-links a:hover { color: var(--mlc-fg-1); background: var(--mlc-fg-9); }

.mlc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
  transition: all .2s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
}
.mlc-btn-primary {
  background: linear-gradient(180deg, #F4CD63 0%, #EBA25D 100%);
  color: #1a1200;
  box-shadow: 0 4px 16px rgba(244,205,99,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.mlc-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(244,205,99,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.mlc-btn-primary:active { transform: translateY(0); }
.mlc-btn-ghost {
  background: rgba(254,255,238,0.04);
  color: var(--mlc-fg-2);
  border: 1px solid var(--mlc-fg-8);
}
.mlc-btn-ghost:hover {
  background: rgba(254,255,238,0.08);
  border-color: var(--mlc-fg-6);
  color: var(--mlc-fg-1);
}

/* Hero typography */
.mlc-hero { position: relative; padding: 80px 0 40px; z-index: 2; }
.mlc-hero h1 {
  font-size: clamp(44px, 7vw, 84px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  color: #fffef0;
}
.mlc-hero h1 .accent {
  background: linear-gradient(120deg, #F4CD63 0%, #EBA25D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 600;
}
.mlc-hero-sub {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--mlc-fg-4);
  max-width: 640px;
  margin: 0 0 36px;
}
.mlc-eyebrow-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: rgba(244,205,99,0.08);
  border: 1px solid rgba(244,205,99,0.25);
  color: var(--mlc-gold);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
  animation: mlc-eyebrow-float 4s ease-in-out infinite;
}
@keyframes mlc-eyebrow-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.mlc-eyebrow-hero .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7ec98f;
  box-shadow: 0 0 8px #7ec98f;
  animation: mlc-pulse 1.4s ease-in-out infinite;
}
@keyframes mlc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Section */
.mlc-section { position: relative; z-index: 2; padding: 120px 0; }
.mlc-section-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mlc-gold);
  margin: 0 0 16px;
}
.mlc-section h2 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  max-width: 800px;
}
.mlc-section-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--mlc-fg-4);
  max-width: 640px;
  margin: 0 0 48px;
}

/* Terminal frame — the hero actor */
.mlc-term {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, #0d1322 0%, #0a0f1a 100%);
  border: 1px solid var(--mlc-fg-8);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.6),
    0 0 80px rgba(33,88,164,0.2),
    inset 0 1px 0 rgba(254,255,238,0.04);
  overflow: hidden;
  transform-origin: center top;
}

/* Halo behind the terminal */
.mlc-term-halo {
  position: absolute; inset: -40px -40px -80px -40px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(33,88,164,0.35), transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(244,205,99,0.18), transparent 55%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* Utility fades */
@keyframes mlcFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mlc-fade-up { animation: mlcFadeUp .8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes mlc-spin { to { transform: rotate(360deg); } }

/* Footer */
.mlc-footer {
  position: relative; z-index: 2;
  padding: 60px 0 40px;
  border-top: 1px solid var(--mlc-fg-9);
  color: var(--mlc-fg-5);
  font-size: 13px;
}
.mlc-footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px;
}
.mlc-footer a { color: var(--mlc-fg-4); }
.mlc-footer a:hover { color: var(--mlc-fg-1); }

/* Scroll reveal */
.mlc-reveal { opacity: 1; transform: none; transition: opacity .9s ease-out, transform .9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mlc-reveal.start-hidden { opacity: 0; transform: translateY(30px); }

/* Feature card */
.mlc-feature {
  position: relative;
  background: linear-gradient(180deg, rgba(254,255,238,0.03) 0%, rgba(254,255,238,0.01) 100%);
  border: 1px solid var(--mlc-fg-8);
  border-radius: 16px;
  padding: 28px;
  overflow: hidden;
  transition: border-color .3s, background .3s, transform .3s;
}
.mlc-feature:hover {
  border-color: var(--mlc-gold-40);
  background: linear-gradient(180deg, rgba(244,205,99,0.04) 0%, rgba(254,255,238,0.01) 100%);
  transform: translateY(-2px);
}
.mlc-feature h3 {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.015em;
  margin: 16px 0 8px;
  color: var(--mlc-cream);
}
.mlc-feature p {
  font-size: 14px; line-height: 1.55;
  color: var(--mlc-fg-4);
  margin: 0;
}

/* ===========================================================
   Mobile pass (≤760px) — kept in one block, doesn't touch desktop
   =========================================================== */
@media (max-width: 760px) {
  .mlc-wrap { padding: 0 16px; }

  /* Nav — wrap to 2 lines, drop the Sponsor button */
  .mlc-nav-inner { gap: 12px; height: auto; padding: 10px 16px; flex-wrap: wrap; }
  .mlc-nav-brand { font-size: 14px; }
  .mlc-nav-brand-mark { width: 22px; height: 22px; }
  .mlc-nav-links { order: 3; flex: 1 0 100%; justify-content: center; gap: 0; }
  .mlc-nav-links a { padding: 4px 10px; font-size: 12px; }
  .mlc-nav-inner > a.mlc-btn { padding: 6px 12px; font-size: 12px; }
  .mlc-nav-inner > a.mlc-btn:nth-of-type(1) { display: none; } /* Sponsor */

  /* Hero — slot collapses, terminal scales itself via JS */
  .mlc-hero { padding: 40px 0 0; }
  #hero-terminal-slot { height: 420px !important; }
  .mlc-hero h1 { font-size: clamp(30px, 9vw, 42px) !important; margin-bottom: 16px; line-height: 1.05; }
  .mlc-hero-sub { font-size: 15px; margin: 16px 0 24px; }
  .mlc-eyebrow-hero { margin-bottom: 16px; font-size: 11px; }
  .tiny-meta { flex-wrap: wrap; gap: 8px 14px; font-size: 11px; margin-top: 16px; }

  /* Sections — tighter rhythm, smaller heads */
  .mlc-section { padding: 56px 0; }
  .mlc-section h2 { font-size: clamp(26px, 6.5vw, 32px); margin-bottom: 14px; }
  .mlc-section-lead { font-size: 15px; margin-bottom: 28px; }
  .row.two { gap: 28px !important; }

  /* Features grid */
  .grid-3 { gap: 12px; }
  .mlc-feature { padding: 20px 18px; border-radius: 12px; }
  .mlc-feature h3 { font-size: 17px; }
  .mlc-feature p { font-size: 13px; }

  /* API demo — let it scroll horizontally */
  .api-demo pre { font-size: 11px; padding: 14px 16px; line-height: 1.55; }
  .api-demo-head { font-size: 10px; padding: 8px 12px; }

  /* Architecture — single column already at 900 */
  .arch { padding: 20px 0; }

  /* Download box wraps cleanly */
  #download .mlc-wrap > .mlc-reveal > div[style*="inline-flex"] {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    font-size: 12px !important;
  }
  #download code[style] { font-size: 12px !important; padding: 12px 14px !important; word-break: break-all; border-right: none !important; border-bottom: 1px solid var(--mlc-fg-9); }
  #download span[style*="user-select"] { border-right: none !important; border-bottom: 1px solid var(--mlc-fg-9); padding: 10px 14px !important; }
  #download button[onclick] { border-left: none !important; padding: 10px 14px !important; }

  /* Footer */
  .mlc-footer { padding: 36px 0 28px; }
  .mlc-footer-inner { flex-direction: column; gap: 16px; align-items: flex-start; padding: 0 16px; }
  .mlc-footer-inner > div:last-child { gap: 14px 18px !important; }
}

@media (max-width: 420px) {
  #hero-terminal-slot { height: 360px !important; }
  .mlc-section { padding: 44px 0; }
  .mlc-section h2 { font-size: 26px; }
  .api-demo pre { font-size: 10px; }
}