/* ─────────────────────────────────────
   INTERNETVS — MANIFESTO
   ───────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: #000;
  color: #f0f0f0;
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  padding: max(8vh, 48px) max(8vw, 24px) max(12vh, 80px);
}

/* ── BACK ── */
.m-back {
  position: fixed;
  top: max(3vh, 16px);
  left: max(3vw, 20px);
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.6vw, 18px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240,240,240,0.55);
  text-decoration: none;
  z-index: 1000;
  transition: color 0.15s;
}
.m-back:hover { color: rgba(240,240,240,0.9); }

/* ── LAYOUT ── */
.m-wrap { max-width: 640px; margin: 0 auto; }

.m-section { margin-bottom: max(10vh, 64px); }

/* ── LINES ── */
.m-line {
  display: block;
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #f0f0f0;
  line-height: 0.9;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  margin-bottom: 0.25em;
}
.m-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.m-line--xl { font-size: clamp(48px, 10vw, 96px); }
.m-line--lg { font-size: clamp(32px, 7vw, 64px); }
.m-line--md { font-size: clamp(22px, 4.5vw, 42px); }
.m-line--sm {
  font-family: 'Inter', sans-serif;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(240,240,240,0.5);
  text-transform: none;
}
.m-line--gap { margin-top: 1em; }
.m-line--gap-lg { margin-top: 2.4em; }

/* ── GENERATOR ── */
.gen-wrap { max-width: 480px; }

.gen-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(240,240,240,0.25);
  margin-bottom: 1.4em;
}

.gen-row {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 0.3em;
  margin-bottom: 1.4em;
}

.gen-currency {
  font-family: 'Teko', sans-serif;
  font-size: clamp(48px, 9vw, 80px);
  font-weight: 700;
  color: rgba(240,240,240,0.3);
  line-height: 1;
}

.gen-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Teko', sans-serif;
  font-size: clamp(48px, 9vw, 80px);
  font-weight: 700;
  color: #f0f0f0;
  line-height: 1;
  appearance: textfield;
  -moz-appearance: textfield;
}
.gen-input::-webkit-outer-spin-button,
.gen-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.gen-input::placeholder { color: rgba(240,240,240,0.1); }

.gen-btn {
  display: block;
  width: 100%;
  font-family: 'Teko', sans-serif;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000;
  background: #f0f0f0;
  border: none;
  padding: 0.65em 0;
  cursor: pointer;
  transition: background 0.1s;
  margin-bottom: 2em;
}
.gen-btn:hover { background: #fff; }

/* output */
.gen-output { min-height: 80px; }

.gen-result-main {
  font-family: 'Teko', sans-serif;
  font-size: clamp(20px, 3.5vw, 36px);
  font-weight: 700;
  color: #AAFF00;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  margin-bottom: 0.4em;
}
.gen-result-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(10px, 1.1vw, 13px);
  color: rgba(240,240,240,0.3);
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
}
.gen-output.is-visible .gen-result-main,
.gen-output.is-visible .gen-result-sub {
  opacity: 1;
  transform: translateY(0);
}

/* ── CTA SECTION ── */
.m-cta-section {
  padding-top: 0;
  padding-bottom: 12vh;
}
.m-cta-btn {
  display: block;
  width: 100%;
  font-family: 'Teko', sans-serif;
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #000;
  background: #f0f0f0;
  border: none;
  padding: 0.6em 0;
  cursor: pointer;
  transition: background 0.1s;
}
.m-cta-btn:hover { background: #fff; }

/* fix gen-result-main color (was lime, now white) */
.gen-result-main { color: #f0f0f0; }

/* override styles.css which locks overflow for the beat engine */
html, body {
  overflow: auto !important;
  height: auto !important;
}