/* Locally Visible — shared site styles.
   All multi-page website files in /site/ import this.
   Extracted verbatim from the current production one-pager so brand, rhythm, and motion stay identical. */

html { scroll-behavior: smooth; font-feature-settings: 'ss01','ss02','cv01','cv02'; }
html, body { overflow-x: hidden; }
body { font-family: Inter, 'Inter Fallback', system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: #ffffff; color: #333333; margin: 0; }

h1 { letter-spacing: -0.035em; line-height: 1.05; font-weight: 600; color: #0d0d0d; }
h2 { letter-spacing: -0.025em; line-height: 1.08; font-weight: 600; color: #0d0d0d; }
h3 { letter-spacing: -0.012em; line-height: 1.25; font-weight: 600; color: #0d0d0d; }
p { line-height: 1.55; }

a:focus-visible, button:focus-visible, details > summary:focus-visible {
  outline: 2px solid #18E299; outline-offset: 3px; border-radius: 10px;
}
.pill-dark:focus-visible, .pill-ghost:focus-visible, .pill-brand:focus-visible { outline-offset: 4px; }

.section-y { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 640px) { .section-y { padding-top: 6rem; padding-bottom: 6rem; } }
@media (min-width: 1024px) { .section-y { padding-top: 7rem; padding-bottom: 7rem; } }

.hero-offset { margin-top: -80px; padding-top: 14rem; }
@media (min-width: 640px) { .hero-offset { padding-top: 15rem; } }

/* Entrance cascade */
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#nav { animation: fadeSlideIn 600ms cubic-bezier(0.16,1,0.3,1) 100ms both; }
.hero-eyebrow { animation: fadeIn 700ms ease 300ms both; }
.hero-h1      { animation: fadeSlideIn 800ms cubic-bezier(0.16,1,0.3,1) 400ms both; }
.hero-sub     { animation: fadeSlideIn 800ms cubic-bezier(0.16,1,0.3,1) 650ms both; }
.hero-ctas    { animation: fadeSlideIn 700ms cubic-bezier(0.16,1,0.3,1) 850ms both; }
.hero-badge   { animation: fadeIn 700ms ease 1050ms both; }
@media (prefers-reduced-motion: reduce) {
  #nav, .hero-eyebrow, .hero-h1, .hero-sub, .hero-ctas, .hero-badge { animation: none; opacity: 1; }
}

.mono-label { font-family: 'JetBrains Mono', 'Geist Mono', monospace; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: #0fa76e; }

/* Aurora hero — used on home, industries, etc. */
@keyframes aurora { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } }
.hero-wash { position: relative; overflow: hidden; background: #ffffff; }
.hero-wash::before,
.hero-wash::after {
  content: ''; position: absolute; inset: -10px; pointer-events: none;
  background-image:
    repeating-linear-gradient(100deg, #ffffff 0%, #ffffff 7%, transparent 10%, transparent 12%, #ffffff 16%),
    repeating-linear-gradient(100deg, #18E299 10%, #0fa76e 15%, #85f0c4 20%, #d4fae8 25%, #39d9a0 30%);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(14px);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  opacity: 0.55; will-change: background-position; z-index: 0;
}
.hero-wash::after { background-size: 200%, 100%; mix-blend-mode: multiply; animation: aurora 60s linear infinite; opacity: 0.6; }
.hero-wash > * { position: relative; z-index: 1; }

/* Slim page header — used on interior pages to save vertical space */
.page-wash { position: relative; overflow: hidden; background: #fff; padding-top: 9rem; padding-bottom: 4rem; text-align: center; }
.page-wash .mx-wrap { margin-left: auto; margin-right: auto; }
.page-wash p[style*="max-width"], .page-wash .hero-sub { margin-left: auto; margin-right: auto; }
/* Article pages (individual blog posts) keep their left-aligned back-link header */
body[data-page="blog-article"] .page-wash { text-align: left; }
.page-wash::before,
.page-wash::after {
  content: ''; position: absolute; inset: -10px; pointer-events: none;
  background-image:
    repeating-linear-gradient(100deg, #ffffff 0%, #ffffff 7%, transparent 10%, transparent 12%, #ffffff 16%),
    repeating-linear-gradient(100deg, #18E299 10%, #0fa76e 15%, #85f0c4 20%, #d4fae8 25%, #39d9a0 30%);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(14px);
  -webkit-mask-image: radial-gradient(ellipse at 85% 0%, black 0%, transparent 55%);
          mask-image: radial-gradient(ellipse at 85% 0%, black 0%, transparent 55%);
  opacity: 0.45; will-change: background-position; z-index: 0;
}
.page-wash::after {
  background-size: 200%, 100%;
  mix-blend-mode: multiply;
  animation: aurora 60s linear infinite;
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) { .page-wash::after { animation: none; } }
.page-wash > * { position: relative; z-index: 1; }
@media (min-width: 640px) { .page-wash { padding-top: 10rem; padding-bottom: 5rem; } }

@media (prefers-reduced-motion: reduce) { .hero-wash::after { animation: none; } }

.mint-card { background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s cubic-bezier(0.16,1,0.3,1), border-color .3s ease; }
.mint-card:hover { border-color: rgba(0,0,0,0.08); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.02); }
.mint-feature-card { background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); }

.pill-dark, .pill-ghost, .pill-brand, a[data-stripe-cta], .nav-cta {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity .2s ease, background .25s ease, color .25s ease, box-shadow .35s cubic-bezier(0.16,1,0.3,1);
}
.pill-dark { background: #0d0d0d; color: #fff; padding: 10px 24px; border-radius: 9999px; font: 500 15px/1.5 Inter, sans-serif; box-shadow: 0 1px 2px rgba(0,0,0,0.06); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pill-dark:hover { opacity: 0.9; }
.pill-ghost { background: #fff; color: #0d0d0d; padding: 10px 24px; border-radius: 9999px; border: 1px solid rgba(0,0,0,0.08); font: 500 15px/1.5 Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pill-ghost:hover { background: #fafafa; }
.pill-brand { background: #18E299; color: #0d0d0d; padding: 10px 24px; border-radius: 9999px; font: 600 15px/1.5 Inter, sans-serif; box-shadow: 0 1px 2px rgba(0,0,0,0.06); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pill-brand:hover { background: #0fa76e; color: #fff; }
.pill-dark:active, .pill-ghost:active, .pill-brand:active, a[data-stripe-cta]:active, .nav-cta:active { transform: scale(.965) !important; transition-duration: 80ms; }

.mint-tag { display: inline-flex; align-items: center; background: #d4fae8; color: #0fa76e; padding: 4px 12px; border-radius: 9999px; font: 500 13px/1.5 Inter, sans-serif; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-toggle { transform: rotate(45deg); }
.faq-toggle { transition: transform 220ms ease-out; color: #0fa76e; }

.typing-cursor { display: inline-block; width: 0.12em; height: 1.1em; background: #18E299; vertical-align: middle; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes strike { from { width: 0; } to { width: 100%; } }
.strike-line { position: relative; display: inline-block; }
.strike-line.animate::after { content: ''; position: absolute; left: 0; top: 50%; height: 2px; background: #0d0d0d; animation: strike 0.6s ease-out forwards; width: 0; }
#demo-response { transition: opacity 500ms ease-out; }

/* Reveals — staggered per-section */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .mint-card:hover { transform: none; box-shadow: 0 2px 4px rgba(0,0,0,0.03); } }

/* LIQUID-GLASS NAV */
.liquid-glass {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 4px 18px rgba(0,0,0,0.08);
}
#nav.on-white.liquid-glass { background: rgba(255,255,255,0.78); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
#nav a:not(.nav-cta) { color: #0d0d0d; text-decoration: none; transition: color .2s ease; }
#nav a:hover:not(.nav-cta) { color: #0fa76e; }
#nav a.active:not(.nav-cta) { color: #0fa76e; }
#nav { transition: transform 320ms cubic-bezier(0.2,0.9,0.3,1), box-shadow 200ms ease; }

/* Nav dropdown — Industries, Resources */
.has-submenu { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 220px; background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03);
  padding: 8px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(0.16,1,0.3,1);
  z-index: 60;
}
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.submenu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: #0d0d0d; text-decoration: none; transition: background .15s ease, color .15s ease; }
.submenu a:hover { background: #f5f5f5; color: #0fa76e; }

/* Utility */
.anchor { display: block; position: relative; top: -72px; visibility: hidden; height: 0; }
.stat-num { font-family: Inter, sans-serif; font-weight: 600; font-size: 64px; line-height: 1.0; letter-spacing: -1.92px; color: #0d0d0d; }

/* Footer */
footer.site-footer { background: #fff; border-top: 1px solid rgba(0,0,0,0.05); padding: 4.5rem 1.5rem 2.5rem; }
footer.site-footer .col-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #888; margin-bottom: 14px; font-weight: 500; }
footer.site-footer a { display: block; font-size: 14px; color: #333; text-decoration: none; padding: 5px 0; transition: color .15s ease; }
footer.site-footer a:hover { color: #0fa76e; }
footer.site-footer .legal { font-size: 13px; color: #888; }

/* Nav toggle — mobile only */
.nav-toggle { display: none; background: transparent; border: 0; color: #0d0d0d; padding: 6px; cursor: pointer; border-radius: 8px; }
.nav-toggle:hover { background: rgba(0,0,0,0.04); }

@media (max-width: 900px) {
  .nav-menu {
    display: none !important;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    flex-direction: column; gap: 4px !important; padding: 10px !important;
  }
  .nav-menu.open { display: flex !important; }
  .nav-menu a { padding: 10px 12px !important; border-radius: 8px; }
  .nav-menu a:hover { background: #f5f5f5; }
  .nav-toggle { display: inline-flex; align-items: center; }
  #nav .nav-cta { display: none; }
}

@media (max-width: 860px) {
  footer.site-footer .mx-wrap { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  footer.site-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  footer.site-footer .mx-wrap { grid-template-columns: 1fr !important; }
}

/* Max-width container used across pages */
.mx-wrap { max-width: 72rem; margin-left: auto; margin-right: auto; }

/* Application modal */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-panel { background: #fff; border-radius: 24px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 32px 64px rgba(0,0,0,0.15); transform: translateY(20px); transition: transform 300ms cubic-bezier(0.16,1,0.3,1); }
.modal-overlay.open .modal-panel { transform: translateY(0); }
.modal-input { width: 100%; padding: 10px 14px; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; font: 400 15px/1.5 Inter, sans-serif; color: #0d0d0d; background: #fafafa; transition: border-color 200ms, box-shadow 200ms; box-sizing: border-box; }
.modal-input:focus { outline: none; border-color: #18E299; box-shadow: 0 0 0 3px rgba(24,226,153,0.15); }
.modal-input::placeholder { color: #888; }
.modal-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* Dark form inputs (for free audit section) */
.modal-input-dark { width: 100%; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; font: 400 15px/1.5 Inter, sans-serif; color: #fff; background: rgba(255,255,255,0.08); transition: border-color 200ms, box-shadow 200ms; box-sizing: border-box; }
.modal-input-dark:focus { outline: none; border-color: #18E299; box-shadow: 0 0 0 3px rgba(24,226,153,0.15); }
.modal-input-dark::placeholder { color: rgba(255,255,255,0.4); }
/* Native <option> elements cannot inherit the dark bg from the <select>, so style them explicitly */
.modal-input-dark option { color: #0d0d0d; background: #fff; }
.modal-input option { color: #0d0d0d; background: #fff; }

/* Availability badges */
.avail-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; font: 500 13px/1.5 Inter, sans-serif; }
.avail-open { background: #d4fae8; color: #0fa76e; }
.avail-limited { background: #fff7ed; color: #c37d0d; }
.avail-full { background: #fef2f2; color: #dc2626; }