/* ═══════════════════════════════════════════════════════════
   landing.css — Public landing page
   Palette: deep navy · glacier white · native green · amber
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── Design tokens (landing-scoped) ── */
:root {
  --l-navy:        #0a0f1e;
  --l-navy-mid:    #0d1525;
  --l-white:       #f0f4ff;
  --l-white-dim:   rgba(240, 244, 255, 0.55);
  --l-green:       #00c896;
  --l-green-dim:   rgba(0, 200, 150, 0.12);
  --l-green-glow:  rgba(0, 200, 150, 0.30);
  --l-amber:       #ff9500;
  --l-amber-glow:  rgba(255, 149, 0, 0.45);
  --l-border:      rgba(240, 244, 255, 0.08);
  --l-divider:     rgba(240, 244, 255, 0.12);
}

/* ── Outer container ── */
#e7_landing {
  position:        relative;
  width:           100%;
  flex:            1 1 auto;
  overflow-y:      auto;
  overflow-x:      hidden;
  background:      var(--l-navy);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  min-height:      0;
}

/* ── SVG fern texture (full bleed, behind everything) ── */
#e7_fern_bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  opacity:    0.07;
  pointer-events: none;
  overflow:   hidden;
}

#e7_fern_bg svg {
  width:  100%;
  height: 100%;
}

/* ── Inner layout ── */
.e7_landing_inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             clamp(18px, 3vw, 32px);
  padding:         clamp(36px, 6vh, 72px) clamp(16px, 4vw, 32px) clamp(32px, 4vh, 56px);
  width:           100%;
  max-width:       640px;
  text-align:      center;
  box-sizing:      border-box;
  margin:          0 auto;
}

/* ── Wordmark ── */
.e7_wordmark {
  font-family:    'Instrument Serif', Georgia, serif;
  font-size:      clamp(2.2rem, 8vw, 4rem);
  font-weight:    400;
  color:          var(--l-white);
  letter-spacing: 0.04em;
  line-height:    1;
}

.e7_wordmark span {
  color:   var(--l-green);
  opacity: 0.85;
}

/* ── Tagline ── */
.e7_tagline {
  font-family:    'DM Mono', monospace;
  font-size:      clamp(0.7rem, 2.2vw, 0.88rem);
  font-style:     italic;
  color:          var(--l-white-dim);
  letter-spacing: 0.03em;
  margin-top:     -12px;
  line-height:    1.6;
}

/* ── Seal counter ── */
.e7_seal_counter {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
}

#e7_seal_count {
  font-family:    'DM Mono', monospace;
  font-size:      clamp(1.8rem, 6vw, 3rem);
  font-weight:    500;
  color:          var(--l-white);
  letter-spacing: 0.06em;
  transition:     color 0.15s ease, text-shadow 0.15s ease;
}

#e7_seal_count.e7_seal_flash {
  color:       var(--l-amber);
  text-shadow: 0 0 24px var(--l-amber-glow);
  animation:   e7_seal_flash_anim 0.9s ease forwards;
}

@keyframes e7_seal_flash_anim {
  0%   { color: var(--l-amber); text-shadow: 0 0 24px var(--l-amber-glow); }
  60%  { color: var(--l-amber); text-shadow: 0 0 12px var(--l-amber-glow); }
  100% { color: var(--l-white); text-shadow: none; }
}

.e7_seal_label {
  font-family:    'DM Mono', monospace;
  font-size:      0.65rem;
  color:          var(--l-white-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Stats row ── */
.e7_stats_row {
  display:     flex;
  align-items: stretch;
  flex-wrap:   wrap;
  gap:         0;
  border:      1px solid var(--l-border);
  width:       100%;
  max-width:   560px;
}

.e7_stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  padding:        clamp(10px, 2vh, 16px) clamp(12px, 3vw, 28px);
  flex:           1;
  min-width:      100px;
}

.e7_stat + .e7_stat {
  border-left: 1px solid var(--l-divider);
}

.e7_stat span {
  font-family:    'DM Mono', monospace;
  font-size:      clamp(1rem, 3vw, 1.4rem);
  font-weight:    500;
  color:          var(--l-white);
  letter-spacing: 0.04em;
}

.e7_stat label {
  font-family:    'DM Mono', monospace;
  font-size:      clamp(0.52rem, 1.5vw, 0.62rem);
  color:          var(--l-white-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor:         default;
}

/* ── Bond verifier ── */
.e7_verifier {
  width:          100%;
  max-width:      100%;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.e7_verifier_row {
  display: flex;
  gap:     0;
}

#e7_bond_input {
  flex:            1;
  background:      rgba(240, 244, 255, 0.04);
  border:          1px solid var(--l-border);
  border-right:    none;
  color:           var(--l-white);
  font-family:     'DM Mono', monospace;
  font-size:       0.78rem;
  padding:         10px 14px;
  outline:         none;
  letter-spacing:  0.02em;
  transition:      border-color 0.2s;
  min-width:       0;
}

#e7_bond_input::placeholder {
  color:   rgba(240, 244, 255, 0.25);
}

#e7_bond_input:focus {
  border-color: var(--l-green);
}

#e7_verify_btn {
  background:     transparent;
  border:         1px solid var(--l-green);
  color:          var(--l-green);
  font-family:    'DM Mono', monospace;
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  padding:        10px 20px;
  cursor:         pointer;
  transition:     background 0.2s, box-shadow 0.2s;
  white-space:    nowrap;
  flex-shrink:    0;
}

#e7_verify_btn:hover {
  background:  var(--l-green-dim);
  box-shadow:  0 0 16px var(--l-green-glow);
}

#e7_verify_result {
  font-family:    'DM Mono', monospace;
  font-size:      0.72rem;
  letter-spacing: 0.02em;
  min-height:     1.2em;
  text-align:     left;
  padding:        2px 2px;
  transition:     color 0.2s;
}

#e7_verify_result.e7_verify_valid   { color: var(--l-green); }
#e7_verify_result.e7_verify_invalid { color: #ff4444; }
#e7_verify_result.e7_verify_amber   { color: var(--l-amber); }

/* ── CTA ── */
.e7_cta button {
  background:     transparent;
  border:         1px solid var(--l-green);
  color:          var(--l-green);
  font-family:    'DM Mono', monospace;
  font-size:      0.72rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  padding:        12px 32px;
  cursor:         pointer;
  text-transform: uppercase;
  transition:     background 0.2s, color 0.2s, box-shadow 0.2s;
}

.e7_cta button:hover {
  background:  var(--l-green);
  color:       var(--l-navy);
  box-shadow:  0 0 20px var(--l-green-glow);
}

/* ── Footer ── */
.e7_footer {
  display:     flex;
  align-items: center;
  gap:         10px;
  opacity:     0.4;
  margin-top:  8px;
}

.e7_footer svg {
  width:  20px;
  height: 20px;
  flex-shrink: 0;
}

.e7_footer span {
  font-family:    'DM Mono', monospace;
  font-size:      0.62rem;
  letter-spacing: 0.08em;
  color:          var(--l-white);
}

/* ── Tablet ── */
@media (max-width: 768px) {
  .e7_landing_inner {
    justify-content: center;
    min-height:      calc(100vh - 52px);
  }
}

/* ── Mobile ── */
@media (max-width: 520px) {
  .e7_stats_row {
    border: none;
    gap:    1px;
    background: var(--l-divider);
    flex-wrap: wrap;
  }

  .e7_stat {
    background:  var(--l-navy);
    border:      none;
    padding:     10px 16px;
    flex:        1 1 40%;
    min-width:   0;
  }

  .e7_stat + .e7_stat {
    border-left: none;
  }

  .e7_verifier_row {
    flex-direction: column;
  }

  #e7_bond_input {
    border-right:  1px solid var(--l-border);
    border-bottom: none;
    border-radius: 0;
  }

  #e7_verify_btn {
    border-top: none;
    width:      100%;
    padding:    12px;
  }
}